* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: #f1f0f1;
  width: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- back nav ---------- */

/* Taken out of normal flow so it floats over the hero instead of pushing
   it down - the first section's phone needs to start flush at the very
   top of the screen. */
.back-nav {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 20;
  margin: 0;
}

/* ---------- hero / parallax stage ---------- */

/* The wrapper is one viewport (for the stage itself) plus extra room for
   the entrance to play out and dwell while the stage stays pinned in
   place, before the pin releases and it scrolls away with the page. */
.hero-wrapper {
  position: relative;
  height: 130vh;
  background: #f1f0f1;
}

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #f1f0f1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.canvas {
  position: relative;
  width: min(65vw, 620px);
  aspect-ratio: 2853 / 2777;
  margin-top: 0;
}

.canvas--section2 {
  aspect-ratio: 3097 / 2777;
}

.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
}

/* Paint order verified against the flattened reference artwork: the
   manifest's z_index (0->7) turned out to run top->bottom, the opposite
   of CSS stacking order, so it's reversed here (phone sits furthest back,
   lines furthest front). */
#layer-phone  { z-index: 0; }
#layer-quote2 { z-index: 1; }
#layer-quote1 { z-index: 2; }
#layer-title  { z-index: 3; }
#layer-bubble { z-index: 4; }
#layer-blob2  { z-index: 5; }
#layer-blob1  { z-index: 6; }
#layer-lines  { z-index: 7; }

/* Same paint-order-is-reversed rule confirmed again for section 2's
   assets (verified by flattening both orders and comparing). */
#layer-phone-2   { z-index: 0; }
#layer-quote2-2  { z-index: 1; }
#layer-quote1-2  { z-index: 2; }
#layer-title-2   { z-index: 3; }
#layer-bubble-2  { z-index: 4; }
#layer-blob-2    { z-index: 5; }
#layer-pretzel-2 { z-index: 6; }
#layer-flag-2    { z-index: 7; }
#layer-lines-2   { z-index: 8; }

/* ---------- scroll cue ---------- */

.scroll-cue {
  position: absolute;
  bottom: 5vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #f2a900;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: opacity 0.3s ease;
  z-index: 10;
}

.scroll-cue-line {
  width: 2px;
  height: 28px;
  background: #f2a900;
  border-radius: 2px;
  animation: scroll-cue-move 1.4s ease-in-out infinite;
  transform-origin: top center;
}

@keyframes scroll-cue-move {
  0%   { transform: scaleY(0.2); opacity: 0.3; }
  50%  { transform: scaleY(1);   opacity: 1; }
  100% { transform: scaleY(0.2); opacity: 0.3; }
}

/* ---------- outro ---------- */

.outro {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f0f1;
}

.outro p {
  font-weight: 800;
  font-size: clamp(20px, 4vw, 32px);
  letter-spacing: 0.08em;
  color: #2b2b2b;
}