:root {
  --background: #06101B;
  --text: #FAFCFD;
  --muted: #A4B8C9;
  --accent: #FE8621;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* The art is 3:2. The stage covers the viewport and keeps the hook (65% across) in view. */
  --stage-w: max(100vw, 150svh);
  --stage-x: 0.62;
}

* { box-sizing: border-box; }

html, body {
  min-height: 100%;
  margin: 0;
  background: var(--background);
}

body {
  overflow-x: hidden;
  color: var(--text);
  font-family: var(--font);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Art: two stages with identical geometry and drift, the background plate under the shade and the hook above it,
   so the shade darkens the scene behind the text but never dulls the hook. */
.stage {
  position: fixed;
  z-index: 0;
  width: var(--stage-w);
  height: calc(var(--stage-w) / 1.5);
  left: calc((100vw - var(--stage-w)) * var(--stage-x));
  top: calc((100svh - var(--stage-w) / 1.5) * 0.5);
  pointer-events: none;
}

.stage--hook { z-index: 2; }

.drift {
  position: absolute;
  inset: 0;
  animation: drift 16s ease-in-out infinite alternate;
}

.layer {
  position: absolute;
  inset: 0;
}

.layer img {
  display: block;
  width: 100%;
  height: 100%;
}

/* The hook hangs from the top edge of its line (65.1% across) and sways around that point. */
.hook {
  transform-origin: 65.1% 0;
  animation: sway 7.5s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 12px rgba(254, 134, 33, 0.38));
}

.shade {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(6, 16, 27, 0.97) 0%, rgba(6, 16, 27, 0.86) 24%, rgba(6, 16, 27, 0.34) 52%, rgba(6, 16, 27, 0.04) 100%);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: url("assets/grain.png");
  mix-blend-mode: overlay;
  opacity: 0.32;
  animation: grain 0.9s steps(6) infinite;
}

.splash {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: clamp(2rem, 5vw, 5rem);
}

.splash__content {
  width: min(40rem, 46vw);
  margin-bottom: 1.5rem;
}

.splash__logo {
  display: block;
  width: clamp(11rem, 17vw, 16rem);
  max-width: 100%;
  height: auto;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

h1 {
  margin: 0;
  font-size: clamp(2.4rem, 4.6vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  text-wrap: balance;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.42);
}

.footer {
  position: fixed;
  z-index: 3;
  right: clamp(1.25rem, 4vw, 5rem);
  bottom: clamp(1.1rem, 3vw, 2rem);
  left: clamp(1.25rem, 4vw, 5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.footer p { margin: 0; }

.footer a {
  color: var(--muted);
  text-decoration-color: rgba(164, 184, 201, 0.48);
  text-underline-offset: 0.22em;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.footer a:hover {
  color: var(--text);
  text-decoration-color: var(--accent);
}

.footer a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

@keyframes drift {
  from { transform: scale(1.02); }
  to { transform: scale(1.035) translate(-6px, -4px); }
}

@keyframes sway {
  from { transform: rotate(-1.2deg); }
  to { transform: rotate(1.2deg); }
}

@keyframes grain {
  0% { background-position: 0 0; }
  33% { background-position: -37px 21px; }
  66% { background-position: 19px -29px; }
  100% { background-position: -11px 13px; }
}

@media (max-width: 700px) {
  /* Shift the art right so the hook's line runs clear of the headline. */
  :root { --stage-x: 0.6; }

  .stage { top: auto; bottom: 0; }

  .shade {
    background: linear-gradient(180deg, rgba(6, 16, 27, 0.98) 0%, rgba(6, 16, 27, 0.9) 30%, rgba(6, 16, 27, 0.35) 55%, rgba(6, 16, 27, 0.08) 100%);
  }

  .splash {
    align-items: flex-start;
    padding: 2rem 1.25rem 8rem;
  }

  .splash__content {
    width: 100%;
    max-width: 22rem;
    margin: 0;
  }

  .splash__logo {
    width: min(13rem, 58vw);
    margin-bottom: 1.7rem;
  }

  h1 {
    font-size: clamp(2.5rem, 12.5vw, 3.4rem);
    line-height: 0.98;
  }

  .footer {
    right: 1.25rem;
    bottom: 1.15rem;
    left: 1.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
}

/* 404 page (404.html, owner session 12: concept 2, "Nothing biting here"). Same art, an empty hook. */
.splash__code {
  margin: 0 0 0.9rem;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.splash__lead {
  max-width: 26rem;
  margin: 1.1rem 0 1.8rem;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.6;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

.splash__home {
  display: inline-block;
  padding: 0.8rem 1.25rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), #ffd6a8);
  color: #1a0d02;
  font-weight: 800;
  text-decoration: none;
}

.splash__home:hover { filter: brightness(1.06); }

.splash__home:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

@media (max-width: 700px) {
  /* Keep the 404 text left of the hook's line. */
  .splash__lead { max-width: 15.5rem; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .drift, .hook, .grain { animation: none; }
  .footer a { transition: none; }
}

/* Pre-launch splash (D-60 item 8): one of the home page's hero pictures, labels removed, picked per visit by
   hero-pick.js (kitchen without it); phones get the portrait version. Each figure keeps its picture's exact shape so
   the step veils (the home page's stencils, scripts/hero-stencils.mjs) sit on the path; the veils lift in order once
   hero-motion.js adds html.hero-play. Scoped to body.heroes so the 404 page keeps its hook art. */
.heroes .scenes {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.heroes .scenes > * { animation: drift 16s ease-in-out infinite alternate; }

.heroes .scene {
  --w: max(100vw, calc(100svh * 1672 / 941));
  display: none;
  position: absolute;
  left: calc((100vw - var(--w)) * 0.3);
  top: calc((100svh - var(--w) * 941 / 1672) * 0.5);
  width: var(--w);
  aspect-ratio: 1672 / 941;
  margin: 0;
}

html:not([data-hero]) .heroes .scene[data-scene="kitchen"],
html[data-hero="kitchen"] .heroes .scene[data-scene="kitchen"],
html[data-hero="armchair"] .heroes .scene[data-scene="armchair"],
html[data-hero="young"] .heroes .scene[data-scene="young"],
html[data-hero="senior"] .heroes .scene[data-scene="senior"],
html[data-hero="senior-above"] .heroes .scene[data-scene="senior-above"],
html[data-hero="finance"] .heroes .scene[data-scene="finance"],
html[data-hero="dispatch"] .heroes .scene[data-scene="dispatch"],
html[data-hero="dispatch-b"] .heroes .scene[data-scene="dispatch-b"] { display: block; }

.heroes .scene picture,
.heroes .scene img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Step veils: a dimming backdrop filter cut to each step's stencil hides that step until it lifts. */
.heroes .veils { display: none; }
html.hero-anim .heroes .veils.wide { display: block; }
.heroes .veils i {
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: brightness(0.16) saturate(0.35);
  backdrop-filter: brightness(0.16) saturate(0.35);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.heroes .veils.wide i { -webkit-mask-size: 100% 500%; mask-size: 100% 500%; }
.heroes .veils.phone i { -webkit-mask-size: 100% 300%; mask-size: 100% 300%; }
.heroes .veils.wide .v1 { -webkit-mask-position: 0 0; mask-position: 0 0; }
.heroes .veils.wide .v2 { -webkit-mask-position: 0 25%; mask-position: 0 25%; }
.heroes .veils.wide .v3 { -webkit-mask-position: 0 50%; mask-position: 0 50%; }
.heroes .veils.wide .v4 { -webkit-mask-position: 0 75%; mask-position: 0 75%; }
.heroes .veils.wide .v5 { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
.heroes .veils.phone .v1 { -webkit-mask-position: 0 0; mask-position: 0 0; }
.heroes .veils.phone .v2 { -webkit-mask-position: 0 50%; mask-position: 0 50%; }
.heroes .veils.phone .v3 { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
.heroes .scene[data-scene="kitchen"] .veils.wide i { -webkit-mask-image: url("assets/hero-steps/hero-kitchen-wide.png"); mask-image: url("assets/hero-steps/hero-kitchen-wide.png"); }
.heroes .scene[data-scene="kitchen"] .veils.phone i { -webkit-mask-image: url("assets/hero-steps/hero-kitchen-phone.png"); mask-image: url("assets/hero-steps/hero-kitchen-phone.png"); }
.heroes .scene[data-scene="armchair"] .veils.wide i { -webkit-mask-image: url("assets/hero-steps/hero-armchair-wide.png"); mask-image: url("assets/hero-steps/hero-armchair-wide.png"); }
.heroes .scene[data-scene="armchair"] .veils.phone i { -webkit-mask-image: url("assets/hero-steps/hero-armchair-phone.png"); mask-image: url("assets/hero-steps/hero-armchair-phone.png"); }
.heroes .scene[data-scene="young"] .veils.wide i { -webkit-mask-image: url("assets/hero-steps/hero-young-wide.png"); mask-image: url("assets/hero-steps/hero-young-wide.png"); }
.heroes .scene[data-scene="young"] .veils.phone i { -webkit-mask-image: url("assets/hero-steps/hero-young-phone.png"); mask-image: url("assets/hero-steps/hero-young-phone.png"); }
.heroes .scene[data-scene="senior"] .veils.wide i { -webkit-mask-image: url("assets/hero-steps/hero-senior-wide.png"); mask-image: url("assets/hero-steps/hero-senior-wide.png"); }
.heroes .scene[data-scene="senior"] .veils.phone i { -webkit-mask-image: url("assets/hero-steps/hero-senior-phone.png"); mask-image: url("assets/hero-steps/hero-senior-phone.png"); }
.heroes .scene[data-scene="senior-above"] .veils.wide i { -webkit-mask-image: url("assets/hero-steps/hero-senior-above-wide.png"); mask-image: url("assets/hero-steps/hero-senior-above-wide.png"); }
.heroes .scene[data-scene="senior-above"] .veils.phone i { -webkit-mask-image: url("assets/hero-steps/hero-senior-phone.png"); mask-image: url("assets/hero-steps/hero-senior-phone.png"); }
.heroes .scene[data-scene="finance"] .veils.wide i { -webkit-mask-image: url("assets/hero-steps/hero-finance-wide.png"); mask-image: url("assets/hero-steps/hero-finance-wide.png"); }
.heroes .scene[data-scene="finance"] .veils.phone i { -webkit-mask-image: url("assets/hero-steps/hero-finance-phone.png"); mask-image: url("assets/hero-steps/hero-finance-phone.png"); }
.heroes .scene[data-scene="dispatch"] .veils.wide i { -webkit-mask-image: url("assets/hero-steps/hero-dispatch-wide.png"); mask-image: url("assets/hero-steps/hero-dispatch-wide.png"); }
.heroes .scene[data-scene="dispatch"] .veils.phone i { -webkit-mask-image: url("assets/hero-steps/hero-dispatch-phone.png"); mask-image: url("assets/hero-steps/hero-dispatch-phone.png"); }
.heroes .scene[data-scene="dispatch-b"] .veils.wide i { -webkit-mask-image: url("assets/hero-steps/hero-dispatch-b-wide.png"); mask-image: url("assets/hero-steps/hero-dispatch-b-wide.png"); }
.heroes .scene[data-scene="dispatch-b"] .veils.phone i { -webkit-mask-image: url("assets/hero-steps/hero-dispatch-phone.png"); mask-image: url("assets/hero-steps/hero-dispatch-phone.png"); }
.heroes .veils .v1 { --d: 0.6s; }
.heroes .veils .v2 { --d: 1.5s; }
.heroes .veils .v3 { --d: 2.4s; }
.heroes .veils .v4 { --d: 3.3s; }
.heroes .veils .v5 { --d: 4.2s; }
html.hero-play .heroes .veils i { animation: veil-off 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; animation-delay: var(--d); }

@keyframes veil-off { to { opacity: 0; } }

/* Keep the headline clear of the first step in each picture. */
.heroes .splash__content { width: min(30rem, 30vw); }
.heroes h1 { font-size: clamp(2.4rem, 4vw, 4.2rem); }

.splash__tease {
  margin: 1.2rem 0 0;
  color: var(--accent);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

.heroes .shade {
  background: linear-gradient(90deg, rgba(6, 16, 27, 0.94) 0%, rgba(6, 16, 27, 0.78) 26%, rgba(6, 16, 27, 0.2) 56%, rgba(6, 16, 27, 0) 100%);
}

@media (max-width: 760px) {
  .heroes .scene {
    --w: max(100vw, calc(100svh * 941 / 1672));
    left: calc((100vw - var(--w)) * 0.5);
    top: calc(100svh - var(--w) * 1672 / 941);
    aspect-ratio: 941 / 1672;
  }
  html.hero-anim .heroes .veils.wide { display: none; }
  html.hero-anim .heroes .veils.phone { display: block; }
  .heroes .splash__content { width: 100%; }
  .heroes h1 { font-size: clamp(2.5rem, 12.5vw, 3.4rem); }
  .heroes .shade {
    background: linear-gradient(180deg, rgba(6, 16, 27, 0.96) 0%, rgba(6, 16, 27, 0.82) 28%, rgba(6, 16, 27, 0.2) 52%, rgba(6, 16, 27, 0) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .heroes .scenes > * { animation: none; }
  html.hero-anim .heroes .veils { display: none !important; }
}