/* ==========================================================================
   CARDU — Coming Soon
   Single-screen holding page. Palette sampled directly from the brand mark:
   vermilion #F5493F on warm off-white #F8F7F3.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --cardu-red:        #f5493f;
  --cardu-red-deep:   #d9382f;
  --cardu-cream:      #f8f7f3;
  --cardu-cream-warm: #f2efe8;
  --cardu-ink:        #2b1c1a;

  /* Derived surfaces */
  --hairline:         rgba(245, 73, 63, 0.16);
  --hairline-soft:    rgba(245, 73, 63, 0.10);
  --ink-muted:        rgba(43, 28, 26, 0.52);
  --ink-soft:         rgba(43, 28, 26, 0.78);

  /* Type */
  --font-display: "Cormorant Garamond", "Times New Roman", Times, serif;
  --font-arabic:  "Noto Kufi Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-ui:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm — every gap scales with the smaller viewport edge, so the
     composition stays proportional from a 320px phone to a 4K display. */
  --gap-xs: clamp(0.5rem, 1.1vmin, 0.85rem);
  --gap-sm: clamp(0.9rem, 2.2vmin, 1.6rem);
  --gap-md: clamp(1.5rem, 4.2vmin, 3rem);
  --gap-lg: clamp(2.2rem, 6.5vmin, 4.75rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background-color: var(--cardu-cream);
  /* Two very soft warm washes keep the flat cream from reading as dead paper. */
  background-image:
    radial-gradient(120% 88% at 50% 6%,   rgba(245, 73, 63, 0.07) 0%, rgba(245, 73, 63, 0) 62%),
    radial-gradient(96% 70% at 50% 108%,  rgba(217, 56, 47, 0.06) 0%, rgba(217, 56, 47, 0) 60%),
    linear-gradient(180deg, var(--cardu-cream) 0%, var(--cardu-cream-warm) 100%);
  background-attachment: fixed;
  color: var(--cardu-ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;          /* single screen — never scrolls */
  overscroll-behavior: none;
}

img { display: block; max-width: 100%; height: auto; }

p { margin: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. Stage — one viewport, always
   -------------------------------------------------------------------------- */
.stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;        /* dodges mobile browser chrome */
  min-height: 100dvh;
  padding:
    calc(env(safe-area-inset-top)    + clamp(1rem, 3.4vmin, 2.5rem))
    calc(env(safe-area-inset-right)  + clamp(1rem, 3.4vmin, 2.5rem))
    calc(env(safe-area-inset-bottom) + clamp(1rem, 3.4vmin, 2.5rem))
    calc(env(safe-area-inset-left)   + clamp(1rem, 3.4vmin, 2.5rem));
}

/* Content column. No border, no panel — the composition floats on the page. */
.frame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 1180px;
  padding: var(--gap-md) clamp(1.1rem, 4vw, 3.5rem);
  text-align: center;
}

/* --------------------------------------------------------------------------
   4. Brand lockup
   -------------------------------------------------------------------------- */
.brand {
  display: block;
  margin-bottom: var(--gap-lg);
  text-decoration: none;
  outline: none;
}

.brand:focus-visible {
  outline: 2px solid var(--cardu-red);
  outline-offset: clamp(8px, 1.6vmin, 14px);
  border-radius: 2px;
}

.brand__lockup {
  width: min(74vw, 30rem);
  max-height: 24svh;
  height: auto;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   5. Trilingual rotator
   The headline cycles Kurdish -> Arabic -> English. All three words live in the
   same grid cell so the swap never nudges the layout by a single pixel.
   -------------------------------------------------------------------------- */
.rotator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.9rem, 2.6vmin, 1.75rem);
  width: 100%;
}

.rotator__stage {
  display: grid;
  place-items: center;
  width: 100%;
  /* Reserve the tallest block up front — Arabic script sets the ceiling. */
  min-height: clamp(4.6rem, 12vmin, 8rem);
}

/* One language = one unit. The headline and its motto move together, so the
   block is never caught speaking two languages at once. */
.rotator__item {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.45rem, 1.5vmin, 1rem);
  opacity: 0;
  will-change: opacity, transform;
}

.rotator__word {
  color: var(--cardu-red);
  white-space: nowrap;
}

/* The handoff is sequenced entirely in CSS: the incoming word carries a delay
   longer than the outgoing word's exit, so the two are never legible together
   and there is no JS timer that can strand the headline mid-swap. */
/* The static opacity is the source of truth; the keyframes only carry the
   movement. The pause that lets the outgoing language clear is baked into the
   keyframes rather than set as an animation-delay: a delay with a backwards
   fill would pin the incoming block at opacity 0 before it starts, which is
   what a throttled or frozen tab renders. This way, if the animation is
   suppressed or never runs, the static value stands and the right block is
   still on screen. */
.rotator__item.is-active  { opacity: 1; animation: word-in  0.82s var(--ease) both; }
.rotator__item.is-leaving { opacity: 0; animation: word-out 0.28s var(--ease) both; }

@keyframes word-in {
  0%, 36% { opacity: 0; transform: translateY(0.34em); }
  100%    { opacity: 1; transform: none; }
}

@keyframes word-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-0.34em); }
}

.rotator__word--ltr {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.7rem, 5.6vmin, 3.6rem);
  line-height: 1.1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-indent: 0.16em;       /* re-centres the trailing letter-space */
}

.rotator__word--rtl {
  font-family: var(--font-arabic);
  font-weight: 300;
  font-size: clamp(1.6rem, 5.2vmin, 3.35rem);
  line-height: 1.35;         /* Arabic script needs the extra headroom */
}

/* ---- Motto ---------------------------------------------------------------- */
.rotator__slogan {
  color: var(--ink-soft);
  line-height: 1.4;
  white-space: nowrap;
}

/* Italic, lowercase, warm ink — deliberately a different voice from the
   uppercase vermilion headline it sits under. */
.rotator__slogan--ltr {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.9rem, 2.3vmin, 1.45rem);
  letter-spacing: 0.06em;
  text-indent: 0.06em;
}

.rotator__slogan--rtl {
  font-family: var(--font-arabic);
  font-weight: 300;
  font-size: clamp(0.85rem, 2.1vmin, 1.3rem);
  line-height: 1.6;
}

/* ---- Language switcher ---------------------------------------------------- */
.langs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.55rem, 1.6vmin, 1.1rem);
  flex-wrap: nowrap;
}

.langs__btn {
  appearance: none;
  padding: 0.35em 0.1em;
  border: 0;
  background: none;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(0.55rem, 1.35vmin, 0.72rem);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  opacity: 0.55;
  transition: color 0.4s var(--ease), opacity 0.4s var(--ease);
}

.langs__btn[lang="ar"] {
  font-family: var(--font-arabic);
  letter-spacing: 0;
  text-indent: 0;
  text-transform: none;
  font-size: clamp(0.6rem, 1.5vmin, 0.8rem);
}

.langs__btn:hover,
.langs__btn:focus-visible { opacity: 1; }

.langs__btn:focus-visible {
  outline: 1px solid var(--cardu-red);
  outline-offset: 4px;
  border-radius: 2px;
}

.langs__btn.is-active {
  color: var(--cardu-red);
  opacity: 1;
}

.langs__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--cardu-red);
  opacity: 0.28;
}

/* --------------------------------------------------------------------------
   6. Indeterminate progress hairline — reads as "in build" without faking a %
   -------------------------------------------------------------------------- */
.progress {
  position: relative;
  width: min(58vw, 16rem);
  height: 2px;
  margin-top: var(--gap-lg);
  overflow: hidden;
  background: var(--hairline-soft);
  border-radius: 2px;
}

.progress__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    rgba(245, 73, 63, 0) 0%,
    var(--cardu-red) 50%,
    rgba(245, 73, 63, 0) 100%
  );
  animation: sweep 3.4s var(--ease) infinite;
}

@keyframes sweep {
  0%   { transform: translateX(-105%); }
  100% { transform: translateX(368%); }
}

/* --------------------------------------------------------------------------
   7. Footer
   -------------------------------------------------------------------------- */
.foot {
  position: absolute;
  left: 50%;
  bottom: clamp(0.85rem, 2.6vmin, 2rem);
  transform: translateX(-50%);
  width: 100%;
  padding: 0 1rem;
}

.foot__line {
  font-size: clamp(0.56rem, 1.25vmin, 0.7rem);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   8. Grain — a few percent of film noise so the flat cream has a surface
   -------------------------------------------------------------------------- */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* --------------------------------------------------------------------------
   9. Entrance choreography
   -------------------------------------------------------------------------- */
.js .brand,
.js .rotator,
.js .progress,
.js .foot { opacity: 0; }

.js.is-ready .brand    { animation: rise 1.1s var(--ease) 0.05s both; }
.js.is-ready .rotator  { animation: rise 1.1s var(--ease) 0.42s both; }
.js.is-ready .progress { animation: fade 1.2s var(--ease) 0.82s both; }
.js.is-ready .foot     { animation: fade 1.2s var(--ease) 1.00s both; }

@keyframes rise {
  from { opacity: 0; transform: translateY(clamp(10px, 2.4vmin, 22px)); }
  to   { opacity: 1; transform: none; }
}

@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   10. Responsive — the languages stack once they stop fitting side by side
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .rotator__stage        { min-height: clamp(4.6rem, 22vw, 7rem); }
  .rotator__word--ltr    { font-size: clamp(1.55rem, 8.4vw, 2.6rem); }
  .rotator__word--rtl    { font-size: clamp(1.5rem, 8vw, 2.5rem); }
  .rotator__slogan--ltr  { font-size: clamp(0.85rem, 3.9vw, 1.2rem); }
  .rotator__slogan--rtl  { font-size: clamp(0.78rem, 3.5vw, 1.05rem); }
  .langs__btn            { font-size: clamp(0.54rem, 2.4vw, 0.68rem); }
  .langs__btn[lang="ar"] { font-size: clamp(0.6rem, 2.7vw, 0.76rem); }

  .brand__lockup { width: min(80vw, 22rem); max-height: 20svh; }
  .progress      { width: min(62vw, 12rem); }
}

/* Very small phones — buy back vertical room. */
@media (max-width: 360px) {
  .frame    { padding-inline: 0.75rem; }
  .brand    { margin-bottom: var(--gap-md); }
  .progress { margin-top: var(--gap-md); }
}

/* Landscape phones and other short viewports — compress, never scroll. */
@media (max-height: 560px) {
  .brand          { margin-bottom: var(--gap-sm); }
  .brand__lockup  { max-height: 30svh; width: min(46vw, 20rem); }
  .progress       { margin-top: var(--gap-sm); }
  .rotator        { gap: clamp(0.55rem, 2vmin, 1rem); }
  .rotator__item  { gap: clamp(0.3rem, 1.2vh, 0.6rem); }
  .rotator__stage { min-height: clamp(3.4rem, 17vh, 5rem); }
  .foot           { bottom: clamp(0.4rem, 1.6vmin, 0.9rem); }
}

@media (max-height: 560px) and (max-width: 700px) {
  /* Landscape phone: there is no height to spare — shrink the headline. */
  .rotator__stage       { min-height: clamp(3rem, 16vh, 4.2rem); }
  .rotator__word--ltr   { font-size: clamp(1.05rem, 4vw, 1.75rem); }
  .rotator__word--rtl   { font-size: clamp(1rem, 3.8vw, 1.7rem); }
  .rotator__slogan--ltr { font-size: clamp(0.72rem, 2vw, 0.95rem); }
  .rotator__slogan--rtl { font-size: clamp(0.68rem, 1.85vw, 0.88rem); }
}

/* Large desktops and TVs — grow, but stay a composition, not a stretch. */
@media (min-width: 1600px) {
  .brand__lockup { width: min(34vw, 34rem); max-height: 26svh; }
  .progress      { width: 18rem; }
}

/* --------------------------------------------------------------------------
   11. Preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .brand,
  .js .rotator,
  .js .progress,
  .js .foot { opacity: 1; }

  .js.is-ready .brand,
  .js.is-ready .rotator,
  .js.is-ready .progress,
  .js.is-ready .foot { animation: none; }

  .progress__bar {
    animation: none;
    width: 100%;
    background: var(--hairline);
  }

  /* Nothing auto-advances without motion. The three words stack instead, so a
     visitor who never sees the rotation still gets all three languages. */
  .rotator__stage {
    grid-auto-flow: row;
    gap: clamp(1rem, 3vmin, 1.9rem);
    min-height: 0;
  }

  .rotator__item,
  .rotator__item.is-active,
  .rotator__item.is-leaving {
    grid-area: auto;
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* Every language is already on screen — the switcher has nothing to switch. */
  .langs { display: none; }
}

@media (prefers-contrast: more) {
  :root {
    --hairline:      rgba(245, 73, 63, 0.42);
    --hairline-soft: rgba(245, 73, 63, 0.28);
    --ink-muted:     rgba(43, 28, 26, 0.82);
  }

  .langs__btn { opacity: 1; }
  .grain      { display: none; }
}

/* --------------------------------------------------------------------------
   12. Print
   -------------------------------------------------------------------------- */
@media print {
  body              { background: #fff; }
  .grain, .progress { display: none; }
  .rotator__item    { grid-area: auto; animation: none; opacity: 1; transform: none; }
}