/*
 * Institutional video — self-contained motion-graphics stylesheet.
 * Loaded only by the `presentation` layout (no Tailwind / app CSS), so the
 * stage is a clean, stable surface for screen recording.
 */

:root {
  --brand-50: #eef7ff;
  --brand-100: #d8ebff;
  --brand-200: #b8dcff;
  --brand-300: #84c2ff;
  --brand-400: #48a2f9;
  --brand-500: #1489e5;
  --brand-600: #0f6fb8;
  --brand-700: #0e578f;
  --brand-800: #124a74;
  --brand-900: #143f5f;
  --ink: #102a43;
  --ink-mid: #12314f;
  --ink-soft: #4a6480;
  --ink-muted: #56708b;

  --ease: cubic-bezier(0.22, 1, 0.36, 0.5);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

.iv-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
  background: radial-gradient(circle at 50% 20%, #0e2138 0%, #060d17 70%);
  font-family: "Montserrat", "Open Sans", system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ---- Stage : fixed 16:9, letterboxed, container for cqw units ---- */
.iv-stage {
  position: relative;
  width: min(100vw, 177.78vh);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  container-type: size;
  background:
    radial-gradient(circle at 8% 8%, var(--brand-50) 0%, transparent 46%),
    radial-gradient(circle at 100% 0%, #f5f9ff 0%, transparent 40%),
    #ffffff;
  box-shadow: 0 30px 90px -40px rgba(8, 20, 35, 0.9);
}

/* ---- Scenes ---- */
.iv-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 9cqh 9cqw;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.55s var(--ease-out), visibility 0.55s;
}

.iv-scene.is-active {
  opacity: 1;
  visibility: visible;
}

/* Dark brand scenes for visual rhythm */
.iv-scene--brand {
  background:
    radial-gradient(circle at 15% 15%, rgba(72, 162, 249, 0.35) 0%, transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(20, 137, 229, 0.30) 0%, transparent 50%),
    linear-gradient(140deg, var(--brand-700) 0%, var(--brand-900) 100%);
  color: #fff;
}

/* ---- Typography ---- */
.iv-kicker {
  font-size: 1.7cqw;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-600);
  margin: 0 0 2.4cqh;
}
.iv-scene--brand .iv-kicker { color: var(--brand-200); }

.iv-title {
  font-family: "Poppins", "Montserrat", sans-serif;
  font-size: 5.4cqw;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  max-width: 84cqw;
}
.iv-scene--brand .iv-title { color: #fff; }
.iv-title .accent { color: var(--brand-500); }
.iv-scene--brand .iv-title .accent { color: var(--brand-300); }

.iv-title--lg { font-size: 6.6cqw; }
.iv-title--sm { font-size: 4.2cqw; }

.iv-subtitle {
  font-size: 2.5cqw;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 3.2cqh 0 0;
  max-width: 70cqw;
}
.iv-scene--brand .iv-subtitle { color: rgba(255, 255, 255, 0.85); }

/* ---- Reusable bits ---- */
.iv-logo { height: 11cqh; width: auto; }
.iv-logo--lg { height: 16cqh; }

.iv-pill {
  display: inline-flex;
  align-items: center;
  gap: 1cqw;
  padding: 1.4cqh 2.6cqw;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--brand-200);
  color: var(--brand-700);
  font-size: 1.7cqw;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Feature rows / cards */
.iv-feature-row {
  display: flex;
  gap: 3cqw;
  margin-top: 5cqh;
  width: 100%;
  max-width: 86cqw;
  justify-content: center;
}
.iv-card {
  flex: 1 1 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 2cqw;
  padding: 3.4cqh 2.4cqw;
  box-shadow: 0 18px 40px -34px rgba(16, 42, 67, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6cqh;
}
.iv-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7cqh;
  height: 7cqh;
  border-radius: 1.4cqw;
  background: var(--brand-50);
  color: var(--brand-600);
  font-size: 3cqw;
}
.iv-card__title { font-size: 2cqw; font-weight: 600; color: var(--ink); margin: 0; }
.iv-card__text { font-size: 1.55cqw; color: var(--ink-soft); margin: 0; line-height: 1.35; }

/* Chips (specialties) */
.iv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 1.8cqw;
  justify-content: center;
  margin-top: 5cqh;
  max-width: 78cqw;
}
.iv-chip {
  padding: 1.6cqh 3cqw;
  border-radius: 999px;
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  color: var(--brand-700);
  font-size: 2cqw;
  font-weight: 600;
}

/* Big icon for single-feature scenes */
.iv-bigicon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18cqh;
  height: 18cqh;
  border-radius: 3cqw;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 8cqw;
  margin-bottom: 4cqh;
}
.iv-scene:not(.iv-scene--brand) .iv-bigicon {
  background: var(--brand-50);
  border-color: var(--brand-200);
  color: var(--brand-600);
}

/* Pain points row */
.iv-pains { display: flex; gap: 4cqw; margin-top: 5cqh; }
.iv-pain { display: flex; flex-direction: column; align-items: center; gap: 1.6cqh; width: 22cqw; }
.iv-pain__icon { font-size: 5cqw; color: #c0504a; }
.iv-pain__text { font-size: 1.9cqw; font-weight: 600; color: var(--ink-mid); }

/* Quote / testimonial */
.iv-quote {
  font-family: "Poppins", sans-serif;
  font-size: 3.6cqw;
  font-weight: 500;
  line-height: 1.28;
  color: var(--ink);
  max-width: 80cqw;
  margin: 0;
}
.iv-quote .mark { color: var(--brand-400); font-weight: 700; }
.iv-quote-author { margin-top: 4cqh; font-size: 2cqw; font-weight: 600; color: var(--brand-700); }
.iv-quote-role { font-size: 1.5cqw; color: var(--ink-muted); font-weight: 500; }

/* CTA button look */
.iv-cta {
  display: inline-flex;
  align-items: center;
  gap: 1.4cqw;
  margin-top: 5cqh;
  padding: 2.2cqh 4.4cqw;
  border-radius: 999px;
  background: #fff;
  color: var(--brand-700);
  font-size: 2.4cqw;
  font-weight: 700;
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.6);
}
.iv-url { margin-top: 3.4cqh; font-size: 1.9cqw; font-weight: 600; color: rgba(255, 255, 255, 0.85); letter-spacing: 0.04em; }

/* Demo scene: product screen-capture video */
.iv-scene--demo { padding: 5cqh 4cqw; }
.iv-demo {
  margin-top: 3cqh;
  width: 100%;
  display: flex;
  justify-content: center;
}
.iv-demo-video {
  height: 72cqh;
  width: auto;
  max-width: 92cqw;
  border-radius: 1.4cqw;
  border: 1px solid #e2e8f0;
  background: #000;
  box-shadow: 0 24px 60px -30px rgba(16, 42, 67, 0.7);
  object-fit: contain;
}

/* Final CTA scene: coupon + QR */
.iv-cta-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7cqw;
  width: 100%;
  max-width: 86cqw;
}
.iv-cta-left { text-align: left; flex: 1 1 0; }
.iv-cta-left .iv-title { max-width: none; }
.iv-cta-left .iv-subtitle { margin-left: 0; }
.iv-coupon {
  display: inline-block;
  margin-top: 4cqh;
  padding: 1.8cqh 4cqw;
  border: 0.35cqh dashed rgba(255, 255, 255, 0.6);
  border-radius: 1.6cqw;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 4.4cqw;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.iv-cta-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2cqh;
  flex: 0 0 auto;
}
.iv-qr {
  width: 26cqh;
  height: 26cqh;
  padding: 2cqh;
  background: #fff;
  border-radius: 2cqw;
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.6);
}
.iv-qr svg { display: block; width: 100%; height: 100%; }
.iv-qr-label { font-size: 1.7cqw; line-height: 1.4; color: rgba(255, 255, 255, 0.85); text-align: center; margin: 0; }
.iv-qr-label strong { color: #fff; }

/* Watermark logo (persistent, legible on any background) */
.iv-watermark {
  position: absolute;
  top: 4cqh;
  left: 3.4cqw;
  z-index: 5;
  display: flex;
  align-items: center;
  padding: 1.2cqh 2cqw;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 24px -18px rgba(8, 20, 35, 0.8);
}
.iv-watermark img { height: 4.4cqh; width: auto; display: block; }

/* ---- Entrance animations (run when parent scene .is-active) ---- */
.iv-anim { opacity: 0; }
.iv-scene.is-active .iv-anim {
  animation: iv-rise 0.85s var(--ease-out) both;
  animation-delay: var(--d, 0s);
}
.iv-scene.is-active .iv-anim--fade { animation-name: iv-fade; }
.iv-scene.is-active .iv-anim--pop { animation-name: iv-pop; }

@keyframes iv-rise {
  from { opacity: 0; transform: translateY(3.4cqh); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes iv-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes iv-pop {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1); }
}

/* Subtle drifting background on active scene */
.iv-scene.is-active { animation: iv-kenburns 12s ease-out both; }
@keyframes iv-kenburns {
  from { background-size: 100% 100%; }
  to   { background-size: 108% 108%; }
}

/* ---- Progress bar ---- */
.iv-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.7cqh;
  background: rgba(16, 42, 67, 0.12);
  z-index: 6;
}
.iv-scene--brand ~ .iv-progress { background: rgba(255, 255, 255, 0.18); }
.iv-progress__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, var(--brand-400), var(--brand-600));
  transition: width 0.12s linear;
}

/* ---- Controls (hidden during recording) ---- */
.iv-controls {
  position: absolute;
  bottom: 3cqh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  padding: 1.2cqh 1.6cqw;
  border-radius: 999px;
  background: rgba(8, 20, 35, 0.55);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.iv-stage:hover .iv-controls { opacity: 1; }
.iv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5cqh;
  height: 5cqh;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.9cqw;
  cursor: pointer;
  transition: background 0.2s ease;
}
.iv-btn:hover { background: rgba(255, 255, 255, 0.32); }
.iv-counter { color: rgba(255, 255, 255, 0.85); font-size: 1.5cqw; font-weight: 600; min-width: 7cqw; text-align: center; }

/* Recording mode: clean stage, no UI chrome */
.iv-stage.is-recording .iv-controls,
.iv-stage.is-recording .iv-progress { display: none; }

/* ---- Accessibility: respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .iv-scene.is-active .iv-anim,
  .iv-scene.is-active { animation: none; }
  .iv-anim { opacity: 1; }
}