/* The home page. Shared brand pieces live in style.css. */

/* the 3D stage sits between the colour fields and the words */
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1s var(--ease); }
#gl.on { opacity: 1; }
section { position: relative; }
section > * { position: relative; z-index: 2; }

/* ---------- hero ---------- */
.hero { min-height: 100svh; padding: clamp(110px, 15svh, 150px) clamp(18px, 3.4vw, 44px) 60px; display: flex; align-items: flex-end; }
.hero-text { width: min(58vw, 980px); }
.hero h1 { font-size: clamp(64px, 11.2vw, 196px); margin: 0; cursor: default; }
.hero h1 .row { display: block; white-space: nowrap; }
.lede { font-size: clamp(18px, 1.5vw, 21px); max-width: 27em; margin: 26px 0 0; color: var(--ink2); text-wrap: pretty; }
.spec { margin: 30px 0 0; display: grid; grid-template-columns: auto auto; width: max-content; max-width: 100%; border: 2px solid var(--ink); font-stretch: 75%; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.spec dt, .spec dd { margin: 0; padding: 9px 14px; border-top: 2px solid var(--ink); }
.spec dt { font-weight: 700; border-right: 2px solid var(--ink); }
.spec dd { font-weight: 900; }
.spec dt:first-of-type, .spec dd:first-of-type { border-top: 0; }

/* the sticker: a round label that spins slowly */
.sticker { position: absolute; right: clamp(18px, 4vw, 64px); bottom: clamp(28px, 6svh, 70px); width: 148px; height: 148px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); text-decoration: none; z-index: 3; transition: transform .6s var(--ease); }
.sticker:hover { transform: scale(1.08) rotate(-8deg); }
.sticker .ring { position: absolute; inset: 0; animation: spin 18s linear infinite; }
.sticker .ring text { fill: currentColor; font: 800 12.5px Archivo, sans-serif; font-stretch: 75%; letter-spacing: .2em; text-transform: uppercase; }
.sticker .apple { width: 34px; height: 34px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- the band ---------- */
.band { position: relative; z-index: 3; background: var(--ink); color: var(--paper); overflow: hidden; padding: 18px 0; transform: rotate(-1.6deg); margin: 10px -3vw 0; }
.band .track { display: flex; width: max-content; animation: marq 28s linear infinite; }
.band span { font-stretch: 62%; font-weight: 900; font-size: clamp(34px, 4.4vw, 64px); text-transform: uppercase; line-height: 1; padding-right: .5em; white-space: nowrap; }
.band span i { display: inline-block; width: .55em; height: .55em; border-radius: 26%; margin: 0 .5em; vertical-align: .08em; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- chapters: colour fields with liquid edges ---------- */
/* The field is the tile's hue lifted a touch toward white, so the 3D tile of the same
   hue still stands off it. */
.chap { --field: color-mix(in srgb, var(--c) 80%, #fff); min-height: 125svh; padding: 18svh clamp(18px, 3.4vw, 44px) 16svh; background: var(--field); display: flex; flex-direction: column; justify-content: center; }
.chap .wave { position: absolute; left: 0; right: 0; top: -78px; height: 80px; width: 100%; z-index: 1; }
.chap .wave path { fill: var(--field); }
.chap .tag { align-self: flex-start; margin-bottom: 22px; padding: 7px 14px; border: 2px solid var(--ink); border-radius: 999px; font-stretch: 75%; font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.chap .big { font-size: clamp(84px, 13.5vw, 260px); margin: 0; max-width: 62vw; text-wrap: balance; }
.chap .copy { max-width: 29em; margin: clamp(22px, 3vw, 40px) 0 0; font-size: clamp(20px, 1.7vw, 25px); line-height: 1.38; font-weight: 500; text-wrap: pretty; }

/* ---------- finale ---------- */
.finale { min-height: 130svh; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding: 0 20px 10svh; }
.finale h2 { font-size: clamp(56px, 9vw, 150px); margin: 0; text-wrap: balance; }
.finale p { font-size: clamp(18px, 1.5vw, 21px); margin: 22px 0 30px; color: var(--ink2); }
.pill { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: var(--paper); padding: 17px 28px; border-radius: 999px; font-weight: 800; font-stretch: 80%; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; will-change: transform; }
.pill svg { width: 18px; height: 18px; margin-top: -3px; }

@media (max-width: 860px) {
  .hero { align-items: flex-start; padding-top: 108px; min-height: 150svh; }
  .hero-text { width: auto; }
  .hero h1 { font-size: 15vw; }
  .hero h1 .row { white-space: normal; }
  .sticker { width: 112px; height: 112px; bottom: 22px; }
  .sticker .ring text { font-size: 16.5px; }
  .chap { min-height: 115svh; justify-content: flex-end; padding-bottom: 12svh; }
  .chap .big { font-size: 17vw; max-width: none; }
}

/* hero entrance in CSS, so the headline never waits on a script */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 .ch { animation: rise 1.2s var(--ease) calc(var(--i) * 28ms + 380ms) backwards; }
  .hero .lede, .hero .spec { animation: settle 1s var(--ease) 1s backwards; }
  .sticker { animation: pop .9s var(--ease) 1.3s backwards; }
}
@keyframes rise { from { transform: translateY(60%) rotate(4deg); opacity: 0; } }
@keyframes settle { from { opacity: 0; transform: translateY(16px); } }
@keyframes pop { from { opacity: 0; transform: scale(.6) rotate(-30deg); } }

/* reduced motion: the 3D mark stays in the hero, nothing drifts or spins */
@media (prefers-reduced-motion: reduce) {
  #gl { position: absolute; height: 100svh; }
  .band .track, .sticker .ring { animation: none; }
}