/* Decadia landing page. Era lives on ground, chrome and display type — never on body copy. */

@font-face { font-family: "Righteous";   src: url("/fonts/Righteous-Regular.ttf") format("truetype");   font-display: swap; }
@font-face { font-family: "Bowlby One";  src: url("/fonts/BowlbyOne-Regular.ttf") format("truetype");   font-display: swap; }
@font-face { font-family: "Audiowide";   src: url("/fonts/Audiowide-Regular.ttf") format("truetype");   font-display: swap; }
@font-face { font-family: "Bungee";      src: url("/fonts/Bungee-Regular.ttf") format("truetype");      font-display: swap; }
@font-face { font-family: "Orbitron";    src: url("/fonts/Orbitron-Regular.ttf") format("truetype");    font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("/fonts/ChakraPetch-Bold.ttf") format("truetype");  font-display: swap; font-weight: 700; }

:root {
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --measure: 36rem;

  /* Fallbacks for chrome that sits OUTSIDE every [data-era] — the nav, and anything added
     later. Without them var(--secondary) is invalid-at-computed-value-time there, and an
     invalid outline COLOUR resets outline-style to none: the browser's own focus ring
     vanishes and a keyboard user cannot see where they are. The values are the 1980s era's,
     because the nav sits over the 1980s hero. */
  --primary:#7CE7F4; --secondary:#FF5FD2; --panel:#140B2C; --border:#3D2A6B;
  --ink:#FFFFFF; --muted:#BFB6D6; --faint:#9A90B8; --on-accent:#120726;
  --display: var(--body); --figures: var(--body); --glow: 0;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 400 18px/1.6 var(--body); background: #12101a; color: #fff; }
img { max-width: 100%; height: auto; display: block; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: #fff; color: #000; padding: 8px 12px; border-radius: 6px; z-index: 10; }

/* ---- Eras: the app's EraTheme pigments, verbatim ------------------------------------ */
[data-era="1960s"] {
  --primary:#9C2915; --secondary:#0A555E; --top:#FBFBF8; --mid:#F5F5F0; --bottom:#EDEEE8;
  --panel:#FFFFFF; --border:#CBCCC3; --ink:#15181A; --muted:#3B4145; --faint:#5E666A; --on-accent:#FFFFFF;
  --display: "Righteous", var(--body); --figures: var(--display); --glow: 0;
}
[data-era="1970s"] {
  --primary:#6B240A; --secondary:#4A3008; --top:#EAD6AB; --mid:#E3CC99; --bottom:#DBC087;
  --panel:#F7EAD0; --border:#BE9F6C; --ink:#1F1406; --muted:#45331A; --faint:#6E5836; --on-accent:#FDF5E6;
  --display: "Bowlby One", "Cooper Black", "Arial Black", var(--body); --figures: var(--display); --glow: 0;
  --next-top:#052924;
}
[data-era="1980s"] {
  --primary:#7CE7F4; --secondary:#FF5FD2; --top:#1D0F3E; --mid:#2C1054; --bottom:#3C0E4C;
  --panel:#140B2C; --border:#3D2A6B; --ink:#FFFFFF; --muted:#BFB6D6; --faint:#9A90B8; --on-accent:#120726;
  --display: "Audiowide", "Eurostile", var(--body); --figures: "Chakra Petch", var(--body); --glow: 1;
  --next-top:#0A2A52;
}
[data-era="1990s"] {
  --primary:#3FE6CA; --secondary:#FF74B8; --top:#052924; --mid:#073630; --bottom:#082634;
  --panel:#031F1C; --border:#18564E; --ink:#FFFFFF; --muted:#B6D6CF; --faint:#8FB5AD; --on-accent:#04211E;
  --display: "Bungee", "Impact", var(--body); --figures: var(--display); --glow: 1;
  --next-top:#FBFBF8;
}
[data-era="2000s"] {
  --primary:#7ED8F7; --secondary:#E6F3FF; --top:#0A2A52; --mid:#0E3868; --bottom:#082444;
  --panel:#07213F; --border:#2A5B92; --ink:#FFFFFF; --muted:#C2D8EE; --faint:#9BB8D6; --on-accent:#062038;
  --display: "Orbitron", "Eurostile", var(--body); --figures: "Chakra Petch", var(--body); --glow: 1;
  --next-top:#EAD6AB;
}

/* ---- Sections ------------------------------------------------------------------------ */
.era {
  position: relative; isolation: isolate; overflow: clip;
  min-height: 100svh; display: grid; align-content: center;
  padding: clamp(56px, 10vh, 120px) 20px;
  color: var(--ink);
  background: linear-gradient(180deg, var(--top), var(--mid) 55%, var(--bottom));
}
.era__inner { max-width: 62rem; margin: 0 auto; display: grid; gap: 32px; align-items: center;
  grid-template-columns: 1fr; }
@media (min-width: 820px) { .era__inner { grid-template-columns: 1.1fr 0.9fr; gap: 48px; } .era--flip .era__inner > .frame { order: -1; } }

/* Textures, as pseudo-elements so they never touch the text layer. */
.era::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
[data-era="1960s"]::before {
  background-image: radial-gradient(circle at 1px 1px, rgba(21,24,26,.11) 1.1px, transparent 1.6px);
  background-size: 7px 7px; opacity: .9;
}
[data-era="1970s"]::before {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .18 0'/></filter><rect width='160' height='160' filter='url(%23g)'/></svg>");
  opacity: .55; mix-blend-mode: multiply;
}
[data-era="1980s"]::before {
  background-image: repeating-linear-gradient(180deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  opacity: .5;
}
[data-era="1990s"]::before {
  /* The tracking band is capped at .04 alpha. Measured over the ground plus the scanline at
     the band's 40% peak, the 13px .eyebrow in --secondary (#FF74B8) scores 4.61:1 — over the
     4.5 AA floor. At the .10 it started with it scored 3.99, and whether the section passed
     depended on viewport height, which is worse than failing outright. */
  background-image: repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, transparent 38%, rgba(63,230,202,.04) 40%, transparent 43%);
}
[data-era="2000s"]::before {
  background-image: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 28%);
}

/* The ground crossfade, the spec's first kind of motion: each section dissolves into the ground
   of the one below instead of butting against it. Its height is the section's own bottom padding
   to the pixel, so it can only ever cover empty ground — no text sits over it, and the measured
   contrast of every era stands unchanged. The last section has no successor and no fade.
   The 0.8 is the margin: at full padding height the figure captions land exactly on the fade's
   top edge, and anything that grows a figure later would push text onto the gradient. */
.era::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
  height: calc(clamp(56px, 10vh, 120px) * 0.8); pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--next-top, transparent));
}
.era:last-of-type::after { content: none; }

/* ---- Type --------------------------------------------------------------------------- */
.wordmark {
  font-family: var(--display); font-size: clamp(40px, 9vw, 72px); line-height: 1; letter-spacing: .06em;
  text-transform: uppercase; color: var(--primary); margin: 0;
  text-shadow: 0 0 calc(var(--glow) * 18px) color-mix(in srgb, var(--primary) 55%, transparent);
}
[data-era="1990s"] .wordmark { text-shadow: 2px 0 0 var(--secondary), -2px 0 0 var(--primary); }
.era p.eyebrow { font-family: var(--display); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--secondary); margin: 0 0 12px; }
.era h2 { font-family: var(--display); font-size: clamp(28px, 5.6vw, 44px); line-height: 1.08; letter-spacing: .02em; text-transform: uppercase; color: var(--primary); margin: 0 0 14px; text-wrap: balance; }
.era p { max-width: var(--measure); margin: 0 0 14px; color: var(--ink); }
.era p.muted { color: var(--muted); }
.figures { font-family: var(--figures); font-variant-numeric: tabular-nums; }
.era p.price { font-family: var(--figures); font-size: clamp(26px, 5vw, 36px); color: var(--primary); margin: 8px 0 4px; }

/* ---- The frame: a CSS bezel, not a device image --------------------------------------- */
.frame { margin: 0; justify-self: center; width: min(100%, 340px); }
.frame__bezel {
  border-radius: 44px; padding: 12px; background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.6), 0 0 0 calc(var(--glow) * 1px) color-mix(in srgb, var(--primary) 35%, transparent);
}
.frame img { border-radius: 34px; width: 100%; }
.frame figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); text-align: center; }

/* The 1970s is the one era the bezel's drop shadow hurts: it darkens the cream ground under the
   caption to 3.98:1 at the worst pixel. --ink instead of --muted clears it with room to spare. */
[data-era="1970s"] .frame figcaption { color: var(--ink); }

/* ---- Calls to action ------------------------------------------------------------------ */
.cta { display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; border-radius: 999px;
  font-family: var(--display); font-size: 16px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-accent); background: linear-gradient(90deg, var(--primary), var(--secondary));
  text-decoration: none; margin-top: 8px; }
.cta:focus-visible, .nav a:focus-visible { outline: 3px solid var(--secondary); outline-offset: 3px; }
.pill { display: inline-block; padding: 12px 20px; border-radius: 999px; border: 1.5px solid var(--border);
  color: var(--muted); font-size: 15px; letter-spacing: .04em; margin-top: 8px; }
.badge { display: inline-block; margin-top: 8px; }
.badge img { height: 54px; width: auto; }
[hidden] { display: none !important; }

/* ---- Header / footer ------------------------------------------------------------------ */
.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; justify-content: flex-end; gap: 22px; padding: 18px 22px; }
.nav a { color: var(--muted); text-decoration: none; font-size: 15px; }
.nav a:hover { color: var(--ink); text-decoration: underline; }
.foot { background: #12101a; color: #a9a2bb; padding: 36px 20px 56px; font-size: 15px; }
.foot__inner { max-width: 62rem; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; }
.foot a { color: #7ce7f4; }

/* ---- Motion: scroll-driven, off under reduced motion ---------------------------------- */
/* Where scroll-driven animations exist, the stylesheet does the reveal alone. Where they do
   not, landing.js adds .is-in — so the hidden start state is confined to THAT branch and is
   withdrawn again when scripting is off. A browser without animation-timeline that never
   runs the script must still show its frames. `scripting: none` covers JS switched off; a script
   that 404s is caught before deploy by the reference check in tools/site/check.sh instead. */
@supports (animation-timeline: view()) {
  .frame { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

  /* The hero frame is already on screen at load, so its `entry` range never completes and it
     would sit at 76% opacity for a visitor who never scrolls. Nothing to reveal — it is the
     first thing seen. */
  .era:first-of-type .frame { animation: none; }
}
@supports not (animation-timeline: view()) {
  .frame { opacity: 0; transform: translateY(24px); }
  .frame.is-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }

  /* Same reason, and one more: held at opacity 0 until the deferred script runs, the hero
     frame turns an already-loaded image into a second, much later LCP. */
  .era:first-of-type .frame { opacity: 1; transform: none; }
  @media (scripting: none) { .frame { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .frame, .frame.is-in { opacity: 1; transform: none; transition: none; animation: none; }
}