/* Visual polish v2 — phase 2: film-specific art direction */

.hero {
  --film-accent: #54d6ff;
  --film-accent-strong: #2d8fff;
  --film-glow: rgba(45, 143, 255, .34);
  --film-shadow: rgba(12, 43, 88, .72);
  background: #050914;
}

.hero[data-film-theme="littleWonders"] {
  --film-accent: #ffd166;
  --film-accent-strong: #73d88f;
  --film-glow: rgba(115, 216, 143, .28);
  --film-shadow: rgba(41, 70, 35, .7);
}

.hero[data-film-theme="roomZero"] {
  --film-accent: #ff715b;
  --film-accent-strong: #c51f45;
  --film-glow: rgba(197, 31, 69, .32);
  --film-shadow: rgba(69, 9, 27, .78);
}

.hero__image {
  filter: blur(14px) saturate(.92) brightness(.32);
  opacity: .72;
  transform: scale(1.1);
  transition: opacity .34s ease, filter .7s ease, transform 1.1s var(--motion-ease);
}

.hero.is-theme-fading .hero__image {
  opacity: .24;
  transform: scale(1.13);
}

.hero__veil {
  background:
    radial-gradient(circle at 50% 38%, var(--film-glow), transparent 42%),
    linear-gradient(180deg, rgba(4, 7, 15, .48) 0%, rgba(4, 7, 15, .14) 36%, rgba(4, 7, 15, .9) 100%),
    linear-gradient(90deg, rgba(4, 7, 15, .5), transparent 35%, transparent 70%, rgba(4, 7, 15, .4));
  transition: opacity .34s ease;
}

.hero.is-theme-fading .hero__veil {
  opacity: .64;
}

.hero-preview-card {
  --card-film-accent: var(--film-accent);
  --card-film-glow: var(--film-glow);
}

.hero-preview-card.is-active {
  border-color: color-mix(in srgb, var(--card-film-accent) 68%, white 8%);
  box-shadow:
    0 42px 120px rgba(0, 0, 0, .62),
    0 0 0 7px color-mix(in srgb, var(--card-film-accent) 9%, transparent),
    0 24px 82px var(--card-film-glow);
}

.hero-preview-card:not(.is-active):hover,
.hero-preview-card:not(.is-active):focus-visible {
  border-color: color-mix(in srgb, var(--card-film-accent) 52%, transparent);
}

.hero-preview-card__caption small {
  color: var(--card-film-accent);
}

.hero__copy {
  border-top-color: color-mix(in srgb, var(--film-accent) 44%, transparent);
  box-shadow: var(--shadow-card), 0 18px 62px var(--film-shadow);
}

.hero__copy .hero__meta span {
  border-color: color-mix(in srgb, var(--film-accent) 24%, var(--line));
  background: color-mix(in srgb, var(--film-accent) 6%, transparent);
}

.hero .button--primary {
  border-color: var(--film-accent);
  background: var(--film-accent);
  color: #081016;
  box-shadow: 0 12px 34px color-mix(in srgb, var(--film-accent) 24%, transparent);
  transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease, filter var(--motion-fast) ease;
}

.hero .button--primary:hover,
.hero .button--primary:focus-visible {
  box-shadow: 0 16px 42px color-mix(in srgb, var(--film-accent) 36%, transparent);
  filter: brightness(1.06);
  transform: translateY(-1px);
  outline: none;
}

.hero .button--ghost:hover,
.hero .button--ghost:focus-visible {
  border-color: color-mix(in srgb, var(--film-accent) 58%, white 6%);
  background: color-mix(in srgb, var(--film-accent) 10%, rgba(9, 13, 24, .72));
  outline: none;
}

.hero-carousel__dot.is-active::before {
  background: var(--film-accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--film-accent) 38%, transparent);
}

@media (max-width: 700px) {
  .hero__image {
    filter: blur(10px) saturate(.9) brightness(.28);
  }

  .hero-preview-card__caption strong {
    max-width: 11ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__image,
  .hero__veil {
    transition: none !important;
  }
}