/* ============================================
   DOCTOR TALOS'S TRAVELING SHOW
   Animations — Curtain Rise, Glitch, Starfield
   ============================================ */

/* --- Starfield Background --- */
.starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at center, #1a1128 0%, #0a0510 60%, #000005 100%);
  overflow: hidden;
}

.starfield .stars,
.starfield .stars-2,
.starfield .stars-3 {
  position: absolute;
  inset: 0;
  background-repeat: repeat;
}

/* Small stars */
.starfield .stars {
  background-image:
    radial-gradient(1px 1px at 50px 80px, #fff8, transparent),
    radial-gradient(1px 1px at 150px 200px, #fff6, transparent),
    radial-gradient(1px 1px at 250px 50px, #fff7, transparent),
    radial-gradient(1px 1px at 400px 150px, #fff5, transparent),
    radial-gradient(1px 1px at 500px 300px, #fff6, transparent),
    radial-gradient(1px 1px at 80px 350px, #fff4, transparent),
    radial-gradient(1px 1px at 600px 100px, #fff7, transparent),
    radial-gradient(1px 1px at 700px 250px, #fff5, transparent),
    radial-gradient(1px 1px at 300px 400px, #fff6, transparent),
    radial-gradient(1px 1px at 450px 50px, #fff5, transparent);
  background-size: 800px 500px;
  animation: star-drift 120s linear infinite;
}

/* Medium stars */
.starfield .stars-2 {
  background-image:
    radial-gradient(1.5px 1.5px at 100px 150px, #ffd89944, transparent),
    radial-gradient(1.5px 1.5px at 350px 280px, #ffd89966, transparent),
    radial-gradient(1.5px 1.5px at 550px 80px, #aad4ff55, transparent),
    radial-gradient(1.5px 1.5px at 200px 380px, #ffd89944, transparent),
    radial-gradient(1.5px 1.5px at 650px 320px, #aad4ff44, transparent),
    radial-gradient(2px 2px at 750px 180px, #ff8866, transparent);
  background-size: 900px 500px;
  animation: star-drift 200s linear infinite reverse;
}

/* The dying red sun — a faint glow */
.starfield .stars-3 {
  background-image:
    radial-gradient(80px 80px at 85% 15%, rgba(180, 60, 30, 0.15), transparent);
}

@keyframes star-drift {
  from { transform: translateY(0); }
  to { transform: translateY(-500px); }
}

/* --- Curtain Rise Animation --- */
.curtain-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  perspective: 1000px;
}

.curtain-left,
.curtain-right {
  position: absolute;
  top: 0;
  width: 52%;
  height: 100%;
  background: linear-gradient(
    180deg,
    var(--burgundy-deep) 0%,
    #5a1525 20%,
    var(--burgundy) 50%,
    #5a1525 80%,
    var(--burgundy-deep) 100%
  );
  z-index: 1000;
  transition: transform 1.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.curtain-left {
  left: 0;
  transform-origin: left center;
  /* Velvet fold texture via gradients */
  background-image:
    linear-gradient(90deg, rgba(0,0,0,0.2) 0%, transparent 15%, rgba(0,0,0,0.05) 30%, transparent 45%, rgba(0,0,0,0.1) 60%, transparent 75%, rgba(0,0,0,0.15) 90%);
}

.curtain-right {
  right: 0;
  transform-origin: right center;
  background-image:
    linear-gradient(90deg, transparent 10%, rgba(0,0,0,0.15) 25%, transparent 40%, rgba(0,0,0,0.05) 55%, transparent 70%, rgba(0,0,0,0.1) 85%, rgba(0,0,0,0.2) 100%);
}

/* Gold fringe along curtain edges */
.curtain-left::after,
.curtain-right::after {
  content: '';
  position: absolute;
  top: 0;
  width: 6px;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    var(--gold) 0px,
    var(--gold-dim) 8px,
    transparent 8px,
    transparent 12px
  );
}

.curtain-left::after {
  right: 0;
}

.curtain-right::after {
  left: 0;
}

/* Opened state */
.curtain-overlay.open .curtain-left {
  transform: translateX(-100%);
}

.curtain-overlay.open .curtain-right {
  transform: translateX(100%);
}

/* Fade out after opening */
.curtain-overlay.done {
  opacity: 0;
  transition: opacity 0.5s ease 0.2s;
}

/* --- Content reveal (fades in after curtain) --- */
.curtain-content {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.curtain-content.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* --- Text Glitch Effect --- */
.glitch {
  animation: glitch-flicker 8s ease-in-out infinite;
}

@keyframes glitch-flicker {
  0%, 95%, 100% {
    opacity: 1;
    text-shadow: none;
    transform: none;
  }
  96% {
    opacity: 0.8;
    text-shadow:
      2px 0 var(--teal-glow),
      -2px 0 var(--blood);
    transform: translateX(1px);
  }
  97% {
    opacity: 1;
    text-shadow: none;
    transform: none;
  }
  98% {
    opacity: 0.7;
    text-shadow:
      -1px 0 var(--teal-glow),
      1px 0 var(--blood);
    transform: translateX(-1px) skewX(0.5deg);
  }
  99% {
    opacity: 1;
    text-shadow: none;
    transform: none;
  }
}

/* Heavier glitch for adventure mode */
.glitch-heavy {
  animation: glitch-heavy 4s ease-in-out infinite;
}

@keyframes glitch-heavy {
  0%, 90%, 100% {
    opacity: 1;
    text-shadow: none;
    transform: none;
    filter: none;
  }
  91% {
    opacity: 0.6;
    text-shadow:
      3px 0 var(--teal-glow),
      -3px 0 var(--blood);
    transform: translateX(3px) skewX(2deg);
    filter: hue-rotate(20deg);
  }
  93% {
    opacity: 1;
    text-shadow: none;
    transform: translateX(-1px);
    filter: none;
  }
  94% {
    text-shadow:
      -2px 1px var(--teal-glow),
      2px -1px var(--blood);
    transform: translateX(1px) skewX(-1deg);
    filter: hue-rotate(-10deg);
  }
  96% {
    opacity: 0.8;
    transform: none;
    filter: none;
  }
}

/* --- Teal Flash Effect --- */
.teal-flash {
  animation: teal-pulse 6s ease-in-out infinite;
}

@keyframes teal-pulse {
  0%, 85%, 100% {
    color: inherit;
  }
  90% {
    color: var(--teal);
    text-shadow: 0 0 8px rgba(63, 218, 218, 0.3);
  }
  95% {
    color: inherit;
  }
}

/* --- Fade-in for page elements --- */
.fade-in {
  opacity: 0;
  animation: fade-in-up 0.6s ease forwards;
}

.fade-in:nth-child(2) { animation-delay: 0.15s; }
.fade-in:nth-child(3) { animation-delay: 0.3s; }
.fade-in:nth-child(4) { animation-delay: 0.45s; }
.fade-in:nth-child(5) { animation-delay: 0.6s; }

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Flickering glow for the title --- */
.title-glow {
  text-shadow:
    0 0 10px rgba(196, 162, 62, 0.2),
    0 0 30px rgba(196, 162, 62, 0.1);
  animation: title-flicker 10s ease-in-out infinite;
}

@keyframes title-flicker {
  0%, 92%, 100% {
    text-shadow:
      0 0 10px rgba(196, 162, 62, 0.2),
      0 0 30px rgba(196, 162, 62, 0.1);
  }
  94% {
    text-shadow:
      0 0 15px rgba(196, 162, 62, 0.4),
      0 0 40px rgba(196, 162, 62, 0.2),
      0 0 60px rgba(63, 218, 218, 0.1);
  }
  96% {
    text-shadow:
      0 0 5px rgba(196, 162, 62, 0.1);
  }
  98% {
    text-shadow:
      0 0 20px rgba(196, 162, 62, 0.3),
      0 0 50px rgba(196, 162, 62, 0.15);
  }
}

/* --- Screen dim effect (used by adventure) --- */
.screen-dim {
  transition: filter 1s ease;
}

.screen-dim[data-dim="1"] { filter: brightness(0.95); }
.screen-dim[data-dim="2"] { filter: brightness(0.85); }
.screen-dim[data-dim="3"] { filter: brightness(0.7); }
.screen-dim[data-dim="4"] { filter: brightness(0.5); }
.screen-dim[data-dim="5"] { filter: brightness(0.3); }