/* Continue the actual flat hero's navy field into an icy technical grid and End void. */
.end-divider{height:220px;position:relative;overflow:clip;background:linear-gradient(#102b41,#102432 35%,#080f16 75%,#060d12);isolation:isolate}
.end-data-grid{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#94c3d6;stroke-width:.65;opacity:.26;mask-image:radial-gradient(ellipse,black,transparent 78%)}
.end-divider-origin{position:absolute;width:8px;height:8px;background:#9cc7bf;left:calc(50% - 4px);top:65%;box-shadow:-110px -32px #638b9e,130px -48px #6d93a3,-220px -85px #3f677d,240px -105px #62869a}
.end-journey{position:relative;background:var(--bg);--end-stone:#bed0ae;--end-rim:#4d8071;--end-eye:#a1c7a2}
/* The destination remains ONE normal-flow DOM subtree. Pin spacing is owned by GSAP. */
.end-stage{position:relative;min-height:100svh;background:var(--bg);isolation:isolate}
.end-scene{position:relative;height:560px;min-height:440px;overflow:clip;background:#060d12;color:#edf5f6;isolation:isolate;display:grid;place-items:center}
.end-stage-grid{position:absolute;inset:0;pointer-events:none;transform-origin:center}
.end-stage-grid .end-data-grid{opacity:.14}
:root #app #end-title{position:relative;z-index:2;display:flex;font:750 clamp(100px,27vw,440px)/1 var(--sans);letter-spacing:-.085em;margin:0;text-wrap:nowrap;transform-origin:center}
.end-letter{display:block;position:relative;transform-origin:center;letter-spacing:inherit}
.end-gate-position{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;perspective:1200px;z-index:4}
.end-gate{position:relative;width:clamp(250px,26vw,380px);aspect-ratio:1;transform-origin:center;opacity:0;transform-style:preserve-3d}
.end-portal-core{position:absolute;inset:20%;background:#04090c;overflow:hidden}
.end-core-stars{width:100%;height:100%;image-rendering:pixelated;display:block}
.end-surface-texture{position:absolute;inset:0;background-size:cover;background-position:center}
.end-frame-block{position:absolute;width:20%;height:20%;background-color:var(--end-stone);background-size:cover;background-position:center;border:4px solid var(--end-rim);box-shadow:inset 0 -8px #789683,inset -6px 0 #a0b996;display:grid;place-items:center}
.end-frame-block::before{content:'';position:absolute;inset:3px;border:2px solid #98b595;clip-path:polygon(0 0,60% 0,60% 40%,100% 40%,100% 100%,40% 100%,40% 70%,0 70%)}
.end-frame-block i{position:relative;width:65%;height:65%;background:#1e423b;border:4px solid #63957c;box-shadow:inset 0 -5px #142b2a}
.end-frame-block i::after{content:'';position:absolute;width:28%;height:62%;background:var(--end-eye);top:16%;left:36%}
.end-frame-block.end-has-texture::before,.end-frame-block.end-has-texture i{display:none}
.end-block-0{left:20%;top:0}.end-block-1{left:40%;top:0}.end-block-2{left:60%;top:0}
.end-block-3{right:0;top:20%}.end-block-4{right:0;top:40%}.end-block-5{right:0;top:60%}
.end-block-6{left:60%;bottom:0}.end-block-7{left:40%;bottom:0}.end-block-8{left:20%;bottom:0}
.end-block-9{left:0;top:60%}.end-block-10{left:0;top:40%}.end-block-11{left:0;top:20%}
.end-fragments{position:absolute;inset:0;pointer-events:none;z-index:3}
.end-fragment{position:absolute;width:5px;height:5px;background:#96b7be;opacity:.45}
.end-fragment:nth-child(3n){width:9px;height:9px;background:#739b87}
.end-fragment:nth-child(4n){width:3px;height:3px;background:#d7eaf2}
.end-tunnel{position:absolute;inset:0;width:100%;height:100%;z-index:5;opacity:0;visibility:hidden;pointer-events:none}
.end-noise{position:absolute;inset:0;z-index:6;background-size:256px;opacity:.035;pointer-events:none}
.end-journey-footer{position:absolute;left:max(24px,calc((100% - 1248px)/2));right:max(24px,calc((100% - 1248px)/2));bottom:100px;display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:8;font:600 13px var(--sans)}
.end-scroll-cue,.end-skip{display:flex;align-items:center;gap:10px}
.end-scroll-cue{color:#adc4d0}
.end-skip{background:#14252e;color:#edf5f6;border:1px solid #546b78;border-radius:999px;padding:12px 18px;min-height:44px;white-space:nowrap}
.end-skip:hover{background:#254350}
.end-skip:focus-visible{outline:2px solid #a6d6ff;outline-offset:4px}
.end-destination{position:relative;background:var(--bg);color:var(--ink);display:flow-root;padding-top:100px}
.end-motion-ready .end-scene{position:absolute;inset:0 0 auto;height:100svh;min-height:0;z-index:2}
.end-is-near .end-gate,.end-is-near .end-letter,.end-is-near .end-destination{will-change:transform,opacity}
/* Native smooth anchor scrolling must not fight pin refresh/restoration inside the journey. */
html:has(.end-motion-ready.end-is-near){scroll-behavior:auto}
#sune-after-portal{scroll-margin-top:100px;outline:none}
/* Paused, reduced-motion and missing GSAP: a compact story and immediate product access. */
.end-journey:not(.end-motion-ready) .end-gate-position{inset:auto 0 115px}
.end-journey:not(.end-motion-ready) .end-gate{opacity:1;width:100px}
.end-journey:not(.end-motion-ready) #end-title{margin-top:-110px}
.end-journey:not(.end-motion-ready) .end-scroll-cue{visibility:hidden}
.end-journey:not(.end-motion-ready) .end-fragments{display:none}
@media(max-width:1024px){.end-fragment:nth-child(n+13){display:none}}
@media(max-width:600px){
  .end-divider{height:170px}.end-data-grid{stroke-width:1}
  .end-scene{height:460px;min-height:400px}
  .end-gate{width:250px}.end-frame-block{border-width:3px}.end-frame-block i{border-width:3px}
  .end-fragment:nth-child(n+9){display:none}
  .end-journey-footer{left:20px;right:20px;bottom:100px;font-size:11px;gap:12px}
  .end-skip{padding:10px 12px}.end-scroll-cue{max-width:140px;line-height:1.5}
}
@media(prefers-reduced-motion:reduce){.end-stage-grid{opacity:.5}}
