@font-face {
  font-family: 'Tajawal';
  src: url('Tajawal-Light.ttf') format('truetype');
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

/* Shared brand and layout settings for future pages. */
:root {
  --color-loading: #007483;
  --color-heading: #c65b50;
  --logo-width: clamp(76px, 7.6vw, 146px);
  --heading-size: clamp(24px, 3vw, 56px);
  --heading-spacing: 0.24em;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--color-loading); }

body {
  margin: 0;
  min-width: 240px;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--color-loading);
  font-family: 'Tajawal', sans-serif;
}

.page-background {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  opacity: 0;
  transition: opacity 350ms ease;
}

.page-background.is-loaded { opacity: 1; }

.coming-soon {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: 15.7vh 24px 48px;
  padding-top: 15.7svh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.brand-logo {
  display: block;
  width: var(--logo-width);
  height: auto;
  flex-shrink: 0;
}

h1 {
  margin: 20.8vh 0 0;
  margin-top: 20.8svh;
  color: var(--color-heading);
  font-size: var(--heading-size);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: var(--heading-spacing);
  text-indent: var(--heading-spacing);
  text-transform: uppercase;
  text-align: center;
}

@media (max-width: 600px) {
  :root {
    --logo-width: clamp(82px, 22vw, 110px);
    --heading-size: clamp(20px, 5.5vw, 32px);
    --heading-spacing: 0.18em;
  }
  /* Keep the decorative edge visible without taking over narrow screens. */
  .page-background { width: 150%; max-width: none; }
  .coming-soon {
    min-height: 100vh;
    min-height: 100dvh;
    justify-content: center;
    padding: 32px 30px;
  }
  h1 { margin-top: 18svh; }
}

@media (max-height: 450px) and (orientation: landscape) {
  :root { --logo-width: 64px; --heading-size: 24px; }
  .coming-soon { padding-top: 10svh; padding-bottom: 24px; }
  h1 { margin-top: 12svh; }
}

@media (prefers-reduced-motion: reduce) {
  .page-background { transition: none; }
}

/* A gentle entrance for the announcement on each page visit. */
@keyframes announcement-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  h1 { animation: announcement-enter 1.2s ease-out 0.2s both; }
}