/* U-Driver Brand Theme for reveal.js
   Fonts: Inter (headings) + Manrope (body)
   Colors: Navy primary, blue-to-green gradient accents */

@import url('../../assets/fonts/fonts.css');

/* ---- Brand Design Tokens ---- */
:root {
  /* Primary palette */
  --ud-navy: #171b37;
  --ud-navy-light: #1f2545;
  --ud-navy-dark: #0f1229;
  /* Accent gradient colors */
  --ud-blue: #6cc8f3;
  --ud-teal: #5FC4A0;
  --ud-green: #75b957;
  /* Neutral palette */
  --ud-white: #FFFFFF;
  --ud-off-white: #F5F7FA;
  --ud-gray-100: #E8ECF1;
  --ud-gray-300: #B0B8C4;
  --ud-gray-600: #6B7280;
  /* Semantic colors */
  --ud-text-on-dark: #FFFFFF;
  --ud-text-on-light: #171b37;
  --ud-accent: #75b957;
  --ud-accent-hover: #65a54b;
  /* Brand gradient */
  --ud-gradient: linear-gradient(135deg, var(--ud-blue), var(--ud-teal), var(--ud-green));
  --ud-gradient-horizontal: linear-gradient(90deg, var(--ud-blue), var(--ud-teal), var(--ud-green));
  /* Typography */
  --ud-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ud-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Spacing scale */
  --ud-space-xs: 0.25rem;
  --ud-space-sm: 0.5rem;
  --ud-space-md: 1rem;
  --ud-space-lg: 2rem;
  --ud-space-xl: 3rem;
  --ud-space-2xl: 5rem;
  /* Slide safe zone (4% margin for projector overscan) */
  --ud-safe-zone: 5%;
  /* reveal.js theme variable mapping */
  --r-background-color: var(--ud-white);
  --r-main-font: var(--ud-font-body);
  --r-main-font-size: 36px;
  --r-main-color: var(--ud-navy);
  --r-heading-font: var(--ud-font-heading);
  --r-heading-color: var(--ud-navy);
  --r-heading-font-weight: 700;
  --r-heading-letter-spacing: -0.02em;
  --r-heading-text-transform: none;
  --r-heading1-size: 3.5em;
  --r-heading2-size: 2.6em;
  --r-heading3-size: 1.8em;
  --r-heading4-size: 1.1em;
  --r-link-color: var(--ud-blue);
  --r-link-color-hover: var(--ud-teal);
  --r-selection-background-color: rgba(108, 200, 243, 0.3);
  --r-selection-color: var(--ud-navy);
}

/* ---- Base Slide Styles ---- */
.reveal .slides { text-align: left; }
.reveal .slides section {
  padding: var(--ud-safe-zone);
  box-sizing: border-box;
  overflow: hidden;
}

/* ---- Typography ---- */
.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
  font-family: var(--ud-font-heading);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: var(--ud-space-md);
}

.reveal p, .reveal li, .reveal .body-text {
  font-family: var(--ud-font-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ud-gray-600);
}

/* Tabular nums for counters -- prevents layout shift */
.reveal .metric-value, .reveal .counter {
  font-variant-numeric: tabular-nums;
  font-family: var(--ud-font-heading);
  font-weight: 700;
}

/* ---- Slide Variant: Dark (navy background with glow) ---- */
.reveal .slides section.dark-slide {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(108,200,243,0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(117,185,87,0.06) 0%, transparent 50%),
    var(--ud-navy);
  color: var(--ud-text-on-dark);
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
}

.reveal .slides section.dark-slide:not(.closing-slide) h1 {
  font-size: 4.5em;
  letter-spacing: -0.03em;
}

.reveal .slides section.dark-slide h1,
.reveal .slides section.dark-slide h2,
.reveal .slides section.dark-slide h3,
.reveal .slides section.dark-slide h4 { color: var(--ud-white); }

.reveal .slides section.dark-slide p,
.reveal .slides section.dark-slide li { color: var(--ud-gray-100); }

/* ---- Brand Accent Elements ---- */
.reveal .accent { color: var(--ud-green); }
.reveal .accent-line {
  width: 100px; height: 4px;
  background: var(--ud-gradient-horizontal);
  border-radius: 2px;
  margin-bottom: var(--ud-space-md);
}

/* ---- Logo & Controls ---- */
.reveal .slides section .slide-logo {
  position: absolute !important;
  bottom: var(--ud-space-lg); right: var(--ud-space-lg);
  height: 32px; width: auto; opacity: 0.5;
  z-index: 2; pointer-events: none;
}

.reveal .progress { height: 4px; background: var(--ud-gray-100); }
.reveal .progress span {
  background: var(--ud-gradient-horizontal);
  transition: width 0.4s ease;
}

.reveal .controls { color: var(--ud-navy); }
.reveal.has-dark-background .controls { color: var(--ud-white); }

/* ---- Cover Slide ---- */
.reveal .slides section[data-state="cover"] {
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* ---- Closing Slide ---- */
.reveal .slides section.closing-slide {
  text-align: center;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.reveal .slides section.closing-slide .closing-logo {
  height: 120px;
  margin-bottom: var(--ud-space-xl);
}
.reveal .slides section.closing-slide h2 {
  font-size: 3.5em;
  background: var(--ud-gradient-horizontal);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.reveal .slides section.closing-slide .closing-info {
  font-family: var(--ud-font-body);
  color: var(--ud-gray-300);
  font-size: 1.2em;
  margin-top: var(--ud-space-lg);
}

/* ---- Decorative Glows ---- */
.reveal .slides section:not(.dark-slide)::after {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(108,200,243,0.04) 0%, transparent 70%);
  bottom: -250px; right: -200px;
  pointer-events: none;
  z-index: 0;
}
.reveal .slides section:not(.dark-slide) > * { position: relative; z-index: 1; }

/* ---- Key Visual Decorative Elements ---- */
/* Road lines on dark slides (not closing) */
.reveal .slides section.dark-slide:not(.closing-slide)::before {
  content: '';
  position: absolute;
  bottom: -40px; left: -40px;
  width: 350px; height: 440px;
  background: url('../../assets/brand/keyvisual-lines.svg') no-repeat center / contain;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}
.reveal .slides section.dark-slide:not(.closing-slide) > * {
  position: relative; z-index: 1;
}

/* Road lines on closing slide (mirrored) */
.reveal .slides section.closing-slide::before {
  content: '';
  position: absolute;
  bottom: -40px; right: -40px;
  width: 350px; height: 440px;
  background: url('../../assets/brand/keyvisual-lines.svg') no-repeat center / contain;
  transform: scaleX(-1);
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
}
.reveal .slides section.closing-slide > * { position: relative; z-index: 1; }

/* ---- Light Slide Backgrounds (gradient + brand keyvisual) ---- */
.reveal .slides section[data-state="background"],
.reveal .slides section[data-state="future"] {
  background: linear-gradient(170deg, #f0f6ff 0%, #eef8f2 60%, #F5F7FA 100%);
}
.reveal .slides section[data-state="plans-2026"],
.reveal .slides section[data-state="summary-ask"] {
  background: linear-gradient(170deg, #ffffff 0%, #f4f9ff 50%, #f2f9f0 100%);
}
.reveal .slides section:not(.dark-slide):not(.closing-slide):not([data-state="cover"])::before {
  content: '';
  position: absolute;
  bottom: -40px; right: -40px;
  width: 320px; height: 400px;
  background: url('../../assets/brand/keyvisual-lines.svg') no-repeat center / contain;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}

/* ---- Animation Utilities ---- */
.reveal .slides section .will-animate { will-change: transform, opacity; }

/* ---- Print/PDF ---- */
@media print {
  :root {
    --r-background-color: #FFFFFF;
    --r-main-color: #171b37;
  }
}