/* ==========================================================================
   Palco Video — shared stylesheet
   Loaded by index.html, about.html, services.html, team.html.
   This file owns everything global: design tokens, resets, type defaults,
   link behaviour, and every keyframe used anywhere on the site.
   Page-level layout lives as inline styles in the HTML (design-accurate,
   1:1 with the approved prototypes).
   ========================================================================== */

:root {
  /* Brand */
  --accent: #C21E2B;        /* Palco red — CTAs, accent words, interactive */
  --accent-deep: #7A1220;   /* hover / deep red */
  --accent-mid: #A81828;
  --accent-soft: #FF6A78;   /* red on black */
  --amber: #C9932F;         /* second accent — atmosphere, washes, tags */
  --amber-light: #E0AD5C;
  --amber-ink: #8A6A25;     /* amber text on light, AA-safe */

  /* Ink */
  --ink: #1A1A1A;
  --ink-body: #3A3A3A;
  --ink-muted: #6B6B6F;
  --ink-faint: #9A9A9A;

  /* Section tones — no two consecutive sections share one */
  --cream: #F1EBEB;
  --white: #FFFFFF;
  --taupe: #EDE7E2;
  --offwhite: #F7F3F0;
  --card: #FFFDFC;
  --black: #000000;

  /* Type */
  --font-display: Archivo, system-ui, sans-serif;      /* 800–900 only */
  --font-accent: "Instrument Serif", Georgia, serif;   /* italic accent word */
  --font-body: Manrope, system-ui, sans-serif;
  --font-hud: "JetBrains Mono", ui-monospace, monospace;

  /* Motion */
  --amb: running;                                       /* ambient motion switch */
  --ease-out-soft: cubic-bezier(.2, .8, .2, 1);
  --ease-snap: cubic-bezier(.65, 0, .28, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: #000;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

img { display: block; }
input, textarea, button { font: inherit; }

/* --- Shared keyframes -------------------------------------------------- */
@keyframes recPulse { 0%, 100% { opacity: 1 } 50% { opacity: .2 } }
@keyframes kb { from { transform: scale(1.03) } to { transform: scale(1.13) } }
@keyframes plateA { 0%, 42% { opacity: 1 } 54%, 100% { opacity: 0 } }
@keyframes plateB { 0%, 42% { opacity: 0 } 54%, 100% { opacity: 1 } }
@keyframes marqL { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes marqR { from { transform: translateX(-50%) } to { transform: translateX(0) } }
@keyframes caret { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
@keyframes grain { 0% { transform: translate(0, 0) } 50% { transform: translate(-2%, 1%) } 100% { transform: translate(1%, -2%) } }
@keyframes bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }
@keyframes navDot { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
@keyframes drift { 0%, 100% { transform: translateY(0) rotate(0deg) scale(1) } 50% { transform: translateY(-6px) rotate(-2.5deg) scale(1.03) } }

/* --- Responsive ---------------------------------------------------------
   The flywheel ring becomes a vertical stack below 780px; media rails and
   touch targets adapt below 640px. Inline layout styles are page-level, so
   these overrides are deliberately !important.
   ----------------------------------------------------------------------- */
@media (max-width: 780px) {
  [data-flywrap] { aspect-ratio: auto !important; width: 100% !important; display: flex !important; flex-direction: column !important; gap: 10px !important; margin-top: 28px !important; }
  [data-wheel], [data-hub] { display: none !important; }
  [data-fnode] { position: static !important; transform: none !important; animation: none !important; }
  [data-fnode] > div { white-space: normal !important; width: 100% !important; }
}

@media (max-width: 640px) {
  [data-strip] a { flex: 0 0 82vw !important; }
  [data-faqbtn] { min-height: 56px; }
  a[href], button, input, textarea, select { min-height: 44px; }
}

/* --- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* --- Desktop Nav -------------------------------------------------------- */
@media (min-width: 901px) {
  [data-mobile-menu] { display: none !important; }
}
@media (max-width: 900px) {
  [data-desktop-nav] { display: none !important; }
}

a.active { color: var(--accent) !important; }


[data-desktop-nav] a.active { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }


/* --- Mobile Headers ----------------------------------------------------- */
@media (max-width: 450px) {
  [data-nav] a[href="contact.html"] { display: none !important; }
  [data-menulabel] { display: none !important; }
}


/* --- Desktop Nav Hover Effects ---------------------------------------- */
@media (min-width: 901px) {
  [data-desktop-nav] a:not(.active):hover {
    color: var(--accent) !important;
  }
  [data-nav] a[href="contact.html"] {
    border: 0.5px solid var(--accent) !important;
    transition: background-color 0.3s ease, color 0.3s ease !important;
  }
  [data-nav] a[href="contact.html"]:hover {
    background-color: #fff !important;
    color: var(--accent) !important;
  }
}


/* --- Hide horizontal scrollbar on film strips --- */
[data-strip] {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
[data-strip]::-webkit-scrollbar {
  display: none;
}


@keyframes scrollUp {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

@keyframes scrollDown {
  0% { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}

/* ==========================================================================
   Maintenance Mode Overlay
   ========================================================================== */
#palco-maintenance-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 2147483647 !important;
  background-color: #0A0A0C !important;
  color: #FFFFFF !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(24px, 5vw, 64px) !important;
  box-sizing: border-box !important;
  text-align: center !important;
  overflow: hidden !important;
  user-select: none !important;
}

#palco-maintenance-overlay a {
  color: #FFFFFF;
  text-decoration: none;
  transition: color 0.2s ease;
}

#palco-maintenance-overlay a:hover {
  color: var(--accent, #C21E2B);
}