/* ADXSWAY Lunar Hero — ported from the React/Three.js build */
.journey { height: 580svh; background: #020303; }
.sticky-scene { height: 100svh; position: sticky; top: 0; overflow: hidden; isolation: isolate; background: #030405; }
.webgl { position: absolute; inset: 0; z-index: 0; transform-origin: 50% 70%; transform: translateY(calc(var(--end, 0) * 18vh)) scale(calc(1 - var(--end, 0) * .66)); filter: brightness(calc(1 - var(--end, 0) * .55)); will-change: transform, filter; }
.webgl canvas { position: relative; z-index: 0; display: block; width: 100%; height: 100%; }
.webgl::after { content: ""; position: absolute; inset: -2px; z-index: 1; pointer-events: none; opacity: clamp(0, calc(var(--end, 0) * 2.2), 1); background: linear-gradient(90deg, #030405 0%, rgba(3,4,5,.98) 4%, rgba(3,4,5,.68) 11%, transparent 24%), linear-gradient(270deg, #030405 0%, rgba(3,4,5,.98) 4%, rgba(3,4,5,.68) 11%, transparent 24%), linear-gradient(180deg, #030405 0%, rgba(3,4,5,.96) 4%, rgba(3,4,5,.58) 10%, transparent 22%), linear-gradient(0deg, #030405 0%, rgba(3,4,5,.98) 5%, rgba(3,4,5,.72) 13%, transparent 28%); }
.scene-feather { position: absolute; inset: -1px; z-index: 1; pointer-events: none; opacity: clamp(0, calc(var(--end, 0) * 4), 1); background: radial-gradient(ellipse 44% 49% at 50% 54%, transparent 0 48%, rgba(3,4,5,.16) 59%, rgba(3,4,5,.58) 74%, rgba(3,4,5,.94) 91%, #030405 100%); }
.sticky-scene::after { content: ""; position: absolute; inset: 0; z-index: 20; pointer-events: none; opacity: .11; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.sticky-scene::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle at 50% 45%, transparent 0 34%, rgba(0,0,0,.08) 64%, rgba(0,0,0,.68) 112%); }
.opening { position: absolute; z-index: 5; left: 50%; bottom: 4.8vh; transform: translateX(-50%) scale(calc(1 - var(--p, 0) * .16)); transform-origin: center bottom; width: 96vw; white-space: nowrap; text-align: center; font-weight: 900; font-size: clamp(120px, 21vw, 560px); line-height: .82; letter-spacing: -.075em; opacity: clamp(0, calc(1 - var(--p, 0) * 5), 1); color: #f4f5f3; }
.scroll-hint { position: absolute; z-index: 6; right: 4vw; bottom: 1.35vh; white-space: nowrap; font-family: "Helvetica Neue", "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif; font-size: clamp(16px, 1.55vw, 30px); font-weight: 560; letter-spacing: -.03em; opacity: clamp(0, calc(1 - var(--p, 0) * 5), 1); color: #f4f5f3; }
.statement { position: absolute; z-index: 7; inset: 0; padding: 0 5vw 5vh; display: flex; align-items: flex-end; justify-content: space-between; opacity: min(clamp(0, calc((var(--p, 0) - .1) * 6), 1), clamp(0, calc((.73 - var(--p, 0)) * 14), 1)); transform: translateY(calc((.48 - var(--p, 0)) * 72px)); font-family: "Helvetica Neue", "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif; text-shadow: 0 2px 20px rgba(0,0,0,.38); color: #f4f5f3; }
.statement p { margin: 0; font-size: clamp(30px, 4.15vw, 76px); line-height: 1.06; letter-spacing: -.045em; font-weight: 520; }
.statement h1 { margin: 0 0 2vh; text-align: right; font-size: clamp(26px, 3.85vw, 68px); line-height: 1.06; letter-spacing: -.052em; font-weight: 520; }
.statement em { font-weight: 420; font-style: italic; letter-spacing: -.04em; }
.manifesto { position: absolute; z-index: 8; inset: 0; opacity: var(--manifesto, 0); pointer-events: none; font-family: "Helvetica Neue", "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif; color: #f4f5f3; }
.manifesto em { font-weight: 420; font-style: italic; }
.manifesto p { position: absolute; margin: 0; max-width: 88vw; white-space: nowrap; font-size: clamp(32px, 3.2vw, 60px); line-height: 1.2; letter-spacing: -.04em; font-weight: 470; text-wrap: balance; }
.manifesto p:first-child { left: 7vw; top: 10vh; transform: translateY(calc((1 - var(--end, 0)) * 60px)); }
.manifesto p:last-child { right: 5vw; bottom: 6vh; text-align: right; transform: translateX(calc((1 - var(--end, 0)) * 70px)); }

@media (max-width: 760px) {
  .journey { height: 505svh; }
  .opening { font-size: 19vw; bottom: 7vh; letter-spacing: -.07em; }
  .scroll-hint { right: 22px; bottom: 2.2vh; font-size: 13px; }
  .statement { padding: 0 22px 9vh; display: block; }
  .statement p { font-size: 9.2vw; margin-top: 42vh; }
  .statement h1 { margin-top: 6vh; font-size: 8vw; text-align: right; }
  .manifesto p { max-width: 90vw; font-size: 5.8vw; line-height: 1.28; }
  .manifesto p:first-child { left: 5vw; top: 13vh; }
  .manifesto p:last-child { right: 5vw; bottom: 10vh; }
}
@media (max-width: 480px) {
  .statement { padding-inline: 18px; }
  .manifesto p { white-space: normal; max-width: 92vw; }
}
@media (prefers-reduced-motion: reduce) {
  .journey { height: 190svh; }
}