/* ──────────────────────────────────────────────────────────────────────────
   slide-view.css — two-state navigation for the deck-style microsite.

   SCROLL mode (default): page renders as authored; wrappers are display:contents
   (zero layout impact).

   PRESENTATION mode (body.present): each Demo <section> becomes a TRUE full-screen
   slide (full-bleed — no card, no letterbox, no shadow), fit-to-frame. Chrome:
   ✕ top-right · page number bottom-right · right-edge dot-rail (blue dots,
   transparent; hover reveals names in a light beveled panel).
   Layout-only; visual tokens from base.css.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Toggle (scroll mode, in the tab bar) ─────────────────────────────────── */
.present-toggle {
  appearance: none; font: inherit; font-size: 15px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 8px;
  border: 1px solid var(--sm-blue); background: #fff; color: var(--sm-blue);
  margin-left: auto; align-self: center;
}
.present-toggle:hover { background: var(--sm-blue); color: #fff; }
.present-toggle .pt-icon { font-size: 12px; line-height: 1; }

/* ── Scroll mode: wrappers invisible to layout ────────────────────────────── */
.slide-frame, .slide-content { display: contents; }

/* ════════════════════════════════ PRESENTATION ════════════════════════════ */
body.present { overflow: hidden; }
body.present .site-header,
body.present .site-footer { display: none; }
/* Hide the top nav (logos bar + deck tabs) in present mode — full-screen deck */
body.present .tabbar { display: none; }
body.present .section-counter { display: none; }

/* The canvas behind the deck = the same gradient-light as scroll view */
body.present .deck-presenting { position: fixed; inset: 0; z-index: 40; background: radial-gradient(circle at 50% 0%, #F2F8FF, #FDFDFD 60%); }
/* LOCKED RESOLUTION: every slide is authored on a fixed 1920×1080 stage and
   scaled uniformly to fit the screen (slide-view.js sets the scale) — so it looks
   pixel-identical on a laptop and a 4K monitor. The section is just a full-screen
   positioning context. */
body.present .deck-presenting > section { position: absolute; inset: 0; display: none; padding: 0 !important; margin: 0 !important; }
body.present .deck-presenting > section.slide-current { display: block; }

/* The 1920×1080 stage — centred, then scaled by slide-view.js (transform set in JS) */
body.present .slide-frame {
  position: absolute; top: 50%; left: 50%;
  width: 1920px; height: 1080px;
  transform-origin: center center; background: transparent; overflow: visible;
}
/* The white card, inset 64px inside the stage (gradient shows in the inset) */
body.present .slide-content {
  position: absolute; inset: 64px;
  display: flex; flex-direction: column; justify-content: center;
  padding: 72px; overflow: hidden;
  background: #fff; border-radius: 32px;
  box-shadow: 0 1px 3px rgba(0, 49, 102, 0.06), 0 24px 60px rgba(0, 49, 102, 0.14);
}
/* Content holder inside the card — scaled down by slide-view.js if a slide is too tall.
   Anchor the scale to the LEFT so a shrunk slide keeps the same left margin as every
   other slide (scaling from centre pushed the content inward and broke left-alignment). */
body.present .slide-fit { width: 100%; transform-origin: left center; }
/* Dense side-by-side slides (e.g. Winners): videos go FULL width and crop top/bottom to
   fit (fixed width, shorter fixed aspect) — the background embed covers, so it fills the
   card cleanly instead of a small floating box. */
body.present .bento-col .uc-video,
body.present .bento-col .uc-media { width: 100%; height: auto; aspect-ratio: 2 / 1; }

/* Launch/hero video slide: video fills the slide CARD edge-to-edge (no inner padding),
   clipped to the card's rounded corners — same inset card as the other slides. */
body.present section.si-hero .slide-content { padding: 0; overflow: hidden; }
body.present section.si-hero .slide-fit { height: 100%; transform: none !important; }
body.present section.si-hero .hero-launch { width: 100%; height: 100%; margin: 0; border-radius: 0; background: #000; }
body.present section.si-hero .uc-video { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; }

/* Fixed type on the locked stage — vw units would break the 1920×1080 canvas */
body.present .slide-content h2 { font-size: 48px; }
body.present .slide-content .sec-body,
body.present .slide-content .sec-body li,
body.present .slide-content .bento-col p,
body.present .slide-content .bento-col li { font-size: 18px; }
/* Too-tall slides scroll internally instead of shrinking illegibly */
body.present .deck-presenting > section.slide-scroll .slide-frame { overflow-y: auto; }
body.present .deck-presenting > section.slide-scroll .slide-content {
  position: static; transform: none !important; width: auto !important;
  padding: var(--space-8);
}

/* ── ✕ exit (top-right) — the toggle, minimised in presentation mode ──────── */
body.present .present-toggle {
  position: fixed; z-index: 56; top: 16px; right: 18px; margin: 0;
  width: 38px; height: 38px; padding: 0; border-radius: 50%;
  border: 1px solid var(--sm-border); background: #fff; color: var(--sm-text);
  box-shadow: 0 2px 10px rgba(0, 49, 102, 0.14); justify-content: center;
}
body.present .present-toggle:hover { background: var(--sm-grey-1); border-color: var(--sm-blue); color: var(--sm-blue); }
body.present .present-toggle .pt-label { display: none; }
body.present .present-toggle .pt-icon { font-size: 15px; }

/* ── ✕ exit (top-right) — dedicated, on <body> so it shows even though the toolbar is hidden ── */
.deck-exit {
  position: fixed; z-index: 56; top: 14px; right: 16px; display: none;
  border: 0; background: none; padding: 6px; cursor: pointer; line-height: 1;
  color: var(--sm-blue); font-size: 18px; opacity: 0.55;
}
body.present .deck-exit { display: block; }
.deck-exit:hover { opacity: 1; }

/* ── Page number (bottom-right, subtle) ───────────────────────────────────── */
.deck-pageno {
  position: fixed; z-index: 55; bottom: 16px; right: 20px; display: none;
  font-family: 'Sunflower', sans-serif; font-size: 13px; letter-spacing: 1px;
  color: var(--sm-text-body);
}
body.present .deck-pageno { display: block; }

/* ── Prev / next arrows (subtle, clear of the rail) ───────────────────────── */
.deck-nav {
  position: fixed; z-index: 55; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(20, 30, 45, 0.06); color: var(--sm-text-body);
  font-size: 20px; line-height: 1; display: none;
  align-items: center; justify-content: center;
}
body.present .deck-nav { display: flex; }
.deck-nav:hover { background: rgba(20, 30, 45, 0.12); color: var(--sm-text); }
.deck-nav[disabled] { opacity: 0.25; cursor: default; }
.deck-nav--prev { left: 16px; }
.deck-nav--next { right: 16px; }   /* rail now lives at the bottom in present */

/* ── Dot page-nav: a soft white pill along the bottom-centre in BOTH scroll and present.
      Hovering a dot shows a tooltip with that page's name (no full-width expansion). ── */
.deck-rail {
  position: fixed; z-index: 55; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; flex-direction: row; align-items: center; gap: 13px;
  padding: 12px 16px; border-radius: 32px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 2px 10px rgba(0, 49, 102, 0.08), 0 12px 30px rgba(0, 49, 102, 0.12);
  backdrop-filter: blur(6px);
}
.deck-rail:empty { display: none; }

.deck-rail-item {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; background: none; border: 0; padding: 0;
}
.deck-rail-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--sm-border); background: transparent;   /* soft grey, not harsh blue */
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.deck-rail-item:hover .deck-rail-dot { border-color: var(--sm-blue); }
.deck-rail-item.active .deck-rail-dot { background: var(--sm-blue); border-color: var(--sm-blue); transform: scale(1.3); }

/* Tooltip — the page name floats above the hovered dot */
.deck-rail-label {
  position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  background: var(--sm-text); color: #fff; white-space: nowrap;
  font: 500 13px/1.2 'Roboto', sans-serif; padding: 6px 10px; border-radius: 8px;
  opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
  box-shadow: 0 6px 18px rgba(0, 49, 102, 0.22);
}
.deck-rail-item:hover .deck-rail-label { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .deck-rail, .deck-rail-dot, .deck-rail-label { transition: none; }
}