/* AEM Insider — deck styles, aligned to the website design system. */
:root{
  --ink:#16171A; --ink-2:#494d56; --ink-3:#727680;
  --paper:#F4F4F1; --card:#FFFFFF; --line:rgba(22,23,26,0.12); --line-2:rgba(22,23,26,0.07);
  --dark:#121317; --dark-2:#191b20; --dark-line:rgba(255,255,255,0.12);
  --accent:#D32F2F; --accent-soft:rgba(211,47,47,0.10);
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",monospace;
  --disp:"Space Grotesk",sans-serif;
  --c-text:#c9d1d9; --c-kw:#ff7b72; --c-str:#a5d6ff; --c-tag:#7ee787; --c-attr:#79c0ff; --c-com:#8b949e;
}
deck-stage:not(:defined){visibility:hidden;}
*{box-sizing:border-box;}

.slide{padding:96px 112px;display:flex;flex-direction:column;font-family:var(--sans);overflow:hidden;}
.slide.dark{background:var(--dark);color:#fff;}
.slide.paper{background:var(--paper);color:var(--ink);}
.slide.center{justify-content:center;}
.grid-bg::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--dark-line) 1px,transparent 1px),linear-gradient(90deg,var(--dark-line) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 75% 75% at 72% 18%,#000 0%,transparent 72%);opacity:.5;pointer-events:none;}
.slide > *{position:relative;z-index:1;}

/* type */
.eyebrow{font-family:var(--mono);font-size:24px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:500;}
.kicker{font-family:var(--mono);font-size:25px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:500;}
.title{font-family:var(--disp);font-weight:600;letter-spacing:-0.02em;line-height:1.04;}
.t-xl{font-size:104px;} .t-lg{font-size:78px;} .t-md{font-size:58px;} .t-sm{font-size:42px;}
.red{color:var(--accent);}
.lede{font-size:31px;line-height:1.45;color:var(--ink-2);max-width:24em;}
.dark .lede{color:rgba(255,255,255,0.72);}
.muted{color:var(--ink-3);} .dark .muted{color:rgba(255,255,255,0.5);}
.head h2{margin:14px 0 0;}
.head .lede{margin-top:20px;}

/* title card */
.shield{width:118px;height:118px;border-radius:24px;display:block;box-shadow:0 24px 60px -20px rgba(0,0,0,.6);}
.sub{font-family:var(--mono);font-size:28px;color:rgba(255,255,255,0.78);letter-spacing:.02em;}
.credline{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:24px;color:rgba(255,255,255,0.6);}
.credline .dot{width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(211,47,47,0.18);}
.tags{display:flex;gap:12px;flex-wrap:wrap;}
.tags .t{font-family:var(--mono);font-size:24px;color:rgba(255,255,255,0.72);background:rgba(255,255,255,0.05);border:1px solid var(--dark-line);padding:8px 16px;border-radius:999px;}

/* ghost number for chapter dividers */
.ghost-num{position:absolute;right:90px;bottom:40px;font-family:var(--disp);font-weight:700;font-size:380px;line-height:.8;color:rgba(255,255,255,0.05);z-index:0;letter-spacing:-0.04em;}

/* cards + grids */
.cards{display:grid;gap:26px;}
.g2{grid-template-columns:1fr 1fr;} .g3{grid-template-columns:repeat(3,1fr);} .g4{grid-template-columns:repeat(4,1fr);}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:34px 34px;display:flex;flex-direction:column;gap:12px;}
.dark .card{background:var(--dark-2);border-color:var(--dark-line);}
.card.accent{border-color:rgba(211,47,47,0.45);box-shadow:inset 0 0 0 1px rgba(211,47,47,0.25);}
.card .clabel{font-family:var(--mono);font-size:24px;letter-spacing:.06em;color:var(--accent);text-transform:uppercase;}
.card .ctitle{font-family:var(--disp);font-weight:600;font-size:34px;letter-spacing:-0.01em;}
.card .crole{font-family:var(--mono);font-size:24px;color:var(--ink-3);}
.dark .card .crole{color:rgba(255,255,255,0.55);}
.card p{font-size:25px;line-height:1.4;color:var(--ink-2);margin:0;}
.dark .card p{color:rgba(255,255,255,0.74);}
.card .big-num{font-family:var(--disp);font-weight:600;font-size:64px;color:var(--accent);line-height:1;}

/* VS comparison */
.vs-wrap{display:grid;grid-template-columns:1fr auto 1fr;gap:30px;align-items:stretch;}
.vs-badge{align-self:center;font-family:var(--disp);font-weight:700;font-size:34px;color:#fff;background:var(--accent);width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px -10px rgba(211,47,47,0.6);}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:16px;}
.chip{font-family:var(--mono);font-size:24px;padding:14px 22px;border-radius:12px;background:var(--card);border:1px solid var(--line);color:var(--ink);display:flex;align-items:center;gap:12px;}
.dark .chip{background:var(--dark-2);border-color:var(--dark-line);color:#fff;}
.chip.down{border-color:rgba(211,47,47,0.5);color:var(--accent);opacity:.85;}
.chip .k{font-family:var(--mono);font-size:24px;color:var(--ink-3);}

/* flow with arrows */
.flow{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.flow .node{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 30px;font-family:var(--disp);font-weight:600;font-size:30px;text-align:center;}
.dark .flow .node{background:var(--dark-2);border-color:var(--dark-line);}
.flow .node small{display:block;font-family:var(--mono);font-weight:400;font-size:24px;color:var(--ink-3);margin-top:6px;}
.dark .flow .node small{color:rgba(255,255,255,0.5);}
.flow .arrow{font-family:var(--mono);font-size:40px;color:var(--accent);}
.flow .node.accent{background:var(--accent);color:#fff;border-color:var(--accent);}
.flow .node.accent small{color:rgba(255,255,255,0.8);}

/* code-window motif (title cards / code bits) */
.win{background:#0c0d11;border:1px solid var(--dark-line);border-radius:18px;overflow:hidden;box-shadow:0 30px 70px -26px rgba(0,0,0,.7);}
.win .bar{display:flex;align-items:center;gap:9px;padding:16px 20px;border-bottom:1px solid var(--dark-line);background:#101116;}
.win .bar i{width:14px;height:14px;border-radius:50%;display:block;}
.win .bar .fn{font-family:var(--mono);font-size:24px;color:#8b949e;margin-left:8px;}
.win pre{margin:0;padding:26px 28px;font-family:var(--mono);font-size:26px;line-height:1.6;color:var(--c-text);}
.win .cmd{color:var(--c-tag);}

/* layout helpers */
.row{display:flex;} .col{display:flex;flex-direction:column;}
.gap-s{gap:14px;} .gap-m{gap:24px;} .gap-l{gap:40px;}
.mt-a{margin-top:auto;}
.note{font-family:var(--mono);font-size:24px;color:var(--ink-3);}
.dark .note{color:rgba(255,255,255,0.55);}
.note .red{color:var(--accent);}
.body-grow{flex:1;display:flex;flex-direction:column;justify-content:center;}

/* outro */
.outro-links{display:flex;flex-direction:column;gap:14px;font-family:var(--mono);font-size:30px;}
.outro-links a{color:#fff;display:flex;align-items:center;gap:16px;text-decoration:none;}
.outro-links a .ic{color:var(--accent);}
.next-pill{display:inline-flex;align-items:center;gap:14px;background:rgba(255,255,255,0.05);border:1px solid var(--dark-line);border-radius:14px;padding:18px 26px;font-family:var(--mono);font-size:26px;color:rgba(255,255,255,0.85);}
.next-pill b{color:#fff;font-weight:600;}

/* entrance — visible base, animate from hidden only when active */
@media (prefers-reduced-motion: no-preference){
  [data-deck-active] .anim{animation:slideUp .6s cubic-bezier(.22,1,.36,1) both;}
  [data-deck-active] .anim2{animation:slideUp .6s cubic-bezier(.22,1,.36,1) .12s both;}
  [data-deck-active] .anim3{animation:slideUp .6s cubic-bezier(.22,1,.36,1) .22s both;}

  /* containers carry only a quick fade — their children do the moving */
  [data-deck-active] .cards,
  [data-deck-active] .chips,
  [data-deck-active] .flow,
  [data-deck-active] .vs-wrap{animation:dcFade .3s ease both !important;}

  /* cards rise in sequence */
  [data-deck-active] .cards > *{animation:dcCard .55s cubic-bezier(.22,1,.36,1) both;}
  [data-deck-active] .cards > *:nth-child(1){animation-delay:.12s;}
  [data-deck-active] .cards > *:nth-child(2){animation-delay:.22s;}
  [data-deck-active] .cards > *:nth-child(3){animation-delay:.32s;}
  [data-deck-active] .cards > *:nth-child(4){animation-delay:.42s;}

  /* VS — cards fly in from each side, badge pops */
  [data-deck-active] .vs-wrap > .card:first-child{animation:dcLeft .55s cubic-bezier(.22,1,.36,1) .12s both;}
  [data-deck-active] .vs-wrap > .card:last-child{animation:dcRight .55s cubic-bezier(.22,1,.36,1) .12s both;}
  [data-deck-active] .vs-wrap > .vs-badge{animation:dcPop .5s cubic-bezier(.34,1.56,.64,1) .36s both;}

  /* chips pop in, cascading */
  [data-deck-active] .chips > *{animation:dcPop .45s cubic-bezier(.34,1.56,.64,1) both;}
  [data-deck-active] .chips > *:nth-child(1){animation-delay:.10s;}
  [data-deck-active] .chips > *:nth-child(2){animation-delay:.15s;}
  [data-deck-active] .chips > *:nth-child(3){animation-delay:.20s;}
  [data-deck-active] .chips > *:nth-child(4){animation-delay:.25s;}
  [data-deck-active] .chips > *:nth-child(5){animation-delay:.30s;}
  [data-deck-active] .chips > *:nth-child(6){animation-delay:.35s;}
  [data-deck-active] .chips > *:nth-child(7){animation-delay:.40s;}
  [data-deck-active] .chips > *:nth-child(8){animation-delay:.45s;}

  /* flow nodes slide in left→right */
  [data-deck-active] .flow > *{animation:dcLeft .5s cubic-bezier(.22,1,.36,1) both;}
  [data-deck-active] .flow > *:nth-child(1){animation-delay:.12s;}
  [data-deck-active] .flow > *:nth-child(2){animation-delay:.22s;}
  [data-deck-active] .flow > *:nth-child(3){animation-delay:.32s;}
  [data-deck-active] .flow > *:nth-child(4){animation-delay:.42s;}
  [data-deck-active] .flow > *:nth-child(5){animation-delay:.52s;}

  /* step / bullet lists reveal line by line */
  [data-deck-active] .ticks > li{animation:dcTick .5s cubic-bezier(.22,1,.36,1) both;}
  [data-deck-active] .ticks > li:nth-child(1){animation-delay:.16s;}
  [data-deck-active] .ticks > li:nth-child(2){animation-delay:.26s;}
  [data-deck-active] .ticks > li:nth-child(3){animation-delay:.36s;}
  [data-deck-active] .ticks > li:nth-child(4){animation-delay:.46s;}
  [data-deck-active] .ticks > li:nth-child(5){animation-delay:.56s;}
  [data-deck-active] .ticks > li:nth-child(6){animation-delay:.66s;}
  [data-deck-active] .card .ticks > li{animation:none;} /* avoid double-animating inside cards */
}
@keyframes slideUp{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
@keyframes dcFade{from{opacity:0;}to{opacity:1;}}
@keyframes dcCard{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
@keyframes dcPop{from{opacity:0;transform:scale(.85);}to{opacity:1;transform:none;}}
@keyframes dcLeft{from{opacity:0;transform:translateX(-22px);}to{opacity:1;transform:none;}}
@keyframes dcRight{from{opacity:0;transform:translateX(22px);}to{opacity:1;transform:none;}}
@keyframes dcTick{from{opacity:0;transform:translateX(-14px);}to{opacity:1;transform:none;}}