/* House hero: the scroll-scrubbed blue-hour stage at the top of the home page. */
/* Scroll-scrubbed sticky stage in Leunam House v2:
   a quiet house at blue hour → night deepens and the lamps come on one by one → through the front door into a Night hero. Then a normal Day page. */
html { background: var(--brand-night); }
body { overflow-x: hidden; }
.track { background: var(--brand-night); }

/* Nav: the v2 glass pill, in the Night theme over the scene. */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20; pointer-events: none;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.topbar .lh-nav { max-width: 720px; margin: 0 auto; pointer-events: auto; }
@media (max-width: 560px) { .topbar .lh-nav__links { display: none; } }
/* On phones the frosted blur behind the nav is replaced by a near-solid fill: re-blurring the moving scene every frame is costly there. */
@media (max-width: 760px) {
  .topbar .lh-nav { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .topbar .lh-nav[data-theme="dark"] { background: rgba(19, 32, 54, 0.9); }
  .topbar .lh-nav[data-theme="light"] { background: rgba(255, 255, 255, 0.94); }
}

.track { position: relative; height: 480vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--brand-night); }
.layer { position: absolute; inset: 0; }
/* Two skies: early blue hour (the first frame) and full night. Scroll crossfades between them. No purple. */
.sky-early {
  background:
    radial-gradient(80% 34% at 50% 100%, rgba(242, 166, 90, 0.20), rgba(242, 166, 90, 0) 72%),
    radial-gradient(60% 40% at 50% 92%, rgba(201, 214, 232, 0.28), rgba(201, 214, 232, 0) 70%),
    linear-gradient(180deg, #14243f 0%, #22395d 34%, #3c5881 62%, #6e87ab 84%, #a4b2c6 100%);
}
.sky {
  opacity: 0;
  background:
    radial-gradient(70% 26% at 50% 100%, rgba(242, 166, 90, 0.14), rgba(242, 166, 90, 0) 70%),
    linear-gradient(180deg, var(--brand-night) 0%, var(--brand-midnight) 36%, #1d3456 64%, #3f5a82 86%, #6c809f 100%);
}
#house { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* non-scaling-stroke keeps every line 1px on screen at any zoom without recalculating it each frame */
#house .ln { stroke: rgba(7, 13, 24, 0.32); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
#house .ln.fine { stroke: rgba(7, 13, 24, 0.22); stroke-width: 0.6px; }

/* Film grain over the whole stage, getting a little heavier as night falls. */
.stage.lh-grain::after { opacity: var(--grain-o, 0.24); z-index: 6; will-change: opacity; }

.above {
  position: absolute; left: 0; right: 0; top: 15%;
  display: grid; justify-items: center; gap: var(--space-4); text-align: center;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  pointer-events: none;
}
/* The wordmark: the v2 logo at display size. It starts dim and comes to light with the windows. */
.wordmark {
  margin: 0; display: inline-flex; align-items: center; gap: 0.28em;
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.045em; line-height: 1;
  font-size: clamp(2.6rem, 8.4vw, 7.25rem); white-space: nowrap;
  color: rgba(245, 247, 250, 0.4);
}
.wordmark .wm-house { font-weight: 400; }
.wordmark .wm-window {
  width: 0.56em; height: 0.72em; flex: none; box-sizing: border-box;
  border-radius: 0.09em 0.09em 0.03em 0.03em; border: 1.5px solid rgba(245, 247, 250, 0.4);
  transform: translateY(-0.03em);
}
/* Two copies of the wordmark: dim, and fully lit with its glow. Scrolling crossfades the lit copy,
   which is far cheaper than animating text-shadow and box-shadow every frame. */
.wm-stack { display: grid; }
.wm-stack > .wordmark { grid-area: 1 / 1; }
.wordmark--lit { color: var(--brand-frost); text-shadow: 0 0 40px rgba(242, 166, 90, 0.3); opacity: 0; will-change: opacity; }
.wordmark--lit .wm-window { border-color: transparent; }
.wm-window { position: relative; }
.wm-lamp { position: absolute; inset: -1.5px; border-radius: inherit; background: var(--brand-lamp); box-shadow: 0 0 36px rgba(242, 166, 90, 0.7); opacity: 0; will-change: opacity; }
.above { will-change: opacity, transform, filter; }
.tag { margin: 0; font: 500 12px/16px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(201, 214, 232, 0.8); }

/* Load: the scene settles in instead of drawing itself. Fill mode is "backwards" so that once the
   animation ends it lets go, and the scroll-driven opacity, blur and transform take over. */
.intro #house, .intro .above { animation: settle 1400ms cubic-bezier(.2, .7, .2, 1) backwards; }
.intro .above { animation-delay: 200ms; }
@keyframes settle { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* A soft-focus stand-in for the open doorway: the house crossfades into it at the threshold. */
.soften { opacity: 0; visibility: hidden; pointer-events: none; will-change: opacity;
  background:
    linear-gradient(90deg, rgba(10, 18, 32, 0.9) 0%, rgba(10, 18, 32, 0.55) 7%, rgba(10, 18, 32, 0) 17%),
    radial-gradient(70% 80% at 52% 40%, #fbe6c6 0%, #f1c896 55%, #d6a06a 100%); }
.flash { opacity: 0; visibility: hidden; will-change: opacity; pointer-events: none; background: radial-gradient(60% 60% at 50% 55%, #fff1dc 0%, rgba(247, 187, 114, 0.9) 35%, rgba(242, 166, 90, 0) 80%); }
.room {
  opacity: 0; visibility: hidden; pointer-events: none; will-change: opacity;
  background:
    radial-gradient(55% 50% at 50% 0%, rgba(242, 166, 90, 0.34) 0%, rgba(242, 166, 90, 0.10) 45%, rgba(242, 166, 90, 0) 72%),
    radial-gradient(70% 60% at 12% 100%, rgba(44, 74, 120, 0.55) 0%, rgba(44, 74, 120, 0) 70%),
    linear-gradient(180deg, var(--brand-midnight) 0%, var(--brand-night) 100%);
  display: grid; place-items: center;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.hero { will-change: opacity, transform, filter; max-width: 880px; display: grid; justify-items: center; gap: var(--space-6); text-align: center; }
.hero h1 {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.75rem, 8vw, 88px); line-height: 0.96; letter-spacing: -0.05em;
  text-wrap: balance; color: var(--ink);
}
.lede { margin: 0; max-width: 34rem; font-size: 19px; line-height: 30px; color: var(--ink-muted); text-wrap: pretty; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-2); }

.hint {
  position: absolute; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 7;
  display: grid; justify-items: center; gap: var(--space-2);
  font: 500 11px/16px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(237, 241, 247, 0.75);
  transition: opacity 400ms ease-out; pointer-events: none; white-space: nowrap;
}
.hint svg { animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(5px); } }
.bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 7; background: rgba(237, 241, 247, 0.08); }
.bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.skip {
  position: absolute; z-index: 7;
  right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  font: 500 11px/16px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  background: transparent; border: 0; cursor: pointer; color: rgba(237, 241, 247, 0.7); padding: var(--space-2);
}
.skip:focus-visible { outline: 2px solid var(--brand-lamp); outline-offset: 2px; border-radius: var(--radius-sm); }


.static .track { height: auto; }
.static .stage { position: relative; height: 100vh; height: 100svh; }
@media (prefers-reduced-motion: reduce) { .hint svg { animation: none; } }