/* ===== Landing door: interactive wall + scroll-driven ANN logo morph ===== */
/* Scroll anchoring tries to preserve visual position when layout changes
   above the viewport — actively harmful here, since tick() toggles
   .lp-wall between fixed/absolute every scroll frame based on scroll
   position itself. That self-referential loop was fighting our own
   window.scrollTo/wheel input: the browser kept "correcting" scrollY out
   from under us mid-scroll, landing somewhere we never asked for and
   leaving a stale paint behind at the old position. */
html{overflow-anchor:none}

.lp-scroll-container{position:relative;height:380vh}
/* "Manual sticky" via JS-toggled position:fixed/absolute (see tick() in
   app.js), not CSS position:sticky. Native sticky here triggered what looks
   like a Chrome paint-invalidation bug: after scrolling, the top portion of
   this element's background stopped painting (showed the page background
   through it) even though computed styles/layout were all provably
   correct. Driving the fixed/absolute switch off the same scroll-progress
   math already used for the logo/wormhole morph removes any ambiguity
   between "what native sticky decides" and "what the morph math assumes",
   not just the paint glitch. */
/* left+right, not left+width:100% — width as a percentage on a fixed
   element resolved against an inflated containing-block width on mobile
   (see the overflow:clip note in tokens.css), making this ~100px wider
   than the real viewport on first load. Pinning both edges directly
   sidesteps that percentage resolution entirely. */
.lp-wall{position:fixed;top:0;left:0;right:0;height:100svh;min-height:520px;overflow:hidden}
.lp-layer{position:absolute;inset:0;background-size:cover;background-position:center;display:grid;place-items:center}
.lp-base{background-image:url(../assets/background.png);background-size:340px auto;background-repeat:repeat;background-position:center}
/* Two copies of the reveal content, not one:
   .lp-top-halo (blurred, behind) draws the soft edge + comet tail;
   .lp-top (sharp, in front) draws the crisp circle you actually read.
   Both are clipped with an SVG <clipPath> (a union of several circles —
   the CSS clip-path:circle() shorthand only ever describes one circle,
   so it can't express "main circle + a few trailing echoes" by itself).
   clipPathUnits="userSpaceOnUse" keeps the circle coordinates in the same
   wall-relative px the cursor math already uses. No CSS transition on
   either — the reveal position/radius is eased in JS every animation
   frame instead (see followLoop() in app.js); a CSS transition
   retriggering on every raw pointermove event caused visible lag. */
.lp-top-halo{background-image:url(../assets/chocolate-factory.jpg);clip-path:url(#lp-clip-halo);filter:blur(9px)}
.lp-top{background-image:url(../assets/chocolate-factory.jpg);clip-path:url(#lp-clip-sharp)}
.lp-word{font-family:var(--font-lettering);font-weight:800;font-size:clamp(32px,7vw,80px);line-height:.98;letter-spacing:.02em;text-align:center;text-transform:uppercase;user-select:none;pointer-events:none}
.lp-word-light{color:var(--paper-2)}
.lp-word-dark{color:var(--ink)}

.lp-red-fill{position:absolute;inset:0;background:var(--red);opacity:0;z-index:3}

.lp-cue-stack{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:14px;z-index:4}
/* Sized once to a modest capped width (see updateMaxWidth() in app.js) and
   grown purely via transform:scale() from there. The default
   transform-origin (50% 50%, the box's own center) would scale it around a
   point far from where the small resting logo actually sits above
   "Scroll" — so at rest the shrunk-down logo would appear to float above
   the viewport instead of sitting on the label. Anchoring to 50% 100%
   (bottom-center) pins that one point — exactly where
   bottom:calc(100% + 14px) places it — fixed for every scale value, so the
   logo genuinely grows in place from its resting spot. Taken out of the
   flex flow (absolute, centered on its own former slot) so growing it
   doesn't shove the scroll label around. */
.lp-logo-svg-wrap{position:absolute;left:50%;bottom:calc(100% + 14px);transform:translateX(-50%);transform-origin:50% 100%;width:56px;height:auto}
.lp-logo-svg-wrap svg{display:block;width:100%;height:auto;overflow:visible}
.lp-logo-outline path{fill:none;stroke:#fff;stroke-width:44}
.lp-logo-filled path{fill:var(--red)}
.lp-logo-filled{position:absolute;inset:0}
.lp-scroll-label{font-size:var(--text-lg);will-change:opacity}

/* Scrolling a fixed-position, JS-driven morph section on a phone is
   awkward (momentum scrolling fights the manual-sticky/lock logic, and
   there's no mouse for the wall's hover reveal anyway) — below 720px this
   swaps the scroll prompt for a button that plays the same sequence via a
   smooth programmatic scroll instead of asking for a real scroll gesture. */
.lp-enter-btn{display:none;appearance:none;-webkit-appearance:none;cursor:pointer;font-size:var(--text-lg)}
@media (max-width:720px){
  .lp-scroll-label{display:none}
  .lp-enter-btn{display:inline-flex}
}

.lp-wormhole{position:absolute;inset:0;display:grid;place-items:center;opacity:0;pointer-events:none;z-index:5}
.lp-wormhole .speech-bubble{position:relative;z-index:1;transform:scale(1.4)}

/* A burst of streaks radiating from the wormhole's center, right before the
   handoff to home — the "sucked through the wormhole at warp speed" beat.
   Each streak is a thin sliver sitting at dead center, pre-rotated to its
   own angle (--angle, set per-element in JS); the keyframe below only ever
   moves it along its own local Y-axis, so the rotation is what actually
   fans them out in every direction. Built from real elements + a CSS
   animation rather than a canvas/WebGL starfield to stay consistent with
   the rest of this hand-drawn, comic-styled site — the streaks read as
   flung linework, not a sci-fi render. */
.lp-hyperspace{position:absolute;inset:0;overflow:hidden}
/* A quick radial flash right as the jump kicks in — the "breaking through"
   pop the streaks alone don't give — behind the streaks/bubble (they're
   both later in DOM order, which is enough with no z-index on either). */
.lp-hyperspace-flash{position:absolute;inset:0;background:radial-gradient(circle,#fff 0%,var(--butter) 30%,rgba(255,255,255,0) 70%);opacity:0}
.lp-wormhole.is-hyperspace .lp-hyperspace-flash{animation:lp-hyperspace-flash 900ms cubic-bezier(.16,.6,.24,1) both}
@keyframes lp-hyperspace-flash{
  0%{opacity:0;transform:scale(.05)}
  22%{opacity:.9;transform:scale(.5)}
  100%{opacity:0;transform:scale(2.2)}
}
.lp-hyperspace-streak{position:absolute;top:50%;left:50%;width:3px;height:14px;margin:-7px 0 0 -1.5px;border-radius:3px;background:linear-gradient(to top,rgba(255,247,230,0),var(--butter) 55%,#fff);transform:rotate(var(--angle,0deg)) translateY(-10px) scaleY(.4);opacity:0}
.lp-wormhole.is-hyperspace .lp-hyperspace-streak{animation-name:lp-hyperspace-streak;animation-timing-function:cubic-bezier(.16,.6,.24,1);animation-fill-mode:both}
@keyframes lp-hyperspace-streak{
  0%{transform:rotate(var(--angle,0deg)) translateY(-10px) scaleY(.4);opacity:0}
  10%{opacity:1}
  100%{transform:rotate(var(--angle,0deg)) translateY(-90vmax) scaleY(30);opacity:0}
}

body.landing-done #view-landing{display:none}