/* ==========================================================================
   Dr. Sara Cheikh · Moodboard v2 · act-cold.css
   Act I — The Cold Open.
   Full-viewport centering, salutation mono, MEM blockquote, character-reveal
   animation classes, SVG rule draw, bilingual wordmark, scroll glyph.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Act I outer container — full viewport, centred composition
   -------------------------------------------------------------------------- */

:where([data-act="I"] .act-cold) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-block-size: 100dvh;
  padding-block: var(--space-10);
  padding-inline: var(--space-5);
  position: relative;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Salutation / indicator bar — top of viewport
   -------------------------------------------------------------------------- */

:where(.act-cold__salutation) {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-quiet);
  line-height: var(--lh-caption);
  margin-block-end: var(--space-9);
  /* Initial: fades in first at t=0 */
  opacity: 0;
  transition: opacity var(--dur-medium) var(--ease-reveal);
}

:where(.act-cold__salutation.is-revealed) {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Quote — display-cinema, italic Inter Tight
   -------------------------------------------------------------------------- */

:where(.act-cold__quote) {
  font-family: var(--font-agency);
  font-size: clamp(2.75rem, 7.5vw, var(--fs-display-cinema));
  font-style: italic;
  font-weight: 500;
  line-height: var(--lh-cinema);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  max-inline-size: 32rem;
  margin: 0 auto var(--space-6);
  quotes: none;
  /* Quote is not pre-revealed — JS reveals chars one-by-one */
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  :where(.act-cold__quote) {
    font-size: clamp(2.75rem, 6vw, 4.25rem);
    max-inline-size: 28rem;
  }
}

/* Mobile */
@media (max-width: 767px) {
  :where(.act-cold__quote) {
    font-size: clamp(1.75rem, 11vw, 2.75rem);
    max-inline-size: 20rem;
    letter-spacing: -0.02em;
  }
}

/* --------------------------------------------------------------------------
   Character-reveal spans — JS wraps each character in a .reveal-char span
   -------------------------------------------------------------------------- */

:where(.act-cold__quote .reveal-char) {
  display: inline;
  opacity: 0;
  transition: opacity var(--dur-medium) var(--ease-reveal);
}

:where(.act-cold__quote .reveal-char.is-revealed) {
  opacity: 1;
}

/* Reduced-motion: all chars instantly visible */
@media (prefers-reduced-motion: reduce) {
  :where(.act-cold__quote .reveal-char) {
    opacity: 1 !important;
    transition: none !important;
  }
}

:where(html.motion-reduced .act-cold__quote .reveal-char) {
  opacity: 1 !important;
  transition: none !important;
}

/* --------------------------------------------------------------------------
   Attribution / citation line
   -------------------------------------------------------------------------- */

:where(.act-cold__attribution) {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-style: normal;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: var(--lh-caption);
  margin-block-end: var(--space-6);
  opacity: 0;
  transition: opacity var(--dur-medium) var(--ease-reveal);
}

:where(.act-cold__attribution.is-revealed) {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   SVG hairline rule — draws via stroke-dashoffset
   -------------------------------------------------------------------------- */

:where(.act-cold__rule) {
  display: block;
  inline-size: 60%;
  max-inline-size: 36rem;
  block-size: 2px;
  margin-inline: auto;
  margin-block-end: var(--space-6);
  color: var(--hairline-strong);
  overflow: visible;
}

:where(.act-cold__rule .js-animate-path) {
  stroke-dasharray: var(--path-length, 100);
  stroke-dashoffset: var(--path-length, 100);
  transition: stroke-dashoffset var(--dur-transition) var(--ease-rule);
}

:where(.act-cold__rule .js-animate-path.is-drawn) {
  stroke-dashoffset: 0;
}

/* Reduced-motion: rule pre-drawn */
@media (prefers-reduced-motion: reduce) {
  :where(.act-cold__rule .js-animate-path) {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}

:where(html.motion-reduced .act-cold__rule .js-animate-path) {
  stroke-dashoffset: 0 !important;
  transition: none !important;
}

/* Mobile: rule spans wider */
@media (max-width: 767px) {
  :where(.act-cold__rule) {
    inline-size: 80%;
  }
}

/* --------------------------------------------------------------------------
   Bilingual wordmark
   -------------------------------------------------------------------------- */

:where(.act-cold__wordmark) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-block-end: var(--space-8);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-medium) var(--ease-settle),
              transform var(--dur-medium) var(--ease-settle);
}

:where(.act-cold__wordmark.is-revealed) {
  opacity: 1;
  transform: translateY(0);
}

:where(.act-cold__wordmark--en) {
  font-family: var(--font-agency);
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: var(--lh-tight);
}

/* Vertical rule between Latin and Arabic wordmarks */
:where(.act-cold__wordmark--rule) {
  display: inline-block;
  inline-size: 1px;
  block-size: 4rem;
  background-color: var(--hairline-strong);
  flex-shrink: 0;
}

:where(.act-cold__wordmark--ar) {
  font-family: var(--font-agency-ar);
  font-size: clamp(1.9rem, 3.85vw, 3.18rem); /* +6% for Readex Pro cap-height parity */
  font-weight: 500;
  color: var(--ink);
  line-height: var(--lh-tight);
  /* Arabic line-height adjustment per spec: +0.08 */
  line-height: calc(var(--lh-tight) + 0.08);
  direction: rtl;
}

/* Mobile: stack wordmark vertically, no vertical rule */
@media (max-width: 767px) {
  :where(.act-cold__wordmark) {
    flex-direction: column;
    gap: var(--space-3);
  }

  :where(.act-cold__wordmark--rule) {
    inline-size: 3rem;
    block-size: 1px;
  }

  :where(.act-cold__wordmark--en,
         .act-cold__wordmark--ar) {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }
}

/* --------------------------------------------------------------------------
   Scroll glyph — arrow, fades in last with a brief bob animation
   -------------------------------------------------------------------------- */

:where(.act-cold__scroll-glyph) {
  font-family: var(--font-agency);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--ink);
  opacity: 0;
  transition: opacity var(--dur-medium) var(--ease-reveal);
}

:where(.act-cold__scroll-glyph.is-revealed) {
  opacity: 1;
  animation: scroll-bob 1.8s var(--ease-rule) 2;
}

@keyframes scroll-bob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(4px); }
}

/* Reduced-motion: no bob */
@media (prefers-reduced-motion: reduce) {
  :where(.act-cold__scroll-glyph.is-revealed) {
    animation: none;
  }
}

:where(html.motion-reduced .act-cold__scroll-glyph.is-revealed) {
  animation: none !important;
}

/* --------------------------------------------------------------------------
   Global .js-animate-path rule — used in both Act I and Act II SVGs
   -------------------------------------------------------------------------- */

:where(.js-animate-path) {
  stroke-dasharray: var(--path-length, 100);
  stroke-dashoffset: var(--path-length, 100);
  transition: stroke-dashoffset var(--dur-slow) var(--ease-rule);
}

:where(.js-animate-path.is-drawn) {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  :where(.js-animate-path) {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}