/* ==========================================================================
   hype.css  -  the over-the-top layer (goes with js/hype.js)
   Everything here is decoration: pointer-events none, transform and
   opacity only, and it all switches off for reduced motion.
   ========================================================================== */

:root {
  --hype-bat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 34'%3E%3Cpath d='M32 12C28 8 18 4 2 7c6 3 8 7 7 13 4-3 9-2 11 2 3-3 7-2 9 2l3 4 3-4c2-4 6-5 9-2 2-4 7-5 11-2-1-6 1-10 7-13-16-3-26 1-30 5z' fill='%2317111a' stroke='%23ff8fc7' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M28 14l-.5-6 3 3h3l3-3-.5 6c-1 3-7 3-8 0z' fill='%2317111a' stroke='%23ff8fc7' stroke-width='1.2' stroke-linejoin='round'/%3E%3Ccircle cx='30.6' cy='13.4' r='.9' fill='%23ff8fc7'/%3E%3Ccircle cx='33.4' cy='13.4' r='.9' fill='%23ff8fc7'/%3E%3C/svg%3E");
  --hype-bat-pink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 34'%3E%3Cpath d='M32 12C28 8 18 4 2 7c6 3 8 7 7 13 4-3 9-2 11 2 3-3 7-2 9 2l3 4 3-4c2-4 6-5 9-2 2-4 7-5 11-2-1-6 1-10 7-13-16-3-26 1-30 5z' fill='%23ff8fc7'/%3E%3Cpath d='M28 14l-.5-6 3 3h3l3-3-.5 6c-1 3-7 3-8 0z' fill='%23ff8fc7'/%3E%3C/svg%3E");
  --hype-bow-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 26'%3E%3Cpath d='M20 12C16 4 4 0 3 8s11 8 17 4zM20 12c4-8 16-12 17-4s-11 8-17 4zM19 13l-6 10 4-2 2 3zM21 13l6 10-4-2-2 3z' fill='%230b0709'/%3E%3Ccircle cx='20' cy='12' r='3.2' fill='%230b0709'/%3E%3C/svg%3E");
}

.hype-layer {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- gate open: lightning flash + bolt ---------- */
.hype-flash {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 105;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), #fff 0%, #ffe6f3 26%, rgba(255, 143, 199, .88) 58%, rgba(193, 18, 63, .55) 100%);
  animation: hypeFlash .85s ease-out forwards;
}
@keyframes hypeFlash {
  0%   { opacity: 0; }
  7%   { opacity: .95; }
  18%  { opacity: .12; }
  28%  { opacity: .78; }
  100% { opacity: 0; }
}
.hype-bolt {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hype-bolt polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- gate open: bat swarm ---------- */
.hype-swarm { z-index: 104; }
.hype-sbat {
  position: absolute;
  width: 40px;
  height: 22px;
  margin: -11px 0 0 -20px;
  opacity: 0;
  will-change: transform, opacity;
  animation: hypeBatOut var(--dur, 1.4s) cubic-bezier(.2, .75, .35, 1) var(--delay, 0s) forwards;
}
.hype-sbat i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--hype-bat) center / contain no-repeat;
  transform-origin: 50% 40%;
  animation: hypeFlap var(--flap, .15s) ease-in-out infinite alternate;
}
@keyframes hypeBatOut {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(.15) rotate(0deg); }
  10%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--tx, 0), var(--ty, -300px), 0) scale(var(--s, 1)) rotate(var(--r, 0deg)); }
}
@keyframes hypeFlap {
  from { transform: scaleY(1); }
  to   { transform: scaleY(.38); }
}

/* ---------- ambient sky: lightning flicker + shooting stars ---------- */
.hype-sky { z-index: 46; }
.hype-lightning {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 47;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, rgba(255, 236, 246, .5) 0%, rgba(255, 143, 199, .18) 35%, transparent 70%);
  animation: hypeLightning 1s linear forwards;
}
@keyframes hypeLightning {
  0%   { opacity: 0; }
  6%   { opacity: .26; }
  12%  { opacity: .04; }
  20%  { opacity: .18; }
  40%  { opacity: .05; }
  100% { opacity: 0; }
}
.hype-shoot {
  position: absolute;
  width: 0;
  height: 0;
  transform: rotate(var(--ang, 20deg));
}
.hype-shoot i {
  position: absolute;
  right: 0;
  top: -1px;
  width: 130px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 194, 223, 0), rgba(255, 194, 223, .75) 70%, #fff);
  transform-origin: 100% 50%;
  opacity: 0;
  will-change: transform, opacity;
  animation: hypeShoot 1.25s cubic-bezier(.3, .6, .4, 1) forwards;
}
.hype-shoot i::after {
  content: "";
  position: absolute;
  right: -3px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255, 143, 199, .8) 45%, transparent 70%);
}
@keyframes hypeShoot {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) scaleX(.2); }
  15%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--dist, 60vw), 0, 0) scaleX(1); }
}

/* ---------- balloons (hero parade + Art's present) ---------- */
.hype-balloons { z-index: 58; }
.hype-balloon {
  position: absolute;
  bottom: 0;
  width: var(--bw, 56px);
  height: calc(var(--bw, 56px) * 2.333);
  margin-left: calc(var(--bw, 56px) / -2);
  margin-bottom: calc(var(--bw, 56px) * -2.45);
  will-change: transform;
  animation: hypeRise var(--dur, 10s) cubic-bezier(.35, .1, .65, .95) var(--delay, 0s) both;
}
.hype-balloon-sway {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 70%;
  animation: hypeSway var(--sw, 2.6s) ease-in-out infinite alternate;
}
.hype-balloon-art {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}
.hype-balloon-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hype-balloon-art .art-fallback { font-size: calc(var(--bw, 56px) * .9); align-items: start; }
.hype-balloon-hit {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 0;
  height: 62%;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.hype-balloon.is-popped .hype-balloon-hit { pointer-events: none; }
.hype-balloon.is-popped .hype-balloon-art { animation: hypeBalloonPop .18s ease-out forwards; }
@keyframes hypeRise {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--drift, 0px), calc(-100vh - 100% - 40px), 0); }
}
@keyframes hypeSway {
  from { transform: rotate(-7deg) translate3d(-6px, 0, 0); }
  to   { transform: rotate(7deg) translate3d(6px, 0, 0); }
}
@keyframes hypeBalloonPop {
  0%   { transform: scale(1); opacity: 1; }
  60%  { transform: scale(1.35); opacity: .6; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ---------- scroll progress bar, the icon on the tip follows the section ---------- */
.hype-progress {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  height: 3px;
  z-index: 66;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease;
}
body.is-open .hype-progress { opacity: 1; }
.hype-progress-fill {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, #c1123f, #ff8fc7 55%, #ffe3f1);
  box-shadow: 0 0 6px #ff8fc7, 0 0 14px rgba(255, 143, 199, .7);
  transform-origin: 0 50%;
  transform: scaleX(0);
  will-change: transform;
}
.hype-progress[data-icon="balloon"] .hype-progress-fill {
  background: linear-gradient(90deg, #7d0b29, #c1123f 55%, #f4eee8);
  box-shadow: 0 0 6px rgba(244, 238, 232, .7), 0 0 14px rgba(193, 18, 63, .6);
}
.hype-progress[data-icon="vinyl"] .hype-progress-fill {
  background: linear-gradient(90deg, #5b2ca8, #b48cff 55%, #efe4ff);
  box-shadow: 0 0 6px #b48cff, 0 0 14px rgba(180, 140, 255, .65);
}
.hype-progress[data-icon="ball"] .hype-progress-fill {
  background: linear-gradient(90deg, #004d98, #a50044 60%, #edbb00);
  box-shadow: 0 0 6px rgba(237, 187, 0, .8), 0 0 14px rgba(0, 77, 152, .7);
}
.hype-progress-tip {
  position: absolute;
  left: 0;
  top: -8px;
  width: 24px;
  height: 19px;
  margin-left: -12px;
  will-change: transform;
}
.hype-tip-pop {
  display: block;
  width: 100%;
  height: 100%;
}
.hype-tip-pop.is-swap { animation: hypeTipSwap .5s cubic-bezier(.34, 1.56, .64, 1); }
.hype-tip-pop i {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 3px rgba(255, 143, 199, .85));
  transform-origin: 50% 50%;
}
.hype-tip-pop svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hype-progress[data-icon="bat"] .hype-tip-pop i { transform-origin: 50% 40%; animation: hypeFlap .24s ease-in-out infinite alternate; }
.hype-progress[data-icon="vinyl"] .hype-tip-pop i { filter: drop-shadow(0 0 3px rgba(180, 140, 255, .9)); animation: hypeSpin 1.8s linear infinite; }
.hype-progress[data-icon="ball"] .hype-tip-pop i { filter: drop-shadow(0 0 3px rgba(237, 187, 0, .8)); animation: hypeSpin 2.4s linear infinite; }
.hype-progress[data-icon="heart"] .hype-tip-pop i { animation: hypeBeat 1.2s ease-in-out infinite; }
.hype-progress[data-icon="balloon"] .hype-tip-pop i,
.hype-progress[data-icon="cake"] .hype-tip-pop i,
.hype-progress[data-icon="coffin"] .hype-tip-pop i,
.hype-progress[data-icon="envelope"] .hype-tip-pop i,
.hype-progress[data-icon="card"] .hype-tip-pop i { animation: hypeTipBob 1.6s ease-in-out infinite; }
@keyframes hypeTipSwap {
  0%   { transform: scale(.2) rotate(-30deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes hypeSpin { to { transform: rotate(360deg); } }
@keyframes hypeBeat {
  0%, 60%, 100% { transform: scale(1); }
  15%           { transform: scale(1.2); }
  30%           { transform: scale(.96); }
  45%           { transform: scale(1.12); }
}
@keyframes hypeTipBob {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-6deg); }
  50%      { transform: translate3d(0, -2px, 0) rotate(6deg); }
}

/* ---------- marquee ribbons: after the hero and after the letter only ---------- */
.hype-ribbons {
  position: relative;
  z-index: 2;
  height: 132px;
  overflow: hidden;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
/* two bands that cross like an X, so both stay readable */
.hype-ribbon {
  position: absolute;
  left: -8%;
  width: 116%;
  top: 50%;
  height: 38px;
  margin-top: -19px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ink, #0b0709);
  border-top: 2px solid var(--pink, #ff8fc7);
  border-bottom: 2px solid var(--pink, #ff8fc7);
  box-shadow: 0 0 16px rgba(255, 143, 199, .3), 0 10px 22px rgba(0, 0, 0, .45);
  transform: translate3d(0, 19px, 0) rotate(-2.6deg);
}
.hype-ribbon.alt {
  background: var(--pink, #ff8fc7);
  border-color: var(--ink, #0b0709);
  box-shadow: 0 0 18px rgba(255, 143, 199, .35), 0 10px 22px rgba(0, 0, 0, .4);
  transform: translate3d(0, -21px, 0) rotate(1.8deg);
}
.hype-ribbon-track {
  display: flex;
  flex: 0 0 auto;
  white-space: nowrap;
  will-change: transform;
  animation: hypeMarquee 32s linear infinite;
}
.hype-ribbon.alt .hype-ribbon-track { animation-duration: 38s; animation-direction: reverse; }
.hype-ribbons.is-paused .hype-ribbon-track { animation-play-state: paused; }
.hype-ribbon-item {
  display: inline-flex;
  align-items: center;
  gap: .8em;
  padding-right: .8em;
  font-family: var(--font-type, 'Special Elite', 'Courier New', monospace);
  font-size: .95rem;
  line-height: 1;
  letter-spacing: .14em;
  color: var(--blush, #ffc2df);
}
.hype-ribbon.alt .hype-ribbon-item { color: var(--ink, #0b0709); }
.hype-sep {
  display: inline-block;
  flex: 0 0 auto;
  width: 28px;
  height: 15px;
  background: var(--hype-bat-pink) center / contain no-repeat;
}
.hype-ribbon.alt .hype-sep { width: 24px; height: 16px; background-image: var(--hype-bow-ink); }
@keyframes hypeMarquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (min-width: 900px) {
  .hype-ribbon { transform: translate3d(0, 19px, 0) rotate(-1.4deg); }
  .hype-ribbon.alt { transform: translate3d(0, -21px, 0) rotate(1deg); }
}

/* ---------- interludes: calm lines that fade in once ---------- */
.hype-ok .interlude .interlude-mark,
.hype-ok .interlude .interlude-line {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 1.1s ease, transform 1.3s cubic-bezier(.16, 1, .3, 1);
}
.hype-ok .interlude .interlude-line { transition-delay: .25s; }
.hype-ok .interlude.is-in .interlude-mark,
.hype-ok .interlude.is-in .interlude-line {
  opacity: 1;
  transform: none;
}

/* ---------- Barca goal fallback pop (only when barca.js didn't draw one) ---------- */
.hype-gool {
  position: fixed;
  z-index: 62;
  left: 50%;
  top: 40%;
  pointer-events: none;
  font-family: var(--font-goth, 'Pirata One', Georgia, serif);
  font-size: clamp(3rem, 16vw, 5rem);
  line-height: 1;
  letter-spacing: .04em;
  color: #edbb00;
  text-shadow: 0 2px 0 #0b1f4d, 0 0 14px rgba(237, 187, 0, .6), 0 0 32px rgba(165, 0, 68, .55);
  white-space: nowrap;
  transform: translate(-50%, -50%) scale(.2);
  opacity: 0;
  animation: hypeGool .9s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
@keyframes hypeGool {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-8deg); }
  22%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(3deg); }
  70%  { opacity: 1; transform: translate(-50%, -62%) scale(1) rotate(-2deg); }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(.9) rotate(0deg); }
}

/* ---------- her name: letters that wave and flicker ---------- */
.hype-word { white-space: nowrap; }
#hero-name.hype-name { position: relative; }
#hero-name .hype-letters,
#hero-name .hype-word,
#finale-title .hype-letters,
#finale-title .hype-word { animation: none; }

@media (prefers-reduced-motion: no-preference) {
  #hero-name .hype-ch {
    animation:
      hypeWave 2.6s ease-in-out infinite,
      hypeFlick 7s linear infinite,
      hypeDrop .8s cubic-bezier(.34, 1.56, .64, 1) both;
    animation-delay:
      calc(var(--i, 0) * -.12s),
      calc(var(--r, 0) * -7s),
      calc(var(--i, 0) * .045s + .55s);
  }
  #hero.hype-offscreen .hype-ch,
  #hero.hype-offscreen #hero-name::before { animation-play-state: paused; }
  #hero-name.hype-name::before {
    content: "";
    position: absolute;
    top: -22%; bottom: -22%;
    left: -6%; right: -6%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 143, 199, .34), rgba(193, 18, 63, .12) 62%, transparent);
    pointer-events: none;
    animation: hypeGlow 2.8s ease-in-out infinite;
  }

  #finale-title.hype-pop-letters .hype-ch { scale: 0; }
  #finale-title.hype-pop-go .hype-ch {
    animation: hypeLetterPop .7s cubic-bezier(.34, 1.56, .64, 1) both;
    animation-delay: calc(var(--i, 0) * 80ms + .15s);
  }
}
@keyframes hypeWave {
  0%, 55%, 100% { translate: 0 0; }
  20%           { translate: 0 -.16em; }
  38%           { translate: 0 .03em; }
}
@keyframes hypeFlick {
  0%, 88%, 100% { opacity: 1; }
  89%           { opacity: .35; }
  90.5%         { opacity: 1; }
  92%           { opacity: .55; }
  93%           { opacity: 1; }
}
@keyframes hypeDrop {
  0%   { scale: 0; rotate: -30deg; }
  60%  { scale: 1.3; rotate: 8deg; }
  100% { scale: 1; rotate: 0deg; }
}
@keyframes hypeGlow {
  0%, 100% { opacity: .45; transform: scale(.94); }
  50%      { opacity: 1; transform: scale(1.06); }
}
@keyframes hypeLetterPop {
  0%   { scale: 0; rotate: -25deg; translate: 0 .5em; }
  60%  { scale: 1.3; rotate: 6deg; translate: 0 -.1em; }
  100% { scale: 1; rotate: 0deg; translate: 0 0; }
}

/* ---------- pause with the tab ---------- */
.hype-hidden .hype-layer *,
.hype-hidden .hype-progress *,
.hype-hidden .hype-ribbon-track,
.hype-hidden .hype-ch,
.hype-hidden .hype-flash,
.hype-hidden .hype-lightning,
.hype-hidden .hype-gool { animation-play-state: paused !important; }

/* ---------- reduced motion: the loud stuff just isn't there ---------- */
@media (prefers-reduced-motion: reduce) {
  .hype-flash,
  .hype-lightning,
  .hype-swarm,
  .hype-sky,
  .hype-balloons { display: none !important; }
  .hype-ribbon-track { animation: none !important; transform: none !important; }
  .hype-tip-pop,
  .hype-tip-pop i { animation: none !important; }
  .hype-gool { animation: none !important; opacity: 1; transform: translate(-50%, -50%); }
  .hype-ok .interlude .interlude-mark,
  .hype-ok .interlude .interlude-line { opacity: 1; transform: none; }
}