/* ==========================================================================
   Questia MC – season.css
   Sektion „Season“: vor dem Start Season-Nummer im Nether-Portal mit Countdown,
   danach „Current Season“ mit Nummer und Trailer-Button. Eigener Hintergrund
   (Polarlicht + aufsteigende Portal-Partikel) und Übergangsanimation (js/season.js).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Sektion und Hintergrund
   -------------------------------------------------------------------------- */
.season {
  --portal: #a34dff;
  --portal-rgb: 163 77 255;
  --block: clamp(3.25rem, 2.5rem + 3vw, 4.75rem); /* Kantenlänge eines Obsidian-Blocks */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 45% at 50% 42%, rgb(var(--portal-rgb) / 0.16), transparent 70%),
    linear-gradient(180deg, var(--c-bg), #0c0720 25%, #0c0720 75%, var(--c-bg));
}

.season__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Weiche Übergänge: oben und unten blendet die Sektion aus Schwarz ein */
.season__bg::before,
.season__bg::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  z-index: 1;
  height: clamp(6rem, 18vh, 12rem);
}

.season__bg::before {
  top: 0;
  background: linear-gradient(var(--c-bg), transparent);
}

.season__bg::after {
  bottom: 0;
  background: linear-gradient(transparent, var(--c-bg));
}

/* Polarlicht: weiche Lichtbänder in Cyan, Violett und Magenta */
.season__aurora {
  position: absolute;
  inset: -20% -30%;
  background:
    linear-gradient(100deg, transparent 25%, rgb(var(--c-questia-rgb) / 0.14) 38%, transparent 50%),
    linear-gradient(80deg, transparent 40%, rgb(var(--portal-rgb) / 0.2) 55%, transparent 68%),
    linear-gradient(110deg, transparent 55%, rgb(var(--c-accent-rgb) / 0.1) 66%, transparent 78%);
  filter: blur(40px);
}

/* Portal-Partikel: zwei Ebenen, die nahtlos nach oben wandern */
.season__particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent);
  -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent);
}

.season__particles::before,
.season__particles::after {
  content: "";
  position: absolute;
  inset: 0 0 calc(-1 * var(--tile)) 0;
}

.season__particles::before {
  --tile: 240px;
  background-image:
    radial-gradient(circle at 12% 20%, #d9a6ff 0 1.5px, transparent 2px),
    radial-gradient(circle at 58% 62%, #b46cff 0 1.5px, transparent 2px),
    radial-gradient(circle at 84% 34%, #f0d4ff 0 1px, transparent 1.5px),
    radial-gradient(circle at 36% 88%, #9d5cff 0 1px, transparent 1.5px);
  background-size: 220px var(--tile);
}

.season__particles::after {
  --tile: 340px;
  background-image:
    radial-gradient(circle at 26% 44%, rgb(var(--c-questia-rgb) / 0.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 12%, #e2b8ff 0 2px, transparent 2.5px),
    radial-gradient(circle at 90% 76%, #c98bff 0 1.5px, transparent 2px);
  background-size: 300px var(--tile);
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   2. Inhalt
   -------------------------------------------------------------------------- */
.season__state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
}

.season__state[hidden] {
  display: none;
}

/* Buttons unter „Current Season“: Trailer + neue Features */
.season__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}

.season .eyebrow {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   3. Nether-Portal (4 × 5 Blöcke: Obsidian-Rahmen, innen 2 × 3 Portal)
   -------------------------------------------------------------------------- */
.portal {
  position: relative;
  width: calc(var(--block) * 4);
  height: calc(var(--block) * 5);
  /* Obsidian: dunkle Blöcke mit Fugen und violetten Sprenkeln */
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.6) 2px, transparent 2px) 0 0 / var(--block) var(--block),
    linear-gradient(rgb(0 0 0 / 0.6) 2px, transparent 2px) 0 0 / var(--block) var(--block),
    radial-gradient(circle at 28% 32%, #3d2466 0 3px, transparent 4px) 0 0 / var(--block) var(--block),
    radial-gradient(circle at 70% 64%, #2b1748 0 4px, transparent 5px) 0 0 / var(--block) var(--block),
    radial-gradient(circle at 62% 22%, #4a2c7a 0 2px, transparent 3px) 0 0 / var(--block) var(--block),
    #140a24;
  box-shadow:
    0 0 0 1px rgb(var(--portal-rgb) / 0.55),
    0 0 30px rgb(var(--portal-rgb) / 0.45),
    0 0 90px rgb(var(--portal-rgb) / 0.25);
  transition: box-shadow var(--t-base), transform var(--t-base) var(--ease-out);
}

.portal:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgb(var(--portal-rgb) / 0.8),
    0 0 40px rgb(var(--portal-rgb) / 0.65),
    0 0 120px rgb(var(--portal-rgb) / 0.35);
}

/* Portal-Fläche mit wirbelndem Violett */
.portal__inside {
  position: absolute;
  inset: var(--block);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #3a0e86;
  box-shadow: inset 0 0 24px rgb(var(--portal-rgb) / 0.9);
}

.portal__inside::before {
  content: "";
  position: absolute;
  inset: -60%;
  background: conic-gradient(from 0deg, #4a12a8, #b44dff, #6a1fd1, #e08cff, #5b1ac0, #4a12a8);
  filter: blur(18px);
}

/* Schlieren + feines Pixelraster wie die Portal-Textur */
.portal__inside::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg, rgb(255 255 255 / 0.1) 0 6px, transparent 6px 18px) 0 0 / 25.46px 25.46px,
    linear-gradient(rgb(0 0 0 / 0.14) 1px, transparent 1px) 0 0 / 6px 6px,
    linear-gradient(90deg, rgb(0 0 0 / 0.14) 1px, transparent 1px) 0 0 / 6px 6px;
}

.portal__title {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.2rem;
}

.portal__label {
  font-size: calc(var(--block) * 0.24);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.85);
  text-shadow: 0 0 8px rgb(var(--portal-rgb) / 1);
}

.portal__number {
  font-size: calc(var(--block) * 2.4);
  font-weight: 900;
  line-height: 1;
  color: #fff;
  text-shadow:
    0 0 6px #fff,
    0 0 20px rgb(var(--portal-rgb) / 1),
    0 0 50px rgb(var(--portal-rgb) / 0.8);
}

/* --------------------------------------------------------------------------
   4. Countdown
   -------------------------------------------------------------------------- */
.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.5rem, 2vw, 1rem);
  width: min(100%, 34rem);
}

.countdown__unit {
  display: grid;
  gap: 0.4rem;
  padding: clamp(0.75rem, 2vw, 1.1rem) 0.25rem;
  background: rgb(var(--c-bg-rgb) / 0.55);
  border: 1px solid rgb(var(--portal-rgb) / 0.45);
  border-radius: var(--radius);
  box-shadow:
    0 0 14px rgb(var(--portal-rgb) / 0.2),
    inset 0 0 12px rgb(var(--portal-rgb) / 0.12);
  transition:
    transform var(--t-base) var(--ease-out),
    border-color var(--t-base),
    box-shadow var(--t-base);
}

.countdown__unit:hover {
  transform: translateY(-3px);
  border-color: var(--portal);
  box-shadow:
    0 0 20px rgb(var(--portal-rgb) / 0.45),
    inset 0 0 14px rgb(var(--portal-rgb) / 0.2);
}

.countdown__value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 2.6vw, 2.75rem);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 0 10px rgb(var(--portal-rgb) / 0.8);
}

.countdown__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

@media (max-width: 24em) {
  .countdown__label {
    letter-spacing: 0.06em;
  }
}

/* Platzhaltertext unter dem Countdown */
.season__text {
  max-width: 38rem;
  font-size: var(--fs-lg);
  color: var(--c-text-muted);
}

/* --------------------------------------------------------------------------
   5. Nach dem Start: „Current Season“
   -------------------------------------------------------------------------- */
.season__title {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
}

.season__label {
  font-size: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.85);
  text-shadow: 0 0 10px rgb(var(--portal-rgb) / 1);
}

.season__number {
  font-size: clamp(7rem, 4rem + 14vw, 13rem);
  font-weight: 900;
  line-height: 0.9;
  color: #fff;
  text-shadow:
    0 0 6px #fff,
    0 0 20px rgb(var(--portal-rgb) / 1),
    0 0 50px rgb(var(--portal-rgb) / 0.8);
}

/* --------------------------------------------------------------------------
   6. Übergang (Klassen setzt js/season.js)
   -------------------------------------------------------------------------- */

/* Schritt 1: Season-Text blendet aus */
.season.is-leaving .portal__title,
.season.is-leaving .season__upcoming > .eyebrow,
.season.is-leaving .season__text {
  animation: season-fade-out 0.5s ease-in forwards;
  animation-timeline: auto; /* ersetzt die Scroll-Einblendung (.reveal) */
  animation-range: normal;
}

/* Schritt 2: Kacheln fliegen ins Portal (Ziel berechnet das Script) */
.season.is-flying .countdown__unit {
  opacity: 0;
  transform: translate(var(--fly-x), var(--fly-y)) rotate(var(--fly-rotate)) scale(0.1);
  transition:
    transform 0.9s cubic-bezier(0.55, 0, 0.85, 0.35) var(--fly-delay),
    opacity 0.9s cubic-bezier(0.7, 0, 1, 0.5) var(--fly-delay);
}

.season.is-flying .portal {
  box-shadow:
    0 0 0 1px rgb(var(--portal-rgb) / 1),
    0 0 50px rgb(var(--portal-rgb) / 0.8),
    0 0 140px rgb(var(--portal-rgb) / 0.5);
}

/* Schritt 3: Portal wächst über den ganzen Bildschirm, dann Schwarzbild */
.portal-warp {
  --portal-rgb: 163 77 255;
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  background: #3a0e86;
  clip-path: var(--from, inset(50%));
  transition:
    clip-path 1s cubic-bezier(0.7, 0, 0.25, 1),
    opacity 0.6s ease;
}

.portal-warp::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: conic-gradient(from 0deg, #4a12a8, #b44dff, #6a1fd1, #e08cff, #5b1ac0, #4a12a8);
  filter: blur(30px);
  animation: portal-spin 4s linear infinite;
}

.portal-warp::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.portal-warp.is-open {
  clip-path: inset(0);
}

.portal-warp.is-dark::after {
  opacity: 1;
}

/* Schritt 4: Schwarzbild verschwindet, „Current Season“ erscheint */
.portal-warp.is-closing {
  opacity: 0;
}

.is-warping {
  overflow: hidden;
}

.season__current.is-entering > * {
  animation: season-enter 0.8s var(--ease-out) both;
}

.season__current.is-entering > :nth-child(2) { animation-delay: 0.15s; }
.season__current.is-entering > :nth-child(3) { animation-delay: 0.35s; }

/* Reduzierte Bewegung: nur kurz überblenden */
.season.is-fading .season__content {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* --------------------------------------------------------------------------
   7. Animationen
   -------------------------------------------------------------------------- */
@keyframes portal-spin {
  to { rotate: 360deg; }
}

/* Schlieren wandern um genau eine Kachel (18px · √2) – nahtlose Schleife */
@keyframes portal-flow {
  to { background-position: 25.46px 0, 0 0, 0 0; }
}

@keyframes portal-glow {
  0%, 100% {
    text-shadow:
      0 0 6px #fff,
      0 0 20px rgb(var(--portal-rgb) / 1),
      0 0 50px rgb(var(--portal-rgb) / 0.8);
  }
  50% {
    text-shadow:
      0 0 8px #fff,
      0 0 30px rgb(var(--portal-rgb) / 1),
      0 0 80px rgb(var(--portal-rgb) / 1);
  }
}

@keyframes season-fade-out {
  to {
    opacity: 0;
    scale: 0.75;
    filter: blur(6px);
  }
}

@keyframes season-enter {
  from {
    opacity: 0;
    translate: 0 1.5rem;
    scale: 0.96;
  }
}

@keyframes particles-rise {
  to { transform: translateY(calc(-1 * var(--tile))); }
}

@keyframes aurora-drift {
  from { transform: translateX(-6%) rotate(-3deg); }
  to   { transform: translateX(6%) translateY(3%) rotate(3deg); }
}

@media (prefers-reduced-motion: no-preference) {
  .portal__inside::before {
    animation: portal-spin 9s linear infinite;
  }

  .portal__inside::after {
    animation: portal-flow 1.6s linear infinite;
  }

  .portal__number,
  .season__number {
    animation: portal-glow 3.5s ease-in-out infinite;
  }

  .season__particles::before {
    animation: particles-rise 14s linear infinite;
  }

  .season__particles::after {
    animation: particles-rise 22s linear infinite;
  }

  .season__aurora {
    animation: aurora-drift 18s ease-in-out infinite alternate;
  }
}