/* ============================================================
   Viktory · Investor Deck — 5-slide presentation
   motionsites.ai Investor_Deck 1:1 vanilla port (React→HTML/CSS).
   - All slides absolutely positioned, mounted simultaneously
   - Only opacity changes via .is-active class
   - Black bg throughout (slide 5 #131318)
   - Aeonik fallback → Inter
   - Animations: SlideUpLine, WordByWordReveal, BlurReveal
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; min-height: 100%; background: #000; color: #fff; font-family: "Aeonik", "Inter", -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
img, video, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }

/* ===== Demo banner ===== */
.vk-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(0,0,0,.72); color: rgba(255,255,255,.78);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  text-align: center; padding: 8px 16px; backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* ===== Deck container — long vertical scroll ===== */
.vk-deck {
  position: relative;
  width: 100%;
  background: #000;
  outline: none;
}

/* ===== Slide — each is a full-viewport vertical section ===== */
.vk-slide {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  background: #000;
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* Active state still controls animation triggering (set by IntersectionObserver) */
.vk-slide.is-active { opacity: 1; }
.vk-slide--05 { background: #131318; }

/* ===== Background videos ===== */
.vk-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.vk-video--cover { /* default — slides 1, 2 */ }
.vk-video--flipped { transform: scale(-1, -1); opacity: .5; }
.vk-video--right { left: 400px; right: 0; width: auto; }
.vk-video--bigleft { width: 200%; height: 200%; bottom: 0; top: auto; left: 0; right: auto; inset: auto auto 0 0; }

/* ===== Stage (content overlay) ===== */
.vk-stage {
  position: relative; z-index: 10;
  width: 100%;
  flex: 1;
  display: flex; flex-direction: column;
  min-height: 0;
}

/* ===== Top bar ===== */
.vk-topbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  width: 100%;
  padding: 3.5% 5% 0;
  gap: 32px;
  flex-wrap: nowrap;
}
.vk-topbar--abs {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 3.5% 5% 0;
  z-index: 12;
}
.vk-logo {
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  height: 36px;
}
.vk-logo svg { display: block; height: 36px; width: auto; }

.vk-meta-row {
  display: flex; gap: 32px;
  flex-wrap: wrap; justify-content: flex-end;
}
.vk-meta-cell { display: flex; flex-direction: column; gap: 2px; }
.vk-meta-k { color: #80838e; font-size: 13px; font-weight: 400; }
.vk-meta-v { color: #fff;    font-size: 13px; font-weight: 500; }

.vk-slide-num {
  color: #80838e;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 400;
  font-feature-settings: "tnum";
}

/* ===== Divider ===== */
.vk-divider {
  margin: 24px 5% 0;
  border: 0; height: 1px;
  background: rgba(255,255,255,.15);
  width: calc(100% - 10%);
}
.vk-divider--abs {
  position: absolute;
  top: calc(3.5% + 52px);
  left: 0; right: 0;
  margin: 0 5%;
  z-index: 12;
}

/* ===== Spacer (pushes content to bottom) ===== */
.vk-spacer { flex: 1; }

/* ===== Slide 1 — Title block ===== */
.vk-title-block {
  flex: 1;
  display: flex; align-items: flex-end;
  padding: 0 5% 8%;
}
.vk-display {
  color: #fff;
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: .9;
  font-size: clamp(48px, 10vw, 140px);
}
.vk-line-clip {
  display: block;
  overflow: hidden;
}
.vk-line-inner {
  display: inline-block;
  transform: translateY(100%);
  will-change: transform;
}

/* ===== Content blocks ===== */
.vk-content {
  display: flex; flex-direction: column;
  padding: 0 5%;
  width: 100%;
  flex: 1;
}

/* Slide 2 — Problem */
.vk-content--problem {
  padding-top: 4%;
  padding-bottom: 5%;
  justify-content: space-between;
  flex: 1;
}
.vk-problem-top { max-width: 85%; }
.vk-eyebrow {
  color: #80838e;
  font-size: clamp(12px, 1.2vw, 18px);
  font-weight: 400;
  margin-bottom: 24px;
  letter-spacing: .01em;
}
.vk-headline {
  color: #fff;
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.012em;
  font-size: clamp(22px, 3.5vw, 56px);
}
.vk-headline--narrow { max-width: 55%; }
.vk-headline--big {
  max-width: 65%;
  font-size: clamp(20px, 4vw, 80px);
}
.vk-words {
  display: inline; /* word spans inserted by JS */
}
.vk-word-clip {
  display: inline-block;
  overflow: hidden;
  margin-right: .27em;
  vertical-align: bottom;
}
.vk-word-inner {
  display: inline-block;
  transform: translateY(100%);
  will-change: transform;
}

/* Stat row */
.vk-stat-row {
  display: flex; gap: 16px; width: 100%;
  margin-top: 32px;
}
.vk-stat {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 12px;
  opacity: 0; transform: translateY(30px);
  will-change: transform, opacity;
}
.vk-stat-value {
  color: #fff;
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.025em;
  font-size: clamp(32px, 6vw, 96px);
}
.vk-stat-label {
  color: #fff;
  line-height: 1.4;
  font-size: clamp(13px, 1.2vw, 20px);
  font-weight: 400;
  max-width: 320px;
}

/* Description */
.vk-desc {
  color: #80838e;
  max-width: 90%;
  font-size: clamp(12px, 1.1vw, 18px);
  line-height: 1.5;
  margin-top: 16px;
}

/* ===== Slide 3 — Market & Chart ===== */
.vk-content--market {
  padding-top: 3%;
  padding-bottom: 5%;
  position: relative;
  flex: 1;
}
.vk-content--market .vk-desc { max-width: 90%; margin-top: 18px; }

.vk-chart {
  position: absolute;
  bottom: 3%;
  left: 0; right: 0;
  top: 40%;
  z-index: 5;
  opacity: 0; transform: translateY(30px);
  will-change: transform, opacity;
}
.vk-chart-svg {
  position: absolute;
  bottom: 0; right: 0;
  width: 55%; height: 70%;
  overflow: visible;
}
.vk-chart-mainline {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
}
.vk-chart-top {
  position: absolute;
  top: 2%; right: 5%;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
}
.vk-chart-bignum {
  font-weight: 500;
  font-size: clamp(32px, 4vw, 64px);
  color: #fff;
  letter-spacing: -.02em;
}
.vk-chart-vline { display: block; width: 2px; height: 50px; background: #fff; }
.vk-chart-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #fff;
  background: linear-gradient(135deg, #7FBAFF, #536EFB);
}
.vk-chart-middot {
  position: absolute;
  top: 40%; right: 35%;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid #fff;
  background: linear-gradient(135deg, #7FBAFF, #536EFB);
}
.vk-chart-sector {
  position: absolute;
  bottom: 22%; left: 44%;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
}
.vk-chart-sectorval {
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 36px);
  color: #fff;
}
.vk-chart-sector .vk-chart-vline { height: 40px; }
.vk-chart-sectorcircle {
  position: relative;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
}
.vk-chart-sectordot {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid #fff;
  background: linear-gradient(135deg, #7FBAFF, #536EFB);
}
.vk-xaxis {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0 5%;
}
.vk-xaxis-line {
  display: block;
  width: 100%; height: 1px;
  background: #1a2035;
}
.vk-xaxis-ticks {
  list-style: none;
  display: flex; justify-content: space-between;
  margin-top: 6px;
  padding: 0;
}
.vk-xaxis-ticks li {
  color: #80838e;
  font-size: clamp(11px, 1vw, 18px);
  font-weight: 400;
  position: relative;
  padding-top: 6px;
}
.vk-xaxis-ticks li::before {
  content: "";
  position: absolute;
  top: -2px; left: 50%;
  transform: translateX(-50%);
  width: 1px; height: 6px;
  background: #1a2035;
}

/* ===== Slide 4 — Sales ===== */
.vk-content--sales {
  flex: 1;
  justify-content: center;
  padding: 0 5%;
  max-width: 65%;
}
.vk-content--sales .vk-headline { max-width: 100%; }
.vk-content--sales .vk-desc { max-width: 784px; }

/* ===== Slide 5 — Global ===== */
.vk-content--global {
  padding: 0 5% 5%;
  max-width: 55%;
}
.vk-content--global .vk-desc { max-width: 680px; }

/* ===== Side navigation dots — fixed right side, anchor links to each slide ===== */
.vk-dots {
  position: fixed;
  top: 50%; right: 24px;
  transform: translateY(-50%);
  z-index: 50;
  display: flex; flex-direction: column; gap: 12px;
  align-items: center;
}
.vk-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,.35);
  border: 0; padding: 0;
  cursor: pointer;
  transition: all .3s ease;
}
.vk-dot:hover { background: rgba(255,255,255,.7); transform: scale(1.3); }
.vk-dot.is-active {
  width: 8px; height: 24px;
  background: #fff;
}

/* ===== Edge hint — bottom-right scroll cue ===== */
.vk-hint {
  position: fixed;
  bottom: 24px; right: 80px;
  z-index: 40;
  display: flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,.45);
  font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase;
  font-feature-settings: "tnum";
  pointer-events: none;
}
.vk-hint-key {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 4px;
  font-size: 12px;
  background: rgba(255,255,255,.04);
}
.vk-hint-txt { margin-left: 4px; }

/* ============================================================
   ANIMATIONS — only fire on .is-active slide
   ============================================================ */

/* SlideUpLine — clip-reveal slide up */
@keyframes vkSlideUp {
  0%   { transform: translateY(100%); }
  100% { transform: translateY(0%); }
}
.vk-slide.is-active .vk-line-inner.vk-slide-up {
  animation: vkSlideUp .7s cubic-bezier(.25,.1,.25,1) forwards;
  animation-delay: var(--d, 0s);
}

/* WordByWordReveal — staggered word slide up */
@keyframes vkWordUp {
  0%   { transform: translateY(100%); }
  100% { transform: translateY(0%); }
}
.vk-slide.is-active .vk-word-inner {
  animation: vkWordUp .55s cubic-bezier(.25,.1,.25,1) forwards;
  animation-delay: var(--wd, 0s);
}

/* BlurReveal — blur + fade in */
@keyframes vkBlurReveal {
  0%   { opacity: 0; filter: blur(8px); }
  100% { opacity: 1; filter: blur(0); }
}
.vk-slide.is-active .vk-blur-reveal {
  animation: vkBlurReveal .9s cubic-bezier(.25,.1,.25,1) forwards;
  animation-delay: var(--d, 0s);
  opacity: 0;
}

/* Stat cards — staggered y/opacity */
@keyframes vkStatRise {
  0%   { transform: translateY(30px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.vk-slide.is-active .vk-stat {
  animation: vkStatRise .6s cubic-bezier(.25,.1,.25,1) forwards;
  animation-delay: calc(.6s + var(--i, 0) * .1s);
}

/* Chart — opacity/y rise + draw line */
@keyframes vkChartRise {
  0%   { transform: translateY(30px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes vkLineDraw {
  to { stroke-dashoffset: 0; }
}
.vk-slide.is-active .vk-chart {
  animation: vkChartRise .8s cubic-bezier(.25,.1,.25,1) .7s forwards;
}
.vk-slide.is-active .vk-chart-mainline {
  animation: vkLineDraw 2.2s cubic-bezier(.25,.1,.25,1) 1.0s forwards;
}

/* Default state for animations BEFORE the slide becomes active.
   IntersectionObserver fires animations once viewport enters; they remain visible after. */
.vk-slide:not(.is-active) .vk-line-inner,
.vk-slide:not(.is-active) .vk-word-inner {
  transform: translateY(100%);
}
.vk-slide:not(.is-active) .vk-blur-reveal {
  opacity: 0; filter: blur(8px);
}
.vk-slide:not(.is-active) .vk-stat,
.vk-slide:not(.is-active) .vk-chart {
  opacity: 0; transform: translateY(30px);
}
.vk-slide:not(.is-active) .vk-chart-mainline {
  stroke-dashoffset: 1200;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .vk-meta-row { gap: 18px; }
  .vk-meta-k, .vk-meta-v { font-size: 11px; }
  .vk-content--sales { max-width: 90%; }
  .vk-content--global { max-width: 80%; }
  .vk-headline--narrow { max-width: 80%; }
  .vk-video--right { left: 0; opacity: .55; }
}

@media (max-width: 768px) {
  .vk-banner { font-size: 10px; padding: 6px 10px; letter-spacing: .1em; }
  .vk-topbar { padding: 12% 5% 0; gap: 16px; flex-wrap: wrap; }
  .vk-topbar--abs { padding: 12% 5% 0; }
  .vk-meta-row { gap: 12px; width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .vk-meta-cell { flex: 0 0 auto; }
  .vk-divider { margin-top: 16px; }
  .vk-divider--abs { top: calc(12% + 60px); }

  .vk-display { font-size: clamp(40px, 12vw, 80px); }
  .vk-title-block { padding: 0 5% 100px; }

  .vk-headline,
  .vk-headline--narrow,
  .vk-headline--big { max-width: 100%; font-size: clamp(20px, 5.6vw, 36px); }
  .vk-problem-top { max-width: 100%; }
  .vk-content--problem { padding-top: 8%; padding-bottom: 110px; }
  .vk-stat-row { flex-direction: column; gap: 18px; margin-top: 20px; }
  .vk-stat-value { font-size: clamp(28px, 9vw, 56px); }
  .vk-stat-label { font-size: 13px; }

  .vk-content--market { padding-top: 8%; padding-bottom: 100px; }
  .vk-chart { top: auto; bottom: 80px; height: 240px; }
  .vk-chart-bignum { font-size: 28px; }
  .vk-chart-vline { height: 28px !important; }

  .vk-content--sales { max-width: 100%; padding: 0 5%; }
  .vk-content--global { max-width: 100%; padding: 0 5% 100px; }

  .vk-hint { display: none; }
  .vk-dots { bottom: 20px; }
}