/* Motion pass: a lightweight, pointer-aware web trace layered over the existing
   particle canvas. It is intentionally separate so the original interactions
   stay untouched and the effect degrades cleanly on small screens. */

/* Visibility guard: the original reveal observer can be unavailable in
   static/embedded browsers. Never leave content hidden if that observer does
   not initialize. */
[data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}
html {
  scroll-behavior: auto !important;
}
.suit-archive-slot {
  display: block;
  min-height: 1050px;
  position: relative;
}
@media (max-width: 700px) {
  .suit-archive-slot { min-height: 1080px; }
}
.nav-shell a[href^="#"],
.footer-bottom a[href^="#"],
.suit-addon-chip {
  touch-action: manipulation;
}
.section-head[data-reveal] h2,
.section-head[data-reveal] > p {
  clip-path: inset(0) !important;
  opacity: 1 !important;
  transform: none !important;
}

.hero {
  --motion-pointer-x: 50%;
  --motion-pointer-y: 42%;
}

.motion-web-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .78;
  mix-blend-mode: screen;
}
.hero-copy,
.hero-kicker,
.hero-enter-wrap,
.hero-index,
.scroll-cue { z-index: 3; }
.hero-copy::after {
  content: "";
  position: absolute;
  left: 0;
  top: 34%;
  width: min(31vw, 340px);
  height: 1px;
  opacity: .32;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  transform: translateX(-14%) scaleX(.65);
  transform-origin: left center;
  transition: transform .6s cubic-bezier(.16,1,.3,1), opacity .35s;
}
.hero.motion-hover .hero-copy::after {
  opacity: .8;
  transform: translateX(0) scaleX(1);
}

/* Landscape phones are wider than the existing 700px breakpoint. Keep the
   dense rails usable there by turning them into real touch-scrolling tracks. */
@media (orientation: landscape) and (max-height: 600px) {
  .character-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px 16px;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    scrollbar-width: thin;
  }
  .character-unit {
    flex: 0 0 min(300px, 42vw);
  }
  .timeline-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    scrollbar-width: thin;
  }
  .timeline {
    width: max-content;
    min-width: 900px;
  }
  .suit-addon-rail {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    scrollbar-width: thin;
  }
}

.timeline-wrap { position: relative; }
.timeline {
  isolation: isolate;
}
.timeline::before {
  z-index: 0;
  pointer-events: none;
}
.timeline button {
  position: relative;
  z-index: 3;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(226,54,54,.22);
}

/* The map is built from several full-size decorative layers. Some mobile
   browsers treat those layers as tap targets even when they look transparent,
   so only the actual location markers are allowed to receive pointer input. */
.real-map-bg,
.map-paper,
.map-grid,
.map-water,
.borough-shape,
.road-network,
.web-route,
.map-zone,
.map-compass,
.map-scale,
.map-legend,
.map-coordinates {
  pointer-events: none !important;
}
.map-marker {
  z-index: 20 !important;
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(226,54,54,.22);
}
.map-marker > * {
  pointer-events: none;
}
.timeline-web-trace {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.timeline-web-trace path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 4 8;
  filter: drop-shadow(0 0 5px rgba(81,140,202,.8));
  opacity: 0;
}
.timeline-web-trace path.is-tracing { animation: motionTrace .9s cubic-bezier(.16,1,.3,1) forwards; }
.timeline-web-trace circle {
  fill: var(--red);
  stroke: #fff;
  stroke-width: 1;
  filter: drop-shadow(0 0 8px var(--red));
  opacity: 0;
}
.timeline-web-trace circle.is-tracing { animation: motionNode .9s cubic-bezier(.16,1,.3,1) forwards; }
.film-detail.motion-reveal { animation: motionFilmReveal .72s cubic-bezier(.16,1,.3,1) both; }
.film-detail.motion-reveal .film-poster { animation: motionPosterLock .72s cubic-bezier(.16,1,.3,1) both; }
@keyframes motionTrace {
  0% { opacity: 0; stroke-dashoffset: 160; }
  12% { opacity: .9; }
  100% { opacity: .76; stroke-dashoffset: 0; }
}
@keyframes motionNode {
  0%, 18% { opacity: 0; r: 2; }
  35% { opacity: 1; r: 5; }
  100% { opacity: .15; r: 12; }
}
@keyframes motionFilmReveal {
  0% { opacity: .35; clip-path: inset(0 0 0 100%); transform: translateY(10px); }
  100% { opacity: 1; clip-path: inset(0); transform: translateY(0); }
}
@keyframes motionPosterLock {
  0% { filter: saturate(.45) contrast(1.35); transform: perspective(900px) rotateY(-16deg) scale(.96); }
  65% { filter: saturate(1.25) contrast(1.05); }
  100% { filter: none; transform: perspective(900px) rotateY(0) scale(1); }
}
@media (max-width: 700px) {
  .nav-shell {
    box-sizing: border-box;
    width: calc(100% - 16px) !important;
    height: 98px !important;
    padding: 8px 8px 6px !important;
    top: max(6px, env(safe-area-inset-top)) !important;
    display: flex !important;
    flex-wrap: wrap;
    align-content: center;
    gap: 2px 8px;
  }
  .nav-shell > .brand {
    flex: 1 1 auto;
    font-size: 15px;
  }
  .nav-actions {
    flex: 0 0 auto;
  }
  .nav-shell nav {
    order: 3;
    display: flex !important;
    width: 100%;
    max-width: 100%;
    gap: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }
  .nav-shell nav::-webkit-scrollbar { display: none; }
  .nav-shell nav a {
    flex: 0 0 auto;
    min-width: 52px;
    padding: 7px 10px;
    text-align: center;
    white-space: nowrap;
    font-size: 11px;
    letter-spacing: .08em;
  }
  .hero-kicker { top: 122px !important; }
  .motion-web-canvas { opacity: .45; }
  .hero-copy::after { width: 48vw; }
  .timeline-web-trace { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-web-canvas { display: none; }
  .hero-copy::after { transition: none; }
  .timeline-web-trace { display: none; }
  .film-detail.motion-reveal,
  .film-detail.motion-reveal .film-poster { animation: none; }
}