/* /clients/retirement: family CLIENTS "Light", signature instrument HORIZON.
   One wide field: a dawn sky over open water, the sun on the horizon. Pinned while the first four screens scroll over
   it; the only scroll-bound change is the STATE of the dawn (--p: 0 first light, 1 morning). Sky and sun are CSS and are
   the poster (JS off and reduced motion show --p: 1); the water is a live WebGL field (assets/horizon.js) laid over a
   poster image rendered from the same shader. Spectrum is light, never text colour. */
.hz-debug, .hz-debug body { scroll-behavior: auto !important; }
main { position: relative; z-index: 1; display: block; }

/* ---------------- the scene: a pinned field, the words scroll over it ---------------- */
.hz-scene {
  position: relative;
  --hz: .7;                                   /* the horizon, as a fraction of the field's height */
  --p: 1;                                     /* dawn state; the final state unless motion is live */
  --sun-x: 74%;
  --sun-d: clamp(66px, 7.4vw, 124px);
}
.hz-live .hz-scene { --p: 0; }                /* set before first paint, so the live page starts at first light */
.hz-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; z-index: 0; }
.hz-field {
  position: absolute; inset: 0;
  /* the whole field (water, glow, corona) lets go into the pearl page at its lower edge: no seam where the stage ends */
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 86%, transparent 100%);
}
.hz-field > * { position: absolute; pointer-events: none; }

/* sky: first light (cool, faint rose) under a morning layer that fades in with --p */
.hz-sky {
  left: 0; right: 0; top: 0; height: calc(var(--hz) * 100% + 2px);
  background: linear-gradient(180deg, #EDF0EE 0%, #F0EEEC 28%, #F3E4E4 56%, #F5D7D5 78%, #F7CDC2 92%, #F8C6B0 100%);
}
.hz-sky-late {
  background: linear-gradient(180deg, #F6F5F1 0%, #F7F1E8 34%, #F9EAD9 62%, #FAE2C6 86%, #FBDDB8 100%);
  opacity: var(--p);
}
/* the broad light of the low sun, spread along the horizon */
.hz-glow {
  left: var(--sun-x); top: calc(var(--hz) * 100%); width: 170%; height: 110%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side, rgba(255, 236, 210, .95), rgba(250, 208, 170, .6) 20%, rgba(242, 178, 182, .26) 46%, rgba(246, 210, 212, .08) 70%, transparent 86%);
  opacity: calc(.78 + .22 * var(--p));
}
/* the sun: clipped at the horizon, so at first light only its upper edge shows */
.hz-sunclip { left: 0; right: 0; top: 0; height: calc(var(--hz) * 100%); overflow: hidden; }
.hz-sun {
  position: absolute; left: var(--sun-x); top: 100%; width: var(--sun-d); height: var(--sun-d); border-radius: 50%;
  transform: translate(-50%, calc(-50% + var(--sun-d) * (.04 - 1.7 * var(--p))));
  /* low in the haze the disc is warm; it whitens as it climbs (the white layer fades in with --p) */
  background:
    radial-gradient(circle closest-side, rgba(255, 255, 255, calc(.25 + .75 * var(--p))) 0 46%, rgba(255, 250, 240, 0) 80%),
    radial-gradient(circle closest-side, #FFF4DE 0 40%, #FDE2B8 70%, #F9CF9C 90%, rgba(248, 200, 150, 0) 100%);
  box-shadow: 0 0 calc(var(--sun-d) * .7) calc(var(--sun-d) * .02) rgba(255, 238, 210, .75),
              0 0 calc(var(--sun-d) * 1.6) calc(var(--sun-d) * .25) rgba(247, 196, 150, .4);
}
/* the corona rides with the sun and is not clipped, so its light spills over the water line */
.hz-corona {
  left: var(--sun-x); top: calc(var(--hz) * 100%); width: calc(var(--sun-d) * 5.2); height: calc(var(--sun-d) * 5.2);
  transform: translate(-50%, calc(-50% + var(--sun-d) * (.04 - 1.7 * var(--p))));
  background: radial-gradient(closest-side, rgba(255, 244, 226, .78), rgba(248, 226, 196, 0.27) 32%, rgba(242, 172, 184, .14) 62%, transparent);
}

/* water: the poster (rendered from the shader at --p: 1) under the live canvas; both fade into the pearl below */
.hz-water {
  left: 0; right: 0; top: calc(var(--hz) * 100%); bottom: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 66%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 66%, transparent 100%);
}
.hz-water-poster {
  position: absolute; inset: 0;
  background: url("/clients/retirement/assets/water-wide.webp") var(--sun-x) 0 / cover no-repeat, #EDE3DA;
}
.hz-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.6s var(--ease); }
.hz-gl-on .hz-gl { opacity: 1; }
/* haze at the water line: hides the seam between the CSS sky and the water, reads as distance */
.hz-haze {
  left: 0; right: 0; top: calc(var(--hz) * 100%); height: 7%; transform: translateY(-52%);
  background: linear-gradient(180deg, rgba(251, 236, 222, 0), rgba(252, 240, 228, .78) 52%, rgba(250, 236, 224, 0));
}

/* ---------------- the words that scroll over the field ---------------- */
.hz-flow { position: relative; z-index: 1; margin-top: -100vh; margin-top: -100svh; }
.hz-hero { min-height: 100vh; min-height: 100svh; }
.hz-hero-in { padding-top: clamp(36px, 6.4vh, 84px); }
.hz-hero h1 { font: 400 clamp(52px, min(7vw, 11.4vh), 116px)/.95 var(--serif); letter-spacing: -.024em; margin: 0; max-width: 11.5em; }
.hz-hero h1 .l { display: block; }
.lede { font-size: 20px; line-height: 1.58; color: var(--ink-2); max-width: 30em; margin: clamp(22px, 4vh, 40px) 0 0; }
.hz-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: clamp(20px, 3.6vh, 34px); }
.text-link {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 4px; font: 500 15px/1 var(--sans); color: var(--ink);
  text-decoration: underline; text-decoration-color: rgba(29, 33, 38, .4); text-underline-offset: 6px;
}
.text-link:hover { text-decoration-color: currentColor; }

.hz-beat { min-height: 88vh; min-height: 88svh; }
/* the last block is shorter, so the field lets go while its words still sit high in the sky */
.hz-beat-last { min-height: 76vh; min-height: 76svh; }
.hz-beat-in { padding-top: 21vh; padding-top: 21svh; }
.beat-k { font: italic 400 clamp(24px, 2.2vw, 32px)/1 var(--serif); color: var(--ink-2); margin: 0 0 18px; }
.hz-beat h2 { font: 400 clamp(46px, min(6.2vw, 10vh), 100px)/.98 var(--serif); letter-spacing: -.02em; margin: 0 0 24px; max-width: 9.5em; }
.hz-beat p:not(.beat-k) { font-size: 19.5px; line-height: 1.6; color: var(--ink-2); max-width: 27em; margin: 0; }
/* with motion live, each block rises over the horizon (horizon.js sets the opacity from its height above the water) */
.hz-live .hz-scene [data-rise] { will-change: opacity; }

/* ---------------- after the field: the pearl page, plain editorial reading ---------------- */
.rt-held { padding: clamp(70px, 10vh, 120px) 0 clamp(90px, 12vh, 130px); }
.rt-held-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 6%; align-items: end; }
.rt-held h2 { font: 400 clamp(44px, 5.6vw, 88px)/1 var(--serif); letter-spacing: -.02em; margin: 0; }
.rt-held-txt p { font-size: 19px; line-height: 1.62; color: var(--ink-2); margin: 0; }
.rt-held-txt .rt-quiet { font-size: 16px; margin-top: 18px; }
.rt-quiet a, .rt-term a { color: var(--ink); text-decoration-color: rgba(29, 33, 38, .45); text-underline-offset: 3px; }
.rt-quiet a:hover, .rt-term a:hover { text-decoration-color: currentColor; }

.rt-steps { padding: clamp(60px, 9vh, 110px) 0 clamp(80px, 11vh, 130px); }
.rt-steps h2 { font: italic 400 clamp(26px, 2.4vw, 36px)/1.1 var(--serif); color: var(--ink-2); margin: 0 0 30px; }
.rt-seq { list-style: none; margin: 0; padding: 0; max-width: 21em; font: 400 clamp(34px, 3.7vw, 56px)/1.18 var(--serif); letter-spacing: -.012em; }
.rt-seq li { margin: 0; }
.rt-seq li + li { margin-top: .62em; }
.rt-seq em { font-style: italic; color: var(--ink-2); }
.rt-after { margin: 44px 0 0; max-width: 34em; font-size: 17px; line-height: 1.6; color: var(--ink-2); }

.rt-terms { padding: 30px 0 clamp(70px, 10vh, 120px); }
.rt-terms h2 { font: 400 clamp(32px, 3vw, 44px)/1.1 var(--serif); margin: 0 0 30px; }
.rt-terms-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 4%; border-top: 1px solid rgba(29, 33, 38, .14); }
.rt-term { padding-top: 24px; }
.rt-term h3 { font: 600 12.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 12px; }
.rt-term p { font-size: 16px; line-height: 1.62; color: var(--ink-2); margin: 0; }

/* the close: the morning light now lies across the whole width, low and even (no sun, no pool) */
.rt-close { position: relative; padding: clamp(120px, 18vh, 200px) 0 clamp(120px, 16vh, 170px); text-align: center; }
.rt-close::before {
  content: ""; position: absolute; left: 0; right: 0; top: 18%; bottom: -150px; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(246, 245, 241, 0), rgba(246, 234, 232, .2) 26%, rgba(250, 228, 206, .46) 56%,
      rgba(249, 233, 212, 0.4) 70%, rgba(250, 230, 210, .3) 86%, rgba(246, 245, 241, 0));
}
.rt-close h2 { font: 400 clamp(52px, 7vw, 116px)/.96 var(--serif); letter-spacing: -.022em; margin: 0 auto 30px; max-width: 10em; }
.rt-close-p { font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 32em; margin: 0 auto 38px; }
.rt-close-cta { display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: center; align-items: center; }

.small-print { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); text-align: center; margin: 0 auto; padding: 18px 0 72px; }

/* ---------------- phone ---------------- */
@media (max-width: 760px) {
  .hz-scene { --hz: .74; --sun-x: 76%; --sun-d: 60px; }
  .hz-water-poster { background-image: url("/clients/retirement/assets/water-tall.webp"); }
  .hz-hero-in { padding-top: 34px; }
  .hz-hero h1 { font-size: clamp(40px, 11.4vw, 52px); line-height: .98; }
  .hz-hero h1 .l { display: inline; }
  .lede { font-size: 17.5px; line-height: 1.55; margin-top: 22px; }
  .hz-cta { margin-top: 22px; gap: 4px 22px; }
  .hz-beat-in { padding-top: 17vh; padding-top: 17svh; }
  .beat-k { font-size: 22px; margin-bottom: 12px; }
  .hz-beat h2 { font-size: clamp(40px, 11vw, 50px); margin-bottom: 16px; }
  .hz-beat p:not(.beat-k) { font-size: 17.5px; }
  .rt-held { padding: 64px 0 70px; }
  .rt-held-in { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .rt-held h2 { font-size: clamp(40px, 11vw, 50px); }
  .rt-held-txt p { font-size: 17.5px; }
  .rt-seq { font-size: clamp(28px, 7.8vw, 34px); }
  .rt-after { font-size: 16.5px; margin-top: 32px; }
  .rt-terms-grid { grid-template-columns: minmax(0, 1fr); }
  .rt-term + .rt-term { margin-top: 10px; }
  .rt-close { padding: 110px 0 110px; text-align: left; }
  .rt-close h2 { font-size: clamp(46px, 12.6vw, 60px); margin: 0 0 24px; }
  .rt-close-p { margin: 0 0 30px; font-size: 17px; }
  .rt-close-cta { justify-content: flex-start; }
  .small-print { text-align: left; padding-bottom: 56px; }
}
/* short desktop windows: the hero must still sit above the water line */
@media (min-width: 761px) and (max-height: 820px) {
  .hz-scene { --hz: .74; }
  .lede { font-size: 18px; }
}