/* 01 Space Opera: night matinee. Slow drift, aurora shimmer, a matte-painting pan. */
[data-world="space-opera"] {
  --grain: 0.06;
  --title-case: uppercase;
  --title-track: 0.12em;
  --head-track: 0.1em;
  --enter: drift-in 900ms cubic-bezier(.16, 1, .3, 1);
}
@keyframes drift-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes matte-pan { from { transform: scale(1.03) translateX(-0.6%); } to { transform: scale(1.03) translateX(0.6%); } }
@keyframes aurora-shimmer { from { opacity: 0.25; } to { opacity: 0.6; } }

[data-world="space-opera"] .hero-title { font-size: clamp(1.45rem, 6.2vw, 4.5rem); font-weight: 400; }
[data-world="space-opera"] .block-title { font-size: clamp(1.2rem, 3.4vw, 2rem); }
/* the anamorphic flare: one per page, under the hero title */
[data-world="space-opera"] .hero-title::after {
  content: ""; display: block; height: 2px; width: min(100%, 9em); margin-top: 0.4em;
  background: linear-gradient(90deg, transparent, var(--accent) 12%, var(--accent) 55%, transparent);
}
[data-world="space-opera"] .hero-img img { animation: matte-pan 26s ease-in-out infinite alternate; }
[data-world="space-opera"] .aurora {
  position: absolute; inset: -10% -10% 35% -10%; mix-blend-mode: screen;
  background:
    radial-gradient(55% 45% at 28% 30%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 70%),
    radial-gradient(45% 40% at 72% 18%, color-mix(in srgb, var(--spice) 45%, transparent), transparent 70%);
  animation: aurora-shimmer 7s ease-in-out infinite alternate;
}
/* a sparse star field on the ground of the hero */
[data-world="space-opera"] .hero-copy {
  background-image:
    radial-gradient(1px 1px at 8% 22%, var(--ink), transparent), radial-gradient(1px 1px at 23% 71%, var(--ink), transparent),
    radial-gradient(1.5px 1.5px at 41% 14%, var(--ink), transparent), radial-gradient(1px 1px at 57% 83%, var(--ink), transparent),
    radial-gradient(1px 1px at 69% 34%, var(--ink), transparent), radial-gradient(1.5px 1.5px at 83% 61%, var(--ink), transparent),
    radial-gradient(1px 1px at 92% 18%, var(--ink), transparent), radial-gradient(1px 1px at 97% 88%, var(--ink), transparent);
  background-color: transparent;
}
[data-world="space-opera"] .site-nav a, [data-world="space-opera"] .eyebrow { letter-spacing: 0.04em; }
