/* ─── D-WOB Pitch Deck · FML × Ducati ───────────────────────────────── */

:root {
  /* Palette — Racing red + carbon black + warm off-white */
  --red:       #CB1517;       /* Ducati red */
  --red-deep:  #A10F12;
  --red-hot:   #E6241F;
  --ink:       #0A0A0A;       /* carbon black */
  --ink-2:     #141414;
  --ink-3:     #1E1E1E;
  --bone:      #F4EFE6;       /* warm off-white */
  --bone-2:    #E8E1D4;
  --paper:     #FBF7F0;
  --rule:      rgba(10,10,10,0.14);
  --rule-dark: rgba(244,239,230,0.14);
  --muted:     rgba(10,10,10,0.55);
  --muted-d:   rgba(244,239,230,0.55);

  /* Type — Editorial serif display + modern sans body + industrial mono/display */
  --f-display: "Fraunces", "Playfair Display", Georgia, serif;      /* elegant classic */
  --f-motor:   "Anton", "Oswald", Impact, "Helvetica Neue", sans-serif; /* motorsports */
  --f-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Scale — 1920x1080 */
  --title: 64px;
  --subtitle: 44px;
  --body: 34px;
  --small: 28px;
  --micro: 22px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  font-family: var(--f-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Slides — every <section> inside <deck-stage> */
deck-stage section {
  display: flex;
  flex-direction: column;
  background: var(--bone);
  color: var(--ink);
  overflow: hidden;
}

/* ─── Typography primitives ─────────────────────────────────────────── */

.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.72;
}

.display {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.95;
  font-style: normal;
  text-wrap: balance;
}

.display em, .display .it {
  font-style: italic;
  font-weight: 400;
}

.motor {
  font-family: var(--f-motor);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.88;
  font-weight: 400;
}

.mono {
  font-family: var(--f-mono);
  letter-spacing: 0.02em;
}

/* ─── Frame: running header + footer on every slide ─────────────────── */

.frame-top, .frame-bottom {
  position: absolute;
  left: 0; right: 0;
  padding: 0 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
  z-index: 5;
  pointer-events: none;
}
.frame-top { top: 40px; }
.frame-bottom { bottom: 40px; }
.frame-top .dot, .frame-bottom .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--red);
  display: inline-block; margin: 0 10px 1px;
}

/* ─── Image / asset placeholders ────────────────────────────────────── */

.ph {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      rgba(10,10,10,0.04) 0 10px,
      rgba(10,10,10,0) 10px 22px),
    var(--bone-2);
  border: 1px solid var(--rule);
  color: var(--ink);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.ph.dark {
  background:
    repeating-linear-gradient(135deg,
      rgba(244,239,230,0.05) 0 10px,
      rgba(244,239,230,0) 10px 22px),
    var(--ink-2);
  border-color: var(--rule-dark);
  color: var(--bone);
}
.ph.red {
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.08) 0 10px,
      rgba(255,255,255,0) 10px 22px),
    var(--red-deep);
  border-color: rgba(255,255,255,0.12);
  color: var(--bone);
}
.ph > .ph-label {
  font-family: var(--f-mono);
  font-size: 14px;
  display: none;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 18px;
  opacity: 0.78;
}
.ph > .ph-corner {
  display: none;
}

/* Logo tile placeholder */
.logo-tile {
  border: 1px solid var(--rule);
  background: var(--paper);
  aspect-ratio: 3 / 2;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 14px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
  position: relative;
}
.logo-tile::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg,
    rgba(10,10,10,0.035) 0 6px,
    rgba(10,10,10,0) 6px 14px);
  pointer-events: none;
}
.logo-tile.dark {
  background: var(--ink-2);
  border-color: var(--rule-dark);
  color: var(--muted-d);
}
.logo-tile.dark::before {
  background: repeating-linear-gradient(135deg,
    rgba(244,239,230,0.05) 0 6px,
    rgba(244,239,230,0) 6px 14px);
}
.logo-tile .label { position: relative; z-index: 1; padding: 0 12px; text-align: center; text-wrap: balance;}

/* Filled logo tile — holds an actual gif/image, text stays centered over it */
.logo-tile.filled {
  overflow: hidden;
  background: var(--ink);
  border: none;
}
.logo-tile.filled::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(10,10,10,0.55);
  z-index: 1;
}
.logo-tile.filled > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.logo-tile.filled .label {
  color: var(--bone);
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
  z-index: 2;
}

/* ─── Section dividers — full-bleed red ─────────────────────────────── */

.section-divider {
  background: var(--red);
  color: var(--bone);
  position: relative;
}
.section-divider .frame-top,
.section-divider .frame-bottom {
  color: var(--bone);
  opacity: 0.7;
}
.section-divider .frame-top .dot,
.section-divider .frame-bottom .dot {
  background: var(--bone);
}

/* ─── Dark slide shell ──────────────────────────────────────────────── */
.dark-slide {
  background: var(--ink);
  color: var(--bone);
}
.dark-slide .frame-top, .dark-slide .frame-bottom {
  color: var(--bone);
  opacity: 0.5;
}

/* Bone slide */
.bone-slide { background: var(--bone); color: var(--ink); }
.paper-slide { background: var(--paper); color: var(--ink); }

/* ─── Small utilities ───────────────────────────────────────────────── */
.rule { height: 1px; background: currentColor; opacity: 0.18; }
.rule-v { width: 1px; background: currentColor; opacity: 0.18; }

.redline {
  width: 72px; height: 4px; background: var(--red); border-radius: 2px;
  display: inline-block;
}

.chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
}

/* ─── Animation primitives ─────────────────────────────────────────── */
@keyframes slideInUp {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes slideInLeft {
  from { transform: translateX(-60px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes slideInRight {
  from { transform: translateX(60px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.35); opacity: 0.6; }
}
@keyframes scanline {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

@keyframes arcDraw {
  to { stroke-dashoffset: 0; }
}

/* Trigger animations when slide becomes active */
deck-stage section[data-deck-active] .anim-up     { animation: slideInUp 0.9s cubic-bezier(.22,.8,.2,1) both; }
deck-stage section[data-deck-active] .anim-left   { animation: slideInLeft 0.9s cubic-bezier(.22,.8,.2,1) both; }
deck-stage section[data-deck-active] .anim-right  { animation: slideInRight 0.9s cubic-bezier(.22,.8,.2,1) both; }
deck-stage section[data-deck-active] .anim-fade   { animation: fadeIn 1.2s ease both; }

deck-stage section:not([data-deck-active]) .anim-up,
deck-stage section:not([data-deck-active]) .anim-left,
deck-stage section:not([data-deck-active]) .anim-right,
deck-stage section:not([data-deck-active]) .anim-fade { opacity: 0; }

/* Print / PDF export: force all animated elements to final state,
   kill entry transforms/opacity, stop marquees and draw-ins. */
@media print {
  deck-stage section .anim-up,
  deck-stage section .anim-left,
  deck-stage section .anim-right,
  deck-stage section .anim-fade,
  deck-stage section:not([data-deck-active]) .anim-up,
  deck-stage section:not([data-deck-active]) .anim-left,
  deck-stage section:not([data-deck-active]) .anim-right,
  deck-stage section:not([data-deck-active]) .anim-fade {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .redbar-grow,
  deck-stage section[data-deck-active] .redbar-grow {
    animation: none !important;
    transform: scaleX(1) !important;
  }
  .marquee {
    animation: none !important;
  }
  /* Any SVG arc/stroke draw-ins — show final state */
  [stroke-dashoffset] {
    stroke-dashoffset: 0 !important;
  }
  *, *::before, *::after {
    animation-delay: 0s !important;
    animation-duration: 0s !important;
    transition: none !important;
  }
}

/* stagger helpers */
.d1 { animation-delay: 0.08s !important; }
.d2 { animation-delay: 0.18s !important; }
.d3 { animation-delay: 0.30s !important; }
.d4 { animation-delay: 0.44s !important; }
.d5 { animation-delay: 0.60s !important; }
.d6 { animation-delay: 0.78s !important; }
.d7 { animation-delay: 0.96s !important; }
.d8 { animation-delay: 1.14s !important; }
.d9 { animation-delay: 1.32s !important; }

/* Running red sliver across top of red dividers */
.redbar {
  position: absolute; left: 0; right: 0; top: 0;
  height: 6px; background: var(--ink);
  transform-origin: left;
  animation: none;
}
deck-stage section[data-deck-active] .redbar-grow {
  animation: growWidth 1.1s cubic-bezier(.7,0,.2,1) both;
}
@keyframes growWidth {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Marquee track */
.marquee {
  display: flex; gap: 80px;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  will-change: transform;
}

/* Big oversized numeral */
.mega-num {
  font-family: var(--f-motor);
  font-size: 780px;
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--bone);
  opacity: 0.12;
}

/* Tweaks: dark mode override */
body[data-theme="dark"] deck-stage section.bone-slide {
  background: var(--ink);
  color: var(--bone);
}
body[data-theme="dark"] deck-stage section.paper-slide {
  background: var(--ink-2);
  color: var(--bone);
}
body[data-theme="dark"] deck-stage section.bone-slide .ph:not(.dark):not(.red) {
  background:
    repeating-linear-gradient(135deg,
      rgba(244,239,230,0.05) 0 10px,
      rgba(244,239,230,0) 10px 22px),
    var(--ink-2);
  border-color: var(--rule-dark);
  color: var(--bone);
}
body[data-theme="dark"] deck-stage section.bone-slide .logo-tile:not(.dark) {
  background: var(--ink-2); border-color: var(--rule-dark); color: var(--muted-d);
}
body[data-theme="dark"] deck-stage section.bone-slide .logo-tile:not(.dark)::before {
  background: repeating-linear-gradient(135deg,
    rgba(244,239,230,0.05) 0 6px,
    rgba(244,239,230,0) 6px 14px);
}
body[data-theme="dark"] deck-stage section.bone-slide .rule-dark-swap,
body[data-theme="dark"] deck-stage section.bone-slide .hairline { border-color: var(--rule-dark) !important; }

/* ─── Filled placeholders with imagery ───────────────────────────── */
.ph.filled {
  background: var(--ink);
  border-color: transparent;
  border: none;
}
.ph.filled > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.ph.filled > .ph-corner,
.ph.filled > .ph-label {
  display: none;
  position: relative; z-index: 2;
  color: var(--bone);
  opacity: 0.55;
  mix-blend-mode: normal;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.ph.filled > .ph-corner {
  background: rgba(10,10,10,0.6);
  padding: 6px 12px;
  border-radius: 2px;
  backdrop-filter: blur(6px);
  opacity: 1;
}
.ph.filled::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
}

/* Background hero image on dark slides (absolutely positioned + dimmed) */
.bg-hero {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.bg-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.55;
  filter: saturate(0.9);
}
.bg-hero.dim img { opacity: 0.28; }
.bg-hero.edge::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.5) 50%, rgba(10,10,10,0.2) 100%);
}
.bg-hero.full::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(10,10,10,0.1) 0%, rgba(10,10,10,0.85) 100%);
}
.bg-hero.bottom::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.2) 0%, rgba(10,10,10,0.85) 70%, rgba(10,10,10,0.98) 100%);
}

/* ─── Partner logo lockups (white-on-transparent PNGs) ───────────────
   Logos ship as white-on-transparent. On dark slides they display as-is.
   On bone (cream) slides we invert them to black via CSS filter so they
   stay legible against the light background. */
.p-logo {
  display: inline-block;
  height: 44px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
}
.p-logo.sm { height: 28px; }
.p-logo.lg { height: 64px; }
.p-logo.xl { height: 96px; }

/* Auto-invert any .p-logo sitting inside a bone (light) slide */
.bone-slide .p-logo { filter: invert(1); }
/* Bully ships black-on-transparent — already legible on bone, no invert */
.bone-slide img[src*="logo-bully"] { filter: none; }
/* On dark slides, Bully needs to go white */
.dark-slide img[src*="logo-bully"] { filter: brightness(0) invert(1); }

/* Ducati logo — PNG has been recolored to Ducati red (#CB1517);
   do not apply any color filters. */
img[src*="logo-ducati"] { filter: none; }
/* Chip wrapper no longer needs to force dark backing — reduce to inline */
.p-logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
}
.p-logo-chip .p-logo { display: block; }