/* ==========================================
   Design Tokens
   ========================================== */
:root {
  --navy-dark: #0A1A2F;
  --navy:      #12304F;
  --gold:      #C9A24B;
  --gold-light:#E4C878;
  --off-white: #F6F3EC;
  --white:     #FFFFFF;
  --text-dark: #16212E;
  --muted:     #8A97A6;

  --font-display: 'Rubik', sans-serif;
  --font-body:    'Heebo', sans-serif;
}

/* ==========================================
   Body / reveal wrapper
   reveal.css sets .reveal-viewport { background-color: #fff } — override it
   ========================================== */
body,
.reveal-viewport {
  background: var(--navy-dark) !important;
  color: var(--off-white);
}

.reveal {
  font-family: var(--font-body);
  font-size: 28px;
  color: var(--off-white);
}

/* ==========================================
   Slides — background via data-background-color in HTML
   ========================================== */
.reveal .slides section {
  background: transparent;
  text-align: right;
  padding: 2.5rem 3.5rem;
  box-sizing: border-box;
  overflow: hidden;
}

/* Dark heading for light slides */
.reveal .dark-heading { color: var(--navy-dark) !important; }

/* ==========================================
   Typography
   ========================================== */
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4 {
  font-family: var(--font-display);
  text-transform: none;
  letter-spacing: -0.01em;
  margin-bottom: 0.4em;
}

.reveal h1 { font-size: 2.2em; font-weight: 700; color: var(--off-white); line-height: 1.15; }
.reveal h2 { font-size: 1.5em; font-weight: 700; color: var(--off-white); }
.reveal h3 { font-size: 1.1em; font-weight: 500; color: var(--gold-light); }
.reveal h4 { font-size: 0.9em; font-weight: 500; color: var(--muted); }

.reveal p  { font-size: 0.78em; line-height: 1.75; color: var(--off-white); }
.reveal li { font-size: 0.78em; line-height: 1.7;  color: var(--off-white); list-style: none; }
.reveal li::before { content: "◆ "; color: var(--gold); font-size: 0.7em; }

.reveal .slides section.light h2 { color: var(--navy-dark); }
.reveal .slides section.light p,
.reveal .slides section.light li { color: var(--text-dark); }

/* ==========================================
   Gold underline for headings
   ========================================== */
.reveal h2 .gold-line,
.reveal h1 .gold-line {
  display: block;
  height: 3px;
  background: var(--gold);
  width: 0;
  margin-top: 0.35em;
  transition: width 0.9s ease 0.3s;
}
.reveal .present h2 .gold-line,
.reveal .present h1 .gold-line {
  width: 72px;
}

/* ==========================================
   Cards
   ========================================== */
.card {
  background: var(--navy);
  border-radius: 12px;
  padding: 1.1rem 1.5rem;
  border-right: 4px solid var(--gold);
}
.card-light {
  background: var(--white);
  border-radius: 12px;
  padding: 1.1rem 1.5rem;
  border-right: 4px solid var(--gold);
  color: var(--text-dark);
}
.card h3 { color: var(--gold-light); margin-bottom: 0.4em; }
.card p  { color: var(--off-white); font-size: 0.72em; margin: 0; }
.card-light h3 { color: var(--navy); }
.card-light p  { color: var(--text-dark); font-size: 0.72em; margin: 0; }

/* ==========================================
   Grid layouts
   ========================================== */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.1rem; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }

/* ==========================================
   Decorative floating circles
   ========================================== */
.circle-deco {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(201, 162, 75, 0.15);
  pointer-events: none;
}
.circle-deco.lg  { width: 380px; height: 380px; bottom: -110px; left: -70px;
                   animation: float-slow 9s ease-in-out infinite; }
.circle-deco.sm  { width: 140px; height: 140px; top: 40px; left: 70px;
                   animation: float-slow 6s ease-in-out infinite reverse; }

@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-16px); }
}

/* ==========================================
   Big section number
   ========================================== */
.section-num {
  font-family: var(--font-display);
  font-size: 7em;
  font-weight: 700;
  color: rgba(201, 162, 75, 0.18);
  position: absolute;
  left: 3rem;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* ==========================================
   Count-up stat
   ========================================== */
.stat-box {
  text-align: center;
  padding: 1.2rem;
}
.stat-num {
  font-family: var(--font-display);
  font-size: 2.6em;
  font-weight: 700;
  color: var(--gold);
  display: block;
  line-height: 1.1;
}
.stat-label { font-size: 0.62em; color: var(--muted); }

/* ==========================================
   Screenshot placeholder
   ========================================== */
.screenshot-placeholder {
  border: 2px dashed var(--muted);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.58em;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
}

/* ==========================================
   Start button
   ========================================== */
.btn-start {
  display: inline-block;
  margin-top: 1.6rem;
  padding: 0.65em 2.2em;
  background: var(--gold);
  color: var(--navy-dark);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.65em;
  border-radius: 40px;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  text-decoration: none;
}
.btn-start:hover { background: var(--gold-light); transform: scale(1.04); }

/* ==========================================
   Timeline (slide 07, 14)
   ========================================== */
.timeline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0;
  position: relative;
  margin-top: 1.5rem;
}
.timeline::before {
  content: '';
  position: absolute;
  top: 28px;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--gold);
  transform-origin: right;
  animation: grow-line 1s ease 0.5s both;
}
@keyframes grow-line {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.timeline-step {
  flex: 1;
  text-align: center;
  position: relative;
  padding-top: 3rem;
}
.timeline-step::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  background: var(--gold);
  border-radius: 50%;
  border: 3px solid var(--navy-dark);
}
.timeline-step p { font-size: 0.6em; color: var(--off-white); margin: 0.3em 0 0; }
.timeline-step h4 { font-size: 0.75em; color: var(--gold-light); margin: 0; }

/* ==========================================
   Logo
   ========================================== */
.logo-box {
  display: inline-block;
  background: var(--white);
  border-radius: 10px;
  padding: 0.4rem 0.7rem;
  vertical-align: middle;
}
.logo-box img { max-height: 52px; display: block; }
img.logo-transparent { max-height: 60px; }

/* ==========================================
   Staggered entrance — items roll in during narration,
   no navigation gating (auto-run never stalls on fragments).
   Delay per position among siblings; restarts on .present
   ========================================== */
.reveal section .stagger-item { opacity: 0; }
.reveal section.present .stagger-item {
  animation: stagger-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.reveal section.present .stagger-item:nth-child(1) { animation-delay: 0.6s; }
.reveal section.present .stagger-item:nth-child(2) { animation-delay: 1.5s; }
.reveal section.present .stagger-item:nth-child(3) { animation-delay: 2.4s; }
.reveal section.present .stagger-item:nth-child(4) { animation-delay: 3.3s; }
.reveal section.present .stagger-item:nth-child(5) { animation-delay: 4.2s; }
.reveal section.present .stagger-item:nth-child(6) { animation-delay: 5.1s; }
.reveal section.present .stagger-item:nth-child(7) { animation-delay: 6.0s; }
.reveal section.present .stagger-item:nth-child(8) { animation-delay: 6.9s; }

@keyframes stagger-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================
   Real screenshots
   ========================================== */
img.screenshot-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(138, 151, 166, 0.35);
  box-shadow: 0 10px 30px rgba(10, 26, 47, 0.25);
  position: relative;
  z-index: 5; /* stay above neighbors while pulsing */
}

/* Zoom pulse: shortly after the stagger reveal, the screenshot
   grows ~15% and settles back — draws the eye to the evidence */
.reveal section.present img.screenshot-img {
  animation: screenshot-pulse 4.5s ease-in-out 2.8s 1;
}

@keyframes screenshot-pulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.28); }
  55%  { transform: scale(1.28); } /* hold briefly at peak */
  100% { transform: scale(1); }
}

/* s13 has two screenshots side by side — pulse them one after
   the other so they don't collide (the pulsing one covers briefly) */
#s13 .col-split div:nth-child(2) img.screenshot-img {
  animation-delay: 7.5s;
}

/* ==========================================
   Two-column layout
   ========================================== */
.col-split {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}
.col-split > * { flex: 1; }

/* Divider */
.divider {
  width: 1px;
  background: var(--gold);
  align-self: stretch;
  opacity: 0.4;
  flex: 0;
  min-width: 1px;
}