/* Fasil home hero: wordmark, rule, headline, three beats, buttons. About one screen tall, no scroll pin.
   The markup is the final composed frame; home-hero.js plays the timeline on top of it.
   Logical properties only, so the English page mirrors the Arabic one. Tokens come from .t1-decision. */

.hh {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center; padding: 56px 16px 40px;
}
.hh-scene { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; pointer-events: none; }
.hh-svg { display: block; height: min(100%, 920px); width: auto; max-width: none; overflow: visible; opacity: .72; }
.hh-svg * { will-change: auto; }

.hh-copy {
  position: relative; z-index: 1; width: min(100%, 640px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hh .t1-eyebrow { margin: 0 0 4px; }
.hh .t1-eyebrow::after { margin-inline: auto; }

.hh-word {
  margin: 0; color: var(--t1-ink); font-family: "ThmanyahSans", system-ui, sans-serif; font-weight: 500;
  font-size: clamp(60px, min(19vw, 17vh), 170px); line-height: 1.15; text-align: center;
}
.hh-word--en { font-family: "ThmanyahSerif", Georgia, serif; font-weight: 400; letter-spacing: .04em; }
.hh-word-vis { display: block; user-select: none; -webkit-user-select: none; }
.hh-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.hh-rule { position: relative; display: block; width: 64px; height: 1px; margin: 8px auto 14px; background: var(--t1-gold-soft); }
.hh-rule i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--t1-gold); transform: translate(-50%, -50%); }
.hh-headline { margin: 0 0 clamp(12px, 2.4vh, 22px); font: 400 clamp(15px, 2.4vw, 20px)/1.6 "ThmanyahSans", sans-serif; color: var(--t1-ink-soft); }

/* three beats: nodes on a thin line, one caption at a time */
.hh-beats { position: relative; width: min(100%, 420px); margin-block-end: clamp(14px, 3vh, 26px); }
.hh-track { position: relative; }
.hh-nodes { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hh-nodes li { text-align: center; }
.hh-node { display: block; width: 11px; height: 11px; margin: 0 auto; border-radius: 50%; border: 1px solid var(--t1-gold-soft); background: var(--t1-bg); transition: background .5s ease, border-color .5s ease; }
.hh-node.is-on { background: var(--t1-gold); border-color: var(--t1-gold); }
.hh-line { position: absolute; inset-inline: 16.66%; inset-block-start: 5px; height: 1px; background: var(--t1-line); z-index: -1; }
.hh-line i { display: block; width: 100%; height: 100%; background: var(--t1-gold); transition: transform .6s ease; }
.hh[dir="rtl"] .hh-line i { transform-origin: right; }
.hh[dir="ltr"] .hh-line i { transform-origin: left; }
.hh-caps { display: grid; margin-block-start: 12px; min-height: 3.4em; }
.hh-cap { grid-area: 1 / 1; display: grid; gap: 2px; align-content: start; opacity: 0; transition: opacity .5s ease; }
.hh-cap.is-active { opacity: 1; }
.hh-cap strong { font: 700 15px/1.4 "ThmanyahSans", sans-serif; color: var(--t1-ink); }
.hh-cap span { font: 400 13px/1.6 "ThmanyahSans", sans-serif; color: var(--t1-ink-soft); }

.hh-actions { justify-content: center; }
.hh-next { display: grid; place-items: center; width: 40px; height: 40px; margin-block-start: clamp(8px, 2vh, 18px); color: var(--t1-gold); transition: opacity .6s ease; }
.hh-next svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hh.hh-run:not(.hh-done) .hh-next { opacity: 0; pointer-events: none; }

/* pause / resume / replay */
.hh-ctl {
  position: absolute; z-index: 2; inset-block-start: 14px; inset-inline-end: 14px; display: none; place-items: center;
  width: 40px; height: 40px; padding: 0; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--t1-gold-soft); background: color-mix(in srgb, var(--t1-bg) 82%, transparent); color: var(--t1-gold);
}
.hh.hh-run .hh-ctl:not([hidden]) { display: grid; }
.hh-ctl:focus-visible { outline: 2px solid var(--t1-gold); outline-offset: 3px; }
.hh-ctl svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hh-ctl .hh-i-resume path { fill: currentColor; }
.hh-ctl[data-mode="pause"] :is(.hh-i-resume, .hh-i-replay),
.hh-ctl[data-mode="resume"] :is(.hh-i-pause, .hh-i-replay),
.hh-ctl[data-mode="replay"] :is(.hh-i-pause, .hh-i-resume) { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hh-node, .hh-line i, .hh-cap, .hh-next { transition: none; }
}