:root {
  color-scheme: dark;
  --ink: #fffaf0;
  --shadow: #111111;
  --hot: #ff2f6d;
  --cyan: #38e8ff;
  --lime: #71ff7b;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.95) 0 2%, transparent 3%),
    radial-gradient(circle at 18% 28%, rgba(255, 232, 63, 0.95) 0 10%, transparent 11%),
    radial-gradient(circle at 84% 24%, rgba(56, 232, 255, 0.9) 0 13%, transparent 14%),
    radial-gradient(circle at 26% 86%, rgba(113, 255, 123, 0.8) 0 14%, transparent 15%),
    radial-gradient(circle at 78% 78%, rgba(255, 47, 109, 0.86) 0 12%, transparent 13%),
    linear-gradient(120deg, #130033 0%, #b60076 34%, #ff5a00 63%, #061b62 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 220% 220%;
  animation: rainbow-shift 8s linear infinite;
  font-family:
    "Hiragino Sans",
    "Yu Gothic",
    "Noto Sans JP",
    system-ui,
    sans-serif;
}

.stage {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  isolation: isolate;
  padding: clamp(20px, 5vw, 56px);
}

.stage::before,
.stage::after {
  position: fixed;
  inset: -26vmax;
  z-index: -4;
  content: "";
  pointer-events: none;
}

.stage::before {
  background:
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0.24) 0 5deg, transparent 5deg 10deg),
    conic-gradient(from 90deg, rgba(255, 232, 63, 0.38), rgba(56, 232, 255, 0.38), rgba(255, 47, 109, 0.38), rgba(113, 255, 123, 0.38), rgba(255, 232, 63, 0.38));
  mix-blend-mode: screen;
  opacity: 0.92;
  animation: ray-spin 18s linear infinite;
}

.stage::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.92), transparent 11%),
    radial-gradient(circle at 50% 50%, rgba(255, 232, 63, 0.55), transparent 34%),
    repeating-radial-gradient(circle, transparent 0 34px, rgba(255, 255, 255, 0.22) 35px 38px);
  mix-blend-mode: color-dodge;
  opacity: 0.72;
  animation: pulse-glow 1.7s ease-in-out infinite alternate;
}

.cowfield,
.sparklefield,
.blast,
.vanishfield {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.cowfield {
  z-index: -2;
  overflow: hidden;
}

.sparklefield {
  z-index: -1;
  overflow: hidden;
  mix-blend-mode: screen;
}

.vanishfield {
  z-index: 2;
  overflow: hidden;
  mix-blend-mode: screen;
}

.cow {
  position: absolute;
  left: var(--start-x);
  top: var(--start-y);
  font-size: var(--size);
  filter:
    saturate(1.25)
    contrast(1.08)
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.82))
    drop-shadow(0 8px 10px rgba(0, 0, 0, 0.28));
  opacity: var(--alpha);
  transform: translate3d(0, 0, 0) rotate(var(--rot));
  animation: cow-flight var(--speed) linear var(--delay) infinite;
  will-change: transform;
}

.cow.is-mega {
  z-index: 1;
  filter:
    saturate(1.35)
    contrast(1.12)
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.95))
    drop-shadow(0 16px 18px rgba(0, 0, 0, 0.32));
  animation-name: mega-cow-flight;
}

.mascot {
  position: absolute;
  left: var(--start-x);
  top: var(--start-y);
  width: var(--size);
  height: auto;
  opacity: var(--alpha);
  filter:
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.75))
    drop-shadow(0 12px 14px rgba(0, 0, 0, 0.35));
  transform: translate3d(0, 0, 0) rotate(var(--rot));
  animation: mascot-flight var(--speed) linear var(--delay) infinite;
  will-change: transform;
}

.sparkle {
  position: absolute;
  left: var(--start-x);
  top: var(--start-y);
  color: var(--spark-color);
  font-size: var(--size);
  line-height: 1;
  opacity: 0;
  text-shadow:
    0 0 8px currentColor,
    0 0 18px currentColor,
    0 0 34px currentColor;
  transform: rotate(var(--rot)) scale(0.2);
  animation: sparkle-burst var(--speed) ease-in-out var(--delay) infinite;
  will-change: transform, opacity;
}

.vanish-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  color: var(--vanish-color);
  font-size: var(--size);
  line-height: 1;
  opacity: 0;
  text-shadow:
    0 0 10px currentColor,
    0 0 24px currentColor,
    0 0 46px currentColor;
  transform: translate(-50%, -50%) rotate(var(--angle)) scale(0.25);
  animation: vanish-dot 720ms cubic-bezier(0.12, 0.8, 0.22, 1) var(--delay) forwards;
  will-change: transform, opacity;
}

.blast {
  z-index: 0;
  background:
    repeating-conic-gradient(from 12deg, transparent 0 5deg, rgba(255, 255, 255, 0.28) 6deg 9deg),
    radial-gradient(circle, rgba(255, 255, 255, 0.65), rgba(255, 232, 63, 0.32) 14%, transparent 42%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: scale(0.8);
}

.blast.is-active {
  animation: blast-hit 680ms cubic-bezier(0.1, 0.85, 0.2, 1);
}

.message-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(92vw, 1080px);
  min-height: 42svh;
  place-items: center;
  text-align: center;
}

.message {
  position: relative;
  width: 100%;
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.6rem, 12vw, 8.8rem);
  font-weight: 1000;
  line-height: 0.98;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  text-wrap: balance;
  text-shadow:
    0 5px 0 var(--shadow),
    0 10px 0 var(--hot),
    0 15px 0 var(--cyan),
    0 22px 34px rgba(0, 0, 0, 0.65);
  transform: scale(0.2) rotate(-10deg);
  opacity: 0;
}

.message.is-visible:not(.is-leaving) {
  animation: impact-in 880ms cubic-bezier(0.08, 1.45, 0.25, 1) both;
}

.message.is-leaving {
  animation: vanish-out 680ms cubic-bezier(0.12, 0.8, 0.22, 1) both;
}

.stage.is-hitting {
  animation: stage-shake 560ms steps(2, end);
}

@keyframes rainbow-shift {
  0% {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0% 50%;
  }
  50% {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 100% 50%;
  }
  100% {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0% 50%;
  }
}

@keyframes ray-spin {
  to {
    transform: rotate(1turn) scale(1.08);
  }
}

@keyframes pulse-glow {
  to {
    opacity: 0.95;
    transform: scale(1.06);
  }
}

@keyframes impact-in {
  0% {
    opacity: 0;
    filter: blur(12px);
    transform: scale(0.18) rotate(-12deg);
  }
  58% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1.22) rotate(2deg);
  }
  76% {
    transform: scale(0.94) rotate(-1deg);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1) rotate(0);
  }
}

@keyframes vanish-out {
  0% {
    opacity: 1;
    filter: blur(0) brightness(1);
    transform: scale(1) rotate(0);
  }
  32% {
    opacity: 1;
    filter: blur(0) brightness(1.9) saturate(1.6);
    transform: scale(1.16) rotate(-2deg);
    text-shadow:
      0 5px 0 var(--shadow),
      0 10px 0 var(--hot),
      0 15px 0 var(--cyan),
      0 0 34px rgba(255, 255, 255, 0.95);
  }
  100% {
    opacity: 0;
    filter: blur(16px) brightness(2.6) saturate(2);
    transform: scale(0.08) rotate(28deg);
  }
}

@keyframes stage-shake {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  15% {
    transform: translate3d(-10px, 7px, 0) rotate(-0.7deg);
  }
  30% {
    transform: translate3d(12px, -8px, 0) rotate(0.8deg);
  }
  45% {
    transform: translate3d(-8px, -5px, 0) rotate(-0.5deg);
  }
  60% {
    transform: translate3d(9px, 6px, 0) rotate(0.5deg);
  }
}

@keyframes sparkle-burst {
  0%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(var(--rot)) scale(0.2);
  }
  18% {
    opacity: 1;
    transform: translate3d(var(--drift-x), var(--drift-y), 0) rotate(calc(var(--rot) + 90deg)) scale(1.25);
  }
  42% {
    opacity: 0.7;
    transform: translate3d(calc(var(--drift-x) * 1.7), calc(var(--drift-y) * 1.7), 0) rotate(calc(var(--rot) + 220deg)) scale(0.72);
  }
}

@keyframes vanish-dot {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--angle)) scale(0.2);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--angle) + 180deg))
      translateX(var(--distance))
      scale(1.35);
  }
}

@keyframes blast-hit {
  0% {
    opacity: 0;
    transform: scale(0.2) rotate(0);
  }
  24% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.55) rotate(18deg);
  }
}

@keyframes cow-flight {
  0% {
    transform: translate3d(0, 0, 0) rotate(var(--rot)) scale(var(--scale));
  }
  50% {
    transform:
      translate3d(calc(var(--travel-x) * 0.5), calc(var(--travel-y) * 0.5), 0)
      rotate(calc(var(--rot) + 520deg))
      scale(calc(var(--scale) * 1.12));
  }
  100% {
    transform: translate3d(var(--travel-x), var(--travel-y), 0) rotate(calc(var(--rot) + 1040deg)) scale(var(--scale));
  }
}

@keyframes mega-cow-flight {
  0% {
    transform: translate3d(0, 0, 0) rotate(var(--rot)) scale(var(--scale));
  }
  50% {
    transform:
      translate3d(calc(var(--travel-x) * 0.5), calc(var(--travel-y) * 0.5), 0)
      rotate(calc(var(--rot) + 260deg))
      scale(calc(var(--scale) * 1.24));
  }
  100% {
    transform: translate3d(var(--travel-x), var(--travel-y), 0) rotate(calc(var(--rot) + 520deg)) scale(var(--scale));
  }
}

@keyframes mascot-flight {
  0% {
    transform: translate3d(0, 0, 0) rotate(var(--rot)) scale(var(--scale));
  }
  50% {
    transform:
      translate3d(calc(var(--travel-x) * 0.52), calc(var(--travel-y) * 0.52), 0)
      rotate(calc(var(--rot) + 410deg))
      scale(calc(var(--scale) * 1.15));
  }
  100% {
    transform: translate3d(var(--travel-x), var(--travel-y), 0) rotate(calc(var(--rot) + 820deg)) scale(var(--scale));
  }
}

@keyframes impact-in-mobile {
  0% {
    opacity: 0;
    filter: blur(12px);
    transform: scale(0.2) rotate(-10deg);
  }
  58% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1.08) rotate(1deg);
  }
  76% {
    transform: scale(0.96) rotate(-1deg);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1) rotate(0);
  }
}

@media (max-width: 520px) {
  .stage {
    padding: 18px;
  }

  .message-wrap {
    width: 96vw;
    min-height: 52svh;
  }

  .message {
    font-size: clamp(2.35rem, 15vw, 4.5rem);
    line-height: 1.06;
    text-shadow:
      0 3px 0 var(--shadow),
      0 7px 0 var(--hot),
      0 11px 0 var(--cyan),
      0 18px 28px rgba(0, 0, 0, 0.65);
  }

  .message.is-visible:not(.is-leaving) {
    animation: impact-in-mobile 880ms cubic-bezier(0.08, 1.45, 0.25, 1) both;
  }
}

@media (max-width: 640px) {
  .stage::after {
    opacity: 0.52;
  }

  .cow {
    filter:
      saturate(1.14)
      drop-shadow(0 0 8px rgba(255, 255, 255, 0.72));
  }

  .cow.is-mega {
    filter:
      saturate(1.22)
      drop-shadow(0 0 13px rgba(255, 255, 255, 0.88));
  }

  .mascot {
    filter:
      drop-shadow(0 0 8px rgba(255, 255, 255, 0.65))
      drop-shadow(0 8px 10px rgba(0, 0, 0, 0.24));
  }

  .sparkle {
    text-shadow:
      0 0 7px currentColor,
      0 0 16px currentColor;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cow {
    animation-duration: 28s;
  }

  .mascot {
    animation-duration: 30s;
  }

  .stage.is-hitting,
  .blast.is-active,
  .message.is-visible,
  .message.is-leaving,
  body,
  .stage::before,
  .stage::after,
  .sparkle,
  .vanish-dot {
    animation-duration: 1ms;
  }
}