:root {
  --blue: #0052ff;
  --video-w: 1920px;
  --video-h: 1080px;
  --scene-dur: 3.5s;
  --total-scenes: 8;
  --total-dur: calc(var(--scene-dur) * var(--total-scenes));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  background: #000;
}

body.preview-mode {
  overflow: auto;
  background: #111;
}

body.preview-mode .video-stage {
  margin: 24px auto;
  transform: scale(0.55);
  transform-origin: top center;
}

.video-stage {
  position: relative;
  width: var(--video-w);
  height: var(--video-h);
  margin: 0 auto;
  overflow: hidden;
  background: radial-gradient(ellipse 120% 80% at 50% 0%, #1a4fd6 0%, #061a42 55%, #020817 100%);
  color: #fff;
}

.scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 88px;
  opacity: 0;
  pointer-events: none;
  animation-duration: var(--total-dur);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.scene__inner {
  width: 100%;
  max-width: 1720px;
  display: grid;
  grid-template-columns: 1fr 520px;
  gap: 64px;
  align-items: center;
}

.scene__inner--center {
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
}

.eyebrow {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.headline {
  margin: 0;
  font-size: 64px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.headline .accent {
  color: #7eb6ff;
}

.subhead {
  margin: 20px 0 0;
  max-width: 560px;
  font-size: 24px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
}

.scene__inner--center .subhead {
  margin-inline: auto;
}

.device {
  justify-self: end;
  width: 420px;
  padding: 14px;
  border-radius: 44px;
  background: linear-gradient(145deg, #1e293b, #0f172a);
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  animation: device-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 32px;
  background: #f5f6fa;
}

.logo-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.logo-mark {
  width: 110px;
  height: 110px;
  border-radius: 26px;
  background: linear-gradient(135deg, #3b82f6, #0052ff);
  display: grid;
  place-items: center;
  font-size: 52px;
  font-weight: 900;
  box-shadow: 0 20px 48px rgba(0, 82, 255, 0.45);
}

.logo-lockup .headline {
  font-size: 80px;
}

.cta-btn {
  display: inline-block;
  margin-top: 28px;
  padding: 16px 32px;
  border-radius: 12px;
  background: var(--blue);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  box-shadow: 0 12px 32px rgba(0, 82, 255, 0.4);
}

.url-line {
  margin-top: 14px;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
}

.progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: rgba(255, 255, 255, 0.12);
}

.progress__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #60a5fa, #0052ff);
  animation: progress-fill var(--total-dur) linear infinite;
}

.controls {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 20;
  display: flex;
  gap: 8px;
}

.controls button {
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.scene--1 { animation-name: scene-1; }
.scene--2 { animation-name: scene-2; }
.scene--3 { animation-name: scene-3; }
.scene--4 { animation-name: scene-4; }
.scene--5 { animation-name: scene-5; }
.scene--6 { animation-name: scene-6; }
.scene--7 { animation-name: scene-7; }
.scene--8 { animation-name: scene-8; }

@keyframes scene-1 {
  0%, 11% { opacity: 1; }
  12.5%, 100% { opacity: 0; }
}
@keyframes scene-2 {
  0%, 11% { opacity: 0; }
  12.5%, 23% { opacity: 1; }
  24.5%, 100% { opacity: 0; }
}
@keyframes scene-3 {
  0%, 23% { opacity: 0; }
  24.5%, 35% { opacity: 1; }
  36.5%, 100% { opacity: 0; }
}
@keyframes scene-4 {
  0%, 35% { opacity: 0; }
  36.5%, 47% { opacity: 1; }
  48.5%, 100% { opacity: 0; }
}
@keyframes scene-5 {
  0%, 47% { opacity: 0; }
  48.5%, 59% { opacity: 1; }
  60.5%, 100% { opacity: 0; }
}
@keyframes scene-6 {
  0%, 59% { opacity: 0; }
  60.5%, 71% { opacity: 1; }
  72.5%, 100% { opacity: 0; }
}
@keyframes scene-7 {
  0%, 71% { opacity: 0; }
  72.5%, 83% { opacity: 1; }
  84.5%, 100% { opacity: 0; }
}
@keyframes scene-8 {
  0%, 83% { opacity: 0; }
  84.5%, 99% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes device-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes progress-fill {
  from { width: 0; }
  to { width: 100%; }
}