/* ============================================================
   Deck runtime — nav chrome, transitions, motion, polish.
   Loaded after brand.css. All motion gated by prefers-reduced-motion.
   ============================================================ */

/* ---- Slide crossfade (replaces display:none toggling) ---- */
section.slide{
  position:absolute;inset:0;display:block;
  opacity:0;visibility:hidden;pointer-events:none;z-index:0;
  transition:opacity .42s ease, visibility .42s;
}
section.slide.active{opacity:1;visibility:visible;pointer-events:auto;z-index:1}

/* ---- Staggered content reveal ---- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(16px);will-change:opacity,transform}
  .slide.active .reveal{animation:deck-rise .55s cubic-bezier(.16,1,.3,1) forwards;
    animation-delay:calc(var(--ri,0)*55ms + 140ms)}
  @keyframes deck-rise{to{opacity:1;transform:none}}

  /* Ken Burns on full-bleed photos */
  .slide.active .bleed{animation:deck-ken 22s ease-out both}
  @keyframes deck-ken{from{transform:scale(1.001)}to{transform:scale(1.09)}}

  /* Chart/bar wipe-in (no text distortion) */
  [data-draw]{clip-path:inset(0 100% 0 0)}
  .slide.active [data-draw].drawn{clip-path:inset(0 0 0 0);
    transition:clip-path .85s cubic-bezier(.16,1,.3,1) .25s}
}

/* ---- Loading splash ---- */
#deck-splash{position:fixed;inset:0;z-index:200;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:opacity .5s ease}
#deck-splash.hide{opacity:0;pointer-events:none}
#deck-splash .wm{font-family:var(--serif);font-size:52px;font-weight:400;color:var(--ink);letter-spacing:.01em}
#deck-splash .wm span{color:var(--amber)}
#deck-splash .load{width:180px;height:2px;background:rgba(255,255,255,.08);overflow:hidden;border-radius:2px}
#deck-splash .load i{display:block;height:100%;width:40%;background:var(--amber);
  animation:deck-load 1.1s ease-in-out infinite}
@keyframes deck-load{0%{transform:translateX(-120%)}100%{transform:translateX(360%)}}

/* ---- Maker slide: multi-use dome cutaway cycle (5 stages x 2s = 10s loop) ---- */
/* labels: brief crossfade between pills */
@keyframes domeStage{
  0%{opacity:0}
  3%{opacity:1}
  18%{opacity:1}
  21%{opacity:0}
  100%{opacity:0}
}
/* interiors: hold at full until the NEXT interior (stacked on top, delayed +20%)
   is fully faded in, so the sphere never flashes between interior stages; only the
   last interior fades out at the loop point to reveal the exterior (stage 1). */
@keyframes domeInt{
  0%{opacity:0}
  4%{opacity:1}
  24%{opacity:1}
  28%{opacity:0}
  100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .dome-int{animation:none!important;opacity:0!important}
  .dome-lbl{animation:none!important;opacity:0!important}
  .dome-lbl:first-of-type{opacity:1!important}
}

/* ---- Progress bar (top) ---- */
#deck-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;
  background:rgba(255,255,255,.05)}
#deck-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--amber),var(--amber-lt));
  transition:width .42s cubic-bezier(.16,1,.3,1)}
#deck-progress .ticks{position:absolute;inset:0;pointer-events:none}
#deck-progress .ticks b{position:absolute;top:0;width:1px;height:100%;background:rgba(255,255,255,.18)}

/* ---- Edge nav arrows: clear, always-visible circular buttons ---- */
.deck-edge{position:fixed;top:50%;transform:translateY(-50%);z-index:90;width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(20,18,24,.6);border:1px solid rgba(234,130,78,.45);backdrop-filter:blur(6px);
  color:var(--ink);cursor:pointer;opacity:.62;pointer-events:auto;
  box-shadow:0 3px 14px rgba(0,0,0,.45);transition:opacity .2s,background .2s,border-color .2s,transform .2s}
.deck-edge:hover{opacity:1;background:rgba(234,130,78,.92);border-color:var(--amber);color:#1a1008}
.deck-edge.l{left:22px}
.deck-edge.l:hover{transform:translateY(-50%) translateX(-2px)}
.deck-edge.r{right:22px}
.deck-edge.r:hover{transform:translateY(-50%) translateX(2px)}
.deck-edge svg{width:28px;height:28px;stroke-width:2}
body.drawer-open .deck-edge.r{opacity:0;pointer-events:none}

/* ---- Thumbnail drawer (right side) ---- */
#deck-handle{position:fixed;bottom:20px;right:22px;z-index:130;
  display:flex;flex-direction:row;align-items:center;gap:9px;cursor:pointer;
  padding:11px 18px;background:rgba(23,21,27,.85);border:1px solid var(--line);
  border-radius:999px;backdrop-filter:blur(8px);transition:background .2s,color .2s,border-color .2s;color:var(--body)}
#deck-handle:hover{background:rgba(35,32,42,.95);color:var(--ink);border-color:var(--amber)}
#deck-handle svg{width:18px;height:18px}
#deck-handle span{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
body.drawer-open #deck-handle{opacity:0;pointer-events:none}

#deck-drawer{position:fixed;top:0;right:0;bottom:0;width:352px;z-index:140;
  background:rgba(13,12,16,.94);backdrop-filter:blur(14px);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .34s cubic-bezier(.16,1,.3,1);
  display:flex;flex-direction:column}
body.drawer-open #deck-drawer{transform:translateX(0)}
#deck-drawer .dw-head{display:flex;align-items:center;justify-content:space-between;
  padding:22px 24px 14px;border-bottom:1px solid var(--line-soft)}
#deck-drawer .dw-head b{font-family:var(--serif);font-weight:400;font-size:24px;color:var(--ink)}
#deck-drawer .dw-x{cursor:pointer;color:var(--dim);font-size:22px;line-height:1;padding:4px 8px}
#deck-drawer .dw-x:hover{color:var(--ink)}
#deck-drawer .dw-list{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px 16px 40px}
#deck-drawer .dw-sec{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--amber);margin:20px 4px 12px}
#deck-drawer .dw-sec:first-child{margin-top:4px}
.thumb{position:relative;width:300px;height:168.75px;margin:0 auto 14px;border-radius:9px;overflow:hidden;
  border:1px solid var(--line-soft);cursor:pointer;background:var(--bg);transition:border-color .18s,transform .18s}
.thumb:hover{border-color:var(--amber);transform:translateY(-2px)}
.thumb.cur{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.thumb .thumb-inner{width:1920px;height:1080px;transform:scale(.15625);transform-origin:top left;pointer-events:none}
.thumb .lbl{position:absolute;left:8px;bottom:6px;z-index:2;font-family:var(--sans);font-size:12px;
  font-weight:500;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.9)}
.thumb .num{position:absolute;top:6px;left:9px;z-index:2;font-family:var(--serif);font-size:15px;
  color:var(--amber);text-shadow:0 1px 4px rgba(0,0,0,.9)}
.thumb.cur .lbl{color:var(--amber-lt)}
/* force cloned slides to render at final state inside thumbs */
#deck-drawer .thumb-inner .slide{position:absolute!important;inset:0!important;opacity:1!important;
  visibility:visible!important;display:block!important;animation:none!important}
#deck-drawer .thumb-inner .reveal{opacity:1!important;transform:none!important;animation:none!important}
#deck-drawer .thumb-inner [data-draw]{clip-path:none!important}
#deck-drawer .thumb-inner .bleed{animation:none!important;transform:none!important}
#deck-drawer .thumb-inner .foot,#deck-drawer .thumb-inner .foot-wm,#deck-drawer .thumb-inner .foot-pg{opacity:.9}
/* drawer PUSHES the stage left (see fit() in JS) rather than overlaying, so it
   never sits on top of the deck or the nav arrow. Scrim is a transparent
   click-away catcher over the pushed stage area (left of the drawer). */
#deck-scrim{position:fixed;top:0;bottom:0;left:0;right:0;z-index:135;background:transparent;
  opacity:0;pointer-events:none;transition:right .34s cubic-bezier(.16,1,.3,1)}
body.drawer-open #deck-scrim{opacity:1;pointer-events:auto;right:352px}
body.drawer-open .deck-edge.r{opacity:0!important;pointer-events:none}
#stage{transition:transform .34s cubic-bezier(.16,1,.3,1), left .34s cubic-bezier(.16,1,.3,1)}

/* ---- Section-divider slide ---- */
section.slide.divider{background:
  radial-gradient(130% 100% at 80% 10%, rgba(234,130,78,.10), transparent 45%), var(--bg)}
.divider .dv-wrap{position:absolute;left:120px;top:50%;transform:translateY(-50%);max-width:1400px}
.divider .dv-n{font-family:var(--serif);font-weight:300;font-size:34px;color:var(--amber);letter-spacing:.02em}
.divider .dv-t{font-family:var(--serif);font-weight:300;font-size:118px;line-height:.98;
  letter-spacing:-.02em;color:var(--ink);margin-top:6px}
.divider .dv-t i{font-style:italic;color:var(--amber)}
.divider .dv-d{font-family:var(--sans);font-weight:300;font-size:26px;color:var(--body);margin-top:26px;max-width:820px}
.divider .dv-rule{position:absolute;left:122px;bottom:180px;width:64px;height:2px;background:var(--amber)}

/* ---- Film grain (subtle warmth) ---- */
#deck-grain{position:fixed;inset:0;z-index:110;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay}

/* ---- Print: show all slides, no chrome ---- */
@media print{
  section.slide{position:relative;opacity:1!important;visibility:visible!important;
    page-break-after:always;display:block!important;transform:none!important}
  .reveal{opacity:1!important;transform:none!important}
  #deck-splash,#deck-progress,#deck-handle,#deck-drawer,#deck-scrim,.deck-edge,#deck-grain{display:none!important}
}