/* IAM executive intro — pixel-accurate reproduction of Figma file
   VJFnUYbMq9dWqqp6yxv7AN (Identity-and-Access-Management-Altas).
   Each slide is rendered on a 1920×1080 stage that scales to fit the viewport. */

@font-face { font-family: 'InspireTWDC'; font-weight: 400; font-style: normal; src: local('InspireTWDC Roman'), local('InspireTWDC-Roman'), local('Inspire TWDC Roman'), local('Inspire TWDC'), local('InspireTWDC'); }
@font-face { font-family: 'InspireTWDC'; font-weight: 400; font-style: italic; src: local('InspireTWDC Italic'), local('InspireTWDC-Italic'), local('Inspire TWDC Italic'); }
@font-face { font-family: 'InspireTWDC'; font-weight: 500; font-style: normal; src: local('InspireTWDC Medium'), local('InspireTWDC-Medium'), local('Inspire TWDC Medium'); }
@font-face { font-family: 'InspireTWDC'; font-weight: 700; font-style: normal; src: local('InspireTWDC Bold'), local('InspireTWDC-Bold'), local('Inspire TWDC Bold'); }
@font-face { font-family: 'InspireTWDC'; font-weight: 800; font-style: normal; src: local('InspireTWDC Heavy'), local('InspireTWDC-Heavy'), local('Inspire TWDC Heavy'); }
@font-face { font-family: 'InspireTWDC'; font-weight: 900; font-style: normal; src: local('InspireTWDC Black'), local('InspireTWDC-Black'), local('InspireTWDC ExtraBold'), local('InspireTWDC-ExtraBold'); }

:root {
  --sl-scale: 1;
  --sl-ff: 'InspireTWDC', 'Inspire TWDC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sl-ff-sf: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro', 'Segoe UI', Roboto, sans-serif;
  --sl-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --sl-fade-ms: 480ms;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body.slides-body {
  font-family: var(--sl-ff);
  color: #FFFFFF;
  background: #000000;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.slides-deck {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  overflow: hidden;
}

/* Stage = a 1920×1080 card rendered with the Figma 40px corner radius.
   JS leaves room on each side of the viewport so the rounded corners
   are visible against the deck's black background. */
.slides-stage {
  position: relative;
  width: 1920px;
  height: 1080px;
  flex-shrink: 0;
  transform: scale(var(--sl-scale));
  transform-origin: center center;
  border-radius: 40px;
  overflow: hidden;
  background: #020024;
}

.slide {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--sl-fade-ms) var(--sl-ease),
    visibility 0s linear var(--sl-fade-ms);
  pointer-events: none;
}
.slide.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s, 0s;
  pointer-events: auto;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .slide { transition: opacity 0.01ms linear, visibility 0.01ms linear; }
}

/* ─────────── Shared footer primitives ─────────── */
/* ═══════════════════════════════════════════════════
   SLIDE 1 — node 506:15695 (Cover)
   ═══════════════════════════════════════════════════ */
.sl--1 {
  background: #001439;
  background:
    radial-gradient(
      ellipse 1600px 1080px at 72% 12%,
      #0575C4 0%,
      #045DA2 22%,
      #03457F 46%,
      #022C5C 72%,
      #001439 100%
    ),
    #001439;
}
.sl1-title {
  position: absolute;
  left: 160px;
  top: 540px; /* vertical center (591) − half height (73) */
  width: 1780px;
  height: 146px;
  display: flex;
  align-items: center;
  font-family: var(--sl-ff);
  font-weight: 800;
  font-size: 96px;
  line-height: 1.2;
  color: #FFFFFF;
}
.sl1-author {
  position: absolute;
  left: 160px;
  top: 664px;
  width: 301px;
  height: 58px;
  display: flex;
  align-items: center;
  font-family: var(--sl-ff-sf);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.2;
  color: #FFFFFF;
}
.sl1-dept-logo {
  position: absolute;
  left: 160px;
  top: 454px;
  width: 362px;
  height: 38px;
  display: block;
}
/* ═══════════════════════════════════════════════════
   SLIDE 2 — node 506:15531 (User → IAM → Applications)
   ═══════════════════════════════════════════════════ */
.sl--2 { background: #020024; }
.sl2-title {
  position: absolute;
  left: 77px;
  top: 78px;
  width: 1016px;
  font-family: var(--sl-ff);
  font-weight: 800;
  font-size: 56px;
  line-height: 56px;
  color: #FFFFFF;
}
.sl2-sub {
  position: absolute;
  left: 77px;
  top: 134px;
  width: 1201px;
  font-family: var(--sl-ff);
  font-weight: 800;
  font-size: 36px;
  line-height: 56px;
  color: #FFFFFF;
}
.sl2-col-user,
.sl2-col-iam,
.sl2-col-apps {
  position: absolute;
  top: 325px;
  font-family: var(--sl-ff);
  font-weight: 800;
  font-size: 56px; /* Figma: text-[56px] leading-none */
  line-height: 1;
  color: #FFFFFF;
  z-index: 3;
}
/* Column labels are centered over their sections so they line up with the
   illustration / container beneath them. */
.sl2-col-user { left: 200px;  transform: translateX(-50%); }
.sl2-col-iam  { left: 789px;  transform: translateX(-50%); }
.sl2-col-apps { left: 1529px; transform: translateX(-50%); }
.sl2-users, .sl2-castle { z-index: 1; }
.sl2-users {
  position: absolute;
  left: 105px;
  top: 479px;
  width: 191px;
  height: 291px;
  display: block;
}
.sl2-castle {
  position: absolute;
  left: 602px;
  top: 353px;
  width: 375px;
  height: 417px;
  display: block;
  object-fit: contain;
  object-position: top center;
}
/* All three "sections" (people, castle, apps container) share a common bottom
   at y=770 so the sub-labels below line up in a single horizontal row. */
/* Unified white arrow across the deck (Figma spec SVG, 218×23 viewBox).
   height is auto so the arrowhead proportions stay crisp. */
.sl2-arrow {
  position: absolute;
  width: 140px;
  height: auto; /* 140 × 23/218 ≈ 14.77px */
  top: 587px;   /* keeps visual center at ~594 (midway between castle and Apps frame centers) */
  color: #FFFFFF;
  display: block;
  z-index: 2;
}
.sl2-arrow--1 { left: 379px; }   /* centered between User image (ends 296) and castle (starts 602) */
.sl2-arrow--2 { left: 1006px; }  /* centered between castle (ends 977) and Apps frame (starts 1175) */

/* Slide 2 bordered Applications container (Figma: 1175,431 708×339, 5px rgba(95,165,255,0.5), 24px radius) */
.sl2-apps-frame {
  position: absolute;
  left: 1175px;
  top: 431px;
  width: 708px;
  height: 339px;
  border: 5px solid rgba(95, 165, 255, 0.5);
  border-radius: 24px;
  background: transparent;
  z-index: 1;
}

/* Slide 2 apps — inside .sl2-apps-frame.
   Container inner: 36px top/left padding, 34px col gap, 39px row gap. */
.sl2-app {
  position: absolute;
  width: 300px;
  height: 119px;
  border-radius: 12px;
  background: #5FA5FF;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  font-family: var(--sl-ff);
  font-weight: 900;
  font-size: 28px;
  line-height: 38px;
  color: #FFFFFF;
  z-index: 2;
}
.sl2-app--1 { left: 1211px; top: 467px; }
.sl2-app--2 { left: 1545px; top: 467px; }
.sl2-app--3 { left: 1211px; top: 625px; }
.sl2-app--4 { left: 1545px; top: 625px; }

/* Slide 2 sub-labels under the IAM illustration and under the Applications container.
   Section bottoms all sit at y=770; labels baseline ~y=824. */
.sl2-acl,
.sl2-atlas {
  position: absolute;
  top: 812px;
  font-family: var(--sl-ff);
  font-weight: 500;
  font-size: 28px;
  line-height: 1;
  color: #FFFFFF;
  white-space: nowrap;
  transform: translateX(-50%);
  z-index: 3;
}
.sl2-acl   { left: 789px; }   /* centered under the castle illustration */
.sl2-atlas { left: 1529px; }  /* centered under the apps container */

/* Shared app card used in slide 3 (relative to .sl3-apps-grid origin) */
.sl-app-card {
  position: absolute;
  width: 300px;
  height: 119px;
  border-radius: 12px;
  background: #5FA5FF;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  font-family: var(--sl-ff);
  font-weight: 900;
  font-size: 28px;
  line-height: 38px;
  color: #FFFFFF;
}
.sl-app-card--1 { left: 0; top: 0; }
.sl-app-card--2 { left: 334px; top: 0; }
.sl-app-card--3 { left: 0; top: 158px; }
.sl-app-card--4 { left: 334px; top: 158px; }

/* ═══════════════════════════════════════════════════
   SLIDE 3 — node 506:15666 (Define once. Scale everywhere.)
   ═══════════════════════════════════════════════════ */
.sl--3 { background: #020024; }
.sl3-title {
  position: absolute;
  left: 77px;
  top: 78px;
  width: 1016px;
  font-family: var(--sl-ff);
  font-weight: 800;
  font-size: 56px;
  line-height: 1;
  color: #FFFFFF;
}
.sl3-bullets {
  position: absolute;
  left: 60px;
  top: 198px;
  width: 869px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--sl-ff);
  font-weight: 500;
  font-size: 40px;
  line-height: 56px;
  color: #FFFFFF;
  padding: 0;
  list-style: none;
}
.sl3-bullets li {
  list-style: disc;
  margin-left: 60px;
}
.sl3-bullets li::marker { color: #FFFFFF; font-size: 40px; }
/* Slide 3 IAM pill — Figma 506:15689: bg #027BFF, 375×100 @(1215,186), 100px radius.
   Inner text block is centered at x=1402. Figma renders IAM in the upper half of the
   pill and the subtitle cleanly below with a small visual gap — we position each line
   absolutely with line-height:1 so the 40px "IAM" glyphs can't collide with the 20px
   subtitle's line-box below. */
.sl3-pill {
  position: absolute;
  left: 1215px;
  top: 186px;
  width: 375px;
  height: 100px;
  border-radius: 100px;
  background: #027BFF;
  font-family: var(--sl-ff);
  font-weight: 500; /* InspireTWDC Medium */
  color: #FFFFFF;
  text-align: center;
}
.sl3-pill-head,
.sl3-pill-sub {
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  font-family: var(--sl-ff);
  font-weight: 500;
  line-height: 1;
  color: #FFFFFF;
  text-align: center;
}
.sl3-pill-head {
  top: 14px;      /* visual center of IAM glyphs at pill y≈34, matching Figma */
  font-size: 40px;
}
.sl3-pill-sub {
  top: 58px;      /* subtitle sits 4px below IAM's line-box, visual center pill y≈68 */
  font-size: 20px;
}

/* Vertical arrow between the IAM pill and the Atlas label.
   Figma: 99px tall at center x=1402, top=317 → bottom=416 (Atlas label is at top=429). */
.sl3-arrow-down {
  position: absolute;
  left: 1402px;
  top: 317px;
  width: auto;   /* SVG viewBox is 23×218 — auto keeps the arrowhead proportional (~10.4px wide) */
  height: 99px;
  transform: translateX(-50%);
  color: #FFFFFF;
  display: block;
  z-index: 2;
}
.sl3-atlas-label {
  position: absolute;
  left: 1357px;
  top: 429px;
  font-family: var(--sl-ff);
  font-weight: 500;
  font-size: 40px;
  line-height: 1;
  color: #5FA5FF;
  white-space: nowrap;
}
.sl3-atlas-box {
  position: absolute;
  left: 1048px;
  top: 469px;
  width: 708px;
  height: 339px;
  border: 5px solid rgba(95, 165, 255, 0.5);
  border-radius: 24px;
}
.sl3-apps-grid {
  position: absolute;
  left: 1085px;
  top: 505px;
  width: 634px;
  height: 277px;
  /* children use .sl-app-card absolute positioning relative to this grid */
}

/* ═══════════════════════════════════════════════════
   SLIDE 4 — node 506:15278 (We structure access in 3 layers)
   ═══════════════════════════════════════════════════ */
.sl--4 { background: #020024; }
.sl4-title {
  position: absolute;
  left: 77px;
  top: 54px;
  width: 1328px;
  font-family: var(--sl-ff);
  font-weight: 800; /* InspireTWDC Heavy */
  font-size: 56px;
  line-height: 100px;
  color: #FFFFFF;
}
.sl4-users {
  position: absolute;
  left: 107px;
  top: 257px;
  width: 191px;
  height: 290px;
  display: block;
}
.sl4-role-card {
  position: absolute;
  left: 672px;
  top: 269px;
  width: 199px;
  height: 284px;
  display: block;
  z-index: 1;
}
/* Role card text overlays (Figma 507:19786 / :19789 / :19790 / :19797 / :19796) */
.sl4-role-name {
  position: absolute;
  left: 788.5px;
  top: 272px;
  width: 191px;
  height: 56px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sl-ff);
  font-weight: 900; /* InspireTWDC Black */
  font-size: 24px;
  line-height: 1;
  color: #1D1E1F;
  text-align: center;
  white-space: nowrap;
  z-index: 3;
}
.sl4-role-perm {
  position: absolute;
  left: 693px;
  font-family: var(--sl-ff);
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  color: #C7C7C9;
  white-space: nowrap;
  transform: translateY(-50%);
  z-index: 3;
}
.sl4-role-perm--1 { top: 358.5px; }
.sl4-role-perm--2 { top: 380.5px; }
.sl4-role-perm--3 { top: 402.5px; }
.sl4-role-group {
  position: absolute;
  left: 695px;
  top: 484.5px;
  transform: translateY(-50%);
  font-family: var(--sl-ff);
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  color: #C7C7C9;
  white-space: nowrap;
  z-index: 3;
}

/* Column labels under the User and Role illustrations,
   heading to the right of the 2nd arrow (Application + Permissions) */
.sl4-col-user {
  position: absolute;
  left: 14px;   /* Figma: left=200.5 − 373/2 = 14 */
  top: 580px;
  width: 373px;
  height: 56px;
  font-family: var(--sl-ff);
  font-weight: 900; /* InspireTWDC Black */
  font-size: 48px;
  line-height: 56px;
  color: #FFFFFF;
  text-align: center;
}
.sl4-col-role {
  position: absolute;
  left: 699px;  /* Figma: left=772 − 146/2 = 699 */
  top: 580px;
  width: 146px;
  height: 56px;
  font-family: var(--sl-ff);
  font-weight: 900;
  font-size: 48px;
  line-height: 56px;
  color: #FFFFFF;
  text-align: center;
}
.sl4-col-apps {
  position: absolute;
  left: 1169px;
  top: 386px;
  width: 796px;
  font-family: var(--sl-ff);
  font-weight: 800; /* InspireTWDC Heavy */
  font-size: 56px;
  line-height: 100px;
  color: #FFFFFF;
  text-align: left;
}
/* Arrow = Figma asset (pale blue horizontal arrow) rendered 160×59.
   Figma: 152×0 container at (420, 436) / (960, 436) with inset [-29.46px −2.63%]
   → effective image at (416, 406.5) / (956, 406.5), 160×59. */
.sl4-arrow {
  position: absolute;
  width: 160px;
  height: auto; /* 160 × 23/218 ≈ 16.88px */
  top: 428px;   /* keeps visual center at y≈436 with new taller arrow */
  color: #FFFFFF;
  display: block;
}
/* Arrow 1 centered between User illustration (ends x=298) and Role card (starts x=672) → center 485 */
.sl4-arrow--1 { left: 405px; }
/* Arrow 2 centered between Role card (ends x=871) and App+Permissions text (starts x=1169) → center 1020 */
.sl4-arrow--2 { left: 940px; }
.sl4-bullets {
  position: absolute;
  left: 77px;
  top: 732px;
  width: 869px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--sl-ff);
  font-weight: 500; /* InspireTWDC Medium */
  font-size: 40px;
  line-height: 56px;
  color: #FFFFFF;
  padding: 0;
  list-style: none;
}
.sl4-bullets li {
  list-style: disc;
  margin-left: 60px;
}
.sl4-bullets li::marker { color: #FFFFFF; font-size: 40px; }

/* ═══════════════════════════════════════════════════
   SLIDE 5 — node 506:15352 (Define roles before designing access)
   ═══════════════════════════════════════════════════ */
.sl--5 { background: #020024; }
.sl5-title {
  position: absolute;
  left: 77px;
  top: 54px;
  width: 1328px;
  font-family: var(--sl-ff);
  font-weight: 800;
  font-size: 56px;
  line-height: 100px;
  color: #FFFFFF;
}
.sl5-sub {
  position: absolute;
  left: 77px;
  top: 146px;
  width: 1860px;
  font-family: var(--sl-ff);
  font-weight: 800;
  font-size: 36px;
  line-height: 56px;
  color: #FFFFFF;
}
.sl5-table {
  position: absolute;
  left: 77px;
  top: 293px;
  width: 1423px;
  display: flex;
  flex-direction: column;
  gap: 33px;
  font-family: var(--sl-ff);
  color: #FFFFFF;
}
.sl5-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.sl5-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1222px;
  font-weight: 900;
  font-size: 24px;
  line-height: 32.063px;
}
.sl5-header-row > span:nth-child(1) { width: 85px; }
.sl5-header-row > span:nth-child(2) { width: 208px; }
.sl5-header-row > span:nth-child(3) { white-space: nowrap; }
.sl5-header-divider {
  width: 1423px;
  height: 1px;
  background: #FFFFFF;
}
.sl5-row {
  display: flex;
  align-items: center;
  gap: 209px;
  font-weight: 900;
  font-size: 32px;
  line-height: 32.063px;
}
.sl5-row > span { white-space: nowrap; }
.sl5-row--1 > span:nth-child(1) { width: 248px; white-space: normal; }
.sl5-row--1 > span:nth-child(2) { width: 383px; white-space: normal; }
.sl5-row--2 > span:nth-child(1) { width: 249px; white-space: normal; }
.sl5-row--3 { width: 100%; }
.sl5-row--3 > span:nth-child(1) { width: 249px; white-space: normal; }
.sl5-row--3 > span:nth-child(2) { width: 388px; white-space: normal; }
.sl5-row--4 > span:nth-child(1) { width: 249px; white-space: normal; }
.sl5-row--4 > span:nth-child(2) { width: 388px; white-space: normal; }
.sl5-note {
  position: absolute;
  left: 77px;
  top: 689px;
  width: 1860px;
  font-family: var(--sl-ff);
  font-weight: 400;
  font-style: italic;
  font-size: 20px;
  line-height: 56px;
  color: #FFFFFF;
}

/* ═══════════════════════════════════════════════════
   SLIDE 6 — node 506:15407 (Separate mental models)
   ═══════════════════════════════════════════════════ */
.sl--6 { background: #020024; }
.sl6-title {
  position: absolute;
  left: 77px;
  top: 54px;
  width: 1328px;
  font-family: var(--sl-ff);
  font-weight: 800;
  font-size: 56px;
  line-height: 100px;
  color: #FFFFFF;
}
/* Two side-by-side dashboard screenshots — uploaded hi-res PNGs in /public/assets/.
   Slots match Figma 507:20581 / 507:20636:
     left:  (182, 255) 560×460
     right: (1169, 255) 549×460
   object-fit: contain preserves the source aspect ratio without cropping. */
.sl6-img {
  position: absolute;
  top: 255px;
  height: 460px;
  display: block;
  object-fit: contain;
  object-position: center;
}
.sl6-img--left  { left: 182px;  width: 560px; }
.sl6-img--right { left: 1169px; width: 549px; }

.sl6-caption-left {
  position: absolute;
  left: 155px;
  top: 740px;
  width: 627px;
  font-family: var(--sl-ff);
  font-weight: 800; /* InspireTWDC Heavy */
  font-size: 36px;
  line-height: 56px;
  color: #FFFFFF;
  text-align: left;
}
.sl6-caption-right {
  position: absolute;
  left: 1113px;
  top: 740px;
  width: 701px;
  font-family: var(--sl-ff);
  font-weight: 800;
  font-size: 36px;
  line-height: 56px;
  color: #FFFFFF;
  text-align: left;
}

/* ═══════════════════════════════════════════════════
   SLIDE 7 — node 507:20586 (See Cursor Prototype / Cover)
   ═══════════════════════════════════════════════════ */
.sl--7 {
  background: #001439;
  background:
    radial-gradient(
      ellipse 1600px 1080px at 72% 12%,
      #0575C4 0%,
      #045DA2 22%,
      #03457F 46%,
      #022C5C 72%,
      #001439 100%
    ),
    #001439;
}
.sl7-title {
  position: absolute;
  left: 77px;
  top: 54px;
  width: 1328px;
  font-family: var(--sl-ff);
  font-weight: 800;
  font-size: 56px;
  line-height: 100px;
  color: #FFFFFF;
  text-decoration: none;
  display: block;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
}
.sl7-title:focus-visible {
  outline: 3px solid #CFCFFF;
  outline-offset: 6px;
  border-radius: 4px;
}
.sl7-demo-label {
  position: absolute;
  left: 76px;
  top: 282px;
  font-family: var(--sl-ff);
  font-weight: 500;
  font-size: 40px;
  line-height: 56px;
  color: #FFFFFF;
  white-space: nowrap;
}
.sl7-bullets {
  position: absolute;
  left: 59px;
  top: 364px;
  width: 869px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--sl-ff);
  font-weight: 500;
  font-size: 40px;
  line-height: 56px;
  color: #FFFFFF;
  padding: 0;
  list-style: none;
}
.sl7-bullets li {
  list-style: disc;
  margin-left: 60px;
}
.sl7-bullets li::marker { color: #FFFFFF; font-size: 40px; }
.sl7-back {
  position: absolute;
  left: 1600px;
  top: 949px; /* center 978, height 58 */
  width: 535px;
  height: 58px;
  font-family: var(--sl-ff);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.2;
  color: #CFCFFF;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.sl7-back:focus-visible {
  outline: 2px solid #CFCFFF;
  outline-offset: 4px;
  border-radius: 4px;
}
.sl7-back:hover { text-decoration: underline; }

/* ─────────── Visually hidden live region ─────────── */
.sl-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}