/* ============================================================
   Explora Investor Deck — Base, deck shell & navigation chrome
   ============================================================ */

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

html,body { height:100%; }

body {
  font-family:var(--font-sans);
  background:var(--jungle-dk);
  color:var(--jungle);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background var(--dur) var(--ease);
}

/* match the body bg to the active slide's shell so the 16:9 letterbox
   bars on wider viewports become visually invisible: the side area
   reads as a seamless edge instead of a dark margin */
body.slide-shell-light { background:var(--cream); }

img { display:block; max-width:100%; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul { list-style:none; }

/* ---------- scaled 16:9 stage ---------- */
#deck { position:fixed; inset:0; display:grid; place-items:center; }

#stage {
  width:1280px; height:720px;
  position:relative;
  transform:scale(var(--scale,1));
  transform-origin:center;
  flex:none;
}

/* ---------- slides ---------- */
.slide {
  position:absolute; inset:0;
  width:1280px; height:720px;
  background:var(--cream);
  overflow:hidden;
  opacity:0; visibility:hidden;
  transition:opacity var(--dur-lg) var(--ease), visibility 0s linear var(--dur-lg);
}

/* On widescreen viewports the 16:9 stage leaves cream side bars.
   Let the cream-slide botanical side-strip bleed past the slide edge
   into those bars so the leaf reads as a viewport-wide decoration
   instead of being clipped at the slide frame. */
.slide[data-theme="light"] { overflow:visible; }
.slide.active {
  opacity:1; visibility:visible;
  transition:opacity var(--dur-lg) var(--ease);
  z-index:2;
}
.slide.dark { background:var(--jungle); color:var(--on-dark); }
.slide.jungle { background:var(--jungle-md); color:var(--on-dark); }

/* default inner padding for content slides */
.slide-pad { position:absolute; inset:0; padding:62px 76px; display:flex; flex-direction:column; }

/* ---------- entrance animation for content ---------- */
.anim { opacity:0; transform:translateY(22px); }
.slide.active .anim {
  animation:rise var(--dur-lg) var(--ease-out) forwards;
  animation-delay:calc(var(--i,0) * .085s + .12s);
}
@keyframes rise { to { opacity:1; transform:translateY(0); } }

.zoom { opacity:0; transform:scale(1.06); }
.slide.active .zoom {
  animation:zoomin 1.4s var(--ease-out) forwards;
  animation-delay:calc(var(--i,0) * .08s);
}
@keyframes zoomin { to { opacity:1; transform:scale(1); } }

@media (prefers-reduced-motion:reduce) {
  .anim,.zoom { opacity:1 !important; transform:none !important; animation:none !important; }
  .slide { transition:opacity .2s linear; }
}

/* ============================================================
   Navigation chrome
   ============================================================ */

/* progress bar */
#progress {
  position:fixed; left:0; right:0; bottom:0; height:4px;
  background:rgba(242,235,219,.12); z-index:50;
}
#progress-bar {
  height:100%; width:0;
  background:linear-gradient(90deg,var(--jungle-md),var(--sage));
  transition:width var(--dur-lg) var(--ease);
}

/* prev / next arrows */
.nav-arrow {
  position:fixed; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  background:rgba(242,235,219,.10);
  color:var(--on-dark);
  font-size:24px; line-height:1;
  display:grid; place-items:center;
  backdrop-filter:blur(6px);
  transition:background var(--dur) var(--ease), opacity var(--dur) var(--ease);
  z-index:50;
}
.nav-arrow:hover { background:var(--jungle-md); }
.nav-arrow:disabled { opacity:.22; cursor:default; }
#nav-prev { left:22px; }
#nav-next { right:22px; }

/* heads-up display — section + counter */
#hud {
  position:fixed; left:24px; bottom:20px;
  display:flex; align-items:center; gap:14px;
  font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--on-dark-soft); z-index:50;
}
#hud-section { font-weight:600; color:var(--sage); }
#hud-count { color:var(--on-dark-faint); letter-spacing:2px; }
#hud-count b { color:var(--on-dark); font-weight:600; }

/* Owner badge — Y (Yannick) / D (Daniel) per-slide indicator */
#hud-owner {
  width:22px; height:22px;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:700; font-size:11px; letter-spacing:0;
  color:var(--jungle); background:var(--honey);
  border:1px solid rgba(0,0,0,.08);
  line-height:1;
}
#hud-owner.is-d { background:var(--sage); color:var(--jungle-dk); }
/* On light slides the same swatches read clearly against the cream bg */
.slide-shell-light #hud-owner { background:var(--honey-dk); color:#fff; }
.slide-shell-light #hud-owner.is-d { background:var(--jungle-md); color:var(--cream); }

/* top-right controls */
#controls {
  position:fixed; top:20px; right:22px; display:flex; gap:10px; z-index:50;
}
.ctrl-btn {
  width:40px; height:40px; border-radius:11px;
  background:rgba(242,235,219,.10); color:var(--on-dark);
  display:grid; place-items:center;
  transition:background var(--dur) var(--ease);
}
.ctrl-btn:hover { background:var(--jungle-md); }
.ctrl-btn svg { width:18px; height:18px; }

/* ==========================================================
   LIGHT-SHELL CHROME — contrast overrides for cream slides
   ==========================================================
   The default chrome (nav arrows, ctrl buttons, HUD text) uses
   cream-tinted translucent backgrounds + cream icon color. That
   reads on dark/jungle shells but vanishes on cream shells.
   Flip backgrounds dark + icons light when body is .slide-shell-light. */

.slide-shell-light .nav-arrow {
  background: rgba(14,51,41,.88);   /* near-solid jungle */
  color: var(--cream);
  border: 1px solid rgba(14,51,41,.16);
}
.slide-shell-light .nav-arrow:hover {
  background: var(--jungle);         /* solid jungle */
  color: var(--cream);
}
.slide-shell-light .nav-arrow:disabled {
  opacity: .25;
}

.slide-shell-light .ctrl-btn {
  background: rgba(14,51,41,.88);
  color: var(--cream);
  border: 1px solid rgba(14,51,41,.16);
}
.slide-shell-light .ctrl-btn:hover {
  background: var(--jungle);
  color: var(--cream);
}

.slide-shell-light #hud         { color: var(--jungle-md); }
.slide-shell-light #hud-section { color: var(--jungle); }
.slide-shell-light #hud-count   { color: rgba(14,51,41,.55); }
.slide-shell-light #hud-count b { color: var(--jungle); }

/* deck-brand stays visible on both shells (it's already opacity:.5) */
.slide-shell-light #deck-brand { opacity: .55; }

/* brand mark bottom-right */
#deck-brand {
  position:fixed; right:22px; bottom:16px; height:20px; opacity:.5; z-index:50;
}
#deck-brand svg,#deck-brand img { height:100%; width:auto; }

/* ---------- overview grid ---------- */
#overview {
  position:fixed; inset:0; z-index:80;
  background:rgba(22,28,40,.97);
  padding:54px 60px; overflow-y:auto;
  opacity:0; visibility:hidden;
  transition:opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
#overview.open { opacity:1; visibility:visible; transition:opacity var(--dur) var(--ease); }
#overview h2 {
  font-family:var(--font-serif); color:var(--on-dark);
  font-size:26px; font-weight:600; margin-bottom:6px;
}
#overview .ov-sub { color:var(--on-dark-faint); font-size:13px; margin-bottom:30px; }
#ov-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:18px;
}
.ov-card {
  background:rgba(242,235,219,.05);
  border:1px solid rgba(242,235,219,.10);
  border-radius:12px; overflow:hidden; text-align:left;
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ov-card:hover { transform:translateY(-4px); border-color:var(--sage); }
.ov-card.current { border-color:var(--sage); box-shadow:0 0 0 1px var(--sage); }
.ov-thumb {
  aspect-ratio:16/9; display:grid; place-items:center;
  background:var(--cream-dk); color:var(--jungle-md);
  font-family:var(--font-serif); font-size:34px; font-weight:600;
}
/* ---------- live preview thumbnail (cloned slide DOM, frozen) ---------- */
.ov-thumb-live {
  position:relative; overflow:hidden; background:#000;
  font-size:0; /* kill the legacy number tile fallback */
  container-type: inline-size;
}
.ov-vp {
  position:absolute; left:0; top:0;
  width:1280px; height:720px;
  transform-origin:top left;
  /* scale exactly to container width — keeps the 16:9 aspect ratio */
  transform: scale(calc(100cqw / 1280));
  pointer-events:none;
}
.ov-vp .slide.ov-clone {
  position:relative; display:flex; flex-direction:column;
  width:1280px; height:720px; opacity:1;
  /* freeze every entrance animation in the cloned subtree */
}
.ov-vp .ov-clone *,
.ov-vp .ov-clone *::before,
.ov-vp .ov-clone *::after {
  animation:none !important;
  transition:none !important;
  opacity:1 !important;
  transform:none !important;
}
/* preserve transforms that are part of layout, not animation */
.ov-vp .ov-clone .hub-node,
.ov-vp .ov-clone .hub-center {
  transform:translate(-50%,-50%) !important;
}
/* hide interactive overlays that don't make sense in a thumbnail */
.ov-vp .ov-clone .hotspot button,
.ov-vp .ov-clone .hs-card,
.ov-vp .ov-clone .cta-btn,
.ov-vp .ov-clone .play-btn,
.ov-vp .ov-clone .lang-btn { pointer-events:none; }
.ov-meta { padding:10px 12px; }
.ov-meta .ov-n { font-size:10px; letter-spacing:1.5px; color:var(--sage); font-weight:600; }
.ov-meta .ov-t { font-size:12.5px; color:var(--on-dark); margin-top:2px; line-height:1.35; }

/* ---------- intro / loading hint ---------- */
#hint {
  position:fixed; left:50%; bottom:42px; transform:translateX(-50%);
  font-size:12px; letter-spacing:2px; text-transform:uppercase;
  color:var(--on-dark-faint); z-index:50;
  display:flex; align-items:center; gap:8px;
  animation:fadehint 5s ease forwards; animation-delay:6s;
}
#hint kbd {
  font-family:var(--font-sans); font-size:11px;
  border:1px solid rgba(242,235,219,.3); border-radius:5px;
  padding:2px 7px; color:var(--on-dark-soft);
}
@keyframes fadehint { to { opacity:0; visibility:hidden; } }

/* hide chrome nicely on small screens handled in slides.css */