/* Racing Babes 60-second demo reel. 1280×720 stage scaled to fit. */
.reel-body { --sans: 'Outfit', 'Segoe UI', sans-serif; --script: 'Fraunces', Georgia, serif; margin: 0; background: #1c2a2b; overflow: hidden; height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.reel-cedar { --c1: #1c2a2b; --c2: #2f6f80; }
.reel-terracotta { --c1: #853c26; --c2: #c4572f; }
.reel-wine { --c1: #69334a; --c2: #95647d; }
.reel-teal { --c1: #214d59; --c2: #2f6f80; }
.reel-honey { --c1: #704a24; --c2: #a06d32; }
.reel-viewport { flex: 1; position: relative; overflow: hidden; }
.reel-stage {
  position: absolute; left: 50%; top: 50%; width: 1280px; height: 720px;
  transform-origin: center; overflow: hidden; color: #fff;
  background: linear-gradient(120deg, var(--c1), var(--c2));
  transition: background 0.8s ease;
  font-family: var(--sans);
}
.reel-stage::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 15% 85%, rgba(255,255,255,.14), transparent 40%), radial-gradient(circle at 90% 10%, rgba(255,255,255,.18), transparent 35%);
}
.reel-stage.paused *, .reel-stage.paused *::before, .reel-stage.paused *::after { animation-play-state: paused !important; }

.reel-caption { position: absolute; left: 56px; top: 0; bottom: 0; width: 390px; display: flex; flex-direction: column; justify-content: center; z-index: 2; }
.reel-caption.center { left: 0; right: 0; width: auto; align-items: center; text-align: center; }
.reel-caption.hidden { display: none; }
.reel-step { font-family: var(--script); font-size: 30px; opacity: .9; }
.reel-caption h1 { font-size: 52px; line-height: 1.02; margin: 6px 0 14px; letter-spacing: -.01em; }
.reel-caption p { font-size: 24px; margin: 0; opacity: .92; line-height: 1.35; }
.reel-caption > * { animation: rise .7s cubic-bezier(.2,.8,.2,1) both; }
.reel-caption > *:nth-child(2) { animation-delay: .12s; }
.reel-caption > *:nth-child(3) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes drop { 0% { opacity: 0; transform: translateY(-60px); } 70% { transform: translateY(4px); } 100% { opacity: 1; transform: none; } }

.reel-scene { position: absolute; inset: 0; z-index: 1; }
.reel-watermark { position: absolute; right: 26px; bottom: 22px; display: flex; align-items: center; gap: 8px; font-weight: 800; opacity: .85; z-index: 3; font-size: 18px; }
.reel-watermark img { width: 30px; height: 30px; }
.reel-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(255,255,255,.2); z-index: 4; }
.reel-progress span { display: block; height: 100%; width: 0; background: #fff; }

/* Real-screen window: app or browser chrome around a 1440×900 screenshot. */
.win { position: absolute; right: 48px; top: 112px; width: 760px; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 40px 90px rgba(0,0,0,.4); animation: slideIn .7s cubic-bezier(.2,.8,.2,1) both; }
.win-bar { height: 34px; background: #f1edf3; display: flex; align-items: center; gap: 7px; padding: 0 14px; color: #5b4a63; font: 700 13px var(--sans); }
.win-bar i { width: 11px; height: 11px; border-radius: 50%; background: #e0c9d4; }
.win-bar i:nth-child(1) { background: #ef6a6a; } .win-bar i:nth-child(2) { background: #f2c14e; } .win-bar i:nth-child(3) { background: #5ac17a; }
.win-bar span { margin-left: 10px; }
.win-bar.web { background: #eef3f4; }
.win-bar .url { flex: 1; background: #fff; border-radius: 999px; padding: 4px 14px; color: #2f4c55; font-weight: 600; margin-right: 40px; }
.win-view { position: relative; width: 760px; height: 475px; overflow: hidden; background: #fff; }
.win-view img { position: absolute; left: 0; top: 0; width: 760px; height: 475px; transform-origin: 0 0; will-change: transform, opacity; }
.cursor { position: absolute; left: 0; top: 0; width: 26px; height: 26px; z-index: 2; pointer-events: none; transition: opacity .2s; }
.cursor::before { content: ''; position: absolute; left: -3px; top: -2px; width: 22px; height: 30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 30'%3E%3Cpath d='M2 2 L2 24 L8 18.5 L12 28 L16 26.3 L12 17 L20 17 Z' fill='%23111' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.cursor .ripple { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; border: 3px solid #f2c14e; opacity: 0; }
.cursor.clicking .ripple { animation: ripple .5s ease-out; }
@keyframes ripple { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(1.6); } }

.privacy-card { position: absolute; right: 110px; top: 170px; width: 560px; background: #fff; color: var(--ink); border-radius: 22px; padding: 34px 40px; box-shadow: 0 30px 70px rgba(0,0,0,.35); animation: slideIn .6s both; display: flex; gap: 30px; align-items: center; }
.privacy-card .lock { font-size: 84px; animation: pop .7s .2s both; }
.privacy-card ul { margin: 0; padding: 0; list-style: none; }
.privacy-card li { font-size: 26px; font-weight: 700; padding: 10px 0; border-bottom: 1px solid var(--line); animation: slideIn .4s both; }
.privacy-card li:nth-child(2) { animation-delay: .25s; } .privacy-card li:nth-child(3) { animation-delay: .5s; border: 0; }
.privacy-card li::before { content: '✓  '; color: #1c6b4f; }
.outro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.outro .mark { width: 200px; height: 200px; animation: spinIn 1.1s cubic-bezier(.2,.8,.2,1) both; filter: drop-shadow(0 20px 30px rgba(0,0,0,.3)); }
.outro h2 { font-size: 96px; margin: 10px 0 0; line-height: 1; animation: rise .7s .45s both; }
.outro h2 .script { font-family: var(--script); font-weight: 400; color: #ffd1e3; }
.outro p { font-size: 26px; margin: 18px 0 0; animation: rise .7s .7s both; }
.outro .lockup { width: 680px; background: #fffaf5; border-radius: 28px; padding: 18px 26px; animation: pop .8s both; box-shadow: 0 30px 60px rgba(0,0,0,.3); }
.outro .url { margin-top: 30px; background: #fff; color: var(--c1); padding: 12px 26px; border-radius: 999px; font-weight: 800; font-size: 26px; animation: pop .6s .5s both; }
@keyframes spinIn { from { opacity: 0; transform: rotate(-120deg) scale(.4); } to { opacity: 1; transform: none; } }

.reel-poster { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(120deg, #1c2a2b, #69334a); text-align: center; }
.reel-poster[hidden] { display: none; }
.reel-poster img { width: 150px; filter: drop-shadow(0 16px 30px rgba(0,0,0,.3)); }
.reel-poster .script { font-family: var(--script); font-size: 30px; margin: 14px 0 0; }
.reel-poster h2 { font-size: 64px; margin: 0 0 24px; }
.reel-play { width: 110px; height: 110px; border-radius: 50%; border: 0; background: #fff; color: var(--teal-1); font-size: 44px; cursor: pointer; box-shadow: 0 16px 40px rgba(0,0,0,.3); padding-left: 10px; }
.reel-play:hover { transform: scale(1.06); }

.reel-controls { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: #151a26; color: #c9d0d9; font: 600 14px var(--sans); flex-wrap: wrap; }
.reel-controls button { background: #262d40; color: #fff; border: 0; border-radius: 8px; padding: 6px 12px; font: inherit; cursor: pointer; }
.reel-controls button[aria-current="true"] { background: var(--teal-1); box-shadow: inset 0 0 0 2px #fff; }
.reel-chapters { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.reel-chapters button { padding: 4px 8px; font-size: 13px; }
.record .reel-controls, .record .reel-poster { display: none !important; }
.reel-controls button { min-width: 44px; min-height: 44px; }
.reel-chapters { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
.reel-watermark img { width: 44px; height: 44px; }
.outro h2 { max-width: 1100px; font-size: 76px; }
@media (prefers-reduced-motion: reduce) {
  .reel-stage *, .reel-stage *::before, .reel-stage *::after { animation: none !important; transition: none !important; }
}