/* =========================================================================
   AI in Action — Phase2_ brand deck
   Minimal, bespoke. Big type. Generous whitespace. Smooth transitions.
   ========================================================================= */

@import url('assets/colors_and_type.css');

html, body { margin: 0; background: #000; }

/* ------------------------------------------------------------------ */
/* Slide chrome + transitions                                         */
/* ------------------------------------------------------------------ */

deck-stage section {
  /* Transitions — smooth, short, purposeful */
  transition:
    opacity 520ms cubic-bezier(.2,.6,.2,1),
    transform 640ms cubic-bezier(.2,.6,.2,1),
    visibility 0s linear 520ms !important;
  transform: translateY(14px) scale(.995);
}
deck-stage section[data-deck-active] {
  transform: translateY(0) scale(1);
  transition:
    opacity 520ms cubic-bezier(.2,.6,.2,1),
    transform 640ms cubic-bezier(.2,.6,.2,1),
    visibility 0s linear 0s !important;
}

/* Opt-out: instant swap (no fade, no slide-up) for stepped reveals like
   the Four Pillars and Progressive Trust sequences. */
deck-stage section.no-transition,
deck-stage section.no-transition[data-deck-active] {
  transition: none !important;
  transform: none !important;
}

deck-stage section.no-transition .fade,
deck-stage section.no-transition[data-deck-active] .fade {
  transition: none !important;
  transform: none !important;
  transition-delay: 0s !important;
}

/* Progressive-trust: title + subtitle should look continuous across
   S1–S4 — start visible and never reset. */
deck-stage section.no-transition[data-label^="Progressive trust"] .fade {
  opacity: 1 !important;
  transform: none !important;
}

/* IKEA "What IKEA did" sequence: slide-to-slide swap is instant (no-transition),
   but each slide introduces one new .fade step-card that should fade up. Re-enable
   transitions on .fade ONLY inside these slides, then animate hidden -> visible
   when the slide becomes active. */
deck-stage section.no-transition[data-label^="What IKEA did"] .fade {
  opacity: 0 !important;
  transform: translateY(18px) !important;
  transition-property: opacity, transform !important;
  transition-duration: .7s, .7s !important;
  transition-timing-function: var(--ease-standard), var(--ease-standard) !important;
}
deck-stage section.no-transition[data-label^="What IKEA did"][data-deck-active] .fade {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
/* Card 01 on slide 15a needs a long delay so it lands AFTER the heading word-stagger.
   Inline transition-delay would be lost to the shorthand reset above, so set it here. */
deck-stage section.no-transition[data-label="What IKEA did · 01"][data-deck-active] .step-card.fade {
  transition-delay: 2s !important;
}
/* Newly-added word in the TRAIN→SUPERVISE→… row: slow fade in. */
deck-stage section.no-transition[data-label^="Progressive trust"] .word-new {
  opacity: 0;
  transition: opacity 1s ease !important;
}
deck-stage section.no-transition[data-label^="Progressive trust"][data-deck-active] .word-new {
  opacity: 1;
  transition-delay: .9s !important;
}

/* Newly-revealed pillar/column on stepped sequences — for the four
   pillars use a fade + slide-up; for progressive trust we override
   below to grow horizontally so it reads as a flex/grid expansion. */
deck-stage section.no-transition .pillar-new {
  opacity: 0 !important;
  transform: translateY(16px) !important;
  transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1) !important;
  transition-delay: 0s !important;
}
deck-stage section.no-transition[data-deck-active] .pillar-new {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: .15s !important;
}

/* Four pillars · Security: heading word-staggers (~2.4s), so push the
   Security pillar card and the dim-placeholder grid to land after. */
deck-stage section.no-transition[data-label="Four pillars · Security"][data-deck-active] .pillar-new {
  transition-delay: 2s !important;
}
deck-stage section[data-label="Four pillars · Security"] .four-col.fade {
  opacity: 0 !important;
  transition: opacity .7s var(--ease-standard) !important;
  transform: none !important;
}
deck-stage section[data-label="Four pillars · Security"][data-deck-active] .four-col.fade {
  opacity: 1 !important;
  transition: opacity .7s var(--ease-standard) !important;
  transition-delay: 2s !important;
}

/* Progressive trust columns: animate the GRID layout — the new column
   grows from 0 while siblings squeeze. JS toggles the .grew class
   one frame after the slide becomes active so the transition runs. */
deck-stage section.no-transition .progressive-grid {
  display: grid !important;
  gap: 4px;
  max-width: 1720px;
  grid-template-columns: var(--cols-from, var(--cols, 1fr)) !important;
  transition: grid-template-columns 1.1s cubic-bezier(.22,.61,.36,1) !important;
}
deck-stage section.no-transition .progressive-grid.grew {
  grid-template-columns: var(--cols, 1fr) !important;
}
/* Override the fade+slide-up for cards inside progressive-grid;
   they should just appear (the grid handles the motion). The new
   column's content fades in slightly after the grid settles. */
deck-stage section.no-transition .progressive-grid .pillar-new {
  opacity: 0 !important;
  transform: none !important;
  transition: opacity .5s ease .8s !important;
  overflow: hidden;
  min-width: 0;
}
deck-stage section.no-transition .progressive-grid.grew .pillar-new {
  opacity: 1 !important;
}

/* Per-slide element stagger only runs when the slide is active */
deck-stage section .fade { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-standard), transform .7s var(--ease-standard); }
deck-stage section[data-deck-active] .fade { opacity: 1; transform: translateY(0); transition-delay: .15s; }
deck-stage section[data-deck-active] .fade.d1 { transition-delay: .28s; }
deck-stage section[data-deck-active] .fade.d2 { transition-delay: .42s; }
deck-stage section[data-deck-active] .fade.d3 { transition-delay: .56s; }
deck-stage section[data-deck-active] .fade.d4 { transition-delay: .70s; }
deck-stage section[data-deck-active] .fade.d5 { transition-delay: .84s; }

/* ------------------------------------------------------------------ */
/* Base slide                                                         */
/* ------------------------------------------------------------------ */

.slide {
  font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
  color: var(--p2-abyss);
  background: #FAFBFC;
  position: relative;
  overflow: hidden;
}
.slide.dark { background: var(--p2-abyss); color: #E8F4FA; }
.slide.indigo { background: var(--p2-indigo); color: #E8F4FA; }

/* Slide chrome */
.chrome-rule {
  position: absolute; left: 100px; right: 100px; height: 1px;
  background: #E2E8F0;
}
.dark .chrome-rule, .indigo .chrome-rule { background: rgba(154,228,255,.16); }
.chrome-rule.top { top: 96px; }
.chrome-rule.bot { bottom: 96px; }

.chrome-wordmark {
  position: absolute; top: 56px; left: 100px; height: 22px;
}
.chrome-eyebrow {
  position: absolute; top: 60px; right: 100px;
  font-family: 'Manrope'; font-weight: 600; font-size: 13px;
  letter-spacing: .22em; text-transform: uppercase;
  color: #334155;
}
.dark .chrome-eyebrow, .indigo .chrome-eyebrow { color: #B8D2E0; }

.chrome-footer-l, .chrome-footer-r {
  position: absolute; bottom: 56px;
  font-family: 'Sora'; font-size: 13px; color: #334155;
  letter-spacing: .02em;
}
.dark .chrome-footer-l, .indigo .chrome-footer-l,
.dark .chrome-footer-r, .indigo .chrome-footer-r { color: #B8D2E0; }
.chrome-footer-l { left: 100px; }
.chrome-footer-r { right: 100px; }

/* ------------------------------------------------------------------ */
/* Type tokens                                                        */
/* ------------------------------------------------------------------ */

.eyebrow {
  font-family: 'Manrope'; font-weight: 600; font-size: 20px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--p2-cyan);
}
.eyebrow .score { color: inherit; }

.display {
  font-family: 'Manrope'; font-weight: 500;
  font-size: 132px; line-height: 1.02; letter-spacing: -.035em;
  margin: 0; color: inherit;
}
.display.xl { font-size: 168px; }
.display.sm { font-size: 108px; }

.h1 {
  font-family: 'Manrope'; font-weight: 600;
  font-size: 84px; line-height: 1.05; letter-spacing: -.03em;
  margin: 0;
}
.h2 {
  font-family: 'Manrope'; font-weight: 600;
  font-size: 56px; line-height: 1.1; letter-spacing: -.02em;
  margin: 0;
}
.h3 {
  font-family: 'Manrope'; font-weight: 600;
  font-size: 36px; line-height: 1.2; letter-spacing: -.01em;
  margin: 0;
}

.body {
  font-family: 'Sora'; font-weight: 300;
  font-size: 32px; line-height: 1.45;
  margin: 0; color: inherit;
}
.body.sm { font-size: 26px; }
.body.lg { font-size: 40px; line-height: 1.35; font-weight: 300; }

.underscore { color: var(--p2-cyan); }

.grad {
  background: linear-gradient(90deg,#C7F0FF,#16A3D6,#1F8FC4);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Slow gradient drift — used on the title slide for a subtle "shine" loop. */
.grad.grad-shine {
  /* Two highlights placed end-to-end so when one exits right, the next is just entering left.
     Background is 200% wide; we slide it from 0% to -100% over the loop and the seam is invisible. */
  background-image: linear-gradient(
    90deg,
    #1F8FC4 0%,
    #1F8FC4 9%,
    #C7F0FF 25%,
    #1F8FC4 41%,
    #1F8FC4 59%,
    #C7F0FF 75%,
    #1F8FC4 91%,
    #1F8FC4 100%
  );
  background-size: 200% 100%;
  background-position: 0% 50%;
  background-repeat: repeat-x;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradShine 7s linear infinite;
}
@keyframes gradShine {
  from { background-position:    0% 50%; }
  to   { background-position: -100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .grad.grad-shine { animation: none; }
}

.mono { font-family: 'Sora'; font-feature-settings: "tnum" 1; }

.src {
  font-family: 'Sora'; font-weight: 400; font-size: 18px;
  letter-spacing: .02em; color: #334155;
}
.dark .src, .indigo .src { color: #B8D2E0; }

/* ------------------------------------------------------------------ */
/* Layout helpers                                                     */
/* ------------------------------------------------------------------ */

.stage-inner {
  position: absolute; inset: 150px 100px 150px 100px;
}
.center-v {
  position: absolute; top: 50%; left: 100px; right: 100px;
  transform: translateY(-50%);
}

.two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 120px;
}
.three-col {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 80px;
}
.four-col {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 56px;
}

/* Big stat */
.stat-num {
  font-family: 'Manrope'; font-weight: 500;
  font-size: 180px; line-height: 1; letter-spacing: -.035em;
  color: var(--p2-abyss);
  font-feature-settings: "tnum" 1;
}
.dark .stat-num, .indigo .stat-num { color: #fff; }
.stat-num.cyan { color: var(--p2-cyan); }
.stat-num.coral { color: var(--p2-coral); }
.stat-num.ice { color: var(--p2-ice); }
.stat-num.grad {
  background: linear-gradient(90deg,#C7F0FF,#16A3D6,#1F8FC4);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-label {
  font-family: 'Sora'; font-weight: 400; font-size: 22px;
  line-height: 1.45; color: #334155; margin-top: 20px;
  max-width: 360px;
}
.dark .stat-label, .indigo .stat-label { color: #9AE4FF; }

.stat-unit {
  font-family: 'Manrope'; font-weight: 500; font-size: 48px;
  color: inherit; letter-spacing: -.015em;
}

/* Diff/Before/After */
.ba-item .ba-label {
  font-family: 'Manrope'; font-size: 14px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: #475569;
  margin-bottom: 24px;
}
.dark .ba-item .ba-label, .indigo .ba-item .ba-label { color: #B8D2E0; }

/* Lists */
.nlist { counter-reset: nl; list-style: none; padding: 0; margin: 0; }
.nlist li {
  position: relative; padding-left: 80px;
  font-family: 'Sora'; font-weight: 300; font-size: 30px; line-height: 1.4;
  margin-bottom: 36px;
}
.nlist li::before {
  counter-increment: nl;
  content: counter(nl, decimal-leading-zero);
  position: absolute; left: 0; top: 4px;
  font-family: 'Manrope'; font-weight: 600; font-size: 18px;
  letter-spacing: .08em; color: var(--p2-cyan);
}

/* Hairline columns with label + copy */
.col-block .col-label {
  font-family: 'Manrope'; font-size: 14px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--p2-cyan); margin-bottom: 24px;
}
.col-block .col-title {
  font-family: 'Manrope'; font-weight: 600; font-size: 34px;
  line-height: 1.15; margin: 0 0 20px; letter-spacing: -.01em;
}
.col-block .col-body {
  font-family: 'Sora'; font-weight: 300; font-size: 22px; line-height: 1.5;
  color: #475569;
}
.dark .col-block .col-body, .indigo .col-block .col-body { color: #D8E3EC; }

/* Timeline */
.tl { display: grid; grid-template-columns: 180px 1fr; column-gap: 48px; row-gap: 40px; }

/* Word-by-word reveal: scoped to elements tagged .word-stagger and only fires
   on the active slide. Each .w word fades + lifts; delays cascade via :nth-of-type. */
.word-stagger .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.slide[data-deck-active] .word-stagger .w { opacity: 1; transform: none; }
.slide[data-deck-active] .word-stagger .w:nth-of-type(1) { transition-delay: 200ms; }
.slide[data-deck-active] .word-stagger .w:nth-of-type(2) { transition-delay: 450ms; }
.slide[data-deck-active] .word-stagger .w:nth-of-type(3) { transition-delay: 800ms; }
.slide[data-deck-active] .word-stagger .w:nth-of-type(4) { transition-delay: 1050ms; }
.slide[data-deck-active] .word-stagger .w:nth-of-type(5) { transition-delay: 1300ms; }
.slide[data-deck-active] .word-stagger .w:nth-of-type(6) { transition-delay: 1550ms; }
.slide[data-deck-active] .word-stagger .w:nth-of-type(7) { transition-delay: 1800ms; }
.slide[data-deck-active] .word-stagger .w:nth-of-type(8) { transition-delay: 2050ms; }
.slide[data-deck-active] .word-stagger .w:nth-of-type(9) { transition-delay: 2300ms; }
.slide[data-deck-active] .word-stagger .w:nth-of-type(10) { transition-delay: 2550ms; }
/* Chapter 02 "So what do you actually do about it?" caption — fades in
   late so it lands after the word-stagger heading finishes. */
deck-stage section[data-label="Chapter 02"][data-deck-active] .caption-late {
  transition-delay: 3s !important;
}

/* Row-by-row stagger: only fires while the slide is active. Each (.y + .e) pair
   fades up together. Inactive slides pre-arm the rows in their hidden state so
   leaving + returning replays the sequence. */
.tl-stagger .y, .tl-stagger .e {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.slide[data-deck-active] .tl-stagger .y,
.slide[data-deck-active] .tl-stagger .e {
  opacity: 1;
  transform: none;
}
.slide[data-deck-active] .tl-stagger .y:nth-child(1),
.slide[data-deck-active] .tl-stagger .e:nth-child(2)  { transition-delay: 600ms; }
.slide[data-deck-active] .tl-stagger .y:nth-child(3),
.slide[data-deck-active] .tl-stagger .e:nth-child(4)  { transition-delay: 1200ms; }
.slide[data-deck-active] .tl-stagger .y:nth-child(5),
.slide[data-deck-active] .tl-stagger .e:nth-child(6)  { transition-delay: 1800ms; }
.slide[data-deck-active] .tl-stagger .y:nth-child(7),
.slide[data-deck-active] .tl-stagger .e:nth-child(8)  { transition-delay: 2400ms; }
.tl .y {
  font-family: 'Manrope'; font-weight: 500; font-size: 40px;
  color: var(--p2-cyan); letter-spacing: -.01em;
}
.tl .e {
  font-family: 'Sora'; font-weight: 300; font-size: 28px; line-height: 1.4;
}

/* Pillar number badge */
.badge-n {
  font-family: 'Manrope'; font-weight: 500; font-size: 20px;
  letter-spacing: .12em; color: var(--p2-cyan);
  display: inline-block; margin-bottom: 28px;
}

/* Rule dividers */
.hairline {
  height: 1px; background: #E2E8F0; width: 100%;
}
.dark .hairline, .indigo .hairline { background: rgba(154,228,255,.16); }

/* Stage signal gradient underline */
.sig-bar {
  height: 4px; width: 120px;
  background: linear-gradient(90deg,#9AE4FF,#16A3D6,#1A386F);
  border-radius: 2px;
}

/* 2x2 quadrant matrix */
.matrix {
  position: relative;
  width: 820px; height: 820px;
  border: 1px solid rgba(154,228,255,.28);
}
.matrix .cell {
  position: absolute; width: 50%; height: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Manrope'; font-weight: 600; font-size: 26px;
  letter-spacing: -.005em; text-align: center; padding: 40px; box-sizing: border-box;
}
.matrix .cell.tl { top: 0; left: 0; color: #9AE4FF; }
.matrix .cell.tr { top: 0; right: 0; color: #fff; background: rgba(22,163,214,.14); }
.matrix .cell.bl { bottom: 0; left: 0; color: #B8D2E0; }
.matrix .cell.br { bottom: 0; right: 0; color: #9AE4FF; }
.matrix .axis-x, .matrix .axis-y {
  position: absolute; background: rgba(154,228,255,.28);
}
.matrix .axis-x { left: 0; right: 0; top: 50%; height: 1px; }
.matrix .axis-y { top: 0; bottom: 0; left: 50%; width: 1px; }

/* Ordered steps, compact */
.step-card .step-n {
  font-family: 'Manrope'; font-size: 14px; font-weight: 700;
  letter-spacing: .22em; color: var(--p2-cyan);
}
.step-card .step-title {
  font-family: 'Manrope'; font-weight: 600; font-size: 28px;
  margin: 20px 0 14px; line-height: 1.15; letter-spacing: -.01em;
}
.step-card .step-body {
  font-family: 'Sora'; font-weight: 300; font-size: 20px; line-height: 1.5;
  color: #475569;
}
.dark .step-card .step-body, .indigo .step-card .step-body { color: #D8E3EC; }
.step-card {
  padding-top: 32px;
  border-top: 1px solid #E2E8F0;
}
.dark .step-card, .indigo .step-card { border-top-color: rgba(154,228,255,.22); }

/* Pulse underscore motif — big punctuation accent */
.big-underscore {
  display: inline-block;
  width: 140px; height: 16px;
  background: var(--p2-cyan);
  vertical-align: middle;
  margin-left: 16px;
}

/* ============================================================
   Slide 39 · Value × Feasibility — staged build
   ============================================================ */

/* All elements start hidden, animate in only when slide is active. */

/* Axis lines: draw via stroke-dashoffset, arrow-heads + labels fade. */
.vf-axis-y, .vf-axis-x {
  transition: stroke-dashoffset .9s cubic-bezier(.6,.05,.3,1);
}
.vf-axis-y-head, .vf-axis-x-head {
  opacity: 0;
  transition: opacity .25s ease;
}
.vf-axis-label {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .55s ease, transform .55s ease;
}
.vf-cell {
  opacity: 0;
  transform: scale(.96);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1);
}

/* Active state: kick the sequence off. */
deck-stage section[data-label="Value & feasibility"][data-deck-active] .vf-axis-y,
deck-stage section[data-label="Value & feasibility"][data-deck-active] .vf-axis-x {
  stroke-dashoffset: 0;
  transition-delay: .6s;
}
deck-stage section[data-label="Value & feasibility"][data-deck-active] .vf-axis-y-head,
deck-stage section[data-label="Value & feasibility"][data-deck-active] .vf-axis-x-head {
  opacity: 1;
  transition-delay: 1.4s;
}
deck-stage section[data-label="Value & feasibility"][data-deck-active] .vf-axis-label {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.6s;
}
/* Step 3 — Marginal Gains */
deck-stage section[data-label="Value & feasibility"][data-deck-active] .vf-cell-mg {
  opacity: 1;
  transform: scale(1);
  transition-delay: 2.3s;
}
/* Step 4 — Calculated Risks + Quick Wins together */
deck-stage section[data-label="Value & feasibility"][data-deck-active] .vf-cell-cr,
deck-stage section[data-label="Value & feasibility"][data-deck-active] .vf-cell-qw {
  opacity: 1;
  transform: scale(1);
  transition-delay: 2.95s;
}
/* Step 5 — Likely Wins (the highlighted target) lands last */
deck-stage section[data-label="Value & feasibility"][data-deck-active] .vf-cell-lw {
  opacity: 1;
  transform: scale(1);
  transition-delay: 3.6s;
}