/* Self-hosted fonts (latin subset), from Google Fonts. */
@font-face {
  font-family: 'Baloo Paaji 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/baloo-paaji-2-0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Baloo Paaji 2';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/baloo-paaji-2-0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jetbrains-mono-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/space-grotesk-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/space-grotesk-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/space-grotesk-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   gogin.fun — styles
   Palette, fonts and timing live in :root. Change them there.
   ========================================================= */

:root {
  /* Night scene (default) */
  --bg: #0B0D10;
  --surface: #14171C;
  --surface-2: #1C2027;
  --text: #E6E8EB;
  --muted: #8A9099;
  --line: rgba(230, 232, 235, 0.09);
  --line-strong: rgba(230, 232, 235, 0.18);
  --accent: #FFB547;            /* warm signal amber — the one accent */
  --accent-ink: #0B0D10;        /* text on accent */
  --glow: rgba(255, 181, 71, 0.10);
  --glow-2: rgba(120, 150, 255, 0.05); /* faint second glow, hover only */
  --grain-opacity: 0.06;

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1240px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --slow: 1.1s;

  color-scheme: dark;
}

/* Day scene — a deliberate alternate, warm paper and ink */
:root[data-theme="light"] {
  --bg: #EDEAE3;
  --surface: #F6F4EF;
  --surface-2: #E3DFD6;
  --text: #15181D;
  --muted: #585E67;
  --line: rgba(21, 24, 29, 0.10);
  --line-strong: rgba(21, 24, 29, 0.22);
  --accent: #B5650A;
  --accent-ink: #FFFFFF;
  --glow: rgba(181, 101, 10, 0.08);
  --glow-2: rgba(40, 60, 140, 0.04);
  --grain-opacity: 0.08;
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.booting { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color .6s var(--ease), color .6s var(--ease);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--accent); color: var(--accent-ink); }

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

.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.muted { color: var(--muted); }
.accent { color: var(--accent); font-style: normal; }
kbd {
  font-family: var(--font-mono); font-size: 10px;
  border: 1px solid var(--line-strong); border-radius: 3px;
  padding: 1px 4px; margin-left: 6px; color: var(--muted);
}

.skip {
  position: fixed; left: 12px; top: -60px; z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: 8px 14px; border-radius: 4px; font-weight: 500;
}
.skip:focus { top: 12px; }

/* ---------- atmosphere layers ---------- */
.grid-lines {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size: calc((100% - 2 * var(--gutter)) / 6) 100%;
  background-position: var(--gutter) 0;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
  opacity: .55;
  transition: opacity .6s var(--ease);
}

.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(4) infinite;
}
:root[data-theme="light"] .grain { mix-blend-mode: multiply; filter: invert(1); }
:root[data-grain="off"] .grain { display: none; }
@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -3%); }
  75%  { transform: translate(-2%, -1%); }
  100% { transform: translate(0, 0); }
}

.cursor-glow {
  position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none;
  width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%;
  background: radial-gradient(circle, var(--glow) 0%, transparent 62%);
  opacity: 0; transition: opacity .8s var(--ease);
  will-change: transform;
}
.has-pointer .cursor-glow { opacity: 1; }

/* ---------- HUD ---------- */
.hud {
  position: fixed; z-index: 40; color: var(--muted);
  font-size: 10.5px; pointer-events: none;
}
.hud-bl { left: var(--gutter); bottom: 18px; }
.hud-br { right: var(--gutter); bottom: 18px; }
#hud-scene { color: var(--text); }

.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px var(--gutter);
  background: linear-gradient(to bottom, var(--bg) 20%, transparent);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -.01em;
}
.brand-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: blip 3.2s var(--ease) infinite;
}
@keyframes blip {
  0%, 70% { box-shadow: 0 0 0 0 rgba(255,181,71,.45); }
  100%    { box-shadow: 0 0 0 10px rgba(255,181,71,0); }
}
.nav { display: flex; gap: 28px; }
.nav a { color: var(--muted); transition: color .3s; position: relative; }
.nav a:hover, .nav a.active { color: var(--text); }
.nav a.active::before {
  content: ""; position: absolute; left: -12px; top: 50%; width: 4px; height: 4px;
  border-radius: 50%; background: var(--accent); transform: translateY(-50%);
}
.top-right { display: flex; align-items: center; gap: 18px; }
.clock { font-size: 11px; font-variant-numeric: tabular-nums; }

.pill {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 7px 12px; font-size: 11px;
  transition: border-color .3s, background-color .3s;
}
.pill:hover { border-color: var(--accent); }

/* ---------- scenes ---------- */
main { position: relative; z-index: 2; }
.scene {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  padding: clamp(110px, 16vh, 180px) var(--gutter) clamp(90px, 14vh, 160px);
  border-top: 1px solid var(--line);
}
.scene:first-child { border-top: 0; }
.wrap { max-width: var(--maxw); margin: 0 auto; }
.wrap.center { text-align: center; display: flex; flex-direction: column; align-items: center; }

.corner { position: absolute; color: var(--muted); font-size: 10.5px; }
.corner span { color: var(--text); }
.corner.tl { left: var(--gutter); top: clamp(76px, 11vh, 110px); }
.corner.tr { right: var(--gutter); top: clamp(76px, 11vh, 110px); }

.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3.1rem, 9.6vw, 9.25rem);
  line-height: .92;
  letter-spacing: -.045em;
}
.display.sm { font-size: clamp(3rem, 11vw, 8.5rem); margin: 18px 0 26px; }
.h2 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.2vw, 4.4rem);
  line-height: 1;
  letter-spacing: -.035em;
  margin-bottom: 22px;
}
.lede { color: var(--muted); font-size: clamp(1.02rem, 1.4vw, 1.2rem); max-width: 34em; }
.eyebrow { color: var(--muted); margin-bottom: 26px; }
.sub-label { margin-bottom: 26px; font-size: 10.5px; }

/* ---------- hero ---------- */
.hero { display: flex; flex-direction: column; justify-content: center; }
.hero-grid { width: 100%; max-width: var(--maxw); margin: 0 auto; }
.hero-row {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 6vw, 96px);
  align-items: end; margin-top: clamp(36px, 6vh, 64px);
}
.hero .display { font-size: clamp(3rem, 8.4vw, 8.25rem); }
.line { display: block; overflow: hidden; padding-bottom: .06em; }
.line > span { display: block; white-space: nowrap; }

.cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 38px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px; border-radius: 4px;
  background: var(--text); color: var(--bg);
  font-weight: 500; font-size: 15px;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s;
}
.btn .mono { font-size: 10px; }
.btn:hover { background: var(--accent); color: var(--accent-ink); }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line-strong); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); background: transparent; }

.hero-chart { margin: 0; }
.hero-chart svg { width: 100%; height: auto; overflow: visible; }
.hero-chart figcaption { margin-top: 14px; font-size: 10px; }
.c-grid line { stroke: var(--line); stroke-width: 1; }
.c-grid .dash { stroke-dasharray: 2 5; }
.c-before, .c-after { fill: none; stroke-width: 1.5; stroke-linecap: round; }
.c-before { stroke: var(--muted); opacity: .6; }
.c-after { stroke: var(--accent); stroke-width: 2; }
.c-dot { fill: var(--accent); }
.c-label text { fill: var(--muted); font-size: 10px; letter-spacing: .08em; }
.c-label .c-after-t { fill: var(--accent); }

.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  font-size: 10.5px; display: inline-flex; gap: 8px;
}
.scroll-cue span { display: inline-block; animation: drift 2.4s var(--ease) infinite; }
@keyframes drift { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(4px); opacity: 1; } }

/* ---------- about ---------- */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 100px); }
.prose p + p { margin-top: 1.1em; }
.prose p { font-size: clamp(1rem, 1.25vw, 1.12rem); }
.meta { margin-top: 40px; border-top: 1px solid var(--line); }
.meta div {
  display: grid; grid-template-columns: 110px 1fr; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.meta dt { color: var(--muted); }
.meta dd { margin: 0; display: flex; align-items: center; gap: 10px; }
.status { width: 6px; height: 6px; border-radius: 50%; background: #3EE6A0; box-shadow: 0 0 10px #3EE6A0; flex: none; }

.instruments { margin-top: clamp(80px, 12vh, 140px); }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.inst { padding: 28px 28px 32px 0; position: relative; }
.inst + .inst { padding-left: 28px; border-left: 1px solid var(--line); }
.inst h3 { color: var(--accent); margin-bottom: 18px; font-size: 11px; }
.inst li { padding: 6px 0; color: var(--text); }
.inst li::before { content: "— "; color: var(--muted); }

/* ---------- work ---------- */
.cases { margin-top: 56px; border-top: 1px solid var(--line); counter-reset: c; }
.case { border-bottom: 1px solid var(--line); position: relative; }
.case-link {
  display: grid; grid-template-columns: 70px 1fr auto 32px; gap: 24px; align-items: center;
  padding: 30px 0; position: relative;
  transition: padding .5s var(--ease);
}
.case-link::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease);
}
.case-n { color: var(--muted); transition: color .3s; }
.case-main { display: flex; flex-direction: column; gap: 6px; }
.case-title { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 2.2rem); letter-spacing: -.02em; line-height: 1.1; }
.case-desc { color: var(--muted); font-size: 15px; max-width: 38em; }
.case-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.case-metric { color: var(--text); }
.case-arrow { font-size: 20px; color: var(--muted); transition: transform .5s var(--ease), color .3s; }
.case-link:hover, .case-link:focus-visible { padding-left: 14px; }
.case-link:hover::before, .case-link:focus-visible::before { transform: scaleX(1); }
.case-link:hover .case-n, .case-link:hover .case-arrow, .case-link:hover .case-metric { color: var(--accent); }
.case-link:hover .case-arrow { transform: translate(4px, -4px); }

/* ---------- reel ---------- */
.strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 30vw);
  gap: 24px; margin-top: 56px;
  padding: 0 var(--gutter) 18px; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter));
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.frame { scroll-snap-align: start; outline-offset: 6px; }
.frame-img {
  aspect-ratio: 2.39 / 1; position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 40%, var(--surface-2), var(--surface) 70%);
  border: 1px solid var(--line);
  display: grid; place-items: end start; padding: 12px;
  transition: border-color .4s, transform .8s var(--ease);
}
.frame-img::before, .frame-img::after {   /* letterbox bars */
  content: ""; position: absolute; left: 0; right: 0; height: 9%; background: var(--bg); opacity: .8;
  transition: height .7s var(--ease);
}
.frame-img::before { top: 0; } .frame-img::after { bottom: 0; }
.frame-img span { position: relative; z-index: 1; color: var(--muted); font-size: 10px; }
.frame:hover .frame-img, .frame:focus-visible .frame-img { border-color: var(--line-strong); }
.frame:hover .frame-img::before, .frame:hover .frame-img::after,
.frame:focus-visible .frame-img::before, .frame:focus-visible .frame-img::after { height: 0; }
.frame-cap { margin-top: 14px; font-size: 10.5px; display: flex; gap: 12px; }
.frame-cap span:first-child { color: var(--accent); }
.frame-note { color: var(--muted); font-size: 15px; margin-top: 6px; }

/* ---------- contact ---------- */
.contact { display: flex; flex-direction: column; justify-content: center; }
.contact .lede { margin: 0 auto; }
.contact .cta { justify-content: center; }
.foot {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 54px;
  display: flex; justify-content: space-between; gap: 16px; font-size: 10.5px;
  border-top: 1px solid var(--line); padding-top: 16px;
}

/* ---------- game feedback ("hit") ---------- */
.hit { position: relative; }
.hit::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 var(--accent); opacity: 0;
}
.hit:hover::after, .hit:focus-visible::after { animation: hit .55s var(--ease); }
@keyframes hit {
  0%   { opacity: .55; box-shadow: 0 0 0 0 var(--accent); }
  100% { opacity: 0;   box-shadow: 0 0 0 8px var(--accent); }
}
.case.hit::after, .inst.hit::after, .frame.hit::after { display: none; }
.inst:hover h3 { text-shadow: 0 0 14px var(--glow); }
.inst::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 30% 20%, var(--glow-2), transparent 70%);
  transition: opacity .6s var(--ease);
}
.inst:hover::before { opacity: 1; }

/* ---------- boot ---------- */
.boot {
  position: fixed; inset: 0; z-index: 300; display: none; place-items: center;
  background: var(--bg); cursor: pointer;
}
.booting .boot { display: grid; }
.boot.out { opacity: 0; transition: opacity .55s var(--ease); }
.boot-inner { width: min(420px, 80vw); }
.boot-line { opacity: 0; transform: translateY(6px); animation: bootIn .5s var(--ease) forwards; }
.boot-line[data-i="1"] { animation-delay: .25s; margin-top: 8px; }
.boot-bar { margin-top: 22px; height: 1px; background: var(--line-strong); overflow: hidden; }
.boot-bar span { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); animation: bar 1.15s .3s var(--ease) forwards; }
.boot-skip { margin-top: 22px; font-size: 10px; opacity: 0; animation: bootIn .5s .6s forwards; }
@keyframes bootIn { to { opacity: 1; transform: none; } }
@keyframes bar { to { transform: scaleX(1); } }

/* ---------- pause menu ---------- */
.pause {
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-items: center; padding: var(--gutter);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: fadeIn .35s var(--ease);
}
.pause[hidden] { display: none; }
.pause-card {
  width: min(520px, 100%);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px;
  padding: 26px;
  animation: rise .5s var(--ease);
}
.pause-card header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.pause-card h2 { font-size: 13px; letter-spacing: .3em; color: var(--accent); }
.pause-nav { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.pause-nav a {
  display: flex; gap: 18px; padding: 14px 4px; border-bottom: 1px solid var(--line);
  font-size: 13px; transition: color .3s, padding .4s var(--ease);
}
.pause-nav a span { color: var(--muted); }
.pause-nav a:hover, .pause-nav a:focus-visible { color: var(--accent); padding-left: 12px; }
.pause-nav a.hit::after { display: none; }
.pause-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; }
.opt {
  text-align: left; padding: 11px 12px; border: 1px solid var(--line); border-radius: 4px;
  font-size: 10.5px; color: var(--muted); transition: border-color .3s, color .3s;
}
.opt b { color: var(--text); font-weight: 500; }
.opt:hover { border-color: var(--line-strong); color: var(--text); }
.pause-foot { margin-top: 22px; font-size: 10px; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.985); } }

/* ---------- toast + level up ---------- */
.toast {
  position: fixed; left: 50%; top: 84px; z-index: 160;
  transform: translate(-50%, -10px); opacity: 0; pointer-events: none;
  background: var(--accent); color: var(--accent-ink);
  padding: 9px 14px; border-radius: 3px; font-size: 11px; font-weight: 500;
  transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.levelup { --line: rgba(255, 181, 71, 0.30); }
.levelup .grid-lines { opacity: 1; }
.levelup .display .accent { text-shadow: 0 0 24px var(--accent); }
.levelup .c-after { stroke-width: 3; filter: drop-shadow(0 0 6px var(--accent)); }

/* ---------- placeholder highlighting (toggle in pause menu) ---------- */
.show-ph .ph {
  outline: 1px dashed var(--accent); outline-offset: 3px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* ---------- reveals (only when JS is running) ---------- */
.js .reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--slow) var(--ease) var(--d, 0s), transform var(--slow) var(--ease) var(--d, 0s);
}
.js .reveal.in { opacity: 1; transform: none; }
.js .line > span { transform: translateY(105%); transition: transform 1.2s var(--ease) var(--d, 0s); }
.js .in .line > span, .js h1.in .line > span { transform: none; }
.js .c-before, .js .c-after { stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 2.4s var(--ease) .7s; }
.js .c-after { transition-delay: 1.1s; }
.js .in .c-before, .js .in .c-after { stroke-dashoffset: 0; }
.js .c-dot { opacity: 0; transition: opacity .6s 3s; }
.js .in .c-dot { opacity: 1; }

/* ---------- motion off: OS setting or pause-menu toggle ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .reveal, .js .line > span { opacity: 1; transform: none; }
  .js .c-before, .js .c-after { stroke-dashoffset: 0; }
  .js .c-dot { opacity: 1; }
  .cursor-glow { display: none; }
}
:root[data-motion="off"] { scroll-behavior: auto; }
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after {
  animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important;
}
:root[data-motion="off"] .reveal, :root[data-motion="off"] .line > span { opacity: 1; transform: none; }
:root[data-motion="off"] .c-before, :root[data-motion="off"] .c-after { stroke-dashoffset: 0; }
:root[data-motion="off"] .c-dot { opacity: 1; }
:root[data-motion="off"] .cursor-glow { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero-row { grid-template-columns: 1fr; align-items: start; }
  .hero-chart { max-width: 560px; }
  .two { grid-template-columns: 1fr; }
  .cols { grid-template-columns: 1fr; }
  .inst, .inst + .inst { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .case-link { grid-template-columns: 44px 1fr 24px; }
  .case-meta { grid-column: 2; grid-row: 2; align-items: flex-start; flex-direction: row; gap: 16px; }
  .case-arrow { grid-column: 3; grid-row: 1; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav, .clock { display: none; }
  .corner.tr { display: none; }
  .hud-bl { display: none; }
  .strip { grid-auto-columns: 82vw; }
  .foot { flex-direction: column; gap: 6px; bottom: 50px; }
  .foot-hint { display: none; }
  .pause-opts { grid-template-columns: 1fr; }
  .scroll-cue { display: none; }
  .display { letter-spacing: -.04em; }
}

/* =========================================================
   FX layer — styles for fx.js (21st.dev component ports)
   ========================================================= */
.corner span.lbl { color: inherit; }
.pause-nav a .pn { color: inherit; }

/* Kinetic Grid: lives behind the hero copy, fades out at the edges */
.hero { isolation: isolate; }
.kinetic {
  position: absolute; inset: 0; z-index: -1; display: block;
  -webkit-mask-image: radial-gradient(ellipse 90% 85% at 60% 45%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 90% 85% at 60% 45%, #000 40%, transparent 100%);
}
.hero .hero-grid { position: relative; }

/* Pixel Trail */
.pixel-trail {
  position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 95; pointer-events: none;
}
:root[data-theme="light"] .pixel-trail { mix-blend-mode: multiply; }

/* Magnetic */
.magnetic { transition: transform .45s cubic-bezier(.2, .9, .3, 1.4), background-color .35s var(--ease), color .35s var(--ease), border-color .35s; will-change: transform; }

/* Tilt + spotlight */
.tilt { transform-style: preserve-3d; transition: transform .6s var(--ease), border-color .4s; will-change: transform; }
.frame-img.tilt {
  background:
    radial-gradient(circle at var(--sx, 50%) var(--sy, 50%), var(--glow) 0%, transparent 45%),
    radial-gradient(ellipse at 30% 40%, var(--surface-2), var(--surface) 70%);
}
.inst::before { background: radial-gradient(circle at var(--sx, 30%) var(--sy, 20%), var(--glow), transparent 60%); }

/* Scramble: keep width steady while glyphs cycle */
[data-scramble], [data-decode] { font-variant-numeric: tabular-nums; }

/* hero fit: keep headline, intro, buttons and chart inside one 900px-tall frame */
.hero { padding-top: clamp(96px, 13vh, 140px); padding-bottom: clamp(70px, 10vh, 110px); }
.hero-row { align-items: center; margin-top: clamp(28px, 4vh, 48px); }
.hero-chart { width: 100%; max-width: 540px; justify-self: end; }
.hero .cta { margin-top: 28px; }

/* =========================================================
   PUNJABI LAYER — phulkari colours, Gurmukhi, dhol mode
   ========================================================= */
:root {
  --rani: #FF3D8B; --kesri: #FF7A1A; --haldi: #FFD23F; --tota: #2FD67B; --neela: #5B8CFF;
  --font-pa: "Baloo Paaji 2", "Space Grotesk", sans-serif;
  --phul-grad: linear-gradient(90deg, var(--rani), var(--kesri), var(--haldi), var(--tota), var(--neela), var(--rani));
  --phul-strip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Cpath d='M12 2 22 12 12 22 2 12z' fill='%23FF3D8B'/%3E%3Cpath d='M12 7 17 12 12 17 7 12z' fill='%23FFD23F'/%3E%3Cpath d='M36 2 46 12 36 22 26 12z' fill='%232FD67B'/%3E%3Cpath d='M36 7 41 12 36 17 31 12z' fill='%23FF7A1A'/%3E%3Ccircle cx='24' cy='12' r='1.8' fill='%23FFB547'/%3E%3Ccircle cx='0' cy='12' r='1.8' fill='%235B8CFF'/%3E%3Ccircle cx='48' cy='12' r='1.8' fill='%235B8CFF'/%3E%3C/svg%3E");
}
/* Day scene becomes "Sarson" — a mustard field at noon */
:root[data-theme="light"] {
  --bg: #FFF4CF; --surface: #FFF9E6; --surface-2: #F6E7A9;
  --text: #1E1606; --muted: #66562A;
  --line: rgba(30, 22, 6, 0.12); --line-strong: rgba(30, 22, 6, 0.26);
  --accent: #D6246E; --accent-ink: #FFFFFF; --glow: rgba(214, 36, 110, 0.10);
}

.fun { font-family: var(--font-pa); letter-spacing: 0; text-transform: none; }
.mono .fun { font-size: 1.15em; font-weight: 600; }
.eyebrow .ssa { color: var(--accent); }
.ssa { font-family: var(--font-pa); font-weight: 800; letter-spacing: .04em; }
.eyebrow .star { color: var(--rani); margin: 0 6px; }

.phul-text {
  background: var(--phul-grad); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: phulshift 6s linear infinite;
}
@keyframes phulshift { to { background-position: 200% 0; } }
.display .accent { animation: dotcycle 4s steps(1) infinite; }
@keyframes dotcycle {
  0% { color: var(--accent); } 20% { color: var(--rani); } 40% { color: var(--tota); }
  60% { color: var(--haldi); } 80% { color: var(--neela); }
}

/* Boot: Sat Sri Akal */
.boot-ssa { font-size: clamp(2.4rem, 8vw, 4rem); line-height: 1.1; margin-bottom: 14px;
  background: var(--phul-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.boot-line[data-i="2"] { animation-delay: .4s; margin-top: 6px; }
.boot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24px; background: var(--phul-strip); opacity: .9; }

/* Hero: the giant Gurmukhi word for sky */
.gagan-word {
  position: absolute; z-index: -1; right: calc(var(--gutter) - 2vw); top: 12vh;
  width: min(58vw, 860px); pointer-events: none;
}
.gagan-word svg { width: 100%; height: auto; overflow: visible; }
.gagan-word text {
  font-family: var(--font-pa); font-weight: 800; font-size: 290px; letter-spacing: -6px;
  fill: transparent; stroke: url(#phul); stroke-width: 2.2; opacity: .55;
  stroke-dasharray: 1600; stroke-dashoffset: 0;
}
.js .gagan-word text { stroke-dashoffset: 1600; animation: drawgagan 3.2s .6s var(--ease) forwards; }
@keyframes drawgagan { to { stroke-dashoffset: 0; } }
.gagan-def { position: absolute; right: 4%; bottom: 4%; font-size: 10px; color: var(--muted); }
.gagan-def::before { content: "↖ "; color: var(--accent); }

/* Spinning circular text badge (dhol toggle) */
.hero-copy { position: relative; }
.spin-badge {
  position: absolute; right: 0; top: -6px; width: 156px; height: 156px; border-radius: 50%;
  display: grid; place-items: center; color: var(--text);
  background: radial-gradient(circle, var(--surface) 0 44%, transparent 45%);
}
.spin-ring {
  position: absolute; inset: 0; animation: spin 14s linear infinite;
  font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase;
}
.spin-ring span {
  position: absolute; left: 50%; top: 50%; line-height: 1;
  transform: translate(-50%, -50%) rotate(calc(360deg / var(--n) * var(--i))) translateY(-66px);
}
.spin-badge:hover .spin-ring { animation-duration: 3s; }
.dhol-ico { width: 54px; height: 54px; color: var(--accent); transition: transform .3s; }
.spin-badge:hover .dhol-ico { transform: rotate(-12deg) scale(1.08); }
.spin-badge[aria-pressed="true"] .spin-ring { animation-duration: 2.2s; color: var(--accent); }
.spin-badge[aria-pressed="true"] { box-shadow: 0 0 0 1px var(--accent), 0 0 40px var(--glow); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Bhangra band: velocity marquee between phulkari strips */
.band { position: relative; z-index: 2; padding: 0; border-top: 1px solid var(--line); background: var(--bg); overflow: hidden; }
.phul-strip { height: 24px; background: var(--phul-strip); background-size: 48px 24px; opacity: .95; }
.vmarquee { overflow: hidden; white-space: nowrap; padding: 18px 0; }
.vm-track { display: inline-flex; will-change: transform; }
.vm-unit { display: inline-flex; align-items: center; flex: none; }
.vm-item {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(2.4rem, 7vw, 6.2rem); letter-spacing: -.03em; line-height: 1; padding: 0 .35em;
}
.vm-item.fun { font-family: var(--font-pa); font-weight: 800; letter-spacing: 0; text-transform: none; }
.vm-unit .vm-item:nth-of-type(6n+1) { color: var(--rani); }
.vm-unit .vm-item:nth-of-type(6n+2) { color: var(--text); }
.vm-unit .vm-item:nth-of-type(6n+3) { color: var(--haldi); }
.vm-unit .vm-item:nth-of-type(6n+4) { color: var(--text); }
.vm-unit .vm-item:nth-of-type(6n+5) { color: var(--tota); }
.vm-unit .vm-item:nth-of-type(6n)   { color: var(--kesri); }
.vm-star { font-size: clamp(1.4rem, 3vw, 2.6rem); color: var(--accent); }
.vmarquee.outline { padding-top: 0; }
.vmarquee.outline .vm-item { color: transparent !important; -webkit-text-stroke: 1.5px var(--muted); font-size: clamp(2rem, 5.5vw, 4.8rem); }
.vmarquee.outline .vm-item.fun { -webkit-text-stroke: 1.5px var(--accent); }
:root[data-theme="light"] .vm-unit .vm-item:nth-of-type(6n+3) { color: #B88A00; }
:root[data-theme="light"] .vm-unit .vm-item:nth-of-type(6n+5) { color: #138A4B; }

/* Drop Text */
.drop-host { cursor: pointer; perspective: 600px; }
.drop-ch { display: inline-block; }
.js .drop-host .drop-ch {
  transform: translateY(-1.4em) rotate(var(--dr, 0deg)); opacity: 0;
  transition: transform .8s cubic-bezier(.34, 1.8, .5, 1) var(--dd, 0s), opacity .25s var(--dd, 0s);
}
.js .drop-host.dropped .drop-ch { transform: none; opacity: 1; }
.drop-host .drop-ch:hover { color: var(--accent); }
.pa-sub { margin: -6px 0 24px; text-transform: none; letter-spacing: .02em; font-size: 12px; }
.pa-sub .fun { color: var(--accent); font-size: 13px; }

/* Burst confetti layer */
.burst-layer { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 170; pointer-events: none; }

/* Phulkari touches */
.pause-card { border-top: 0; position: relative; overflow: hidden; padding-top: 44px; }
.pause-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 24px; background: var(--phul-strip); }
.opt-dhol { grid-column: 1 / -1; border-color: var(--accent); color: var(--text); }
.opt-dhol[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.inst:hover { box-shadow: inset 0 3px 0 -1px var(--accent); }
.foot { border-top: 0; padding-top: 30px; }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--phul-strip); background-size: 24px 12px; opacity: .8; }

/* =========================================================
   DHOL MODE — the page bhangras on every bass hit
   ========================================================= */
:root[data-dhol="on"] .brand-dot,
:root[data-dhol="on"] .pill,
:root[data-dhol="on"] .btn { transition: background-color .2s, color .2s, border-color .2s; }
:root.kick .hero .display { animation: thump .32s cubic-bezier(.2, 1.6, .4, 1); }
:root.kick .h2 { animation: thump .32s cubic-bezier(.2, 1.6, .4, 1); }
:root.kick .brand-dot { animation: dot-kick .32s ease-out; }
:root.kick .vm-star { animation: star-kick .32s ease-out; }
:root.kick .gagan-word text { animation: none; stroke-dashoffset: 0; opacity: .9; stroke-width: 4; }
:root.kick .case-n, :root.kick .frame-cap span:first-child { animation: hop .32s ease-out; display: inline-block; }
:root[data-dhol="on"] .grid-lines { opacity: 1; }
:root[data-dhol="on"] .nav a { animation: shoulder 0.75s ease-in-out infinite alternate; }
:root[data-dhol="on"] .nav a:nth-child(2n) { animation-delay: -.375s; }
@keyframes thump { 0% { transform: scale(1); } 30% { transform: scale(1.035) rotate(-.4deg); } 100% { transform: scale(1); } }
@keyframes dot-kick { 0% { transform: scale(1); } 40% { transform: scale(2.6); } 100% { transform: scale(1); } }
@keyframes star-kick { 0% { transform: scale(1); } 40% { transform: scale(1.6) rotate(20deg); } 100% { transform: scale(1); } }
@keyframes hop { 0% { transform: translateY(0); } 40% { transform: translateY(-6px); } 100% { transform: translateY(0); } }
@keyframes shoulder { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-3px) rotate(3deg); } }

@media (prefers-reduced-motion: reduce) {
  .js .drop-host .drop-ch { transform: none; opacity: 1; }
  .js .gagan-word text { stroke-dashoffset: 0; }
}
:root[data-motion="off"] .drop-host .drop-ch { transform: none; opacity: 1; }
:root[data-motion="off"] .gagan-word text { stroke-dashoffset: 0; }

@media (max-width: 960px) {
  .gagan-word { width: 92vw; right: -6vw; top: 18vh; opacity: .55; }
  .gagan-def { display: none; }
}
@media (max-width: 760px) {
  .spin-badge { width: 112px; height: 112px; top: auto; bottom: -128px; right: -4px; }
  .spin-ring { font-size: 8px; }
  .spin-ring span { transform: translate(-50%, -50%) rotate(calc(360deg / var(--n) * var(--i))) translateY(-48px); }
  .dhol-ico { width: 40px; height: 40px; }
  .brand-mid { display: none; }
  .hero .lede { padding-right: 112px; }
}

/* keep the giant Gurmukhi word from causing sideways scroll */
.hero { overflow: hidden; overflow: clip; }
.hero { padding-top: clamp(120px, 16vh, 156px); }

/* =========================================================
   COLOUR PARTY — mock-data sections, stickers, bento, cards, deck
   ========================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* phulkari scroll progress */
.progress { position: fixed; left: 0; right: 0; top: 0; height: 4px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--phul-grad); transform-origin: left; transform: scaleX(0); }

/* every section gets its own phulkari colour */
.sec-rani { --sec: var(--rani); } .sec-haldi { --sec: var(--haldi); } .sec-tota { --sec: var(--tota); }
.sec-neela { --sec: var(--neela); } .sec-kesri { --sec: var(--kesri); }
.scene[class*="sec-"] { isolation: isolate; }
.scene[class*="sec-"]::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 45% at 0% 0%, color-mix(in srgb, var(--sec) 22%, transparent), transparent 70%),
    radial-gradient(40% 40% at 100% 100%, color-mix(in srgb, var(--sec) 12%, transparent), transparent 70%);
}
.scene[class*="sec-"] .corner span:first-child { color: var(--sec); }
.scene[class*="sec-"] .sub-label, .scene[class*="sec-"] .h2 + .mono { color: var(--sec); }
.scene[class*="sec-"] .h2::after { content: ""; display: block; width: 72px; height: 6px; margin-top: 16px; border-radius: 6px; background: var(--sec); }

/* aurora behind the hero */
.aurora { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; width: 46vw; height: 46vw; border-radius: 50%; filter: blur(90px); opacity: .32; animation: drift 18s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { background: var(--rani); left: 40%; top: -20%; }
.aurora i:nth-child(2) { background: var(--neela); left: 70%; top: 30%; animation-delay: -6s; }
.aurora i:nth-child(3) { background: var(--tota); left: 5%; top: 55%; opacity: .2; animation-delay: -12s; }
:root[data-theme="light"] .aurora i { opacity: .22; }
@keyframes drift { to { transform: translate(-8vw, 6vh) scale(1.15); } }

/* colourful headline + dancing letters */
.w-rani { color: var(--rani); } .w-haldi { color: var(--haldi); } .w-tota { color: var(--tota); } .w-neela { color: var(--neela); }
:root[data-theme="light"] .w-haldi { color: #C99400; } :root[data-theme="light"] .w-tota { color: #14A35A; }
.dance { perspective: 1000px; }
.dance.settled .line { overflow: visible; }
.dl { display: inline-block; transition: color .8s; }
.dl.go { color: var(--pop); }
.dl.go[data-a="0"] { animation: dl-rubber .8s ease-in-out; }
.dl.go[data-a="1"] { animation: dl-hinge 1.2s cubic-bezier(.175, .885, .32, 1.275); transform-origin: bottom left; }
.dl.go[data-a="2"] { animation: dl-jump .6s ease-out; transform-origin: bottom center; }
.dl.go[data-a="3"] { animation: dl-flip 1.6s ease-out; transform-origin: 50% 80%; }
.dl.go[data-a="4"] { animation: dl-slide .8s ease-in-out; }
.dl.go[data-a="5"] { animation: dl-shake .5s linear; }
.dl.go[data-a="6"] { animation: dl-pop .5s ease-in-out; }
.dl.go[data-a="7"] { animation: dl-levitate 1.2s ease-in-out; }
@keyframes dl-rubber { 15% { transform: scale(1.25, .75); } 30% { transform: scale(.75, 1.25); } 45% { transform: scale(1.15, .85); } 60% { transform: scale(.95, 1.05); } 75% { transform: scale(1.05, .95); } }
@keyframes dl-hinge { 20% { transform: rotate(80deg) translateY(.08em); } 40% { transform: rotate(60deg); } 60% { transform: rotate(80deg); } 80% { transform: rotate(60deg); } }
@keyframes dl-jump { 25% { transform: translateY(.12em) scaleY(.6); } 60% { transform: translateY(-.35em) scaleY(1.2); } }
@keyframes dl-flip { 12% { transform: rotateX(240deg); } 24% { transform: rotateX(150deg); } 36% { transform: rotateX(200deg); } 48% { transform: rotateX(175deg); } 60%, 85% { transform: rotateX(180deg); } }
@keyframes dl-slide { 20% { transform: translateX(-.2em); } 40% { transform: translateX(.15em); } 60% { transform: translateX(-.1em); } 80% { transform: translateX(.05em); } }
@keyframes dl-shake { 15% { transform: translate(-5px, -2px) rotate(-1deg); } 30% { transform: translate(5px, 2px) rotate(1deg); } 45% { transform: translate(-5px, -1px); } 60% { transform: translate(5px, 1px); } 80% { transform: translate(-2px, 0); } }
@keyframes dl-pop { 50% { transform: scale(1.4); } }
@keyframes dl-levitate { 50% { transform: translateY(-.3em) scale(1.1); text-shadow: 0 .25em .25em rgba(0, 0, 0, .35); } }

/* chart: gradient "after" line with a soft fill */
.c-after { stroke: url(#afterGrad); stroke-width: 3; }
.c-area { fill: url(#afterFill); opacity: 0; transition: opacity 1.2s 2.4s; }
.in .c-area, :root:not(.js) .c-area { opacity: 1; }
.c-dot { fill: var(--tota); }
.c-label .c-after-t { fill: var(--tota); }

/* buttons: haldi → kesri gradient */
.btn { background: linear-gradient(90deg, var(--haldi), var(--kesri)); color: #1A1206; }
.btn:hover { background: linear-gradient(90deg, var(--rani), var(--kesri)); color: #FFFFFF; }
.btn.ghost { background: transparent; color: var(--text); }

/* die-cut stickers */
.stickers { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.sticker {
  position: absolute; left: var(--x); top: var(--y); pointer-events: auto; cursor: grab; touch-action: none; user-select: none;
  transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(calc(var(--r) + var(--tilt, 0deg)));
  transition: transform .55s cubic-bezier(.2, 1.6, .4, 1);
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 10px 14px rgba(0, 0, 0, .4));
}
.sticker span { display: grid; place-items: center; font-family: var(--font-pa); font-weight: 800; line-height: 1; transition: transform .25s; }
.sticker.grab { cursor: grabbing; transition: none; z-index: 6; }
.sticker.grab span { transform: scale(1.1); }
.sticker.wiggle span { animation: wiggle .5s ease-in-out; }
@keyframes wiggle { 20% { transform: rotate(-14deg) scale(1.12); } 40% { transform: rotate(12deg) scale(1.12); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(4deg); } }
.st-burst span {
  width: 116px; height: 116px; font-size: 22px; color: #2A1600; background: var(--haldi);
  clip-path: polygon(50% 0, 61% 18%, 79% 7%, 80% 28%, 100% 30%, 87% 47%, 100% 64%, 80% 69%, 82% 90%, 62% 82%, 50% 100%, 38% 82%, 18% 90%, 20% 69%, 0 64%, 13% 47%, 0 30%, 20% 28%, 21% 7%, 39% 18%);
}
.st-circle span { width: 76px; height: 76px; border-radius: 50%; font-size: 30px; color: #fff; background: var(--rani); }
.st-tag span { padding: 10px 16px; border-radius: 8px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; color: #1F0B00; background: var(--kesri); }
.st-pill span { padding: 11px 18px; border-radius: 999px; font-family: var(--font-mono); font-size: 15px; color: #04210F; background: var(--tota); }
.st-star span { padding: 14px 16px; border-radius: 16px; font-size: 22px; color: #fff; background: var(--neela); }

/* skill tree: coloured headings, LVL chips, XP bars */
.inst { box-shadow: inset 0 3px 0 -1px var(--c, var(--accent)); }
.inst h3 { color: var(--c, var(--accent)); display: flex; align-items: center; gap: 10px; }
.lvl { background: var(--c); color: #0B0D10; padding: 3px 7px; border-radius: 4px; font-size: 10px; letter-spacing: .08em; }
.inst li { position: relative; padding-bottom: 14px; }
.inst li::after {
  content: ""; position: absolute; left: 1.3em; right: 0; bottom: 4px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--c) var(--xp), var(--line-strong) var(--xp));
  transform-origin: left; transition: transform 1.3s var(--ease) .35s;
}
.js .inst li::after { transform: scaleX(0); }
.js .inst.in li::after { transform: scaleX(1); }

/* scoreboard bento */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(170px, auto); gap: 14px; margin-top: 48px; }
.tile {
  position: relative; overflow: hidden; border: 0; border-radius: 20px; padding: 22px; text-align: left;
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px; color: #0B0D10;
}
.tile::before { content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.js .tile.reveal.in { transition: transform .45s cubic-bezier(.2, 1.6, .4, 1), opacity 1.1s var(--ease); }
.js .tile.reveal.in:hover { transform: rotate(-1.6deg) scale(1.03); }
.tile.popped .tile-v { animation: dl-pop .45s ease-in-out; }
.t-rani { background: var(--rani); } .t-haldi { background: var(--haldi); } .t-tota { background: var(--tota); }
.t-neela { background: var(--neela); } .t-kesri { background: var(--kesri); }
.t-big { grid-column: span 2; grid-row: span 2; background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); justify-content: flex-start; gap: 30px; }
.t-big::before { display: none; }
.t-dhol { background: var(--surface-2); color: var(--text); border: 2px dashed var(--accent); cursor: pointer; }
.t-dhol::before { background: var(--phul-strip); background-size: 24px 12px; border-radius: 0; width: auto; height: 12px; left: 0; right: 0; top: 0; }
.t-dhol[aria-pressed="true"] { border-style: solid; box-shadow: 0 0 40px var(--glow); }
.tile-k { font-size: 11px; opacity: .85; position: relative; }
.tile-v { position: relative; font-family: var(--font-display); font-weight: 600; font-size: clamp(3rem, 6vw, 5.4rem); line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.tile-hint { font-size: 10px; color: var(--accent); }
.bars { display: flex; flex-direction: column; gap: 18px; }
.bars li { display: grid; grid-template-columns: 90px 1fr 48px; align-items: center; gap: 14px; }
.bars span { font-size: 11px; color: var(--muted); }
.bars b { font-size: 13px; text-align: right; color: var(--c); }
.bars i { display: block; height: 18px; border-radius: 9px; background: var(--c); width: calc(var(--w) * 2); box-shadow: 0 0 18px color-mix(in srgb, var(--c) 45%, transparent); transition: width 1.5s var(--ease) .3s; }
.js .t-big:not(.in) .bars i { width: 0; }

/* work cards with travelling glow border (21st.dev Animated Border, ported) */
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 48px; }
.card { position: relative; border-radius: 22px; padding: 2px; isolation: isolate; }
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: .55; transition: opacity .4s;
  background: conic-gradient(from var(--ang), var(--c), transparent 25%, var(--c2) 50%, transparent 75%, var(--c));
  animation: spinang 5s linear infinite;
}
.card:hover::before, .card:focus-within::before { opacity: 1; }
@keyframes spinang { to { --ang: 360deg; } }
.card-link {
  display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 26px; border-radius: 20px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 18%, var(--surface)), var(--surface) 62%);
  transition: transform .4s cubic-bezier(.2, 1.4, .4, 1);
}
.card-link:hover { transform: translateY(-4px); }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.card-n { color: var(--c); font-size: 13px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.chips span { border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); color: var(--c); border-radius: 999px; padding: 3px 9px; font-size: 9.5px; }
.card-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -.03em; line-height: 1; margin-top: 18px; transition: color .3s; }
.card-link:hover .card-title { color: var(--c); }
.card-sub { color: var(--c2); font-size: 14px; font-weight: 500; }
.card-desc { color: var(--muted); font-size: 15px; line-height: 1.6; }
.spark { width: 100%; height: 48px; margin-top: auto; overflow: visible; }
.spark path { fill: none; stroke: var(--c); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px var(--c)); }
.js .spark path { stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.8s var(--ease) .4s; }
.js .card.in .spark path { stroke-dashoffset: 0; }
.card-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px dashed var(--line-strong); font-size: 10.5px; color: var(--muted); }
.card-metric { background: var(--c); color: #0B0D10; padding: 5px 11px; border-radius: 999px; font-weight: 500; white-space: nowrap; }

/* reel: swipe deck */
.reel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.deck-help { margin-top: 18px; color: var(--sec); }
.rewatch { margin-top: 30px; }
.rewatch-k { font-size: 10.5px; color: var(--muted); }
.rewatch-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rewatch-list li:not(.empty) { padding: 7px 13px; border-radius: 999px; background: var(--c); color: #0B0D10; font-size: 13px; font-weight: 500; animation: dl-pop .4s ease-out; }
.rewatch-list .empty { font-size: 10.5px; }
.deck { position: relative; height: 460px; max-width: 420px; margin: 0 auto; border-radius: 24px; outline: none; }
.deck:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.deck-done { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 8px; border: 2px dashed var(--line-strong); border-radius: 24px; opacity: 0; transition: opacity .4s; }
.deck.done .deck-done { opacity: 1; }
.deck-done .fun { font-size: 2.6rem; background: var(--phul-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.film {
  position: absolute; inset: 0; border-radius: 24px; padding: 30px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
  color: #FFFFFF; cursor: grab; touch-action: pan-y; user-select: none; overflow: hidden;
  background: radial-gradient(120% 80% at 15% 0%, var(--a), transparent 62%), linear-gradient(165deg, var(--b), #07080A 80%);
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .75);
  transform-origin: 50% 100%; transition: transform .55s cubic-bezier(.2, .9, .25, 1.15), opacity .35s;
}
.film::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--phul-strip); background-size: 28px 14px; opacity: .9; }
.film.dragging { transition: none; cursor: grabbing; }
.film-year { color: var(--a); font-size: 11px; }
.film-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 4vw, 3rem); line-height: .95; letter-spacing: -.035em; }
.film-why { color: rgba(255, 255, 255, .82); font-size: 15px; line-height: 1.55; }
.film-stars { color: var(--a); font-size: 15px; letter-spacing: .2em; }
.fb { position: absolute; top: 34px; padding: 6px 12px; border: 3px solid; border-radius: 8px; font-weight: 500; font-size: 15px; letter-spacing: .12em; opacity: 0; }
.fb-l { left: 24px; color: var(--rani); border-color: var(--rani); transform: rotate(-12deg); }
.fb-r { right: 24px; color: var(--tota); border-color: var(--tota); transform: rotate(12deg); }
.deck-ctrl { display: flex; justify-content: space-between; align-items: center; gap: 10px; max-width: 420px; margin: 22px auto 0; }
.deck-count { font-size: 11px; color: var(--muted); }
.deck-count b { color: var(--text); }
.deck-undo { font-size: 11px; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.deck-ctrl .pill:first-child:hover { border-color: var(--rani); color: var(--rani); }
.deck-ctrl .pill:last-child:hover { border-color: var(--tota); color: var(--tota); }

@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .t-big { grid-row: auto; }
  .cards { grid-template-columns: 1fr; }
  .reel-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sticker { scale: .72; }
  .st-tag, .st-star, .st-pill { display: none; }
  .st-burst { --x: 62% !important; --y: 52% !important; }
  .st-circle { --x: 4% !important; --y: 58% !important; }
  .bento { gap: 10px; grid-auto-rows: minmax(140px, auto); }
  .tile { padding: 18px; border-radius: 16px; }
  .tile-v { font-size: clamp(2.4rem, 12vw, 3.4rem); }
  .bars li { grid-template-columns: 70px 1fr 40px; gap: 10px; }
  .deck { height: 420px; }
  .card-link { padding: 22px; }
  .chips span:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .inst li::after { transform: scaleX(1); }
  .js .t-big:not(.in) .bars i { width: calc(var(--w) * 2); }
  .js .spark path { stroke-dashoffset: 0; }
}
:root[data-motion="off"] .inst li::after { transform: scaleX(1); }
:root[data-motion="off"] .t-big .bars i { width: calc(var(--w) * 2) !important; }
:root[data-motion="off"] .spark path { stroke-dashoffset: 0; }

/* fixes: sticker stacking, sideways overflow, tile pop, bento fill, deck controls */
.hero .hero-grid { z-index: 2; }
.stickers { z-index: 10; }
.scene { overflow-x: clip; }
.tile.popped .tile-v { animation: tick-pop .45s ease-in-out; transform-origin: left bottom; }
@keyframes tick-pop { 50% { transform: scale(1.08) rotate(-2deg); } }
.t-big { grid-row: span 3; justify-content: center; }
.deck-ctrl { margin-top: 74px; }
@media (max-width: 960px) { .t-big { grid-row: auto; } }
@media (max-width: 760px) {
  .st-burst { --x: 66% !important; --y: 61% !important; }
  .st-circle { --x: 76% !important; --y: 27% !important; }
  .deck-ctrl { margin-top: 64px; }
}