/* =========================================================
   paksaf.com — horizontal auto-advancing deck
   Additive: layered on top of site.css. Does NOT replace it.
   Active on desktop (≥1024px). Mobile falls back to vertical.
   ========================================================= */

/* ---------- Deck container: horizontal on desktop ---------- */
@media (min-width: 1024px) {
  html, body { overscroll-behavior: none; }
  body.deck-horizontal { overflow: hidden; }

  body.deck-horizontal .snap-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: auto; /* JS animates the snap with bezier */
    scrollbar-width: none;
  }
  body.deck-horizontal .snap-container::-webkit-scrollbar { display: none; }

  body.deck-horizontal .snap-section {
    flex: 0 0 100vw;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    overflow: hidden;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Section inner: scrollable Y if content overflows (rare; we shrink to fit) */
  body.deck-horizontal .snap-section > .container-wide,
  body.deck-horizontal .snap-section > .deck-inner {
    width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-top: clamp(5rem, 8vh, 7rem);
    padding-bottom: clamp(2rem, 5vh, 4rem);
    position: relative;
    z-index: 2;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--brand-teal) 40%, transparent) transparent;
  }
  body.deck-horizontal .snap-section > .container-wide::-webkit-scrollbar { width: 4px; }
  body.deck-horizontal .snap-section > .container-wide::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--brand-teal) 45%, transparent);
    border-radius: 2px;
  }

  /* Snap chevrons re-rotate to horizontal arrows on desktop */
  body.deck-horizontal .snap-chev svg { transform: rotate(-90deg); }

  /* Old vertical dot column hidden; horizontal dot rail at bottom */
  body.deck-horizontal .snap-dots { display: none !important; }

  /* Compress card paddings/grids so they fit one viewport */
  body.deck-horizontal #features .grid { gap: 0.7rem; margin-top: 1rem; }
  body.deck-horizontal #features .card { padding: 0.85rem 1rem; }
  body.deck-horizontal #features .card h3 { font-size: 0.95rem; line-height: 1.2; }
  body.deck-horizontal #features .card p { font-size: 0.78rem; line-height: 1.35; margin-top: 0.3rem; }
  body.deck-horizontal #features .card .card-icon { width: 32px; height: 32px; margin-bottom: 0.4rem; padding: 6px; }
  body.deck-horizontal #features .card .card-icon svg { width: 18px; height: 18px; }
  body.deck-horizontal #features .card-learn { margin-top: 0.4rem; font-size: 0.75rem; }
  body.deck-horizontal #features .text-center { max-width: 38rem; }
  body.deck-horizontal #features .text-center .display { font-size: clamp(1.3rem, 1.8vw + 0.4rem, 1.9rem); line-height: 1.2; }
  body.deck-horizontal #features .text-center p { font-size: 0.85rem; margin-top: 0.6rem; }

  /* All non-hero section headlines on horizontal mode shrink to leave room for content */
  body.deck-horizontal #parts .display,
  body.deck-horizontal #book .display,
  body.deck-horizontal #ondemand .display,
  body.deck-horizontal #templates .display,
  body.deck-horizontal #languages .display,
  body.deck-horizontal #how .display,
  body.deck-horizontal #why .display,
  body.deck-horizontal #signup-cta .display {
    font-size: clamp(1.4rem, 2.1vw + 0.4rem, 2.2rem);
    line-height: 1.2;
  }
  body.deck-horizontal #parts > .container-wide > .reveal,
  body.deck-horizontal #book > .container-wide > .reveal,
  body.deck-horizontal #ondemand > .container-wide > .reveal,
  body.deck-horizontal #templates > .container-wide > .reveal,
  body.deck-horizontal #languages > .container-wide > .reveal,
  body.deck-horizontal #how > .container-wide > .reveal,
  body.deck-horizontal #why > .container-wide > .reveal,
  body.deck-horizontal #signup-cta > .container-wide > .reveal {
    margin-bottom: 0.5rem;
  }
  body.deck-horizontal #parts > .container-wide > .reveal p,
  body.deck-horizontal #book > .container-wide > .reveal p,
  body.deck-horizontal #ondemand > .container-wide > .reveal p,
  body.deck-horizontal #templates > .container-wide > .reveal p,
  body.deck-horizontal #languages > .container-wide > .reveal p,
  body.deck-horizontal #how > .container-wide > .reveal p,
  body.deck-horizontal #why > .container-wide > .reveal p {
    font-size: 0.9rem;
    margin-top: 0.5rem;
  }
  body.deck-horizontal #parts .tab-bar { margin-top: 0.75rem; }
  body.deck-horizontal #parts .tab-pill { padding: 0.45rem 1rem; font-size: 0.85rem; }
  body.deck-horizontal #parts .parts-grid { margin-top: 0.75rem; }
  body.deck-horizontal #book .section-split,
  body.deck-horizontal #ondemand .section-split { margin-top: 1rem; }

  body.deck-horizontal #parts .parts-grid { grid-template-columns: repeat(4, 1fr); gap: 0.85rem; }
  body.deck-horizontal #parts .part-card .part-image { padding: 0.5rem; min-height: 90px; }
  body.deck-horizontal #parts .part-card .part-image svg { max-height: 78px; }
  body.deck-horizontal #parts .part-body { padding: 0.6rem 0.75rem 0.75rem; gap: 0.35rem; }
  body.deck-horizontal #parts .part-name { font-size: 0.85rem; }
  body.deck-horizontal #parts .part-oem { font-size: 0.7rem; }
  body.deck-horizontal #parts .price-tier-amount { font-size: 0.78rem; }

  body.deck-horizontal .hero .display { font-size: clamp(2rem, 3.4vw + 0.6rem, 3.6rem); }
  body.deck-horizontal .hero .lead { font-size: clamp(0.95rem, 0.8vw + 0.7rem, 1.1rem); }
}

/* ---------- Background video layer (every section) ---------- */
/* Hidden by default; shown only on horizontal-deck mode (desktop) so mobile keeps its flat backgrounds. */
.deck-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none !important;
  display: none;
}
/* Pseudo-elements inherit pointer-events from their host, but some browsers
   need it spelled out explicitly when a transform/filter is applied. */
.deck-bg::before,
.deck-bg::after { pointer-events: none !important; }
body.deck-horizontal .deck-bg { display: block; }
/* On the hero, always show the video bg even on mobile (hero gradient becomes a backdrop) */
.snap-section.hero .deck-bg { display: block; }
.deck-bg video,
.deck-bg .deck-bg-svg,
.deck-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 700ms ease-out;
}
.deck-bg.is-loaded video,
.deck-bg.is-loaded .deck-bg-svg,
.deck-bg.is-loaded img { opacity: 1; }

/* Dark overlay gradient — keeps foreground text legible */
.deck-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 37, 64, 0.35) 0%, rgba(10, 37, 64, 0.78) 100%);
  z-index: 1;
}
.snap-section { isolation: isolate; position: relative; }

/* Light theme: lighter overlay; dark theme: stronger overlay */
[data-theme="light"] .deck-bg::after,
:root[data-theme="light"] .deck-bg::after {
  background: linear-gradient(180deg, rgba(247, 249, 252, 0.55) 0%, rgba(247, 249, 252, 0.88) 100%);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .deck-bg::after {
    background: linear-gradient(180deg, rgba(247, 249, 252, 0.55) 0%, rgba(247, 249, 252, 0.88) 100%);
  }
}
[data-theme="dark"] .deck-bg::after,
:root[data-theme="dark"] .deck-bg::after {
  background: linear-gradient(180deg, rgba(6, 16, 29, 0.55) 0%, rgba(6, 16, 29, 0.92) 100%);
}

/* Hero-specific: keep its own dramatic gradient on top of the video */
.snap-section.hero .deck-bg::after {
  background: radial-gradient(1200px 700px at 88% -8%, rgba(0,212,170,0.32), transparent 58%),
              radial-gradient(900px 700px at -12% 28%, rgba(255,184,0,0.20), transparent 55%),
              linear-gradient(160deg, rgba(6,26,48,0.85) 0%, rgba(10,37,64,0.85) 40%, rgba(14,58,92,0.7) 75%, rgba(17,78,114,0.6) 100%);
}

/* SVG-only backgrounds: never depend on poster/video, instant-paint */
.deck-bg .deck-bg-svg { opacity: 1; }
.deck-bg:has(.deck-bg-svg)::after,
.deck-bg.is-svg::after { /* keep overlay */ }

/* ---------- Animated SVG background patterns (per section) ---------- */
/* Each section gets a thematically-tinted CSS animation as a fallback or primary bg */

/* Engine heat shimmer for hero */
.bg-engine {
  background:
    radial-gradient(circle at 30% 60%, rgba(255, 152, 0, 0.18) 0%, transparent 35%),
    radial-gradient(circle at 70% 40%, rgba(255, 86, 34, 0.14) 0%, transparent 40%),
    linear-gradient(180deg, #0c1a2c 0%, #1a0f08 100%);
  animation: bgShimmer 6s ease-in-out infinite alternate;
}
@keyframes bgShimmer {
  0% { filter: hue-rotate(0deg) brightness(1); }
  100% { filter: hue-rotate(8deg) brightness(1.08); }
}

/* AI particle network for features */
.bg-particles {
  background:
    radial-gradient(circle at 20% 30%, rgba(0, 212, 170, 0.18) 0%, transparent 25%),
    radial-gradient(circle at 80% 70%, rgba(0, 212, 170, 0.14) 0%, transparent 28%),
    radial-gradient(circle at 50% 50%, rgba(111, 247, 218, 0.08) 0%, transparent 35%),
    #06101D;
}
.bg-particles::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(0, 212, 170, 0.5) 1px, transparent 1px),
    radial-gradient(circle, rgba(111, 247, 218, 0.3) 1px, transparent 1px);
  background-size: 60px 60px, 90px 90px;
  background-position: 0 0, 30px 30px;
  animation: particleDrift 32s linear infinite;
  opacity: 0.7;
}
@keyframes particleDrift {
  0% { background-position: 0 0, 30px 30px; }
  100% { background-position: 60px -60px, 90px -60px; }
}

/* Schematic / wireframe pattern for parts */
.bg-schematic {
  background: #0a1626;
  background-image:
    linear-gradient(rgba(0, 212, 170, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 170, 0.08) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: schematicPan 28s linear infinite;
}
.bg-schematic::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 30%, rgba(255, 184, 0, 0.18) 0%, transparent 22%),
    radial-gradient(circle at 75% 70%, rgba(0, 212, 170, 0.18) 0%, transparent 22%);
}
@keyframes schematicPan {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 40px 40px, 40px 40px; }
}

/* Workshop floor for book */
.bg-workshop {
  background:
    repeating-linear-gradient(135deg, #1a2638 0px, #1a2638 60px, #14202e 60px, #14202e 120px),
    #0c1828;
}
.bg-workshop::before {
  content: "";
  position: absolute;
  inset: -10%;
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 184, 0, 0.2) 0%, transparent 40%);
  animation: workshopSwing 14s ease-in-out infinite alternate;
}
@keyframes workshopSwing {
  0% { transform: translate(-3%, -2%); }
  100% { transform: translate(3%, 2%); }
}

/* Karachi map with moving pin dots for on-demand */
.bg-map {
  background:
    radial-gradient(ellipse at 30% 70%, rgba(30, 136, 229, 0.25) 0%, transparent 40%),
    radial-gradient(ellipse at 70% 30%, rgba(0, 212, 170, 0.18) 0%, transparent 40%),
    linear-gradient(160deg, #051628 0%, #0a2540 100%);
}
.bg-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(transparent 49.5%, rgba(91, 127, 168, 0.18) 50%, transparent 50.5%),
    linear-gradient(90deg, transparent 49.5%, rgba(91, 127, 168, 0.18) 50%, transparent 50.5%);
  background-size: 80px 80px;
  animation: mapDrift 40s linear infinite;
}
.bg-map::after {
  /* The dark overlay is set globally; we add pulse dots via a separate pseudo via a child SVG */
}
@keyframes mapDrift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-80px, -80px); }
}

/* Templates: signage flicker (warm) */
.bg-signage {
  background: linear-gradient(135deg, #1a0f08 0%, #2b1a0a 100%);
}
.bg-signage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 25%, rgba(255, 184, 0, 0.32) 0%, transparent 22%),
    radial-gradient(circle at 85% 75%, rgba(255, 86, 34, 0.28) 0%, transparent 22%),
    radial-gradient(circle at 50% 50%, rgba(255, 215, 122, 0.18) 0%, transparent 30%);
  animation: signageFlicker 4.5s ease-in-out infinite;
}
@keyframes signageFlicker {
  0%, 100% { opacity: 0.85; }
  20% { opacity: 1; }
  21% { opacity: 0.75; }
  22% { opacity: 1; }
  60% { opacity: 0.95; }
  61% { opacity: 0.65; }
  62% { opacity: 1; }
}

/* Earth rotation for languages/markets */
.bg-earth {
  background: radial-gradient(circle at 50% 50%, #0e3a5c 0%, #04101F 70%);
  overflow: hidden;
}
.bg-earth::before {
  content: "";
  position: absolute;
  width: 90vh;
  height: 90vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(111, 247, 218, 0.22) 0%, transparent 25%),
    radial-gradient(circle at 70% 60%, rgba(0, 212, 170, 0.22) 0%, transparent 30%),
    conic-gradient(from 0deg, #0a3556, #1e88e5, #00d4aa, #0a3556);
  opacity: 0.45;
  animation: earthRotate 50s linear infinite;
  filter: blur(0.5px);
}
.bg-earth::after {
  /* keep the global overlay */
}
@keyframes earthRotate {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* How it works: scanlines / screen recording feel */
.bg-screens {
  background: #0a1626;
}
.bg-screens::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0, 212, 170, 0.04) 0px, rgba(0, 212, 170, 0.04) 1px, transparent 1px, transparent 4px),
    radial-gradient(ellipse at 50% 50%, rgba(0, 212, 170, 0.12) 0%, transparent 50%);
  animation: scanlines 8s linear infinite;
}
@keyframes scanlines {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 0 100px, 0 0; }
}

/* Why people choose: warm sunset, soft floating */
.bg-warm {
  background:
    radial-gradient(ellipse at 20% 80%, rgba(255, 184, 0, 0.35) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 20%, rgba(0, 212, 170, 0.30) 0%, transparent 45%),
    linear-gradient(160deg, #1a2940 0%, #0a2540 60%, #114E72 100%);
}

/* Signup CTA: smiling owner / shop sign neon */
.bg-cta {
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 212, 170, 0.25) 0%, transparent 40%),
    linear-gradient(160deg, #0c2b48 0%, #0a2540 100%);
}
.bg-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 184, 0, 0.22) 0%, transparent 25%),
    radial-gradient(circle at 70% 70%, rgba(0, 212, 170, 0.22) 0%, transparent 25%);
  animation: ctaPulse 8s ease-in-out infinite alternate;
}
@keyframes ctaPulse {
  0% { opacity: 0.6; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.05); }
}

/* ---------- Floating particles overlay (decorative, why section) ---------- */
.deck-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.deck-particles span {
  position: absolute;
  bottom: -10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(0, 212, 170, 0.55);
  box-shadow: 0 0 6px rgba(0, 212, 170, 0.65);
  animation: floatUp linear infinite;
  opacity: 0;
}
.deck-particles span:nth-child(odd) {
  background: rgba(255, 184, 0, 0.5);
  box-shadow: 0 0 6px rgba(255, 184, 0, 0.6);
}
@keyframes floatUp {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.9; }
  90% { opacity: 0.9; }
  100% { transform: translateY(-110vh) translateX(var(--drift, 20px)); opacity: 0; }
}

/* ---------- Section entrance / exit transitions (horizontal mode only) ---------- */
@media (min-width: 1024px) {
  body.deck-horizontal .snap-section .container-wide > *,
  body.deck-horizontal .snap-section .deck-inner > * {
    opacity: 0;
    transform: translateY(18px);
    /* cubic-bezier(0.65, 0, 0.35, 1) — anticipation + overshoot for section entrance */
    transition: opacity 420ms cubic-bezier(0.65, 0, 0.35, 1),
                transform 420ms cubic-bezier(0.65, 0, 0.35, 1);
    transition-delay: calc(var(--enter-i, 0) * 40ms + 80ms);
  }
  body.deck-horizontal .snap-section.is-active .container-wide > *,
  body.deck-horizontal .snap-section.is-active .deck-inner > * {
    opacity: 1;
    transform: translateY(0);
  }
  body.deck-horizontal .snap-section.is-leaving .container-wide > *,
  body.deck-horizontal .snap-section.is-leaving .deck-inner > * {
    opacity: 0;
    transform: translateY(-8px);
    transition-duration: 200ms;
    transition-delay: 0ms;
  }
}

/* ---------- Top progress bar (per-section autoplay countdown) ---------- */
.deck-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  z-index: 60;
  pointer-events: none;
}
.deck-progress > i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--brand-teal, #00D4AA), var(--brand-amber, #FFB800));
  transform-origin: left center;
  transition: width 200ms linear;
}
.deck-progress.is-paused > i {
  background: linear-gradient(90deg, #94a3b8, #cbd5e1);
  opacity: 0.6;
}

/* ---------- Horizontal dot rail (desktop) ---------- */
.deck-rail {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(10, 37, 64, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 55;
  box-shadow: 0 12px 36px -10px rgba(0, 0, 0, 0.55);
}
.deck-rail button {
  appearance: none;
  background: rgba(255, 255, 255, 0.25);
  border: 0;
  width: 28px;
  height: 6px;
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: background 240ms ease, width 240ms ease;
}
.deck-rail button:hover { background: rgba(255, 255, 255, 0.5); }
.deck-rail button[aria-current="true"] {
  background: var(--brand-teal, #00D4AA);
  width: 40px;
}
.deck-rail button::after {
  content: attr(data-label);
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #0A2540;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.deck-rail button:hover::after,
.deck-rail button:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (min-width: 1024px) {
  body.deck-horizontal .deck-rail { display: inline-flex; }
}

/* ---------- Transition wipe (Apple-style vertical line) ---------- */
.deck-wipe {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent 0%, var(--brand-teal, #00D4AA) 20%, var(--brand-teal, #00D4AA) 80%, transparent 100%);
  z-index: 58;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 24px rgba(0, 212, 170, 0.6);
}
.deck-wipe.is-running {
  animation: deckWipe 560ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes deckWipe {
  0% { left: -2px; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 100vw; opacity: 0; }
}
.deck-wipe.is-running.is-reverse {
  animation-name: deckWipeReverse;
}
@keyframes deckWipeReverse {
  0% { left: 100vw; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: -2px; opacity: 0; }
}

/* ---------- 3D card tilt (applied via JS, smoothed by CSS) ---------- */
.deck-tilt {
  transform-style: preserve-3d;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  position: relative; /* establishes a hit-test box for interactive children */
}
.deck-tilt::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.22) 0%,
    transparent 45%
  );
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none !important;
  z-index: 2;
}
.deck-tilt.is-hot::before { opacity: 1; }
/* Interactive children inside a tilted card must sit above the ::before glow
   and own their own hit-test box — guarantees clicks land on the visible target. */
.deck-tilt a,
.deck-tilt button,
.deck-tilt .btn,
.deck-tilt input,
.deck-tilt select,
.deck-tilt textarea {
  position: relative;
  z-index: 5;
  pointer-events: auto;
}

/* ---------- Cursor-tracking glow on hero CTAs ---------- */
.hero .btn-primary,
.hero .btn-amber,
.hero .btn-secondary {
  position: relative;
  overflow: hidden;
}
.hero .btn-primary::before,
.hero .btn-amber::before,
.hero .btn-secondary::before {
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 60%);
  top: var(--my, 50%);
  left: var(--mx, 50%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 280ms ease;
}
.hero .btn-primary:hover::before,
.hero .btn-amber:hover::before,
.hero .btn-secondary:hover::before { opacity: 1; }

/* ---------- Hero parallax + Ken Burns: phone mock drifts during dwell ---------- */
.snap-section.hero .phone-float {
  will-change: transform;
  transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0);
  transition: transform 120ms ease-out;
}
@media (min-width: 1024px) {
  body.deck-horizontal .snap-section.hero.is-active .phone-float .phone-frame {
    animation: kenBurns 12s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
    transform-origin: 50% 45%;
  }
  body.autoplay-paused .snap-section.hero .phone-float .phone-frame {
    animation-play-state: paused;
  }
}
@keyframes kenBurns {
  0%   { transform: scale(1) translate(0, 0); }
  50%  { transform: scale(1.035) translate(-1.5%, 0.8%); }
  100% { transform: scale(1.05) translate(1.2%, -1%); }
}

/* ---------- Right-edge "next section" pulse — gentle eye-nudge ---------- */
@media (min-width: 1024px) {
  body.deck-horizontal:not(.autoplay-paused) [data-snap-next]:not(:disabled) {
    animation: chevPulse 8s ease-in-out infinite;
  }
}
@keyframes chevPulse {
  0%, 92%, 100% { transform: translateX(0); box-shadow: var(--shadow-md); }
  94% { transform: translateX(-4px); box-shadow: 0 8px 28px rgba(0, 212, 170, 0.35); }
  96% { transform: translateX(2px); }
  98% { transform: translateX(-2px); }
}

/* ---------- Hide scroll chevrons on horizontal deck; the rail handles nav ---------- */
@media (min-width: 1024px) {
  body.deck-horizontal .snap-chevrons {
    bottom: 60px;
    right: 24px;
  }
  body.deck-horizontal .snap-chev { width: 42px; height: 42px; }
}

/* ---------- Reduced motion: kill everything dynamic ---------- */
@media (prefers-reduced-motion: reduce) {
  .deck-bg video { display: none !important; }
  .bg-engine, .bg-particles, .bg-schematic, .bg-workshop, .bg-map,
  .bg-signage, .bg-earth, .bg-screens, .bg-warm, .bg-cta {
    animation: none !important;
  }
  .bg-particles::before, .bg-schematic::before, .bg-workshop::before,
  .bg-map::before, .bg-signage::before, .bg-earth::before,
  .bg-screens::before, .bg-cta::before {
    animation: none !important;
  }
  .deck-particles { display: none !important; }
  .snap-section .container-wide > *,
  .snap-section .deck-inner > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .deck-tilt { transition: none !important; }
  .deck-wipe { display: none !important; }
  .deck-progress { display: none !important; }
}

/* ---------- save-data: drop all videos, only SVG patterns ---------- */
body.save-data .deck-bg video { display: none !important; }

/* ---------- Force-vertical pages (templates.html) hide horizontal UI ---------- */
body[data-deck-mode="vertical"] .deck-progress,
body[data-deck-mode="vertical"] .deck-rail,
body[data-deck-mode="vertical"] .deck-wipe { display: none !important; }

/* Mobile (vertical-fallback) also hides the desktop deck UI */
@media (max-width: 1023.98px) {
  .deck-progress,
  .deck-rail,
  .deck-wipe { display: none !important; }
}

/* ---------- Templates page polish (still vertical there) ---------- */
.tpl-card { position: relative; }
@media (min-width: 1024px) {
  /* On templates.html allow soft section entrance even when vertical */
  .templates-page .snap-section .container-wide > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--enter-i, 0) * 50ms + 80ms);
  }
  .templates-page .snap-section.is-active .container-wide > * {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Section dark text fix: hero/why/etc are dark; ensure content stays light over video ---------- */
body.deck-horizontal #features,
body.deck-horizontal #parts,
body.deck-horizontal #book,
body.deck-horizontal #ondemand,
body.deck-horizontal #templates,
body.deck-horizontal #languages,
body.deck-horizontal #how,
body.deck-horizontal #signup-cta {
  background: transparent !important;
}

/* On horizontal mode: light-themed sections need to keep their text readable above the dark overlay */
@media (min-width: 1024px) {
  body.deck-horizontal #features .display,
  body.deck-horizontal #parts .display,
  body.deck-horizontal #book .display,
  body.deck-horizontal #ondemand .display,
  body.deck-horizontal #templates .display,
  body.deck-horizontal #languages .display,
  body.deck-horizontal #how .display,
  body.deck-horizontal #signup-cta .display {
    color: #fff;
  }
  body.deck-horizontal #features .text-\[color\:var\(--ink-soft\)\],
  body.deck-horizontal #parts .text-\[color\:var\(--ink-soft\)\],
  body.deck-horizontal #book .text-\[color\:var\(--ink-soft\)\],
  body.deck-horizontal #ondemand .text-\[color\:var\(--ink-soft\)\],
  body.deck-horizontal #templates .text-\[color\:var\(--ink-soft\)\],
  body.deck-horizontal #languages .text-\[color\:var\(--ink-soft\)\],
  body.deck-horizontal #how .text-\[color\:var\(--ink-soft\)\],
  body.deck-horizontal #signup-cta .text-\[color\:var\(--ink-soft\)\] {
    color: rgba(241, 245, 251, 0.82) !important;
  }
  /* Cards/forms keep their own surface */
  body.deck-horizontal .card,
  body.deck-horizontal .part-card,
  body.deck-horizontal .tpl-card,
  body.deck-horizontal form.card,
  body.deck-horizontal .step-flow {
    background: rgba(255, 255, 255, 0.96);
    color: var(--ink, #0E1726);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  /* Cards are always on a white surface in horizontal mode, so force dark text
     regardless of system color-scheme. Don't use var(--ink) — it flips to light in dark mode. */
  body.deck-horizontal .card,
  body.deck-horizontal .part-card,
  body.deck-horizontal .tpl-card,
  body.deck-horizontal .step-flow,
  body.deck-horizontal form.card,
  body.deck-horizontal form.card label,
  body.deck-horizontal form.card legend,
  body.deck-horizontal form.card .slot-pill,
  body.deck-horizontal form.card .prefix,
  body.deck-horizontal form.card .badge-pill,
  body.deck-horizontal form.card .form-disclaimer,
  body.deck-horizontal form.card option {
    color: #0E1726 !important;
  }
  body.deck-horizontal form.card input,
  body.deck-horizontal form.card select,
  body.deck-horizontal form.card textarea {
    color: #0E1726 !important;
    background: #fff !important;
  }
  body.deck-horizontal form.card .form-disclaimer { color: #64748B !important; }
  body.deck-horizontal .card .display,
  body.deck-horizontal .card h3,
  body.deck-horizontal .part-card .part-name,
  body.deck-horizontal .tpl-card .display {
    color: #0E1726 !important;
  }
  body.deck-horizontal .card p,
  body.deck-horizontal .card em,
  body.deck-horizontal .tpl-card p,
  body.deck-horizontal .step-flow p,
  body.deck-horizontal .step-flow span,
  body.deck-horizontal #features .card p,
  body.deck-horizontal #parts .card p,
  body.deck-horizontal #book .card p,
  body.deck-horizontal #ondemand .card p,
  body.deck-horizontal #templates .card p,
  body.deck-horizontal #signup-cta .card p,
  body.deck-horizontal #features .card .text-\[color\:var\(--ink-soft\)\],
  body.deck-horizontal #parts .card .text-\[color\:var\(--ink-soft\)\],
  body.deck-horizontal #book .card .text-\[color\:var\(--ink-soft\)\],
  body.deck-horizontal #ondemand .card .text-\[color\:var\(--ink-soft\)\],
  body.deck-horizontal #templates .card .text-\[color\:var\(--ink-soft\)\],
  body.deck-horizontal #signup-cta .card .text-\[color\:var\(--ink-soft\)\],
  body.deck-horizontal .card .text-\[color\:var\(--ink-soft\)\],
  body.deck-horizontal .tpl-card .text-\[color\:var\(--ink-soft\)\],
  body.deck-horizontal .step-flow .text-\[color\:var\(--ink-soft\)\] {
    color: #475569 !important;
  }
  body.deck-horizontal .card .card-learn { color: #00D4AA !important; }
  body.deck-horizontal .card .card-icon { color: #00D4AA; }
  body.deck-horizontal .eyebrow {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
  }
}

/* ---------- Bigger hit zone for snap-chev on horizontal mode ---------- */
@media (min-width: 1024px) {
  body.deck-horizontal .snap-chev {
    background: rgba(10, 37, 64, 0.65);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
  }
  body.deck-horizontal .snap-chev:hover {
    background: rgba(10, 37, 64, 0.9);
  }
}

/* ---------- Nav-mounted autoplay + sound toggles ---------- */
.autoplay-toggle,
.autoplay-sound {
  width: 38px; height: 38px;
}
.autoplay-toggle svg,
.autoplay-sound svg { width: 16px; height: 16px; }
@media (max-width: 1023.98px) {
  /* hide on mobile — no autoplay in vertical fallback */
  .autoplay-toggle, .autoplay-sound { display: none; }
}

/* When autoplay is paused for any reason, freeze the decorative drift loops
   so the UI feels stopped — matches user expectation of "pause". */
body.autoplay-paused .bg-engine,
body.autoplay-paused .bg-particles,
body.autoplay-paused .bg-particles::before,
body.autoplay-paused .bg-schematic,
body.autoplay-paused .bg-workshop::before,
body.autoplay-paused .bg-map::before,
body.autoplay-paused .bg-signage::before,
body.autoplay-paused .bg-earth::before,
body.autoplay-paused .bg-screens::before,
body.autoplay-paused .bg-cta::before {
  animation-play-state: paused;
}
body.autoplay-paused .deck-particles span { animation-play-state: paused; }

/* ---------- Reduced motion: also kills Ken Burns + chevron pulse ---------- */
@media (prefers-reduced-motion: reduce) {
  .snap-section.hero .phone-float .phone-frame { animation: none !important; }
  [data-snap-next] { animation: none !important; }
}

/* ---------- Safety net: anything inside the active section content owns clicks ---------- */
@media (min-width: 1024px) {
  body.deck-horizontal .snap-section .container-wide,
  body.deck-horizontal .snap-section .deck-inner {
    pointer-events: auto;
  }
}

/* ---------- Section transition: brief tint flash to suggest depth ---------- */
.snap-section .deck-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 170, 0.0) 50%, transparent);
  pointer-events: none;
}
.snap-section.is-active .deck-bg::before {
  background: linear-gradient(90deg, transparent, rgba(0, 212, 170, 0.06) 50%, transparent);
}