/* ECHIVO /horeca — finish.css · OWNER: FABLE (V10 art direction). The "finish" layer: golden-hour light across the page,
   the primary-CTA finish, the dawn glow at every seam, and the sunrise close (#finish) before the form.
   Rules: transform/opacity only on anything that moves; nothing loops; phones get static paint; reduced motion = final state.
   See v7-notes/V10-FABLE.md. */

/* ============================================================ 1 · THE SUN THAT FOLLOWS THE READER (desktop, fine pointer)
   One fixed composited layer (transform only, moved by gsap.quickTo in finish.js). Plain alpha, no blend mode, so the
   compositor never has to re-group the page. Hidden over text fields and when the pointer leaves the window. */
.hx-sunlight { position: fixed; left: 0; top: 0; z-index: 60; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; border-radius: 50%;
  pointer-events: none; opacity: 0; transition: opacity .7s var(--ease-out); will-change: transform;
  background: radial-gradient(closest-side, rgba(245,200,130,.085), rgba(245,200,130,.035) 42%, rgba(245,200,130,0) 72%); }
.hx-sunlight.is-on { opacity: 1; }
.hx-sunlight.is-off { opacity: 0; }
.lp .hx-sunlight, .reduced-motion .hx-sunlight { display: none; }

/* ============================================================ 2 · DAWN AT EVERY SEAM
   global.js draws a hairline (.hx-seam) at the top of each section; the finish adds the light that a horizon line
   implies: a wide, soft glow that rises from the seam into the section as it arrives (opacity once, painted once).
   Phones: same paint, same one-shot transition (one opacity change per section, compositor). */
.hx-seam::before { content: ""; position: absolute; left: 50%; top: 0; width: 160%; height: clamp(160px, 28vh, 320px); translate: -50% 0; pointer-events: none;
  background: radial-gradient(50% 100% at 50% 0%, rgba(var(--seam-rgb, 245,200,130), .13), rgba(var(--seam-rgb, 245,200,130), .04) 45%, rgba(var(--seam-rgb, 245,200,130), 0) 75%);
  opacity: 0; transition: opacity 2.2s var(--ease-out) .15s; }
.hx-seam.is-seen::before { opacity: 1; }
/* the hairline itself gets a hot core so it reads as a lit edge, not a divider */
.hx-seam.is-seen { box-shadow: 0 0 18px 1px rgba(var(--seam-rgb, 245,200,130), .22); }
.reduced-motion .hx-seam::before, .no-js .hx-seam::before { opacity: 1; transition: none; }

/* ============================================================ 3 · PRIMARY CTA FINISH (every .btn-gold)
   a) specular: a pointer-tracked highlight on the gold (one CSS-var write per pointermove, opacity only on hover)
   b) halo: a soft gold bloom that breathes ONCE when the button scrolls into view (.is-lit, CSS one-shot)
   c) press: the ring tightens (scale on ::after, 120 ms). The submit button keeps apply.css' own ::after (sweep). */
.hx .btn-gold { position: relative; isolation: isolate; }
.hx .btn-gold::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease-out);
  background: radial-gradient(150px circle at var(--fx, 50%) var(--fy, 35%), rgba(255,255,255,.46), rgba(255,255,255,.12) 38%, rgba(255,255,255,0) 64%); }
.hx .btn-gold:hover::before, .hx .btn-gold:focus-visible::before { opacity: 1; }
.hx .btn-gold:not(.hx-submit)::after { content: ""; position: absolute; inset: -10px; z-index: -2; border-radius: inherit; pointer-events: none; opacity: 0; transform: scale(.82);
  background: radial-gradient(closest-side, rgba(245,200,130,.6), rgba(245,200,130,.18) 55%, rgba(245,200,130,0)); }
.hx .btn-gold.is-lit:not(.hx-submit)::after { animation: fin-halo 1.7s var(--ease-out) 1 both; }
@keyframes fin-halo { 0% { opacity: 0; transform: scale(.82); } 30% { opacity: .95; transform: scale(1.12); } 100% { opacity: 0; transform: scale(1.5); } }
.hx .btn-gold:not(.hx-submit):active::after { animation: none; opacity: .5; transform: scale(.96); transition: transform .12s, opacity .12s; }
.hx .btn-gold svg { position: relative; z-index: 1; }
.reduced-motion .hx .btn-gold::after, .reduced-motion .hx .btn-gold::before { animation: none !important; transition: none; }
/* the nav CTA: no halo (it is fixed; a bloom on a fixed element would re-fire on every scroll stop) */
.hx-nav .btn-gold::after { display: none; }

/* ============================================================ 4 · THE SUNRISE CLOSE (#finish)
   Night → golden hour right before the form. Layers, bottom to top: sky (night) › haze (gold, fades in) › sun (rises
   from behind the city) › rays › city silhouette (night) › copy. Desktop: scrubbed by finish.js (no pin; 1.3 viewports
   of scroll). Phone / reduced: one-shot .is-lit with CSS transitions (phone) or the final state (reduced). */
.hx-fin { position: relative; isolation: isolate; overflow: clip; text-align: center; background: var(--night);
  padding: clamp(96px, 16vh, 160px) var(--gutter) clamp(120px, 24vh, 220px); }
.hx-fin__sky { position: absolute; inset: 0; z-index: -3; pointer-events: none; overflow: hidden;
  background: linear-gradient(180deg, var(--night) 0%, #0b1020 55%, #141d33 100%); }
.hx-fin__haze { position: absolute; inset: 0; opacity: 0; transition: opacity 2.4s var(--ease-out);
  background:
    radial-gradient(70% 58% at 50% 100%, rgba(245,200,130,.46), rgba(212,165,96,.18) 42%, rgba(212,165,96,0) 72%),
    radial-gradient(45% 36% at 22% 100%, rgba(255,138,91,.16), rgba(255,138,91,0) 70%),
    radial-gradient(45% 36% at 78% 100%, rgba(255,138,91,.14), rgba(255,138,91,0) 70%),
    linear-gradient(180deg, rgba(20,29,51,0) 0%, rgba(49,41,46,.55) 70%, rgba(92,66,46,.7) 100%); }
.hx-fin__sun { position: absolute; left: 50%; bottom: 0; width: clamp(340px, 46vw, 820px); aspect-ratio: 1; border-radius: 50%; opacity: 0;
  transform: translate(-50%, 92%) scale(.78); transition: transform 2.6s var(--ease-out), opacity 1.6s var(--ease-out);
  background: radial-gradient(closest-side, #fff4dc 0%, #ffe3ad 10%, rgba(245,200,130,.92) 22%, rgba(245,200,130,.5) 40%, rgba(245,200,130,.16) 56%, rgba(245,200,130,0) 72%); }
.hx-fin__rays { position: absolute; left: 50%; bottom: 0; width: 160vw; height: 70vh; translate: -50% 0; opacity: 0; transition: opacity 2.6s var(--ease-out) .3s;
  background: repeating-conic-gradient(from -90deg at 50% 100%, rgba(245,200,130,.09) 0 3deg, rgba(245,200,130,0) 3deg 11deg);
  -webkit-mask: radial-gradient(60% 100% at 50% 100%, #000 0%, rgba(0,0,0,.5) 45%, transparent 80%); mask: radial-gradient(60% 100% at 50% 100%, #000 0%, rgba(0,0,0,.5) 45%, transparent 80%); }
.hx-fin__city { position: absolute; left: 0; right: 0; bottom: -1px; z-index: -2; width: 100%; height: clamp(80px, 12vw, 180px); color: #05070d; pointer-events: none;
  filter: drop-shadow(0 -2px 0 rgba(245,200,130,.28)); }
.hx-fin.is-lit .hx-fin__haze { opacity: 1; }
.hx-fin.is-lit .hx-fin__sun { opacity: 1; transform: translate(-50%, 12%) scale(1); }
.hx-fin.is-lit .hx-fin__rays { opacity: 1; }
/* desktop cinematic: finish.js scrubs haze/sun/rays with scroll; CSS transitions must not fight it */
.hx-cine .hx-fin__haze, .hx-cine .hx-fin__sun, .hx-cine .hx-fin__rays { transition: none; }
/* copy */
.hx-fin__in { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
.hx-fin__eye { color: var(--gold); margin: 0 0 22px; }
.hx-fin__h { margin: 0; text-shadow: 0 2px 30px rgba(5,7,13,.6); }
.hx-fin__h > span { display: block; }
.hx-fin__l2 { color: var(--gold); filter: drop-shadow(0 0 0 rgba(245,200,130,0)); transition: filter 1.8s var(--ease-out) .4s; }
.hx-fin.is-lit .hx-fin__l2 { filter: drop-shadow(0 0 26px rgba(245,200,130,.38)); }
.hx-fin__sub { margin: 24px auto 0; max-width: 44ch; color: var(--text-2); }
.hx-fin__ctas { margin: 34px 0 0; }
.hx-fin__cta { font-size: 1.08rem; padding: 1.05em 1.9em; box-shadow: 0 18px 60px rgba(245,200,130,.42), 0 0 0 1px rgba(255,236,200,.3) inset; }
.hx-fin__cta svg { transition: transform .45s var(--ease-out); }
.hx-fin__cta:hover svg { transform: translateX(3px); }
.hx-fin__note { margin: 18px 0 0; font-size: var(--t-small); color: var(--text-3); letter-spacing: .02em; }
.hx-fin.is-lit .hx-fin__note { color: var(--text-2); transition: color 1.6s; }
/* the apply section's own sky starts warm at its top; let the sunrise hand the light down: no seam glow below the city */
#apply > .hx-seam::before { opacity: 0 !important; }
/* reduced motion / no-js: golden hour, final state, nothing moves */
.reduced-motion .hx-fin__haze, .no-js .hx-fin__haze, .reduced-motion .hx-fin__rays, .no-js .hx-fin__rays { opacity: 1; transition: none; }
.reduced-motion .hx-fin__sun, .no-js .hx-fin__sun { opacity: 1; transform: translate(-50%, 12%) scale(1); transition: none; }
.reduced-motion .hx-fin__l2 { filter: drop-shadow(0 0 26px rgba(245,200,130,.38)); transition: none; }
/* phones: smaller sun, shorter section, rays off (a 160vw conic + mask is the one expensive paint here) */
@media (max-width: 760px) {
  .hx-fin { padding: 88px var(--gutter) 150px; }
  .hx-fin__sun { width: clamp(300px, 110vw, 440px); }
  /* the sun stays behind the roofs on a phone; the note must never sit on the hot core */
  .hx-fin.is-lit .hx-fin__sun, .reduced-motion .hx-fin__sun, .no-js .hx-fin__sun { transform: translate(-50%, 38%) scale(1); }
  .hx-fin__city { height: 96px; }
  .hx-fin__rays { display: none; }
  .hx-fin__sub { font-size: 1rem; }
}
.lp .hx-fin__rays { display: none; }

/* V10 · F5 gate (31 Oct): phones drop the two drop-shadow filters in the sunrise (gold line glow + roof rim). At DPR 3 they
   re-raster on every scroll frame: phone x4 scroll_finish 39.0–52.8 fps with them, 56.9–59.1 without (task time -30 %).
   Desktop keeps both. */
@media (max-width: 760px) {
  .hx-fin__l2, .hx-fin.is-lit .hx-fin__l2, .reduced-motion .hx-fin__l2 { filter: none; transition: none; }
  .hx-fin__city { filter: none; }
}