:root {
  --ink: #0d0e12;
  --brand: #5b3df5;
  --bg: #ffffff;
  --muted: #6b6b78;
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Avenir Next", "Avenir", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

/* ---------- Logo ---------- */

.logo {
  position: relative;
  width: min(80vw, 960px);
  /* generous padding = stable hover zone, so letters flying away don't cause flicker */
  padding: clamp(28px, 6vw, 88px);
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
  user-select: none;
}

.logo:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 20px;
}

.logo svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ink          { fill: var(--ink); }
.brand        { fill: var(--brand); }
.ink-stroke   { fill: none; stroke: var(--ink); }
.brand-stroke { fill: none; stroke: var(--brand); }

/* ---------- Explode / return (driven by CSS variables from script.js) ---------- */

.piece,
.chev-wrap {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform:
    translate(var(--x, 0px), var(--y, 0px))
    rotate(var(--r, 0deg))
    scale(var(--s, 1));
  /* returning: springy settle back into place */
  transition: transform 0.95s cubic-bezier(0.34, 1.5, 0.5, 1) var(--d, 0ms);
  will-change: transform;
}

.logo.exploded .piece,
.logo.exploded .chev-wrap {
  /* breaking apart: fast burst with a slight overshoot */
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.12, 1.3, 0.3, 1);
}

/* Extra push + tilt from the cursor while exploded (short, no delay, so it follows the mouse) */
.react {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform:
    translate(var(--px, 0px), var(--py, 0px))
    rotate(var(--pr, 0deg));
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.15);
  will-change: transform;
}

/* ---------- Intro ---------- */

.inner,
.chev-in {
  transform-box: fill-box;
}

.logo.intro .word {
  clip-path: url(#reveal);
}

.logo.intro .inner {
  transform-origin: 50% 100%;
  animation: rise 0.95s cubic-bezier(0.2, 0.85, 0.25, 1.12) both;
  animation-delay: calc(150ms + var(--i, 0) * 75ms);
}

.logo.intro .chev-in {
  transform-origin: 0% 50%; /* the point of the chevron */
  animation: chevron 0.75s cubic-bezier(0.3, 1.6, 0.5, 1) both;
  animation-delay: 780ms;
}

.logo.intro .inner.dot-in {
  transform-origin: 50% 100%;
  animation: drop 1s linear both;
  animation-delay: 1050ms;
}

@keyframes rise {
  0%   { transform: translateY(300px); }
  100% { transform: translateY(0); }
}

@keyframes chevron {
  0%   { transform: scale(0); }
  100% { transform: scale(1); }
}

@keyframes drop {
  0%   { transform: translateY(-560px) scale(0.9, 1.1); opacity: 0; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  15%  { opacity: 1; }
  48%  { transform: translateY(0) scale(1.35, 0.65); animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  66%  { transform: translateY(-90px) scale(0.92, 1.1); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  80%  { transform: translateY(0) scale(1.15, 0.86); animation-timing-function: ease-out; }
  90%  { transform: translateY(-14px) scale(0.98, 1.02); animation-timing-function: ease-in; }
  100% { transform: translateY(0) scale(1, 1); opacity: 1; }
}

/* ---------- Sparks (the mini explosion) ---------- */

.sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.spark {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 999px;
  background: var(--brand);
  will-change: transform, opacity;
}

.spark--ink { background: var(--ink); }

/* ---------- Hint + replay ---------- */

.hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(28px, 8vh, 72px);
  margin: 0;
  text-align: center;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--muted);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.hint.show {
  opacity: 1;
  transform: none;
}

.replay {
  position: absolute;
  top: clamp(16px, 3vw, 32px);
  right: clamp(16px, 3vw, 32px);
  padding: 10px 16px;
  border: 1.5px solid #e4e3ec;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.replay:hover { border-color: var(--brand); color: var(--brand); }
.replay:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .logo.intro .inner,
  .logo.intro .chev-in,
  .logo.intro .inner.dot-in {
    animation: none;
  }
  .logo.intro .word { clip-path: none; }
  .piece,
  .chev-wrap {
    transition-duration: 0.25s !important;
    transition-timing-function: ease-out !important;
  }
}