/* Film grain + vignette: decorative, never intercept input */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 79; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, var(--vignette) 100%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 80; pointer-events: none;
  opacity: var(--grain-opacity); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Hero with 2.39:1 letterbox bars (reveal ends visible in 1s) */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(244, 123, 32, 0.16), transparent 70%),
    linear-gradient(180deg, var(--brand-navy) -60%, var(--bg) 72%);
}
[data-theme="light"] .hero {
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(232, 101, 10, 0.14), transparent 70%),
    linear-gradient(180deg, #E4E8F4 -60%, var(--bg) 72%);
}
.hero::before, .hero::after {
  content: ""; position: absolute; inset-inline: 0; z-index: 3; pointer-events: none;
  height: clamp(14px, 3.2vw, 44px); background: #000;
  animation: bars-in 1s ease-out both;
}
.hero::before { inset-block-start: 0; }
.hero::after { inset-block-end: 0; }
@keyframes bars-in { from { height: 12%; } to { height: clamp(14px, 3.2vw, 44px); } }
.hero-inner { position: relative; z-index: 2; }

/* Anamorphic flare under headline */
.flare {
  display: block; width: min(520px, 80%); height: 3px; margin: 4px auto var(--s2);
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--amber-glow) 50%, var(--accent) 70%, transparent);
  box-shadow: 0 0 18px 2px rgba(244, 123, 32, 0.55);
  border-radius: 3px;
  animation: flare-in 1.1s ease-out both;
}
@keyframes flare-in { from { transform: scaleX(0.15); opacity: 0.4; } to { transform: scaleX(1); opacity: 1; } }

/* Film-perforation divider */
.perf {
  height: 20px; border-block: 1px solid var(--border); background-color: var(--surface);
  background-image: linear-gradient(90deg, var(--border) 50%, transparent 50%);
  background-size: 24px 8px; background-repeat: repeat-x; background-position: 0 6px;
}

/* Stage: dark floor, spotlight cone, gentle fog */
.stage-frame {
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(255, 176, 102, 0.2), transparent 70%),
    linear-gradient(180deg, #0B1330 0%, #070B16 60%, #04060E 100%);
}
.stage-frame::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 35%; pointer-events: none;
  background: linear-gradient(0deg, rgba(154, 163, 189, 0.1), transparent);
}

/* Logo hover: scattered pixel squares */
.brand-logo { transition: filter 0.2s; }
.brand:hover .brand-logo {
  filter: drop-shadow(5px -5px 0 #F47B20) drop-shadow(-4px 4px 0 #FFB066);
}

/* Library and shot cards */
.lib-card { display: flex; flex-direction: column; gap: 6px; padding: var(--s2); }
.lib-card h3 { font-size: 1rem; margin: 0; }
.lib-card p { font-size: 0.9rem; margin: 0; flex: 1; }
.lib-card .btn { align-self: flex-start; }
.lib-card .tag-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lib-card .tag { font-size: 0.8rem; font-weight: 600; color: var(--accent-text); }
.lib-card .meta { font-size: 0.8rem; color: var(--text-muted); flex: none; }
.lib-card.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border); flex: none; }
.lib-more { grid-column: 1 / -1; text-align: center; padding-block: 8px; }
.shot-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r1); background: #0A1024; border: 1px solid var(--border); }
.shot-empty { display: grid; place-items: center; text-align: center; padding: 8px; font-size: 0.85rem; color: #9AA3BD; }
.shot-actions { display: flex; flex-wrap: wrap; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  body::after { display: none; }
}