/* ===========================================================================
   animations.css — transition layers, stat-up FX, level-up, misc motion
   =========================================================================== */

/* ---- transition overlay elements (driven by transitions.js) ----------- */
#fx-layer {
  position: absolute; inset: 0;
  z-index: 9000;
  pointer-events: none;
  overflow: hidden;
}

/* HARD CUT — quick red diagonal wipe across screen */
#wipe {
  position: absolute; inset: -20%;
  background: var(--p5-red);
  transform: translateX(-140%) skewX(-14deg);
}
#wipe.run { animation: wipeSlash .42s var(--ease-in-hard) forwards; }
@keyframes wipeSlash {
  0%   { transform: translateX(-140%) skewX(-14deg); }
  50%  { transform: translateX(0%)   skewX(-14deg); }
  100% { transform: translateX(140%) skewX(-14deg); }
}

/* SWOOSH — big white diagonal band sweeps L->R (menu-open) */
#swoosh {
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 55%;
  background: var(--p5-white);
  transform: translateX(-200%) skewX(-16deg);
  box-shadow: 0 0 60px rgba(255,255,255,.6);
}
#swoosh.run { animation: swooshBand .5s var(--ease-in-hard) forwards; }
@keyframes swooshBand {
  0%   { transform: translateX(-200%) skewX(-16deg); }
  100% { transform: translateX(320%)  skewX(-16deg); }
}
/* incoming panels ride in behind the swoosh */
.slide-in { animation: slideIn .5s var(--ease-snap) both; }
@keyframes slideIn {
  0%   { opacity: 0; transform: translateX(-70px) skewX(-9deg); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
.stagger > * { animation: slideIn .5s var(--ease-snap) both; }
.stagger > *:nth-child(1) { animation-delay: .02s; }
.stagger > *:nth-child(2) { animation-delay: .07s; }
.stagger > *:nth-child(3) { animation-delay: .12s; }
.stagger > *:nth-child(4) { animation-delay: .17s; }
.stagger > *:nth-child(5) { animation-delay: .22s; }
.stagger > *:nth-child(6) { animation-delay: .27s; }
.stagger > *:nth-child(7) { animation-delay: .32s; }
.stagger > *:nth-child(8) { animation-delay: .37s; }

/* INK SPLATTER — return-to-title: flythrough zoom + red blot flood */
#ink-fly {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(227,18,27,.25), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,220,120,.12) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(90deg, rgba(255,220,120,.10) 0 2px, transparent 2px 16px),
    var(--p5-black);
  opacity: 0;
  transform: scale(1);
}
#ink-fly.run { animation: inkFly .55s ease-in forwards; }
@keyframes inkFly {
  0%   { opacity: 0; transform: scale(1) rotate(0deg); }
  20%  { opacity: 1; }
  100% { opacity: 1; transform: scale(2.1) rotate(6deg); }
}
#ink-streak {
  position: absolute; top: 34%; left: -30%; width: 60%; height: 5px;
  background: linear-gradient(90deg, transparent, #ff5a5a, #fff, transparent);
  filter: blur(1px); opacity: 0; transform: rotate(-8deg);
}
#ink-streak.run { animation: streak .55s ease-in forwards; }
@keyframes streak {
  0% { opacity: 0; left: -40%; }
  40% { opacity: 1; }
  100% { opacity: 0; left: 120%; }
}
#ink-blot {
  position: absolute; left: 50%; top: 50%;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  background: var(--p5-red);
  border-radius: 46% 54% 48% 52% / 55% 45% 58% 42%;
  transform: scale(0);
  filter: drop-shadow(0 0 0 var(--p5-red));
}
#ink-blot.run { animation: blot .5s .35s var(--ease-in-hard) forwards; }
@keyframes blot {
  0%   { transform: scale(0) rotate(0deg); }
  100% { transform: scale(60) rotate(40deg); }
}

/* ---- stat-up: floating note glyphs (CSS/SVG fallback) ----------------- */
.note-particle {
  position: fixed;
  font-size: 1.7rem;
  pointer-events: none;
  z-index: 9500;
  will-change: transform, opacity;
  animation: floatUp 1.15s var(--ease-snap) forwards;
  text-shadow: 0 0 6px rgba(35,224,224,.7);
}
.note-particle.sparkle { color: var(--p5-gold); text-shadow: 0 0 8px rgba(255,210,63,.9); }
@keyframes floatUp {
  0%   { opacity: 0; transform: translate(0, 6px) scale(.4) rotate(-8deg); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 18px), -92px) scale(1.25) rotate(12deg); }
}

/* video-based note overlay canvas */
.note-canvas {
  position: fixed;
  z-index: 9500;
  pointer-events: none;
  animation: canvasFade 1.1s ease-out forwards;
}
@keyframes canvasFade {
  0% { opacity: 0; transform: translateY(8px) scale(.9); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-40px) scale(1.05); }
}

/* ---- stat-up: 3 blue notes dance, then dash off-screen left ----------- */
.dance-note {
  position: fixed;
  width: clamp(38px, 6vw, 56px); height: auto;
  z-index: 9500; pointer-events: none;
  filter: drop-shadow(0 0 7px rgba(35,224,224,.75));
  animation: danceOut 1.1s ease-in forwards;
}
.dance-note.glyph {
  width: auto; font-size: 2.6rem; color: var(--p5-cyan);
  text-shadow: 0 0 8px rgba(35,224,224,.8);
}
@keyframes danceOut {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(.6); }
  12%  { opacity: 1; transform: translate(0, calc(var(--bob) * -1)) rotate(var(--rot)) scale(1); }
  30%  { transform: translate(8px, var(--bob)) rotate(calc(var(--rot) * -1)) scale(1.05); }
  50%  { transform: translate(-8px, calc(var(--bob) * -1)) rotate(var(--rot)) scale(1); }
  70%  { opacity: 1; transform: translate(6px, var(--bob)) rotate(calc(var(--rot) * -1)) scale(1.05); }
  100% { opacity: 0; transform: translate(-120vw, -24px) rotate(-42deg) scale(.9); }
}

/* affected stat row blinks green until the user leaves Stats */
.stat-row.blink-green { animation: blinkGreen 1s ease-in-out infinite; }
@keyframes blinkGreen {
  0%, 100% { box-shadow: none; background: rgba(0,0,0,.28); }
  50% {
    box-shadow: inset 0 0 0 2px #2ecc40, 0 0 20px rgba(46,204,64,.45);
    background: rgba(46,204,64,.16);
  }
}

/* affected confidant card blinks green (its outline) until the user leaves Confidants */
.conf-card.blink-green { animation: blinkGreenConf 1s ease-in-out infinite; }
@keyframes blinkGreenConf {
  0%, 100% { background: var(--p5-red); box-shadow: none; }
  50% { background: #2ecc40; box-shadow: 0 0 20px rgba(46,204,64,.45); }
}

/* ---- bar fill + level up ---------------------------------------------- */
.bar-flash { animation: barFlash .5s ease-out; }
@keyframes barFlash {
  0%, 100% { filter: none; }
  40% { filter: brightness(2.6) saturate(0); }
}

#levelup-banner {
  position: absolute; top: 40%; left: 0; right: 0;
  text-align: center;
  font-family: var(--font-header);
  font-style: italic;
  font-size: clamp(2.5rem, 9vw, 6rem);
  color: var(--p5-white);
  -webkit-text-stroke: 3px var(--p5-black);
  text-shadow: 6px 6px 0 var(--p5-red);
  z-index: 9600; pointer-events: none;
  opacity: 0;
}
#levelup-banner.run { animation: levelUp 1.4s var(--ease-snap) forwards; }
@keyframes levelUp {
  0%   { opacity: 0; transform: translateX(-60%) skewX(-12deg) scale(.6); }
  25%  { opacity: 1; transform: translateX(0) skewX(-12deg) scale(1.05); }
  75%  { opacity: 1; transform: translateX(0) skewX(-12deg) scale(1); }
  100% { opacity: 0; transform: translateX(60%) skewX(-12deg) scale(1); }
}

/* rank-title zoom when it changes */
.rank-zoom { animation: rankZoom .6s var(--ease-snap); }
@keyframes rankZoom {
  0% { transform: scale(1.6); color: var(--p5-gold); }
  100% { transform: scale(1); }
}

/* idle pulse for "PRESS ANY BUTTON" */
.pulse { animation: pulse 1.3s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* gentle float for menu character silhouette */
.float-slow { animation: floatSlow 6s ease-in-out infinite; }
@keyframes floatSlow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; }
}