/* ==========================================================================
   SUPREME LUXE — LAUNCH FILMING PREVIEW (additions to css/launch.css)

   The BEGIN control mirrors the owner's Command Centre button (crimson fill,
   tracked uppercase) on the launch stage. The rehearsal controls stay out of
   the shot: the filming label only shows before BEGIN, and Reset is a quiet
   corner control that disappears while the site opens.
   ========================================================================== */

.film__begin { margin-top: clamp(30px, 5vh, 52px); }
.film__begin-btn {
  min-height: 56px;
  padding: 0 28px;
  border: 1px solid var(--crimson);
  background: var(--crimson);
  color: var(--bone);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.film__begin-btn:hover { background: var(--crimson-hover); border-color: var(--crimson-hover); }
.film__begin-btn:focus-visible { outline: 1px solid var(--bone); outline-offset: 4px; }
.film__label { margin-top: 16px; }

[data-state="COUNTDOWN"] .film__begin,
[data-state="OPENING"] .film__begin { display: none; }

.film__reset {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  z-index: 5;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-12);
  background: rgba(10, 10, 10, 0.4);
  color: var(--bone-45);
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}
.film__reset:hover, .film__reset:focus-visible { color: var(--bone); border-color: var(--line-40); }
[data-state="OPENING"] .film__reset { display: none; }

@media (max-width: 767px) {
  .film__begin { display: flex; flex-direction: column; align-items: center; }
  .film__begin-btn { width: 100%; max-width: 360px; }
}
@media (max-width: 1023px) and (max-height: 500px) {
  .film__begin { margin-top: 14px; }
  .film__begin-btn { min-height: 48px; }
}

@media (prefers-reduced-motion: no-preference) {
  .launch__copy > :nth-child(5) { animation-delay: .48s; }
}