.cinematic {
  position: fixed;
  z-index: 200;
  inset: 0;
  overflow: hidden;
  background: #010404;
  color: #eef4ef;
}

.cinematic[hidden],
.cinematic-gate[hidden],
.cinematic-controls[hidden] {
  display: none;
}

.cinematic-stage {
  position: relative;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  background: #010404;
}

.cinematic-scene {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms linear;
  pointer-events: none;
}

.cinematic-scene.is-active {
  opacity: 1;
  visibility: visible;
}

.cinematic-frame picture,
.cinematic-frame img {
  width: 100%;
  height: 100%;
  display: block;
}

.cinematic-frame img {
  object-fit: cover;
  transform: scale(1.015);
}

.cinematic-frame.is-active img {
  animation: cinematic-push 6s cubic-bezier(.16,.7,.2,1) both;
}

.cinematic-frame[data-film-scene="town"].is-active img { animation-name: cinematic-drift; }
.cinematic-frame[data-film-scene="post-office"].is-active img { animation-name: cinematic-door; }
.cinematic-frame[data-film-scene="ballot"].is-active img { animation-name: cinematic-ballot; }
.cinematic-frame[data-film-scene="steam"].is-active img { animation-name: cinematic-steam; }

.cinematic-glitch.is-active {
  animation: cinematic-glitch 420ms steps(2, end) both;
}

.cinematic-card {
  display: grid;
  place-items: center;
  padding: 32px;
  background: #010404;
  text-align: center;
}

.cinematic-card p {
  max-width: 30ch;
  margin: 0;
  font: 1rem/1.65 "Courier New", monospace;
  letter-spacing: .045em;
  text-wrap: balance;
  clip-path: inset(0 100% 0 0);
}

.cinematic-card.is-active p {
  animation: cinematic-type 1.25s steps(28, end) .18s forwards;
}

.cinematic-end.is-active p {
  animation: cinematic-title-in .7s ease-out forwards;
}

.cinematic-end {
  align-content: center;
  gap: 12px;
}

.cinematic-end p:last-child {
  font: .95rem/1.4 Georgia, serif;
  letter-spacing: .02em;
  color: #c9d2ce;
}

.cinematic-wordmark {
  font: 700 clamp(2rem, 10vw, 4.3rem)/1 Arial, sans-serif !important;
  letter-spacing: .08em !important;
}

.cinematic-grain {
  position: absolute;
  z-index: 8;
  inset: -35%;
  pointer-events: none;
  opacity: .12;
  background-image: radial-gradient(circle, #fff 0 .55px, transparent .8px);
  background-size: 5px 5px;
  animation: cinematic-grain 180ms steps(2, end) infinite;
}

.cinematic-weather {
  position: absolute;
  z-index: 6;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.cinematic-vignette {
  position: absolute;
  z-index: 7;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 5, 6, .25) 67%, rgba(0, 2, 3, .74) 100%);
}

.cinematic-flash {
  position: absolute;
  z-index: 9;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: #d9fbff;
  mix-blend-mode: screen;
}

.cinematic-flash.is-cutting {
  animation: cinematic-cut 210ms steps(2, end);
}

.cinematic[data-scene="post-office"] .cinematic-flash,
.cinematic[data-scene="ballot"] .cinematic-flash {
  animation: fluorescent-flicker 2.1s steps(1, end) infinite;
  background: #ffdca0;
}

.cinematic-gate {
  position: fixed;
  z-index: 12;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 24px max(42px, env(safe-area-inset-bottom));
  background: #010404;
  text-align: center;
}

.cinematic-gate p {
  margin: 0 0 7px;
  color: #9fb5b3;
  font-size: .68rem;
  letter-spacing: .18em;
}

.cinematic-gate button,
.cinematic-controls button {
  min-height: 44px;
  border: 1px solid #80918f;
  background: #07100f;
  color: #eef4ef;
  padding: 10px 15px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.cinematic-gate #cinematicPlay {
  min-width: 180px;
  border-color: #d8aa54;
  background: #d8aa54;
  color: #07100f;
  font-weight: 700;
}

.cinematic-text-button {
  border: 0 !important;
  background: transparent !important;
  color: #9fb5b3 !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.cinematic-controls {
  position: fixed;
  z-index: 14;
  top: max(14px, env(safe-area-inset-top));
  right: 14px;
  display: flex;
  gap: 8px;
}

.cinematic-controls button {
  background: #020706b8;
  font-size: .66rem;
}

.cinematic-progress {
  position: fixed;
  z-index: 14;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #d8aa54;
}

.cinematic.is-playing .cinematic-progress {
  animation: cinematic-progress 28s linear forwards;
}

.start-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.start-screen .start-secondary {
  border-color: #c8d2cd;
  background: #07100fb8;
  color: #eef4ef;
}

body.cinematic-open { overflow: hidden; }

@keyframes cinematic-push {
  from { transform: scale(1.015) translate3d(0, 0, 0); filter: brightness(.82) contrast(1.08); }
  to { transform: scale(1.16) translate3d(-1.8%, -1%, 0); filter: brightness(1) contrast(1.12); }
}

@keyframes cinematic-drift {
  from { transform: scale(1.08) translate3d(-2.5%, 1%, 0); }
  to { transform: scale(1.16) translate3d(2.5%, -1%, 0); }
}

@keyframes cinematic-door {
  from { transform: scale(1.015) translate3d(1.5%, 1%, 0); filter: brightness(.7); }
  to { transform: scale(1.17) translate3d(-2%, -1%, 0); filter: brightness(1.05); }
}

@keyframes cinematic-ballot {
  from { transform: scale(1.04) translate3d(2%, 0, 0); }
  to { transform: scale(1.18) translate3d(-3%, 2%, 0); }
}

@keyframes cinematic-steam {
  from { transform: scale(1.03) translate3d(0, 1%, 0); filter: brightness(.72); }
  to { transform: scale(1.2) translate3d(-2%, -2%, 0); filter: brightness(1); }
}

@keyframes cinematic-glitch {
  0%, 100% { filter: contrast(1.1); transform: none; clip-path: inset(0); }
  15% { filter: contrast(2) saturate(.2); transform: translateX(-10px) skewX(-1deg); clip-path: inset(8% 0 52% 0); }
  32% { filter: brightness(2.2) hue-rotate(38deg); transform: translateX(12px); clip-path: inset(41% 0 19% 0); }
  51% { filter: contrast(1.8) saturate(1.6); transform: translateX(-6px); clip-path: inset(15% 0 8% 0); }
  74% { filter: invert(.12) brightness(1.6); transform: translateX(5px) skewX(1deg); clip-path: inset(0 0 0 0); }
}

@keyframes cinematic-type { to { clip-path: inset(0 0 0 0); } }

@keyframes cinematic-title-in {
  from { opacity: 0; transform: translateY(14px); clip-path: inset(0); }
  to { opacity: 1; transform: none; clip-path: inset(0); }
}

@keyframes cinematic-cut {
  0%, 100% { opacity: 0; }
  35% { opacity: .42; }
  58% { opacity: .08; }
  72% { opacity: .3; }
}

@keyframes fluorescent-flicker {
  0%, 7%, 10%, 43%, 47%, 100% { opacity: 0; }
  8%, 45% { opacity: .12; }
  9% { opacity: .26; }
}

@keyframes cinematic-grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(2%, -3%); }
  50% { transform: translate(-3%, 2%); }
  75% { transform: translate(3%, 4%); }
  100% { transform: translate(-1%, -2%); }
}

@keyframes cinematic-progress { to { width: 100%; } }

@media (max-width: 700px) {
  .cinematic-stage { width: 100vw; }
  .cinematic-frame img { object-fit: contain; background: #010404; }
  .cinematic-frame.is-active img { animation: none; transform: none; }
  .cinematic-frame.is-active picture { animation: cinematic-mobile-breathe 5s ease-out both; }
  .cinematic-controls { left: 10px; right: 10px; justify-content: space-between; }
  .cinematic-card p { font-size: .92rem; }
  .cinematic-wordmark { font-size: 2.5rem !important; }
  .start-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .start-actions button { padding-inline: 10px; }
}

@keyframes cinematic-mobile-breathe {
  from { transform: translateY(0); filter: brightness(.84); }
  to { transform: translateY(-1%); filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .cinematic-frame.is-active img,
  .cinematic-frame.is-active picture,
  .cinematic-glitch.is-active,
  .cinematic-grain,
  .cinematic-flash,
  .cinematic.is-playing .cinematic-progress { animation: none !important; }
  .cinematic-progress { width: 100%; }
  .cinematic-scene { transition: none; }
}