/* =============================================================================
   Bustan — style.css   ·   MOBILE-ONLY (design 390×844, §4b)
   Illuminated-manuscript wedding invitation. RTL, logical properties ONLY.
   Every clamp() upper bound is a PHONE maximum. Desktop = this layout centred,
   capped at 480px on a --blush-deep field. All colours from tokens.css.
   ========================================================================== */

/* ── reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img, svg, video { display: block; max-inline-size: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
ol, ul { list-style: none; padding: 0; }
/* [hidden] must beat class rules that set display (.field=flex, .music-toggle=inline-flex),
   else the attribute is ignored — hides the companions field on decline + the music toggle. */
[hidden] { display: none !important; }
:root {
  --ease: cubic-bezier(.22,1,.36,1); --ease-soft: cubic-bezier(.4,0,.2,1);
  /* pearl (pass10 §3): ivory sphere, off-centre white highlight, warm rose shadow —
     reads as a pearl, not a flat dot. Paired with a soft rose-line drop below. */
  --pearl: radial-gradient(circle at 37% 30%, #ffffff 0%, var(--ivory) 40%, #ecd8cd 74%, var(--rose-line) 100%);
  --pearl-shadow: 0 1px 1.5px color-mix(in srgb, var(--rose-line) 50%, transparent);
}

/* ── page frame: phone column centred on stone (§4b desktop treatment) ────── */
body {
  background: var(--blush-deep);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-align: start;
  user-select: none;
  overflow-x: hidden;
}
#invite {
  position: relative;
  inline-size: 100%;
  max-inline-size: 480px;
  margin-inline: auto;
  /* blush paper tiled from the image + a very subtle top→centre gradient so the page
     doesn't read as a flat fill (pass10 §1): lighter #F9ECE3 at the top settling to
     #F2E5DC / --blush. The gradient is semi-transparent so the paper texture shows. */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, #F9ECE3 80%, transparent) 0%,
      color-mix(in srgb, #F2E5DC 35%, transparent) 42%,
      transparent 100%),
    var(--blush) url("../assets/paper.webp") repeat top center;
  background-size: auto, 300px auto;
  min-block-size: 100svh;
  overflow: hidden;                 /* contain full-bleed hero + ornaments */
}
#invite > * { position: relative; z-index: 1; }

/* ── type roles ─────────────────────────────────────────────────────────── */
/* pass11/13 fonts: Bismillah → UrdTypeB, names → Aref Ruqaa, rest → Cairo */
.bismillah { font-family: var(--font-bismillah); line-height: var(--lh-head); }
.hero__names, .footer__names { font-family: var(--font-names); line-height: var(--lh-head); }
.section__title { font-family: var(--font-body); line-height: var(--lh-head); }
/* venue name is Latin ("ID HALL") — Cairo (--font-body), lightly tracked (§A3) */
.venue__name { font-family: var(--font-body); line-height: var(--lh-head); letter-spacing: .06em; }
.section__title {
  font-size: var(--fs-heading); color: var(--ink); text-align: center;
  margin-block-end: 1.5rem;
}
/* one quiet pearl below each heading, tying the page together (pass10 §3/§5) */
.section__title::after {
  content: ""; display: block; inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: var(--pearl); box-shadow: var(--pearl-shadow); margin: .7rem auto 0;
}
.eyebrow {
  font-family: var(--font-body); font-size: var(--fs-eyebrow);
  color: var(--ink-soft); text-align: center;
}
/* isolate Latin/numeric runs so neutral chars don't reverse in RTL (§A1) */
.ltr, .num { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.num { font-variant-numeric: tabular-nums; letter-spacing: .2em; }   /* Latin numerals — Cairo digits, tracked (pass11 §6) */

/* ── section shell ──────────────────────────────────────────────────────── */
.section, .band {
  inline-size: var(--content-width);
  margin-inline: auto;
  padding-block: var(--space);
  text-align: center;
}
.band { inline-size: 100%; padding-inline: clamp(1.5rem, 8vw, 3rem); }

/* ── section divider: leaf·berry·leaf flanked by hairline rules (§8) ──────── */
.divider {
  inline-size: var(--content-width); margin-inline: auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem;
  padding-block: clamp(1.25rem, 5vw, 2rem);
}
.divider__rule { block-size: 1px; background: var(--hairline); }   /* real elements so GSAP can draw them (§D) */
.divider svg { inline-size: clamp(120px, 34vw, 160px); height: auto; overflow: visible; }

/* ══════════════════════════════════════════════════════════════════════════
   1 · HERO — full-bleed & framed (§9.1)
   ══════════════════════════════════════════════════════════════════════════ */
/* The phone-shaped frame (9:19.5) FILLS the screen: 100svh, background cover. Because
   the image ratio matches a phone, cover crops almost nothing. Content sits in the
   artwork's clear inner area; the block padding uses svh so it tracks the viewport
   height (the inline padding is %-of-width). Values measured from the artwork and
   verified for ≥16px clearance at 320. container-type drives the cqw hero type. */
.hero {
  position: relative;
  inline-size: 100%; min-block-size: 100svh;
  /* the hero holds the image's OWN ratio so the frame is never cropped top/bottom —
     on short viewports (Safari address bar shrinks svh) it extends below the fold
     instead of cutting the border; cover then fits exactly (zero vertical crop). */
  aspect-ratio: 1024 / 2219;
  background: url("../assets/frame-bg.webp") center / cover no-repeat;
  container-type: inline-size;
  /* flex-start, NOT centering (pass13 §1): the text flows down from the top ornament
     and the leftover space collects at the BOTTOM, above the cue + lower ornament. */
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center; isolation: isolate;
  overflow: hidden;
  /* Top offset TRACKS the artwork under cover (pass13 §1): the image is 1024×2219 and
     the top ornament's lowest point is y=435 (canvas pixel scan). --bg-s is the cover
     scale, then padding-top = ornament bottom in box coords + a 4.5svh gap — so the
     Bismillah sits just under the crown at EVERY viewport ratio, crop or no crop.
     Inline 25% clears the side flourishes by ≥16px at 320px (16px ≈ 5% of width). */
  --bg-s: max(min(100vw, 480px) / 1024, 100svh / 2219);
  padding-inline: 25%;
  /* with aspect-ratio there is never a vertical crop, so ornament bottom = 435×scale */
  padding-block-start: calc(435 * var(--bg-s) + 4.5svh);
  padding-block-end: 18svh;
}
.hero__body { position: relative; top: 60px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 11.8cqw; max-inline-size: 100%; }
/* All hero type is sized in cqw (relative to the 2:3 card) so the full invitation
   fills the clear inner area at any width, no stretch (pass10 — "all text in frame"). */
.bismillah { font-size: 17.5cqw; color: var(--ink); font-weight: 700; line-height: 1.3; margin-block-end: 10cqw; }   /* enlarged + extra space before يتشرف */
.hero__honorific { font-family: var(--font-body); font-size: 11.6cqw; color: var(--ink); line-height: 1.2; }
/* each host is one unit: label stacked directly over name, balanced either side of و */
.hero__hosts { display: flex; align-items: center; justify-content: center; gap: 3.5cqw; }
.hero__host { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6cqw; flex: 1 1 0; min-inline-size: 0; }
.hero__host-label { font-size: 8.6cqw; color: var(--ink-soft); line-height: 1.3; }
.hero__host-name { font-size: 7.9cqw; font-weight: 500; color: var(--ink); white-space: nowrap; line-height: 1.3; }
.hero__host:first-child .hero__host-name { padding-left: 10px; }   /* عبد القادر الكيلاني — breathing room toward و */
/* the hosts' "و" connector — clean naskh/serif waw (original) */
.hero__connector { font-family: "Noto Naskh Arabic", "Geeza Pro", serif; font-size: 9cqw; color: var(--ink); flex: 0 0 auto; }
.hero__tagline { font-size: 10.6cqw; color: var(--ink-soft); line-height: 1.5; max-inline-size: 100%; }
.hero__names {
  margin-top: 40px;
  font-size: 21.5cqw; color: var(--ink); font-weight: 700; line-height: 1.12;
  display: flex; align-items: center; justify-content: center; gap: 5cqw; flex-wrap: wrap;   /* wider air around و */
}
/* the names connector is now "و" in the SAME face as the names (A Thuluth) — the
   span is kept for independent sizing of the connector. */
.amp { color: var(--ink); }
/* the names' و = EXACT copy of the hosts' connector above: same face, same 9cqw
   size, weight 400 (not the names' 700 — that read as bold) */
.hero__names .amp { font-family: "Noto Naskh Arabic", "Geeza Pro", serif; font-size: 9cqw; font-weight: 400; line-height: 1; }
.hero__rule { inline-size: 44%; block-size: 1px; background: var(--rose-line); margin-block-start: 0.5cqw; }

.scroll-cue {
  /* 100% = hero height; when the hero runs taller than the screen (aspect-ratio on a
     short viewport) this keeps the cue 7svh above the FOLD, not the hero's bottom */
  position: absolute; inset-block-end: calc(100% - 93svh - 40px); inset-inline: 0;   /* 40px lower */
  margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: .25rem;
  color: var(--ink-soft); font-family: var(--font-body); font-size: .85rem; z-index: 3;
}
#scrollCueText { margin-top: 40px; }
.scroll-cue__chev { animation: cue 1.8s var(--ease-soft) infinite; }
@keyframes cue { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ══════════════════════════════════════════════════════════════════════════
   2 · DUAA band (§9.2)
   ══════════════════════════════════════════════════════════════════════════ */
.duaa {
  position: relative;
  background: color-mix(in srgb, var(--blush-deep) 55%, var(--blush));
  padding-block: clamp(2.5rem, 11vw, 4rem);
}
.duaa__text {
  position: relative; z-index: 1;
}
.duaa__text {
  font-family: var(--font-body); font-size: clamp(1.25rem, 5.4vw, 1.7rem);
  color: var(--ink); line-height: 1.9; max-inline-size: 22rem; margin-inline: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   3 · DETAILS trio — three stacked rows (§9.3)
   ══════════════════════════════════════════════════════════════════════════ */
.details__list { display: flex; flex-direction: column; }
/* centred column per row — icon above, label + value centred beneath (pass7 §4).
   Chose icon-above over inline-centred: at 320px an inline icon+text pushes the
   centred text off-axis; stacked keeps every row visually centred. */
.details__row {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding-block: 1.1rem; text-align: center;
}
.details__row + .details__row { border-block-start: 1px solid var(--hairline); }
.details__icon { color: var(--ink); }
.details__icon svg { inline-size: 30px; height: 30px; }
.details__label { display: block; color: var(--ink-soft); font-size: var(--fs-eyebrow); }
.details__value { display: block; color: var(--ink); font-size: var(--fs-body); font-weight: 500; margin-block-start: .1rem; }

/* ══════════════════════════════════════════════════════════════════════════
   4 · COUNTDOWN (§9.4)
   ══════════════════════════════════════════════════════════════════════════ */
/* direction:ltr on the row only so يوم leads on the LEFT, running L→R (pass7 §5);
   the Arabic unit labels inside each cell are unaffected. */
.countdown__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; direction: ltr; }
.countdown__cell { position: relative; padding-block: clamp(.85rem, 4vw, 1.25rem); padding-inline: .25rem; }

/* corner ticks on countdown cells (§E) */
.countdown__cell {
  --tk: 15px; --tc: var(--rose-line);
  background-color: var(--blush-deep);
  background-image:
    linear-gradient(var(--tc),var(--tc)), linear-gradient(var(--tc),var(--tc)),
    linear-gradient(var(--tc),var(--tc)), linear-gradient(var(--tc),var(--tc)),
    linear-gradient(var(--tc),var(--tc)), linear-gradient(var(--tc),var(--tc)),
    linear-gradient(var(--tc),var(--tc)), linear-gradient(var(--tc),var(--tc));
  background-repeat: no-repeat;
  background-size: var(--tk) 1px, 1px var(--tk), var(--tk) 1px, 1px var(--tk), var(--tk) 1px, 1px var(--tk), var(--tk) 1px, 1px var(--tk);
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
}
.countdown__num { display: block; font-size: clamp(1.5rem, 7vw, 2rem); color: var(--ink); font-weight: 700; }
.countdown__lbl { display: block; font-size: .72rem; color: var(--ink-soft); margin-block-start: .2rem; }

/* ══════════════════════════════════════════════════════════════════════════
   5 · VENUE (§9.5)
   ══════════════════════════════════════════════════════════════════════════ */
.venue__name { font-size: clamp(1.6rem, 7vw, 2.2rem); color: var(--ink); }
.venue__addr { color: var(--ink-soft); margin-block: .35rem 1rem; }
/* embedded map between address + button (pass7 §6) — lazy iframe, keyless embed */
.venue-map {
  inline-size: 100%; block-size: 220px; margin-block-end: 1.5rem;
  border: 1px solid var(--rose-line); border-radius: 14px; overflow: hidden;
}
.venue-map iframe { inline-size: 100%; block-size: 100%; border: 0; display: block; }
.btn--pill {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  inline-size: 100%; min-block-size: 52px; padding-inline: 1.5rem;
  border: 1.5px solid var(--rose-line); border-radius: 999px;
  color: var(--ink); font-weight: 500; text-decoration: none;
  transition: background-color .2s var(--ease-soft), color .2s var(--ease-soft), border-color .2s var(--ease-soft);
}
.btn--pill:active { background: var(--mauve); color: var(--ivory); border-color: var(--mauve); }
@media (hover: hover) { .btn--pill:hover { background: var(--mauve); color: var(--ivory); border-color: var(--mauve); } }

/* ══════════════════════════════════════════════════════════════════════════
   6 · PROGRAM timeline (§9.6)
   ══════════════════════════════════════════════════════════════════════════ */
.timeline { position: relative; max-inline-size: 20rem; margin-inline: auto; text-align: start; }
.timeline::before {
  content: ""; position: absolute; inset-block: 8px 8px; inset-inline-start: 7px;
  inline-size: 1px; background: var(--rose-line);
}
.timeline__item { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding-block: .7rem; padding-inline-start: 1.75rem; }
.timeline__node {   /* pearl node (pass10 §3) */
  position: absolute; inset-inline-start: 2px; inset-block-start: 1.05rem;
  inline-size: 12px; block-size: 12px; border-radius: 50%;
  background: var(--pearl); border: 1.5px solid var(--ivory); box-shadow: var(--pearl-shadow);
}
.timeline__time { color: var(--ink-soft); font-weight: 500; white-space: nowrap; }
.timeline__label { color: var(--ink); }

/* (dress-code section removed — pass7 §8) */

/* ══════════════════════════════════════════════════════════════════════════
   Forms (playlist + rsvp) — 16px inputs, ≥48px targets (§4b)
   ══════════════════════════════════════════════════════════════════════════ */
.form { display: flex; flex-direction: column; gap: 1.1rem; text-align: start; max-inline-size: 24rem; margin-inline: auto; }
.field { position: relative; display: flex; flex-direction: column; gap: .35rem; }
.field > label { font-size: var(--fs-eyebrow); color: var(--ink-soft); }
/* inputs: rose-line underline only, no rounded-rect box (pass10 §5) */
.input {
  inline-size: 100%; min-block-size: 44px; font-size: var(--fs-input);
  padding-block: .5rem; padding-inline: .15rem;
  background: transparent; color: var(--ink);
  border: 0; border-block-end: 1px solid var(--rose-line); border-radius: 0;
  transition: border-color .2s var(--ease-soft);
}
.input:focus { outline: none; border-block-end: 2px solid var(--mauve); }   /* pass10 §5 */
.input::placeholder { color: color-mix(in srgb, var(--ink-soft) 70%, transparent); }
textarea.input { min-block-size: 84px; resize: vertical; line-height: 1.7; }
/* a small pearl appears at the inline-end of a focused text field (pass10 §5) */
.field:has(> .input)::after {
  content: ""; position: absolute; inset-block-end: 14px; inset-inline-end: 2px;
  inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--pearl); box-shadow: var(--pearl-shadow);
  opacity: 0; transform: scale(.4); transition: opacity .2s, transform .2s var(--ease);
}
.field:has(> .input):focus-within::after { opacity: 1; transform: scale(1); }

/* reusable corner ticks — champagne L-brackets, no full outline (§E) */
.corner-ticks {
  --tk: 15px; --tc: var(--rose-line);
  background-image:
    linear-gradient(var(--tc),var(--tc)), linear-gradient(var(--tc),var(--tc)),
    linear-gradient(var(--tc),var(--tc)), linear-gradient(var(--tc),var(--tc)),
    linear-gradient(var(--tc),var(--tc)), linear-gradient(var(--tc),var(--tc)),
    linear-gradient(var(--tc),var(--tc)), linear-gradient(var(--tc),var(--tc));
  background-repeat: no-repeat;
  background-size: var(--tk) 1px, 1px var(--tk), var(--tk) 1px, 1px var(--tk), var(--tk) 1px, 1px var(--tk), var(--tk) 1px, 1px var(--tk);
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
}
.field__err { font-size: .78rem; color: var(--mauve); min-block-size: 1em; }
.btn--submit {
  inline-size: 100%; min-block-size: 52px; border-radius: 999px;
  background: var(--mauve); color: var(--ivory); font-weight: 500;
  /* 1px ivory ring set 3px inside the edge (pass10 §5) */
  box-shadow: inset 0 0 0 3px var(--mauve), inset 0 0 0 4px color-mix(in srgb, var(--ivory) 55%, transparent);
  transition: background-color .2s var(--ease-soft), transform .12s var(--ease-soft);
}
.btn--submit:active { transform: translateY(1px); background: var(--mauve-deep); }
@media (hover: hover) { .btn--submit:hover { background: color-mix(in srgb, var(--mauve) 85%, var(--mauve-deep)); } }

/* two-button attend/decline toggle (§10.3) */
.toggle { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.toggle__btn {
  min-block-size: 48px; border: 1.5px solid var(--rose-line); border-radius: 999px;
  color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  transition: border-color .2s, color .2s, background-color .2s;
}
.toggle__btn[aria-pressed="true"] { border-color: var(--mauve); color: var(--ivory); background: var(--mauve); }   /* pass10 §5 */
.toggle__btn.is-decline[aria-pressed="true"] { border-color: var(--ink-soft); color: var(--ivory); background: var(--ink-soft); }

/* ── playlist list (§10.2) ─────────────────────────────────────────────── */
.playlist__topTitle { font-family: var(--font-body); font-size: 1.2rem; color: var(--ink); margin-block: 2rem 1rem; }
.playlist__list { display: flex; flex-direction: column; gap: .6rem; max-inline-size: 24rem; margin-inline: auto; }
.song {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .75rem;
  padding: .7rem .9rem; border: 1px solid var(--hairline); border-radius: 12px;
  background: var(--blush-deep); text-align: start;
}
.song__title { color: var(--ink); font-weight: 500; }
.song__artist { color: var(--ink-soft); font-size: .85rem; }
.song__vote {
  display: inline-flex; align-items: center; gap: .3rem; min-inline-size: 48px; min-block-size: 48px;
  justify-content: center; color: var(--ink-soft); border-radius: 999px;
}
.song__vote svg { inline-size: 22px; height: 22px; }
.song__vote[aria-pressed="true"] { color: var(--mauve); }
.song__vote[aria-pressed="true"] svg { fill: var(--mauve); stroke: var(--mauve); }
.song__count { font-variant-numeric: tabular-nums; font-size: .9rem; }
.empty { color: var(--ink-soft); text-align: center; padding-block: 1.5rem; }

/* ── rsvp confirmation card (§10.3) ────────────────────────────────────── */
.confirm {
  max-inline-size: 24rem; margin-inline: auto; text-align: center;
  border: 1px solid var(--hairline); border-radius: 16px; padding: 2rem 1.5rem;
  background: var(--blush-deep);
}
.confirm__crown { inline-size: 120px; margin: 0 auto .75rem; }
.confirm__crown svg { inline-size: 100%; height: auto; }
.confirm__msg { font-family: var(--font-body); font-size: 1.3rem; color: var(--ink); }
.confirm__edit { display: inline-block; margin-block-start: 1rem; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.form__note { text-align: center; color: var(--ink); font-family: var(--font-body); margin-block-start: .5rem; }

/* ══════════════════════════════════════════════════════════════════════════
   10 · FOOTER (§9.10)
   ══════════════════════════════════════════════════════════════════════════ */
.footer {
  text-align: center; padding-block: clamp(2.5rem, 11vw, 4rem);
  padding-block-end: max(2.5rem, calc(env(safe-area-inset-bottom) + 1.5rem));
  background: color-mix(in srgb, var(--blush-deep) 45%, var(--blush));
}
.footer__crown { inline-size: 140px; margin: 0 auto 1rem; }
.footer__crown svg { inline-size: 100%; height: auto; }
.footer__names { font-family: var(--font-body); font-size: clamp(2rem, 10vw, 3rem); color: var(--ink); }
.footer__date { color: var(--ink-soft); margin-block-start: .35rem; }
.footer__quote { font-family: var(--font-body); color: var(--ink-soft); margin-block-start: 1rem; }

/* ══════════════════════════════════════════════════════════════════════════
   Background-music toggle (pass8 §2) — fixed, bottom inline-start, one-tap mute
   ══════════════════════════════════════════════════════════════════════════ */
.music-toggle {
  position: fixed; z-index: 30;
  inset-block-end: max(1rem, calc(env(safe-area-inset-bottom) + .5rem));
  inset-inline-start: max(1rem, calc(env(safe-area-inset-left) + .5rem));
  inline-size: 48px; block-size: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blush); border: 1px solid var(--rose-line); color: var(--ink);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 18%, transparent);
  transition: transform .15s var(--ease-soft), border-color .2s;
}
.music-toggle:active { transform: scale(.94); }
.music-toggle .mt-strike { transition: opacity .2s; }         /* muted: strike shown */
.music-toggle.is-playing { border-color: var(--mauve); }
.music-toggle.is-playing .mt-strike { opacity: 0; }           /* playing: strike hidden */
.music-toggle.is-playing::after {                             /* playing: mauve dot (pass10 §5) */
  content: ""; position: absolute; inset-block-start: 7px; inset-inline-end: 7px;
  inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: var(--mauve); border: 1.5px solid var(--blush);
}
@media (hover: hover) { .music-toggle:hover { border-color: var(--mauve); } }
@media (prefers-reduced-motion: no-preference) {
  .music-toggle.is-playing { animation: mt-pulse 2.6s var(--ease-soft) infinite; }
}
@keyframes mt-pulse {
  0%, 100% { box-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 15%, transparent), 0 0 0 0 color-mix(in srgb, var(--mauve) 30%, transparent); }
  50%      { box-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 15%, transparent), 0 0 0 7px transparent; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Reveal + load-sequence initial states (motion wired in main.js / Pass 4)
   ══════════════════════════════════════════════════════════════════════════ */
.js [data-reveal] { opacity: 0; transform: translateY(28px); }
[data-reveal].is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-seq] { opacity: 0; }         /* hero load sequence controls these */

/* focus ring in the mauve accent (pass10 §2/§5) */
:focus-visible { outline: 2px solid var(--mauve); outline-offset: 3px; border-radius: 4px; }

/* ── reduced motion / no-JS: everything visible, no ambient motion ─────────── */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-seq] { opacity: 1; transform: none; }
  [data-reveal].is-in { transition: none; }
  .scroll-cue__chev { animation: none; }
}