/* ============================================================================
   iq-slides · framework/base.css
   Structure + sensible default layouts for every slide type.
   Everything is driven by design tokens (--deck-*) so a deck's theme.css can
   restyle the whole show by overriding a handful of variables.
   FRAMEWORK file — decks override via their own theme.css, not by editing this.
   ============================================================================ */

:root{
  /* tokens — overridden by deck.json `config` and/or the deck's theme.css */
  --deck-bg:        #05070e;
  --deck-ink:       #f2f3f5;
  --deck-ink-dim:   #9aa3b8;
  --deck-ink-faint: #7e879c;
  --deck-accent:    #a9c0ea;
  --deck-line:      rgba(242,243,245,.42);
  --deck-card:      rgba(255,255,255,.028);
  --deck-card-bd:   rgba(255,255,255,.075);
  --deck-font: "Segoe UI","Segoe UI Web (West European)",-apple-system,BlinkMacSystemFont,system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--deck-bg);
  color:var(--deck-ink);
  font-family:var(--deck-font);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}

/* ---- 16:9 stage, solid to the edges ---- */
.deck{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.stage{
  position:relative;
  width:min(100vw, calc(100vh * 16 / 9));
  height:min(56.25vw, 100vh);
  aspect-ratio:16/9;
  container-type:size;
  overflow:hidden;
  background:var(--deck-bg);
}

/* ---- slides stack; only .active is shown ---- */
.slide{position:absolute;inset:0;opacity:0;pointer-events:none;padding:8cqh 8.5cqw;
  display:flex;flex-direction:column}
.slide.active{opacity:1;pointer-events:auto}
.iqs-js .anim,.iqs-js .frag{opacity:0}      /* hidden until the engine animates them in */

/* shared type primitives ---------------------------------------------------- */
.s-title{font-weight:300;line-height:1.14;color:#fff}
.s-eyebrow{font-size:1.4cqw;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--deck-accent)}

/* ---- HERO ---- */
.slide--hero{justify-content:center;align-items:flex-start;gap:2.4cqh}
.slide--hero .s-eyebrow{margin-bottom:.4cqh}
.slide--hero .s-title{font-size:4.7cqw;max-width:82cqw;letter-spacing:-.018em}
.slide--hero .s-divider{height:1.5px;width:17cqw;transform-origin:left center;border-radius:2px;
  background:linear-gradient(90deg,var(--deck-accent),transparent)}
.slide--hero .s-subtitle{font-size:1.95cqw;font-style:italic;color:var(--deck-ink-dim)}
.s-hero-img{
  position:absolute;top:7%;left:33%;right:6%;bottom:9%;
  background-position:center 40%;background-size:cover;background-repeat:no-repeat;opacity:.17;
  -webkit-mask-image:radial-gradient(ellipse 82% 88% at 56% 44%, #000 24%, rgba(0,0,0,.4) 58%, transparent 84%);
          mask-image:radial-gradient(ellipse 82% 88% at 56% 44%, #000 24%, rgba(0,0,0,.4) 58%, transparent 84%);
}

/* ---- STATEMENT ---- */
.slide--statement{justify-content:space-between;text-align:center}
.slide--statement .s-title{font-size:3.25cqw;align-self:center;max-width:94cqw}
.slide--statement .s-body{font-size:2.0cqw;line-height:1.7;color:var(--deck-ink-dim);
  max-width:74cqw;margin:0 auto;align-self:center}
.slide--statement .s-body strong{color:var(--deck-ink);font-weight:500}
.slide--statement .s-body p+p{margin-top:1.1cqh}
.s-byline{display:flex;align-items:center;gap:1.6cqw;align-self:flex-start}
.s-avatar{width:5cqw;height:5cqw;border-radius:50%;background-position:center;background-size:cover;
  display:grid;place-items:center;font-size:1.5cqw;color:var(--deck-accent);
  background-color:rgba(169,192,234,.12);box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.s-name{font-size:1.7cqw;font-style:italic;color:var(--deck-ink-dim)}

/* ---- BULLETS ---- */
.slide--bullets{justify-content:center;gap:4.4cqh}
.slide--bullets .s-title{font-size:2.9cqw;text-align:center;align-self:center}
.s-bullets{list-style:none;max-width:74cqw;margin:0 auto;width:100%;
  display:flex;flex-direction:column;gap:2.4cqh}
.s-bullet{font-size:2.0cqw;line-height:1.4;color:var(--deck-ink-dim);text-align:center}
.s-bullet strong{color:var(--deck-ink);font-weight:500}

/* ---- CARDS (diagonal cascade) ---- */
.slide--cards{gap:3.0cqh}
.slide--cards .s-title{font-size:2.7cqw;text-align:center;align-self:center}
.s-cards{position:relative;display:flex;flex-direction:column}
.s-card{width:60cqw;padding:2.0cqw 2.5cqw;border-radius:1.1cqw;
  background:var(--deck-card);border:1px solid var(--deck-card-bd);backdrop-filter:blur(4px);
  box-shadow:0 18px 40px -24px rgba(0,0,0,.7)}
.s-card:nth-child(2){margin-left:8cqw;margin-top:-1.4cqw;z-index:2}
.s-card:nth-child(3){margin-left:16cqw;margin-top:-1.4cqw;z-index:3}
.s-card:nth-child(4){margin-left:24cqw;margin-top:-1.4cqw;z-index:4}
.s-quote{font-size:1.55cqw;font-style:italic;line-height:1.45;color:#e4e8f2;border:0;margin:0}
.s-quote p{margin:0}
.s-cite{margin-top:1.0cqw;font-size:1.12cqw;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--deck-accent)}

/* ---- MORPH ---- */
.slide--morph{padding:0}
.m-layer{position:absolute;inset:0}
.m-intro,.m-title{position:absolute;left:0;width:100%;text-align:center;color:var(--deck-ink);
  font-weight:300;white-space:nowrap;opacity:0;line-height:1.1}
.m-title{font-size:3.75cqw;top:7.6%;transform-origin:50% 0}
.m-intro{font-size:3.75cqw;top:7.6%}
.ic{position:absolute;opacity:0;object-fit:contain;pointer-events:none}

/* ---- chrome ---- */
.chrome-counter{position:absolute;top:5.2cqh;right:6cqw;z-index:20;font-size:1.12cqw;
  letter-spacing:.22em;color:var(--deck-ink-faint);font-variant-numeric:tabular-nums;opacity:.8}
.chrome-progress{position:absolute;left:0;right:0;bottom:0;height:2.5px;
  background:rgba(242,243,245,.10);z-index:20}
.chrome-bar{height:100%;width:0;background:rgba(242,243,245,.7);transition:width .42s var(--ease)}
.chrome-zone{position:absolute;top:0;bottom:8cqh;width:15%;z-index:20;cursor:pointer;border:0;
  background:transparent;color:var(--deck-ink-faint);display:flex;align-items:center}
.zone-prev{left:0;justify-content:flex-start;padding-left:1.8cqw}
.zone-next{right:0;justify-content:flex-end;padding-right:1.8cqw}
.chrome-zone svg{width:1.8cqw;height:1.8cqw;opacity:0;transition:opacity .3s}
.chrome-zone:hover svg{opacity:.7}

.slide--error,.slide--raw{justify-content:center}