/* Deck shell: tokens from spec/design (Lagoon Classic), 1920×1080 stage scaled to fit. */

:root {
  --tint: #337691;
  --tint-text: #266178;
  --tint-fill: #E6EEF2;
  --tint-fill-2: #CDDEE6;
  --bg: #F2F7F9;
  --card: #FFFFFF;
  --label: #141C20;
  --secondary: #5B656A;
  --tertiary: #7B8184;
  --separator: #DCE2E5;

  --font: -apple-system, "SF Pro Display", Inter, system-ui, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.7, 0, .2, 1);
}

:root[data-theme="dark"] {
  --tint: #70A0B5;
  --tint-text: #8DB8CA;
  --tint-fill: #1A2D35;
  --tint-fill-2: #24414D;
  --bg: #0F1011;
  --card: #1C1D1F;
  --label: #F2F3F4;
  --secondary: #A6AAAE;
  --tertiary: #8D9196;
  --separator: #323438;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;   /* a horizontal swipe changes slides, not browser history */
  background: var(--bg);
  color: var(--label);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 0, "ss01";
}

.viewport {
  position: fixed;
  inset: 0;
}

.stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1920px;
  height: 1080px;
  transform-origin: center;
  transform: translate(-50%, -50%) scale(var(--stage-scale, 1));
}

.slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s var(--ease-out), visibility 0s linear .6s;
}

.slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .6s var(--ease-out), visibility 0s;
}

/* Push transition (data-transition="push", see deck.js): both slides stay fully visible while
   they slide side by side, the old one out to the right, the new one in from the left. */
.slide.is-pushing {
  opacity: 1;
  visibility: visible;
  transition: none;
}

.kicker {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tint-text);
}

.progress {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: transparent;
}

.progress-bar {
  height: 100%;
  width: 0;
  background: var(--tint);
  border-radius: 0 3px 3px 0;
  transition: width .6s var(--ease-out);
}

body.is-presenting { cursor: none; }

/* Slide navigation for touch devices only (phones, tablets): the laptop deck stays clean.
   Sized in CSS px of the device, outside the scaled 1920×1080 stage, so it stays thumb-sized on an iPhone. */
.touch-nav, .touch-hint { display: none; }

@media (hover: none) and (pointer: coarse) {
  .touch-nav {
    position: fixed;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--card) 85%, transparent);
    box-shadow: 0 8px 28px -10px rgba(20, 40, 50, .4);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    -webkit-user-select: none;
    user-select: none;
  }
  .touch-btn {
    flex: none;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: var(--tint);
    color: #fff;
    font: 600 30px/1 var(--font);
    padding-bottom: 3px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .touch-btn:active { scale: .92; }
  .touch-count {
    min-width: 64px;
    text-align: center;
    font: 700 16px var(--font);
    font-variant-numeric: tabular-nums;
    color: var(--label);
  }

  /* Portrait: the slide is a band in the middle; a full-width bar under it, and a hint to turn the phone. */
  @media (orientation: portrait) {
    .touch-nav {
      left: max(16px, env(safe-area-inset-left));
      right: max(16px, env(safe-area-inset-right));
      bottom: max(20px, env(safe-area-inset-bottom));
      max-width: 440px;
      margin: 0 auto;
    }
    .touch-btn { width: 60px; height: 60px; font-size: 36px; }
    .touch-count { font-size: 18px; }
    .touch-hint {
      display: block;
      position: fixed;
      left: 0;
      right: 0;
      top: max(20px, env(safe-area-inset-top));
      text-align: center;
      font: 600 15px var(--font);
      color: var(--secondary);
    }
  }

  /* Landscape: little vertical room, so a compact pill in the bottom-right corner. */
  @media (orientation: landscape) {
    .touch-nav {
      right: max(12px, env(safe-area-inset-right));
      bottom: max(10px, env(safe-area-inset-bottom));
    }
    .touch-btn { width: 44px; height: 44px; font-size: 28px; }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}