/* ── Custom properties ── */
@property --bg-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@property --hue-shift {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

:root {
  --clr-bg:      #07070f;
  --clr-text:    #f0f0ff;
  --clr-muted:   rgba(240, 240, 255, 0.35);
  --clr-accent1: #c084fc;
  --clr-accent2: #22d3ee;
  --font-display: 'Space Grotesk', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
}

/* ── Animated gradient background ── */
@keyframes bg-rotate {
  to { --bg-angle: 360deg; }
}

body {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100dvh;
  font-family: var(--font-display);
  color: var(--clr-text);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  background:
    conic-gradient(
      from var(--bg-angle) at 55% 45%,
      hsl(270, 45%, 7%),
      hsl(300, 40%, 11%),
      hsl(240, 55%, 9%),
      hsl(285, 50%, 7%),
      hsl(315, 38%, 12%),
      hsl(255, 45%, 8%),
      hsl(270, 45%, 7%)
    );
}

@media (prefers-reduced-motion: no-preference) {
  body {
    animation: bg-rotate 60s linear infinite;
  }
}

/* ── Brainrot mode — background ── */
@keyframes hue-cycle {
  to { --hue-shift: 360deg; }
}

@keyframes bg-rotate-fast {
  to { --bg-angle: 360deg; }
}

body.brainrot-mode,
body.brainrot-mode * {
  cursor: none;
}

body.brainrot-mode {
  background:
    conic-gradient(
      from var(--bg-angle) at 50% 50%,
      hsl(320, 100%, 55%),
      hsl(50,  100%, 55%),
      hsl(150, 100%, 50%),
      hsl(190, 100%, 55%),
      hsl(270, 100%, 60%),
      hsl(0,   100%, 55%),
      hsl(320, 100%, 55%)
    );
  filter: hue-rotate(var(--hue-shift)) saturate(1.4) contrast(1.15);
}

@media (prefers-reduced-motion: no-preference) {
  body.brainrot-mode {
    animation:
      bg-rotate-fast 1.2s linear infinite,
      hue-cycle 0.4s linear infinite;
  }
}

/* ── Main content ── */
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 2rem;
  position: relative;
  z-index: 10;
}

/* ── Heading ── */
h1#main-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(4.5rem, 16vw, 11rem);
  letter-spacing: -0.04em;
  line-height: 1;
  text-align: center;
  text-shadow:
    1px 0 0 rgba(255, 0, 80, 0.6),
    -1px 0 0 rgba(0, 220, 255, 0.6);
  transition: text-shadow 0.2s ease;
}

body.brainrot-mode h1#main-title {
  text-shadow:
    4px 0 0 rgba(255, 0, 80, 0.9),
    -4px 0 0 rgba(0, 220, 255, 0.9),
    0 0 40px rgba(255, 255, 255, 0.4);
}

@media (prefers-reduced-motion: no-preference) {
  body.brainrot-mode h1#main-title {
    animation: glitch-text 0.3s infinite;
  }

  body.brainrot-mode #tagline {
    animation: pulse 0.5s ease-in-out infinite;
  }
}

@keyframes glitch-text {
  0%, 100% { transform: translate(0, 0)      scale(1); }
  20%       { transform: translate(-3px, 1px) scale(1.13); }
  40%       { transform: translate(3px, -1px) scale(1); }
  60%       { transform: translate(-2px, 2px) scale(1.13); }
  80%       { transform: translate(2px, 0px)  scale(1); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

@keyframes spin-pulse {
  0%   { transform: rotate(0deg)   scale(1); }
  25%  { transform: rotate(90deg)  scale(1.15); }
  50%  { transform: rotate(180deg) scale(1); }
  75%  { transform: rotate(270deg) scale(1.15); }
  100% { transform: rotate(360deg) scale(1); }
}

/* ── Tagline ── */
#tagline {
  display: none;
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 2vw, 1.05rem);
  color: var(--clr-muted);
  letter-spacing: 0.08em;
  text-align: center;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

body.brainrot-mode #tagline {
  display: block;
  color: var(--clr-text);
  text-shadow:
    2px 0 0 rgba(255, 0, 80, 0.7),
    -2px 0 0 rgba(0, 220, 255, 0.7);
}

/* ── Brainrot center — doge + text ── */
#brainrot-center {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  position: absolute;
  inset: 0;
  justify-content: center;
  z-index: 20;
  pointer-events: none;
  padding-top: 40vh;
}

body.brainrot-mode #brainrot-center {
  display: flex;
}

/* ── Doge wrapper + satellite ring ── */
#doge-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#doge {
  font-size: clamp(4rem, 12vw, 8rem);
  line-height: 1;
  filter: drop-shadow(0 0 20px rgba(255, 220, 0, 0.8));
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: no-preference) {
  #doge {
    animation: spin-pulse 1s linear infinite;
  }
}

#multi-doge-ring {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320%;
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
}

body.brainrot-mode #multi-doge-ring {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  body.brainrot-mode #multi-doge-ring {
    animation: ring-spin 3s linear infinite;
  }
}

@keyframes ring-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.satellite-doge {
  position: absolute;
  font-size: clamp(1.8rem, 5vmin, 3rem);
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(255, 200, 0, 0.7));
}

.satellite-doge:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
.satellite-doge:nth-child(2) { top: 50%; right: 0; transform: translateY(-50%); }
.satellite-doge:nth-child(3) { bottom: 0; left: 50%; transform: translateX(-50%); }
.satellite-doge:nth-child(4) { top: 50%; left: 0; transform: translateY(-50%); }

@keyframes spin {
  to { transform: rotate(360deg); }
}

#konami-text {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 3vw, 1.6rem);
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
  text-shadow:
    3px 0 0 rgba(255, 0, 80, 0.9),
    -3px 0 0 rgba(0, 220, 255, 0.9),
    0 0 30px rgba(255, 255, 255, 0.5);
}

@media (prefers-reduced-motion: no-preference) {
  body.brainrot-mode #konami-text {
    animation: pulse 0.5s ease-in-out infinite;
  }
}

/* ── Glitch overlay ── */
#glitch-overlay {
  display: none;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

body.brainrot-mode #glitch-overlay {
  display: block;
}

#glitch-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 0, 60, 0.15);
  mix-blend-mode: screen;
  opacity: 0;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

#glitch-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 220, 255, 0.15);
  mix-blend-mode: screen;
  opacity: 0;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

@media (prefers-reduced-motion: no-preference) {
  #glitch-overlay::before {
    animation: glitch-band-red 3s infinite;
  }

  #glitch-overlay::after {
    animation: glitch-band-cyan 2.7s infinite;
  }
}

@keyframes glitch-band-red {
  0%, 88%, 100% { opacity: 0; clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transform: none; }
  90%  { opacity: 1; clip-path: polygon(0 18%, 100% 18%, 100% 23%, 0 23%); transform: translateX(5px); }
  93%  { opacity: 1; clip-path: polygon(0 55%, 100% 55%, 100% 61%, 0 61%); transform: translateX(-4px); }
  96%  { opacity: 0.7; clip-path: polygon(0 35%, 100% 35%, 100% 38%, 0 38%); transform: translateX(3px); }
  99%  { opacity: 0; }
}

@keyframes glitch-band-cyan {
  0%, 82%, 100% { opacity: 0; clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transform: none; }
  84%  { opacity: 1; clip-path: polygon(0 68%, 100% 68%, 100% 73%, 0 73%); transform: translateX(-6px); }
  87%  { opacity: 1; clip-path: polygon(0 30%, 100% 30%, 100% 34%, 0 34%); transform: translateX(4px); }
  90%  { opacity: 0.5; clip-path: polygon(0 80%, 100% 80%, 100% 84%, 0 84%); transform: translateX(-2px); }
  93%  { opacity: 0; }
}

/* ── Floating tokens ── */
#token-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  overflow: hidden;
}

.float-token {
  position: absolute;
  font-family: var(--font-mono);
  font-size: clamp(0.85rem, 2.5vw, 1.4rem);
  font-weight: 700;
  color: var(--clr-text);
  white-space: nowrap;
  text-shadow:
    1px 0 0 rgba(255, 0, 80, 0.8),
    -1px 0 0 rgba(0, 220, 255, 0.8);
  opacity: 0;
  animation: token-float var(--duration, 3s) ease-out forwards;
}

@keyframes token-float {
  0%   { opacity: 0; transform: translateY(0) rotate(var(--rot, 0deg)) scale(0.8); }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-120px) rotate(var(--rot, 0deg)) scale(1.1); }
}

/* ── Toilet rain ── */
#toilet-rain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 35;
  overflow: hidden;
}

.toilet-drop {
  position: absolute;
  top: -10vh;
  font-size: clamp(2rem, 6vw, 5rem);
  line-height: 1;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .toilet-drop {
    animation: toilet-fall var(--dur, 3s) linear forwards;
  }
}

@keyframes toilet-fall {
  0%   { opacity: 0; transform: translateY(0) rotate(var(--rot, 0deg)); }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(120vh) rotate(calc(var(--rot, 0deg) + 180deg)); }
}

/* ── Splash burst ── */
#splash-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  overflow: hidden;
}

.splash-burst {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(4rem, 18vw, 12rem);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(135deg, #ff0050, #ff8c00, #ffff00, #00ff88, #00cfff, #bf00ff, #ff0050);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .splash-burst {
    animation: splash-pop 1.4s ease-out forwards;
  }
}

@keyframes splash-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(-12deg); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.3) rotate(5deg); }
  50%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0) rotate(-3deg); }
  80%  { opacity: 0.9; transform: translate(-50%, -50%) scale(1.1) rotate(4deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.7) rotate(-8deg); }
}

/* ── Cursor trail ── */
#cursor-trail {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  overflow: hidden;
}

.trail-dot {
  position: fixed;
  font-size: clamp(1rem, 2.5vw, 1.8rem);
  line-height: 1;
  pointer-events: none;
  transform: translate(-50%, -50%);
  user-select: none;
}

@media (prefers-reduced-motion: no-preference) {
  .trail-dot {
    animation: trail-fade 0.6s ease-out forwards;
  }
}

@keyframes trail-fade {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
}

/* ── Custom cursor ── */
#cursor-toilet {
  display: none;
  position: fixed;
  font-size: 1.8rem;
  line-height: 1;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  user-select: none;
}

/* ── Burst container (tap/click effect) ── */
#burst-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 70;
  overflow: hidden;
}

.burst-ring {
  position: fixed;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid transparent;
  background: conic-gradient(from 0deg, #ff0050, #ff8c00, #ffff00, #00ff88, #00cfff, #bf00ff, #ff0050) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  transform: translate(-50%, -50%) scale(0);
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .burst-ring {
    animation: burst-ring-expand 0.5s ease-out forwards;
  }
}

@keyframes burst-ring-expand {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(4.5); opacity: 0; }
}

.burst-shrapnel {
  position: fixed;
  font-size: clamp(1.2rem, 3vw, 2rem);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: no-preference) {
  .burst-shrapnel {
    animation: burst-shrapnel-fly 0.7s ease-out forwards;
  }
}

@keyframes burst-shrapnel-fly {
  0%   { opacity: 1; transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.5); }
}

.burst-word {
  position: fixed;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  background: linear-gradient(135deg, #ff0050, #ff8c00, #ffff00, #00ff88, #00cfff, #bf00ff, #ff0050);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  user-select: none;
}

@media (prefers-reduced-motion: no-preference) {
  .burst-word {
    animation: burst-word-pop 0.6s ease-out forwards;
  }
}

@media (prefers-reduced-motion: reduce) {
  .burst-word {
    animation: burst-word-pop-reduced 0.4s ease-out forwards;
  }
}

@keyframes burst-word-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.1) rotate(-8deg); }
  30%  { opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotate(5deg); }
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(0.95) rotate(-2deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(3deg); }
}

@keyframes burst-word-pop-reduced {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  40%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* ── Footer / Marquee ── */
footer {
  display: none;
  padding: 0.75rem 1rem 1.25rem;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  position: relative;
  z-index: 10;
}

body.brainrot-mode footer {
  display: flex;
}

.marquee-wrapper {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: 0;
}

.marquee-track span {
  font-family: var(--font-mono);
  font-size: clamp(0.6rem, 1.2vw, 0.8rem);
  color: var(--clr-muted);
  padding-right: 2rem;
  white-space: nowrap;
  letter-spacing: 0.05em;
}

@media (prefers-reduced-motion: no-preference) {
  .marquee-track {
    animation: marquee 28s linear infinite;
  }

  .marquee-track-reverse {
    animation: marquee-reverse 22s linear infinite;
  }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes marquee-reverse {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.konami-hint {
  font-family: var(--font-mono);
  font-size: clamp(0.55rem, 1vw, 0.7rem);
  color: rgba(240, 240, 255, 0.22);
  letter-spacing: 0.1em;
  user-select: none;
}