/* Gift of Sight Worldwide: the home page (immersive). Loaded after scrollcraft.css and site.css.
   Never restyles the engine's own [data-sc-*] mechanism; only this page's classes. */

body.home { background: var(--pupil); color: var(--ink-on-dark); }

/* ------------------------------------------------- act 1-4: the eye -- */
.eye-act { position: relative; }
.eye-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; z-index: 0;
  background: radial-gradient(120% 90% at 65% 45%, #141C1F 0%, var(--pupil) 60%);
}
.eye-canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.eye-scrim { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(10,14,16,0.92) 0%, rgba(10,14,16,0.78) 34%, rgba(10,14,16,0) 58%); }
@media (max-width: 859px) {
  .eye-scrim { background: linear-gradient(180deg, rgba(10,14,16,0) 42%, rgba(10,14,16,0.8) 56%, rgba(10,14,16,0.95) 100%); }
}

.eye-flow { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; }
.phase { position: relative; }
.phase--hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.phase--weight { min-height: 100svh; display: flex; align-items: center; }
.phase--hush { height: 60svh; display: flex; align-items: flex-end; justify-content: center; }
.js .phase--peak { height: 360svh; }
.js .phase--bloom { height: 50svh; }
.js .phase--tail { height: 100vh; height: 100svh; display: flex; align-items: flex-end; }
.phase--tail > .wrap { flex: 1; }
.phase--tail .register-head { color: var(--ink-on-light); padding-bottom: clamp(2rem, 6svh, 4rem); }
.phase--tail .register-head .lede { color: var(--soft-on-light); }
html:not(.eye-on) .phase--tail .register-head, html:not(.eye-on) .phase--tail .register-head .lede { color: var(--ink-on-dark); }

.hero-copy { padding-top: var(--bar-h); }
@media (max-width: 859px) {
  .phase--hero { align-items: flex-end; }
  .hero-copy { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
  .hero-copy .display--xl { font-size: clamp(2.3rem, 10.5vw, 3.2rem); }
  .hero-actions { margin-top: 1.5rem; }
  .hero-partner { margin-top: 1.5rem; }
}
.hero-copy > * { max-width: 34rem; }
.hero-copy .display { margin-bottom: 1.4rem; }
.hero-copy .lede { color: var(--soft-on-dark); max-width: 28rem; }
.hero-actions { margin: 2rem 0 0; }
.hero-partner { margin: 2.25rem 0 0; font-size: var(--t-xs); color: var(--soft-on-dark); letter-spacing: 0.01em; max-width: 26rem; }

.weight-copy > * { max-width: 32rem; }
.weight-copy .display { margin-bottom: 1.25rem; }
.weight-text { color: var(--soft-on-dark); margin: 0 0 2rem; }
.figures { margin: 0 0 1.5rem; display: grid; gap: 0; border-top: 1px solid color-mix(in oklab, var(--ink-on-dark) 16%, transparent); }
.figure { display: flex; flex-direction: column-reverse; gap: 0.15rem; padding: 1rem 0; border-bottom: 1px solid color-mix(in oklab, var(--ink-on-dark) 16%, transparent); }
.figure dt { font-size: var(--t-sm); color: var(--soft-on-dark); max-width: 30rem; }
.figure dd { margin: 0; }
.figure__n { font-weight: 720; font-stretch: 114%; font-size: var(--t-2xl); letter-spacing: -0.03em; line-height: 1.05; color: var(--ink-on-dark); font-variant-numeric: tabular-nums; }
.weight-copy .source { font-size: 0.74rem; color: var(--soft-on-dark); }
.weight-copy .source a { color: var(--marigold); }

.hush-line { margin: 0 0 18svh; font-family: var(--mono); font-size: var(--t-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft-on-dark); }

/* the peak captions: one at a time, low on a phone, in the left column on a desktop */
.peak-steps { list-style: none; margin: 0; padding: 0; position: absolute; z-index: 3;
  left: var(--gutter); top: 50%; transform: translateY(-50%); width: min(24rem, 34vw); min-height: 12rem; }
.peak-step { position: absolute; inset: 0 auto auto 0; width: 100%; opacity: 0; visibility: hidden; will-change: opacity, transform; }
.peak-step .kicker { color: var(--marigold); margin-bottom: 0.6rem; }
.peak-line { margin: 0; font-size: var(--t-xl); line-height: 1.25; font-weight: 560; letter-spacing: -0.012em; text-wrap: balance; }
.peak-final { margin: 0 0 1.5rem; }
@media (max-width: 859px) {
  .peak-steps { left: var(--gutter); right: var(--gutter); width: auto; top: auto; bottom: calc(1.75rem + env(safe-area-inset-bottom)); transform: none; min-height: 9.5rem; }
  .peak-step { inset: auto 0 0 0; }
  .peak-line { font-size: var(--t-lg); }
}
/* without JavaScript the peak is a plain list, read in order */
html:not(.eye-on) .peak-steps { position: static; transform: none; width: auto; min-height: 0; padding: 2rem var(--gutter) 4rem; display: grid; gap: 1.5rem; }
html:not(.eye-on) .peak-step { position: static; opacity: 1; visibility: visible; }
html:not(.eye-on) .eye-stage { position: relative; height: auto; }
html:not(.eye-on) .eye-flow { margin-top: 0; }
html:not(.eye-on) .eye-canvas { display: none; }

/* ---------------------------------------------- act 5: the register -- */
.register { position: relative; z-index: 1; padding-block: clamp(0.5rem, 2vw, 1.5rem) clamp(4rem, 8vw, 7rem); }
.register-head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.register-head .lede { margin-top: 1.1rem; }
.faces-figure { margin: clamp(2.5rem, 6vw, 4.5rem) 0 0; }
/* 25 faces and one note fill the grid exactly: 7 x 4, 4 x 7, 3 x 9 */
.faces__note { grid-column: span 2; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.9rem; padding: 0.5rem 0 0.5rem 0.25rem; }
.faces__note p { margin: 0; font-size: var(--t-sm); color: var(--soft-on-light); max-width: 26ch; }
@media (min-width: 560px) { .faces__note { grid-column: span 3; padding-left: 1rem; } }

/* -------------------------------------------- act 6: how it happens -- */
/* A vertical sequence (owner 2026-10-24: no page scrolls both down and sideways). The heading holds on
   the left on wide screens while five steps run down a stitched line; each settles in as it arrives. */
.chain { background: var(--clear); color: var(--ink-on-light); padding-block: clamp(4rem, 12vw, 9rem); }
.chain-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.chain-head h2 { margin-bottom: 0.9rem; }
.chain-head p { margin: 0; font-size: var(--t-lg); color: var(--soft-on-light); max-width: 24ch; }
.chain-steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); }
.chain-steps::before { content: ""; position: absolute; left: calc(2.125rem - 0.5px); top: 2.2rem; bottom: 2.2rem; width: 0;
  border-left: 1px dashed color-mix(in oklab, var(--ink-on-light) 28%, transparent); }
.chain-step { position: relative; display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); align-items: start; }
.chain-step .ring { width: 4.25rem; height: 4.25rem; color: var(--ink-on-light); background: var(--clear); border-radius: 50%; position: relative; }
.chain-no { margin: 0.35rem 0 0.2rem; font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.08em; color: var(--marigold-deep); }
.chain-step h3 { margin: 0 0 0.45rem; font-size: var(--t-xl); font-weight: 700; font-stretch: 110%; letter-spacing: -0.02em; line-height: 1.1; }
.chain-step p:last-child { margin: 0; color: var(--soft-on-light); max-width: 46ch; }
.chain-note { display: grid; gap: 1.25rem; justify-items: start; background: var(--pupil); color: var(--ink-on-dark); border-radius: 18px;
  padding: clamp(1.5rem, 3.5vw, 2.5rem); }
.chain-note .display { color: var(--ink-on-dark); max-width: 22ch; }
@media (min-width: 60rem) {
  .chain-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: clamp(3rem, 7vw, 7rem); align-items: start; }
  .chain-head { position: sticky; top: calc(var(--bar-h) + 3rem); }
  .chain-note { grid-column: 2; }
}

/* ------------------------------------------------- act 7: the close -- */
.close { background: var(--pupil); color: var(--ink-on-dark); }
.close-stage { display: flex; align-items: center; background: radial-gradient(90% 70% at 70% 50%, #121A1D 0%, var(--pupil) 70%); overflow: hidden; }
.close-ring { position: absolute; right: -12vmin; top: 50%; width: min(92vmin, 52rem); height: auto; transform: translateY(-50%); color: color-mix(in oklab, var(--ink-on-dark) 9%, transparent); pointer-events: none; }
.close-ring .pupil-dot { fill: color-mix(in oklab, var(--marigold) 22%, transparent); }
.close-in { position: relative; display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); align-content: center; padding-top: var(--bar-h); }
.close-in .display { max-width: 18ch; }
.entry { width: min(100%, 34rem); background: color-mix(in oklab, var(--pupil-2) 92%, transparent); border: 1px solid color-mix(in oklab, var(--ink-on-dark) 14%, transparent); border-radius: 14px; padding: 0.4rem 1.25rem 0.6rem; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6); }
.entry__head { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding: 0.85rem 0; font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft-on-dark); border-bottom: 1px solid color-mix(in oklab, var(--ink-on-dark) 14%, transparent); }
.entry__no { color: var(--marigold); font-weight: 500; font-size: var(--t-sm); letter-spacing: 0.02em; }
.entry__blank { display: inline-block; width: 3.2em; border-bottom: 1.5px solid var(--marigold); transform: translateY(-0.2em); }
.entry dl { margin: 0; }
.entry dl > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid color-mix(in oklab, var(--ink-on-dark) 10%, transparent); align-items: baseline; }
.entry dl > div:last-child { border-bottom: 0; }
.entry dt { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.04em; color: var(--soft-on-dark); }
.entry dd { margin: 0; font-size: var(--t-base); }
.entry__you dd { color: var(--marigold); font-weight: 720; font-stretch: 112%; font-size: var(--t-xl); letter-spacing: -0.02em; line-height: 1.1; }
.close-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.close-note { flex-basis: 100%; margin: 0.25rem 0 0; font-size: var(--t-sm); color: var(--soft-on-dark); }
@media (max-width: 560px) {
  /* the close is pinned to one screen: on a phone with Safari's bars showing, title, register and both
     buttons must fit in about 550px, or the last button is cut off (owner's phone review 2026-10-24) */
  .close-in { gap: 1rem; }
  .entry { padding: 0.2rem 1rem 0.35rem; }
  .entry__head { padding: 0.6rem 0; }
  .entry dl > div { grid-template-columns: 6.25rem 1fr; gap: 0.75rem; padding: 0.42rem 0; }
  .entry dd { font-size: var(--t-sm); line-height: 1.35; }
  .entry__you dd { font-size: var(--t-lg); }
  .close-cta { gap: 0.5rem; }
  .close-cta .btn { flex: 1 1 100%; min-height: 0; padding-block: 0.8rem; }
  .close-note { margin-top: 0.1rem; }
}
@media (max-width: 560px) and (max-height: 620px) {
  .close-in .display { font-size: clamp(1.6rem, 7.5vw, 2rem); }
  .entry__head { display: none; }
  .close-cta .btn { padding-block: 0.65rem; }
}

/* footer on the home page sits on the dark ground the close ends on */
body.home .foot { background: var(--pupil); }

/* the reveal engine hides [data-sc-in] until it runs; without JavaScript, show everything */
html:not(.js) [data-sc-in], html:not(.js) [data-sc-stagger] > *, html:not(.js) [data-sc-cue] { opacity: 1 !important; transform: none !important; }