/* Season Result - Split Layout */
/* ── Cosmic Weather: Season Result ── */

.season-result-modal {
  max-width: 100% !important;
  width: 100% !important;
  height: 100%;
  padding: 0;
  border: none !important;
  background: #000;
}

.season-result-modal .quiz-close {
  top: 16px;
  right: 16px;
}

/* ── VERTICAL STACK: dithered hero band on top, content composed below ──
   Full-screen modal; image ≈ top half, content column beneath it — the same
   image-then-text reading order as the movie cards. One scroll column. */
.season-result-split {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow-y: auto;
}

/* Hero band: full-bleed dithered image across the top ~48vh. No inset frame,
   no gradient over the dither on desktop — the image is the object, the black
   modal is its mat. A single hairline seam divides it from the content. */
.season-result-left {
  position: relative;
  overflow: hidden;
  background: #000;
  flex: 0 0 48vh;
  border-bottom: 1px solid rgba(255, 255, 255, var(--opacity-border));
}

.season-result-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  animation: seasonImgReveal 0.8s ease-out both;
}

/* opacity only — scaling a dither, even briefly, crawls under pixelated sampling */
@keyframes seasonImgReveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Overlay: inert on the desktop stack (image sits above its own band, text is
   below it, so no fade is needed for legibility). */
.season-result-hero-overlay {
  position: absolute;
  inset: 0;
  background: none;
  pointer-events: none;
}

/* ── Content column: composed below the hero with a defined rhythm ──
   Centered to a single narrow measure, three groups with fixed token gaps. */
.season-result-right {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: var(--spacing-3xl) var(--spacing-xl);
}

.season-result-group-top {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.season-result-group-mid {
  display: flex;
  flex-direction: column;
}

.season-result-group-bottom {
  display: flex;
  flex-direction: column;
}

/* Staggered entrance — driven by the THREE group wrappers, in DOM order.
   No :nth-child rules: single-class selectors, one delay each, no cascade
   fight. Reduced-motion killswitch (~7565) covers .season-stagger + its
   children via `> *`. */
.season-stagger {
  animation: seasonFadeUp 0.5s ease-out both;
}
.season-result-group-top {
  animation-delay: 0.15s;
}
.season-result-group-mid {
  animation-delay: 0.3s;
}
.season-result-group-bottom {
  animation-delay: 0.45s;
}

@keyframes seasonFadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* — TOP: season identity — */
.season-result-sign {
  font-size: var(--font-size-display);
  color: rgba(255, 255, 255, var(--opacity-primary));
  font-weight: var(--font-regular);
  letter-spacing: var(--letter-spacing-display-tight);
  line-height: var(--line-height-tight);
  margin: 0;
}

.season-result-dates {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, var(--opacity-quiet));
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  margin: 0;
}

/* — MID: the reading, elevated as the hero line of the column —
   min() measure guards the narrow 42% column: never wider than 34ch, never
   forced past the column's own inner width (so it can't cramp ~1024px). */
.season-result-reading {
  font-size: var(--font-size-lg);
  color: rgba(255, 255, 255, var(--opacity-secondary));
  line-height: var(--line-height-relaxed);
  letter-spacing: var(--letter-spacing-body);
  max-width: min(34ch, 100%);
  margin: 0;
}

/* — BOTTOM: the suggestion, hairline-anchored — */
.season-result-suggest {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, var(--opacity-quiet));
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  padding-top: var(--spacing-lg);
  border-top: 1px solid rgba(255, 255, 255, var(--opacity-faint));
  margin: 0 0 var(--spacing-md);
}

.season-result-title {
  font-size: var(--font-size-xl);
  color: rgba(255, 255, 255, var(--opacity-primary));
  font-weight: var(--font-regular);
  /* real tracking — --letter-spacing-tight is 0em (no-op) */
  letter-spacing: var(--letter-spacing-display-tight);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--spacing-xs);
}

.season-result-meta {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, var(--opacity-quiet));
  margin: 0 0 var(--spacing-sm);
}

.season-result-vibe {
  font-size: var(--font-size-base); /* vibe tier: one size everywhere — matches body */
  color: rgba(255, 255, 255, var(--opacity-tertiary));
  font-style: italic;
  line-height: var(--line-height-base);
  margin: 0;
}

/* — Actions: one hairline primary + two quiet uppercase text links — */
.season-result-right .quiz-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-md) var(--spacing-lg);
  margin: var(--spacing-lg) 0 0;
  max-width: none;
}

/* Demote the base sweep-fill button to a quiet editorial text link */
.season-result-right .quiz-btn {
  width: auto;
  padding: 0;
  border: none;
  background: none;
  background-image: none;
  color: rgba(255, 255, 255, var(--opacity-tertiary));
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  transition: color 0.2s ease;
}
.season-result-right .quiz-btn:hover {
  background: none;
  border: none;
  color: rgba(255, 255, 255, var(--opacity-primary));
}

/* Primary: hairline box, inverts to solid on hover */
.season-result-right .quiz-btn.primary {
  padding: var(--spacing-sm) var(--spacing-lg);
  border: 1px solid rgba(255, 255, 255, var(--opacity-subtle));
  color: rgba(255, 255, 255, var(--opacity-primary));
  background: transparent;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}
.season-result-right .quiz-btn.primary:hover {
  background: #fff;
  color: #000;
  border-color: #fff;
}

/* ══════════════════════════════════════ */

/* ── Film Reveal (shared result component) ── */
@keyframes revealExpand {
  from {
    width: 0;
  }
  to {
    width: 140px;
  }
}

@keyframes revealFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.quiz-reveal-film {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  margin: var(--spacing-xl) 0 var(--spacing-lg);
  transition: opacity 0.25s ease;
}

.quiz-reveal-film:hover {
  opacity: 0.8;
}

.quiz-reveal-line {
  display: none;
}

.quiz-reveal-poster {
  width: 190px;
  height: 285px;
  object-fit: cover;
  opacity: 0;
  animation: revealFadeIn 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0.2s forwards;
  border: 1px solid rgba(255, 255, 255, var(--opacity-faint));
  margin-bottom: var(--spacing-lg);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.quiz-reveal-title {
  font-family: var(--font-family);
  font-size: var(--font-size-xl);
  font-weight: var(--font-regular);
  color: rgba(255, 255, 255, var(--opacity-primary));
  letter-spacing: var(--letter-spacing);
  opacity: 0;
  animation: revealFadeIn 0.5s ease-out 0.5s forwards;
  margin-bottom: var(--spacing-xs);
}

.quiz-reveal-meta {
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, var(--opacity-tertiary));
  letter-spacing: var(--letter-spacing);
  opacity: 0;
  animation: revealFadeIn 0.5s ease-out 0.7s forwards;
  margin-bottom: var(--spacing-sm);
}

.quiz-reveal-vibe {
  font-family: var(--font-family);
  font-size: var(--font-size-base); /* vibe tier: one size everywhere — matches body */
  color: rgba(255, 255, 255, var(--opacity-tertiary));
  font-style: italic;
  margin-top: var(--spacing-xs);
  letter-spacing: var(--letter-spacing);
  opacity: 0;
  animation: revealFadeIn 0.5s ease-out 0.9s forwards;
}