/* ============================================================
   Riddim Type Lab — page styles
   Shared tokens (palette, reset, focus, visually-hidden) live
   in ../shared/tokens.css, loaded before this file.
   ============================================================ */

:root {
  --line:  rgba(196, 181, 253, 0.14);
  --glow:  rgba(139, 92, 246, 0.35);

  --type-face: 'Anton', sans-serif;
  --dur: 2.1s;

  --ui-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --ui-body:    'Space Grotesk', system-ui, sans-serif;
  --ui-mono:    'Space Mono', ui-monospace, monospace;
}

html { scroll-behavior: smooth; }

body {
  min-height: 100dvh;
  font-family: var(--ui-body);
  color: var(--cloud);
  background-color: var(--slate);
  background-image:
    radial-gradient(circle at 18% -10%, rgba(91, 33, 182, 0.45), transparent 45%),
    radial-gradient(circle at 90% 0%, rgba(139, 92, 246, 0.22), transparent 40%),
    radial-gradient(var(--line) 1px, transparent 1px);
  background-size: auto, auto, 26px 26px;
  background-attachment: fixed;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── SKIP LINK ────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  left: 50%; top: -3rem;
  transform: translateX(-50%);
  background: var(--violet); color: var(--cloud);
  padding: 0.6rem 1rem; border-radius: 0 0 0.6rem 0.6rem;
  font: 600 0.85rem var(--ui-mono); text-decoration: none;
  transition: top 0.2s ease; z-index: 50;
}
.skip-link:focus { top: 0; }

/* ── EYEBROW ─────────────────────────────────────────────── */

.eyebrow {
  font: 700 0.72rem/1 var(--ui-mono);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--violet-muted);
  margin: 0 0 1rem;
}

/* ── HEADER ──────────────────────────────────────────────── */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem clamp(1.2rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 0.85rem; }

.brand-mark {
  font-size: 1.6rem; color: var(--violet-bright);
  animation: slow-spin 9s linear infinite;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.1; }

.brand-name {
  font: 800 1.05rem var(--ui-display);
  letter-spacing: -0.01em;
}

.brand-sub {
  font: 400 0.72rem var(--ui-mono);
  color: var(--violet-muted);
  letter-spacing: 0.02em;
}

.motion-toggle {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--slate-panel);
  border: 1px solid var(--line);
  color: var(--cloud);
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  font: 700 0.75rem var(--ui-mono);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.motion-toggle:hover { border-color: var(--violet); }
.motion-toggle .dot {
  width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0.5rem var(--cyan);
}
body.calm .motion-toggle .dot { background: var(--violet-muted); box-shadow: none; }

/* ── STAGE ───────────────────────────────────────────────── */

.stage-panel {
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1.2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(9rem, 26vw, 16rem);
  margin: 0 auto;
  padding: 1rem;
  max-width: 1100px;
  border-radius: 1.4rem;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(40, 31, 61, 0.55), rgba(29, 24, 48, 0.2));
  overflow: hidden;
}

.stage::before {
  content: "";
  position: absolute; left: 8%; right: 8%; bottom: 24%;
  height: 1px; background: var(--line);
}

.word {
  font-family: var(--type-face);
  font-size: clamp(2.6rem, 13vw, 9rem);
  line-height: 1;
  color: var(--cloud);
  white-space: nowrap;
  text-shadow: 0 0 2.4rem var(--glow);
}

.stage-readout {
  margin: 1.3rem 0 0;
  font: 700 0.8rem var(--ui-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.readout-word { color: var(--cloud); }
.readout-sep { color: var(--violet); margin: 0 0.5rem; }
.readout-behavior { color: var(--violet-bright); }

/* ── CONTROLS ────────────────────────────────────────────── */

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 1.1rem;
  margin: 2rem auto 0;
  max-width: 880px;
}

.field { display: flex; flex-direction: column; gap: 0.45rem; text-align: left; }

.field label {
  font: 700 0.68rem var(--ui-mono);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--violet-muted);
  display: flex; gap: 0.5rem; align-items: baseline;
}

.field-val { color: var(--violet-bright); letter-spacing: 0.02em; }

input[type="text"],
select {
  background: var(--slate-panel);
  border: 1px solid var(--line);
  color: var(--cloud);
  font: 500 1rem var(--ui-body);
  padding: 0.6rem 0.85rem;
  border-radius: 0.7rem;
  min-width: 12rem;
  transition: border-color 0.2s ease;
}
input[type="text"]:hover, select:hover { border-color: var(--violet); }
select { cursor: pointer; }
optgroup { color: var(--violet-muted); background: var(--slate); }
option { color: var(--cloud); background: var(--slate-panel); }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 12rem; height: 0.4rem;
  background: var(--slate-raised);
  border-radius: 999px; cursor: pointer; margin: 0.6rem 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--violet);
  border: 2px solid var(--cloud);
  box-shadow: 0 0 0.5rem var(--glow);
}
input[type="range"]::-moz-range-thumb {
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--violet); border: 2px solid var(--cloud);
}

.replay {
  background: var(--violet);
  color: var(--cloud);
  border: none;
  padding: 0.68rem 1.3rem;
  border-radius: 0.7rem;
  font: 700 0.9rem var(--ui-body);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.2s ease;
}
.replay:hover { background: var(--violet-deep); transform: translateY(-1px); }
.replay:active { transform: translateY(0); }

/* ── REEL ────────────────────────────────────────────────── */

.reel {
  padding: clamp(2rem, 5vw, 4rem) clamp(1.2rem, 4vw, 3.5rem) 3rem;
  border-top: 1px solid var(--line);
}

.reel-head { max-width: 1100px; margin: 0 auto 2rem; }
.reel-head h2 {
  font: 800 clamp(1.6rem, 4vw, 2.6rem) var(--ui-display);
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}
.reel-note { margin: 0; color: var(--violet-muted); font-size: 0.95rem; }

.grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 0.9rem;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.7rem;
  background: var(--slate-panel);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 1rem 0.9rem 0.85rem;
  cursor: pointer;
  color: var(--cloud);
  text-align: left;
  font-family: inherit;
  transition: border-color 0.2s ease, transform 0.12s ease, background 0.2s ease;
}
.tile:hover { border-color: var(--violet); transform: translateY(-2px); }
.tile.is-active {
  border-color: var(--cyan);
  background: var(--slate-raised);
  box-shadow: 0 0 0 1px var(--cyan), 0 0 1.8rem rgba(52, 224, 232, 0.18);
}

.tile-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.6rem;
  overflow: hidden;
}
.tile .word {
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  text-shadow: none;
}
.tile-name {
  font: 700 0.7rem var(--ui-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--violet-muted);
}
.tile.is-active .tile-name { color: var(--cyan); }

/* ── FOOTER ──────────────────────────────────────────────── */

.site-footer {
  padding: 2rem clamp(1.2rem, 4vw, 3.5rem) 3rem;
  border-top: 1px solid var(--line);
  color: var(--violet-muted);
  font: 400 0.82rem var(--ui-mono);
}
.site-footer p { margin: 0.35rem 0; }
.site-footer a { color: var(--violet-bright); }

/* ── LETTER + BEHAVIOR ENGINE ────────────────────────────── */

.letter {
  display: inline-block;
  will-change: transform, opacity;
  animation-duration: var(--dur);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: calc(var(--i, 0) * 0.05s);
  transform-origin: center;
}
.letter.space { width: 0.3em; }

body.calm .letter { animation-play-state: paused; }
.stage.shot .letter {
  animation-play-state: running !important;
  animation-iteration-count: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .brand-mark { animation: none; }
}

@keyframes slow-spin { to { transform: rotate(360deg); } }

/* ── BEHAVIOR BINDINGS ───────────────────────────────────── */

[data-behavior="bounce"]    .letter { animation-name: k-bounce; }
[data-behavior="breathe"]   .letter { animation-name: k-breathe; }
[data-behavior="bump"]      .letter { animation-name: k-bump; }
[data-behavior="cascade"]   .letter { animation-name: k-cascade; }
[data-behavior="disappear"] .letter { animation-name: k-disappear; }
[data-behavior="fade"]      .letter { animation-name: k-fade; }
[data-behavior="flip"]      .letter { animation-name: k-flip; }
[data-behavior="grow"]      .letter { animation-name: k-grow; }
[data-behavior="onward"]    .letter { animation-name: k-onward; }
[data-behavior="oscillate"] .letter { animation-name: k-oscillate; transform-origin: bottom center; }
[data-behavior="poof"]      .letter { animation-name: k-poof; }
[data-behavior="redden"]    .letter { animation-name: k-redden; }
[data-behavior="reveal"]    .letter { animation-name: k-reveal; }
[data-behavior="rotate"]    .letter { animation-name: k-rotate; animation-timing-function: linear; }
[data-behavior="shrink"]    .letter { animation-name: k-shrink; }
[data-behavior="shout"]     .letter { animation-name: k-shout; animation-timing-function: cubic-bezier(.3,1.5,.4,1); }
[data-behavior="skew"]      .letter { animation-name: k-skew; }
[data-behavior="slide"]     .letter { animation-name: k-slide; }
[data-behavior="spin"]      .letter { animation-name: k-spin; animation-timing-function: linear; }
[data-behavior="twist"]     .letter { animation-name: k-twist; }
[data-behavior="voila"]     .letter { animation-name: k-voila; animation-timing-function: cubic-bezier(.2,1.4,.4,1); }

[data-behavior="wave"]        .letter { animation-name: k-wave; animation-delay: calc(var(--i, 0) * 0.07s); }
[data-behavior="ocean-waves"] .letter { animation-name: k-ocean; animation-delay: calc(var(--i, 0) * 0.12s); animation-duration: calc(var(--dur) * 1.7); }
[data-behavior="bass-bounce"] .letter { animation-name: k-bass; animation-delay: 0s; animation-timing-function: cubic-bezier(.2,.9,.3,1); }
[data-behavior="dance"]       .letter { animation-name: k-dance; }
[data-behavior="heatwave"]    .letter { animation-name: k-heatwave; animation-delay: calc(var(--i, 0) * 0.08s); transform-origin: bottom center; }
[data-behavior="typewriter"]  .letter { animation-name: k-typewriter; animation-timing-function: steps(1, end); animation-delay: calc(var(--i, 0) * 0.11s); }
[data-behavior="glitch"]      .letter { animation-name: k-glitch; animation-timing-function: steps(2, end); }
[data-behavior="stretch"]     .letter { animation-name: k-stretch; transform-origin: bottom center; }
[data-behavior="flicker"]     .letter { animation-name: k-flicker; }
[data-behavior="drift"]       .letter { animation-name: k-drift; animation-duration: calc(var(--dur) * 1.8); }
[data-behavior="swing"]       .letter { animation-name: k-swing; transform-origin: top center; }
[data-behavior="wine"]        .letter { animation-name: k-wine; animation-delay: calc(var(--i, 0) * 0.08s); }
[data-behavior="limbo"]       .letter { animation-name: k-limbo; transform-origin: bottom center; }
[data-behavior="dub"]         .letter { animation-name: k-dub; animation-timing-function: cubic-bezier(.3,.7,.3,1); }

[data-behavior="typewriter"] .word::after {
  content: "▍";
  color: var(--violet-bright);
  margin-left: 0.04em;
  animation: caret-blink 1s steps(1, end) infinite;
}
body.calm [data-behavior="typewriter"] .word::after { animation-play-state: paused; }
@keyframes caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ── KEYFRAMES ───────────────────────────────────────────── */

@keyframes k-bounce    { 0%, 100% { transform: translateY(0); }          45% { transform: translateY(-0.5em); } }
@keyframes k-breathe   { 0%, 100% { opacity: 1; transform: scale(1); }   50% { opacity: 0.45; transform: scale(0.9); } }
@keyframes k-bump {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-0.12em); } 40% { transform: translateX(0.12em); }
  60% { transform: translateX(-0.06em); } 80% { transform: translateX(0.06em); }
}
@keyframes k-cascade   { 0%, 100% { transform: translateY(0); opacity: 1; } 45% { transform: translateY(0.7em); opacity: 0; } 55% { transform: translateY(-0.7em); opacity: 0; } }
@keyframes k-disappear { 0%, 100% { opacity: 1; } 45%, 60% { opacity: 0; } }
@keyframes k-fade      { 0%, 100% { opacity: 1; } 50% { opacity: 0.12; } }
@keyframes k-flip      { 0%, 100% { transform: rotateX(0); } 50% { transform: rotateX(180deg); } }
@keyframes k-grow      { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.55); } }
@keyframes k-onward    { 0%, 100% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(0.4em); } }
@keyframes k-oscillate { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(9deg); } 75% { transform: rotate(-9deg); } }
@keyframes k-poof      { 0%, 100% { transform: scale(1); opacity: 1; filter: blur(0); } 50% { transform: scale(1.8); opacity: 0; filter: blur(6px); } }
@keyframes k-redden    { 0%, 100% { color: var(--cloud); } 50% { color: #ff4d4d; text-shadow: 0 0 1.6rem rgba(255, 77, 77, 0.6); } }
@keyframes k-reveal    { 0%, 100% { clip-path: inset(0 0 0 0); opacity: 1; } 40%, 52% { clip-path: inset(0 0 100% 0); opacity: 1; } }
@keyframes k-rotate    { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
@keyframes k-shrink    { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.42); } }
@keyframes k-shout     { 0%, 100% { transform: scale(1); } 18% { transform: scale(1.4); } 36% { transform: scale(1.02); } }
@keyframes k-skew      { 0%, 100% { transform: skewX(0); } 25% { transform: skewX(15deg); } 75% { transform: skewX(-15deg); } }
@keyframes k-slide     { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(0.7em); } }
@keyframes k-spin      { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }
@keyframes k-twist     { 0%, 100% { transform: rotate(0) skewX(0); } 50% { transform: rotate(200deg) skewX(16deg); } }
@keyframes k-voila     { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 38%, 52% { transform: scale(0) rotate(-22deg); opacity: 0; } 70% { transform: scale(1.15) rotate(4deg); opacity: 1; } }

@keyframes k-wave      { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-0.4em) rotate(-6deg); } 70% { transform: translateY(0.25em) rotate(6deg); } }
@keyframes k-ocean     { 0%, 100% { transform: translateY(0) rotate(0) scale(1); } 25% { transform: translateY(-0.35em) rotate(-5deg) scale(1.02); } 50% { transform: translateY(0.05em) rotate(0); } 75% { transform: translateY(0.32em) rotate(5deg) scale(0.98); } }
@keyframes k-bass {
  0%   { transform: scale(1) translateY(0); text-shadow: 0 0 2.4rem var(--glow); }
  9%   { transform: scale(1.28, 0.74) translateY(0.12em); text-shadow: 0 0 3.6rem var(--violet-bright); }
  22%  { transform: scale(0.9, 1.14) translateY(-0.32em); }
  40%  { transform: scale(1) translateY(0); }
  100% { transform: scale(1) translateY(0); text-shadow: 0 0 2.4rem var(--glow); }
}
@keyframes k-dance {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  20% { transform: translate(0, -0.25em) rotate(9deg); }
  40% { transform: translate(0.12em, 0) rotate(-7deg); }
  60% { transform: translate(-0.12em, -0.15em) rotate(7deg); }
  80% { transform: translate(0, 0.06em) rotate(-4deg); }
}
@keyframes k-heatwave  { 0%, 100% { transform: translateY(0) skewX(0); filter: blur(0); } 25% { transform: translateY(-0.05em) skewX(7deg); filter: blur(0.6px); } 50% { transform: translateY(-0.1em) skewX(-5deg); filter: blur(1px); } 75% { transform: translateY(-0.05em) skewX(6deg); filter: blur(0.6px); } }
@keyframes k-typewriter { 0%, 100% { opacity: 1; } 45%, 55% { opacity: 0; } }
@keyframes k-glitch {
  0%, 100% { transform: translate(0, 0); text-shadow: none; }
  20% { transform: translate(-0.04em, 0.02em); text-shadow: 0.04em 0 var(--cyan), -0.04em 0 var(--violet); }
  40% { transform: translate(0.04em, -0.02em); text-shadow: -0.04em 0 var(--cyan), 0.04em 0 var(--violet); }
  60% { transform: translate(-0.02em, 0); text-shadow: 0.03em 0 var(--violet-bright), -0.03em 0 var(--cyan); }
  80% { transform: translate(0.02em, 0.02em); text-shadow: none; }
}
@keyframes k-stretch   { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(0.7, 1.3); } 60% { transform: scale(1.25, 0.8); } 80% { transform: scale(0.95, 1.05); } }
@keyframes k-flicker   { 0%, 100% { opacity: 1; text-shadow: 0 0 0.45em var(--glow); } 8% { opacity: 0.3; } 10% { opacity: 1; } 20% { opacity: 0.7; } 22% { opacity: 1; } 55% { opacity: 1; text-shadow: 0 0 0.9em var(--violet); } 60% { opacity: 0.35; } 63% { opacity: 1; } }
@keyframes k-drift     { 0%, 100% { transform: translate(0, 0) rotate(0); } 33% { transform: translate(0.1em, -0.15em) rotate(2deg); } 66% { transform: translate(-0.1em, 0.1em) rotate(-2deg); } }
@keyframes k-swing     { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(12deg); } 75% { transform: rotate(-12deg); } }
@keyframes k-wine      { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(0.16em, -0.12em) rotate(3deg); } 50% { transform: translate(0, -0.24em) rotate(0); } 75% { transform: translate(-0.16em, -0.12em) rotate(-3deg); } }
@keyframes k-limbo     { 0%, 100% { transform: perspective(440px) rotateX(0) translate(0, 0); } 35% { transform: perspective(440px) rotateX(-46deg) translate(-0.18em, 0.1em); } 55% { transform: perspective(440px) rotateX(-62deg) translate(-0.32em, 0.2em); } }
@keyframes k-dub {
  0%, 100% { transform: translateX(0); text-shadow: 0 0 0 transparent; }
  40%, 60% { transform: translateX(0.2em);
             text-shadow: -0.12em 0 var(--violet-bright),
                          -0.26em 0 var(--violet),
                          -0.4em 0 var(--violet-deep); }
}

/* ── RESPONSIVE ──────────────────────────────────────────── */

@media (max-width: 560px) {
  .controls { flex-direction: column; align-items: stretch; }
  .field, input[type="text"], select, input[type="range"] { width: 100%; min-width: 0; }
  .replay { width: 100%; }
  .brand-sub { display: none; }
}