/* Jannimation — kid-pop coverflow theme.
   Tailwind handles layout utilities; this file owns the 3D stage, the
   animated background, and the custom player chrome that Tailwind can't. */

:root {
  --pop-pink:   #ff9ecd;
  --pop-lilac:  #c9a7ff;
  --pop-blue:   #9ad9ff;
  --pop-mint:   #a7ffd8;
  --pop-yellow: #ffe8a3;
  --pop-cream:  #fdf7ff;
  --ink:        #3a2a4d;
}

* { box-sizing: border-box; }

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

body {
  font-family: "Baloo 2", "Comic Sans MS", system-ui, sans-serif;
  color: var(--ink);
  overflow: hidden;
  /* cream canvas + a soft tinted band under the footer so the white
     chrome (dots, kbd hints) keeps its contrast */
  background:
    linear-gradient(to top, rgba(154,217,255,0.38) 0%, rgba(201,167,255,0.12) 22%, transparent 46%),
    var(--pop-cream);
}

/* Aurora mesh: four soft colour clouds on cream, slowly breathing.
   A fixed pseudo-element (transform-animated) instead of an animated
   gradient — smoother, and it never repaints the whole viewport. */
body::before {
  content: "";
  position: fixed;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(38% 42% at 22% 24%, var(--pop-pink)  0%, transparent 68%),
    radial-gradient(34% 40% at 78% 18%, var(--pop-lilac) 0%, transparent 66%),
    radial-gradient(42% 44% at 82% 78%, var(--pop-blue)  0%, transparent 68%),
    radial-gradient(36% 40% at 18% 82%, var(--pop-mint)  0%, transparent 66%);
  filter: blur(20px) saturate(112%);
  animation: auroraBreathe 34s ease-in-out infinite;
}

@keyframes auroraBreathe {
  0%, 100% { transform: rotate(0deg)  scale(1);    }
  33%      { transform: rotate(4deg)  scale(1.09); }
  66%      { transform: rotate(-3deg) scale(1.05); }
}

/* Barely-there dot grid — gives the pastel wash a bit of structure */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(58,42,77,0.10) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 95% at 50% 45%, transparent 38%, #000 100%);
  mask-image: radial-gradient(120% 95% at 50% 45%, transparent 38%, #000 100%);
  opacity: 0.55;
}

/* Floating pastel blobs for depth — drifting highlights over the mesh */
.blob {
  position: fixed;
  z-index: 0;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  mix-blend-mode: soft-light;
  pointer-events: none;
  animation: float 18s ease-in-out infinite;
}
.blob.b1 { width: 420px; height: 420px; background: var(--pop-yellow); top: -110px; left: -80px; }
.blob.b2 { width: 480px; height: 480px; background: #fff;              bottom: -150px; right: -100px; animation-delay: -6s; }
.blob.b3 { width: 320px; height: 320px; background: var(--pop-mint);   top: 42%; right: 18%; animation-delay: -11s; }

@keyframes float {
  0%, 100% { transform: translateY(0) translateX(0) scale(1); }
  50%      { transform: translateY(-46px) translateX(24px) scale(1.1); }
}

/* ── Intro splash ────────────────────────────────────────────── */
#intro {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: var(--pop-cream);
  background-image:
    radial-gradient(40% 45% at 24% 26%, var(--pop-pink)  0%, transparent 68%),
    radial-gradient(36% 42% at 76% 20%, var(--pop-lilac) 0%, transparent 66%),
    radial-gradient(44% 46% at 80% 80%, var(--pop-blue)  0%, transparent 68%),
    radial-gradient(38% 42% at 20% 78%, var(--pop-mint)  0%, transparent 66%);
  transition: opacity 800ms ease, transform 800ms cubic-bezier(.4,0,.2,1);
  cursor: pointer;
}
#intro.leaving {
  opacity: 0;
  transform: scale(1.18);
  pointer-events: none;
}

/* soft radiant halo that blooms behind the wordmark */
.intro-glow {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.85), rgba(255,255,255,0) 60%);
  filter: blur(10px);
  transform: scale(0);
  animation: glowBloom 2.4s cubic-bezier(.2,.8,.2,1) 0.2s forwards;
}
@keyframes glowBloom {
  0%   { transform: scale(0);   opacity: 0; }
  50%  { opacity: 0.9; }
  100% { transform: scale(1.1); opacity: 0.5; }
}

.intro-inner {
  position: relative;
  text-align: center;
  z-index: 1;
}

.intro-word {
  margin: 0;
  font-weight: 800;
  font-size: clamp(2.6rem, 11vw, 8rem);
  line-height: 1;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  filter: drop-shadow(0 8px 0 rgba(255,255,255,0.55)) drop-shadow(0 18px 30px rgba(58,42,77,0.35));
}

/* Each letter drops + bounces in, staggered by --i */
.intro-word span {
  display: inline-block;
  color: var(--ink);
  opacity: 0;
  transform: translateY(-70px) scale(0.3) rotate(-12deg);
  animation: letterIn 0.7s cubic-bezier(.2,1.5,.35,1) forwards;
  animation-delay: calc(var(--i) * 0.075s);
}
@keyframes letterIn {
  0%   { opacity: 0; transform: translateY(-70px) scale(0.3) rotate(-12deg); }
  70%  { opacity: 1; transform: translateY(8px)  scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: translateY(0)    scale(1)    rotate(0); }
}

/* gentle idle float once the word has landed */
.intro-inner { animation: introFloat 3.5s ease-in-out 1.4s infinite; }
@keyframes introFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.intro-spark {
  margin-left: 0.15em;
  filter: none !important;
  color: initial;
  animation: letterIn 0.7s cubic-bezier(.2,1.5,.35,1) forwards,
             sparkleTwinkle 1.6s ease-in-out 1s infinite;
  animation-delay: calc(var(--i) * 0.075s), 1s;
  transform-origin: center;
}
@keyframes sparkleTwinkle {
  0%, 100% { transform: scale(1)   rotate(0);    filter: brightness(1); }
  50%      { transform: scale(1.25) rotate(18deg); filter: brightness(1.3); }
}

.intro-by {
  margin: 0.6em 0 0;
  font-weight: 700;
  font-size: clamp(1rem, 2.6vw, 1.6rem);
  color: var(--ink);
  opacity: 0;
  animation: byIn 0.8s ease 1.15s forwards;
}
@keyframes byIn {
  0%   { opacity: 0; transform: translateY(14px) scale(0.9); letter-spacing: 0.4em; }
  100% { opacity: 0.85; transform: translateY(0) scale(1);   letter-spacing: 0.25em; }
}

.intro-skip {
  position: absolute;
  bottom: 7vh;
  padding: 0.55em 1.3em;
  border-radius: 999px;
  background: rgba(255,255,255,0.75);
  box-shadow: 0 6px 18px rgba(58,42,77,0.25);
  font-weight: 700;
  font-size: clamp(0.85rem, 1.8vw, 1.05rem);
  color: var(--ink);
  opacity: 0;
  animation: byIn 0.9s ease 2.2s forwards, skipPulse 1.8s ease-in-out 3.1s infinite;
}
@keyframes skipPulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 6px 18px rgba(58,42,77,0.25); }
  50%      { transform: scale(1.06); box-shadow: 0 10px 26px rgba(255,158,205,0.6); }
}

/* ── Coverflow stage ─────────────────────────────────────────── */
.stage {
  position: relative;
  width: 100%;
  height: 54vh;
  perspective: 1600px;
  transform-style: preserve-3d;
}

.card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(50vw, 620px);
  aspect-ratio: 16 / 9;
  margin-left: calc(min(50vw, 620px) / -2);
  margin-top: calc(min(50vw, 620px) * 9 / 16 / -2);
  border-radius: 26px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 70px rgba(58, 42, 77, 0.45);
  transition: transform 620ms cubic-bezier(.2,.9,.25,1), opacity 500ms ease;
  transform-style: preserve-3d;
  cursor: pointer;
  border: 4px solid rgba(255,255,255,0.85);
}

.card.is-active {
  box-shadow: 0 40px 90px rgba(58, 42, 77, 0.55),
              0 0 0 6px rgba(255,255,255,0.9),
              0 0 60px rgba(255, 158, 205, 0.7);
  cursor: default;
}

.card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dim non-active cards a touch so the center pops */
.card:not(.is-active)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(58, 42, 77, 0.28);
}

/* Big play glyph only on the active, paused card (JS toggles body class) */
.card.is-active .glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 4rem;
  color: #fff;
  text-shadow: 0 4px 20px rgba(0,0,0,.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

/* ── Scrubber on the active card ─────────────────────────────── */
.card .scrub {
  position: absolute;
  left: 14px; right: 14px; bottom: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  cursor: pointer;
  z-index: 5;
  touch-action: none; /* let pointer-drag scrubbing work on touch screens */
}
.card.is-active .scrub {
  opacity: 1;
  pointer-events: auto;
}
.scrub-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pop-pink), var(--pop-yellow));
  box-shadow: 0 0 10px rgba(255, 158, 205, 0.8);
  pointer-events: none;
}

/* ── Pager dots ──────────────────────────────────────────────── */
.dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  border: 2px solid rgba(58,42,77,0.25);
  cursor: pointer;
  transition: transform .3s ease, background .3s ease, width .3s ease;
}
.dot.is-active {
  background: #fff;
  width: 34px;
  border-radius: 8px;
  box-shadow: 0 0 16px rgba(255,255,255,0.9);
}

/* ── Title bounce on change ──────────────────────────────────── */
/* Title is always fully visible; the bounce only scales/rotates, never
   touches opacity — so an idle animation engine can't hide it. */
.meta-title {
  opacity: 1;
}
.meta-title.bounce {
  animation: pop 500ms cubic-bezier(.2,1.4,.4,1);
}
@keyframes pop {
  0%   { transform: scale(0.82) rotate(-2deg); }
  60%  { transform: scale(1.06) rotate(1deg); }
  100% { transform: scale(1) rotate(0); }
}

.sound-btn.is-on {
  background: #fff;
  box-shadow: 0 0 22px rgba(255, 232, 163, 0.95), 0 6px 16px rgba(58,42,77,0.3);
  transform: scale(1.06);
}

.hint kbd {
  font-family: inherit;
  background: rgba(255,255,255,0.85);
  border-radius: 8px;
  padding: 2px 9px;
  box-shadow: 0 2px 0 rgba(58,42,77,0.25);
  font-weight: 700;
}

@media (max-width: 640px) {
  .card { width: 78vw; margin-left: calc(78vw / -2); margin-top: calc(78vw * 9 / 16 / -2); }
  .stage { height: 46vh; }
}