/* Moombee intro film: a code-driven motion piece (chapters, Ken Burns, kinetic type) like the influenScout intro */
.film { max-width: 1120px; margin: 0 auto; padding: 72px 16px 24px; }
.film-frame { position: relative; border-radius: 16px; overflow: clip; background: oklch(0.93 0.04 232); border: 1px solid oklch(0.85 0.03 240);
  box-shadow: 14px 14px 0 oklch(0.82 0.11 345 / 0.55), 0 40px 80px -40px oklch(0.4 0.08 250 / 0.5); }
.film-bar { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; background: #fff; border-bottom: 1px solid oklch(0.88 0.025 235);
  font: 600 13px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; color: oklch(0.45 0.04 255); }
.film-stage { position: relative; aspect-ratio: 16 / 9; overflow: clip; }
/* The film is designed at 1086x611 and scaled as one picture, so phones get the same 16:9 film */
.film-canvas { position: absolute; left: 0; top: 0; width: 1086px; height: 611px; container-type: size; zoom: var(--z, 1); }

/* The new scene fades in ON TOP of the old one; the old one only disappears afterwards (no washed-out mid-fade) */
.scene { position: absolute; inset: 0; z-index: 0; visibility: hidden; clip-path: circle(0% at 50% 50%); transition: visibility 0s linear 600ms; }
.scene.on { z-index: 1; visibility: visible; clip-path: circle(150% at 50% 50%); transition: clip-path 600ms cubic-bezier(0.77, 0, 0.175, 1), visibility 0s; }
.scene.on > :not(video) { animation: film-punch 600ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes film-punch { from { transform: scale(1.12); } }
.scene .kb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.3) translateY(3%); transition: transform 6.5s cubic-bezier(0.23, 1, 0.32, 1); }
video.kb, .scene.on video.kb { transform: none; transition: none; }
.scene.on .kb { transform: scale(1); }
.tint { position: absolute; inset: 0; background: linear-gradient(180deg, oklch(0.25 0.06 265 / 0.05), oklch(0.25 0.06 265 / 0.55)); }

/* Kinetic headline: each word rises in */
.ttl { position: absolute; left: 6%; right: 6%; bottom: 14%; z-index: 3; color: #fff; font-weight: 900; letter-spacing: -0.025em; line-height: 1.02;
  font-size: 66px; text-shadow: 0 2px 30px oklch(0.2 0.05 260 / 0.45); text-wrap: balance; }
.ttl .w { display: inline-block; opacity: 0; transform: translateY(70%) rotate(4deg) scale(0.9); filter: blur(8px); }
.scene.on .ttl .w { animation: film-word 420ms cubic-bezier(0.34, 1.45, 0.64, 1) forwards; animation-delay: calc(250ms + var(--n) * 70ms); }
@keyframes film-word { to { opacity: 1; transform: none; filter: none; } }
.sub { position: absolute; left: 6%; bottom: 7%; z-index: 3; color: oklch(0.97 0.01 250); font-size: 19px; font-weight: 700; opacity: 0; }
.scene.on .sub { animation: film-fade 400ms ease 700ms forwards; }
@keyframes film-fade { to { opacity: 1; } }

/* Accent shapes, in brand pink and sky blue */
.dot { position: absolute; z-index: 2; border-radius: 50%; background: oklch(0.82 0.11 345); transform: scale(0); }
.scene.on .dot { animation: film-pop 900ms cubic-bezier(0.34, 1.4, 0.64, 1) forwards; animation-delay: 300ms; }
.bar { position: absolute; z-index: 3; height: 12px; width: 0; border-radius: 6px; background: oklch(0.82 0.11 345); }
.scene.on .bar { animation: film-grow 500ms cubic-bezier(0.23, 1, 0.32, 1) 500ms forwards; }
@keyframes film-pop { to { transform: scale(1); } }
@keyframes film-grow { to { width: var(--bw, 180px); } }

/* Scene 1: collage grid */
.grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); }
.grid img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); }
.scene.on .grid img { animation: film-tile 500ms cubic-bezier(0.34, 1.4, 0.64, 1) forwards; animation-delay: calc(var(--n) * 60ms); }
@keyframes film-tile { from { opacity: 0; transform: scale(1.35) rotate(-3deg); } to { opacity: 1; transform: scale(1); } }
.bubble { position: absolute; z-index: 3; width: 86px; aspect-ratio: 1; border-radius: 50%; border: 4px solid #fff; object-fit: cover;
  box-shadow: 0 10px 30px oklch(0.3 0.06 260 / 0.35); transform: scale(0); }
.scene.on .bubble { animation: film-pop 800ms cubic-bezier(0.34, 1.5, 0.64, 1) forwards; animation-delay: calc(450ms + var(--n) * 150ms); }

/* Scene 2: split with phone + goal chips */
.split { position: absolute; inset: 0; display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; background: linear-gradient(135deg, oklch(0.94 0.05 145), oklch(0.96 0.03 200)); }
.split .copy2 { padding: 0 8%; color: oklch(0.29 0.055 258); }
.split h3 { font-size: 58px; font-weight: 900; letter-spacing: -0.025em; line-height: 1.02; }
.chips { display: grid; gap: 10px; margin-top: 22px; max-width: 340px; }
.chip { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px; padding: 12px 16px; font-weight: 800; font-size: 17px;
  box-shadow: 0 6px 18px oklch(0.4 0.06 250 / 0.12); opacity: 0; transform: translateX(-24px); }
.chip i { margin-left: auto; width: 26px; height: 26px; border-radius: 8px; background: oklch(0.92 0.02 250); position: relative; }
.chip i::after { content: ""; position: absolute; left: 9px; top: 5px; width: 6px; height: 11px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg) scale(0); }
.scene.on .chip { animation: film-chipin 600ms cubic-bezier(0.23, 1, 0.32, 1) forwards; animation-delay: calc(450ms + var(--n) * 260ms); }
.scene.on .chip i { animation: film-tick 300ms ease forwards; animation-delay: calc(800ms + var(--n) * 260ms); }
.scene.on .chip i::after { animation: film-tickmark 300ms ease forwards; animation-delay: calc(850ms + var(--n) * 260ms); }
@keyframes film-chipin { to { opacity: 1; transform: none; } }
@keyframes film-tick { to { background: oklch(0.72 0.15 150); } }
@keyframes film-tickmark { to { transform: rotate(45deg) scale(1); } }
.fphone { position: absolute; right: 9%; top: 8%; height: 84%; width: auto; aspect-ratio: 486 / 1054; border-radius: 30px; padding: 7px; background: oklch(0.22 0.03 260);
  box-shadow: 0 30px 60px -20px oklch(0.3 0.06 260 / 0.5); transform: translateY(30%) rotate(4deg); opacity: 0; }
.fphone img { position: absolute; inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); object-fit: cover; border-radius: 24px; }
.scene.on .fphone { animation: film-phone 700ms cubic-bezier(0.34, 1.3, 0.64, 1) 150ms forwards; }
@keyframes film-phone { to { transform: rotate(-2deg); opacity: 1; } }

/* Scene 3: sound bars */
.wave { position: absolute; right: 7%; bottom: 10%; z-index: 3; display: flex; gap: 6px; align-items: end; height: 60px; }
.wave span { width: 7px; height: 20%; border-radius: 4px; background: #fff; opacity: 0.9; }
.scene.on .wave span { animation: film-wave 1.4s ease-in-out infinite alternate; animation-delay: calc(var(--n) * -180ms); }
@keyframes film-wave { to { height: 100%; } }

/* Scene 5: two sleeping videos */
.duo { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.duo video { width: 100%; height: 100%; object-fit: cover; }

/* Scene 6: join */
.join6 { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; background: radial-gradient(80% 80% at 50% 30%, oklch(0.97 0.03 345), oklch(0.9 0.06 236)); }
.join6 .mark { font-size: 92px; font-weight: 900; letter-spacing: -0.03em; color: oklch(0.29 0.055 258); }
.join6 p { color: oklch(0.4 0.045 255); font-size: 22px; font-weight: 700; margin-top: 6px; }
.join6 a { display: inline-block; margin-top: 22px; padding: 14px 26px; border-radius: 999px; background: oklch(0.29 0.055 258); color: #fff; font-weight: 900; text-decoration: none;
  transform: scale(0.9); opacity: 0; }
.scene.on .join6 a { animation: film-rise2 500ms cubic-bezier(0.34, 1.4, 0.64, 1) 500ms forwards; }
@keyframes film-rise2 { to { transform: none; opacity: 1; } }
.join6 .faces { display: flex; justify-content: center; gap: 14px; margin-bottom: 14px; }
.join6 .faces img { position: static; width: 110px; }

/* Chapter bar under the frame */
.chapters { display: grid; grid-template-columns: 52px repeat(6, 1fr); gap: 8px; margin-top: 14px; }
.chapters button { position: relative; height: 48px; border: 0; border-radius: 10px; background: oklch(0.93 0.035 345); color: oklch(0.35 0.05 260); overflow: hidden;
  font: 700 12px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 0.08em; text-align: left; padding: 0 12px; cursor: pointer; }
.chapters button .fill { position: absolute; inset: 0; width: 0; background: oklch(0.82 0.11 345 / 0.55); }
.chapters button span { position: relative; }
.chapters button.done .fill { width: 100%; }
.chapters .pp { background: oklch(0.29 0.055 258); color: #fff; text-align: center; padding: 0; font-size: 16px; }
.chapters button:focus-visible { outline: 3px solid oklch(0.62 0.12 245); outline-offset: 2px; }
@media (max-width: 760px) { .chapters { grid-template-columns: 44px repeat(6, 1fr); gap: 4px; } .chapters button { font-size: 0; padding: 0; } }
@media (prefers-reduced-motion: reduce) { .scene .kb, .scene * { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } }

/* Montage: quick cuts between several shots inside one chapter */
.montage { position: absolute; inset: 0; }
.montage > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.montage > .cur { opacity: 1; animation: film-cut 1.4s cubic-bezier(0.23, 1, 0.32, 1) both; }
@keyframes film-cut { from { transform: scale(1.35) translateX(var(--dx, 2%)); filter: brightness(1.25); } 20% { filter: none; } to { transform: scale(1.04); } }

/* Beats: elements with data-at get .go when the scene clock reaches that time (pauses with the film) */
.card { position: absolute; z-index: 3; width: 22%; aspect-ratio: 4 / 5; border-radius: 18px; border: 6px solid #fff; object-fit: cover; box-shadow: 0 24px 50px -16px oklch(0.3 0.06 260 / 0.55); opacity: 0; }
.card.l { left: 8%; top: 10%; transform: translateX(-160%) rotate(-24deg); }
.card.r { right: 8%; top: 6%; transform: translateX(160%) rotate(24deg); }
.card.go { opacity: 1; transition: transform 650ms cubic-bezier(0.34, 1.35, 0.64, 1), opacity 200ms; }
.card.l.go { transform: rotate(-7deg); animation: film-bob 2.4s ease-in-out 700ms infinite alternate; }
.card.r.go { transform: rotate(6deg); animation: film-bob 2.2s ease-in-out 700ms infinite alternate-reverse; }
@keyframes film-bob { to { translate: 0 -10px; } }

.beam { position: absolute; z-index: 4; padding: 8px 14px; border-radius: 999px; background: oklch(0.86 0.12 85); color: oklch(0.3 0.06 60); font-weight: 900; font-size: 17px;
  box-shadow: 0 8px 20px oklch(0.5 0.1 80 / 0.35); opacity: 0; transform: scale(0.4); pointer-events: none; }
.beam.go { animation: film-beam 1.3s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
@keyframes film-beam { 25% { opacity: 1; transform: scale(1.1); } 60% { opacity: 1; transform: scale(1) translateY(-14px); } to { opacity: 0; transform: translateY(-50px); } }
.meter { margin-top: 18px; max-width: 340px; height: 14px; border-radius: 7px; background: #fff; overflow: clip; box-shadow: inset 0 0 0 2px oklch(0.9 0.03 150); }
.meter b { display: block; height: 100%; width: 6%; border-radius: 7px; background: linear-gradient(90deg, oklch(0.78 0.14 150), oklch(0.86 0.12 85)); transition: width 500ms cubic-bezier(0.34, 1.3, 0.64, 1); }
.meter b.s1 { width: 38%; } .meter b.s2 { width: 68%; } .meter b.s3 { width: 100%; }
.fphone img.alt { opacity: 0; transition: opacity 250ms; } .fphone img.alt.go { opacity: 1; }
.scene.on .fphone.go { animation: film-phone 700ms cubic-bezier(0.34, 1.3, 0.64, 1) 150ms forwards, film-shake 450ms ease; }
@keyframes film-shake { 30% { rotate: -5deg; } 60% { rotate: 2deg; } }

.heart { position: absolute; z-index: 3; bottom: -8%; width: var(--hs, 26px); aspect-ratio: 1; background: oklch(0.8 0.13 350); transform: rotate(45deg); opacity: 0; }
.heart::before, .heart::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; }
.heart::before { left: -50%; } .heart::after { top: -50%; }
.scene.on .heart { animation: film-float 3.2s ease-in infinite; animation-delay: calc(500ms + var(--n) * 420ms); }
@keyframes film-float { 0% { opacity: 0; translate: 0 0; } 15% { opacity: 0.95; } 100% { opacity: 0; translate: var(--hx, 20px) -110cqh; } }
.love-pop { position: absolute; z-index: 4; right: 8%; top: 12%; padding: 10px 16px; border-radius: 16px; background: #fff; color: oklch(0.35 0.08 350); font-weight: 900;
  font-size: 18px; box-shadow: 0 12px 30px oklch(0.3 0.06 260 / 0.3); opacity: 0; transform: scale(0.5) rotate(-6deg); }
.love-pop.go { opacity: 1; transform: rotate(3deg); transition: transform 500ms cubic-bezier(0.34, 1.6, 0.64, 1), opacity 150ms; }

.duo video { transform: translateY(100%); }
.scene.on .duo video { animation: film-up 700ms cubic-bezier(0.23, 1, 0.32, 1) forwards; }
.scene.on .duo video + video { animation-delay: 250ms; }
@keyframes film-up { to { transform: none; } }
.star { position: absolute; z-index: 3; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 3px #fff8; opacity: 0; }
.scene.on .star { animation: film-twinkle 1.6s ease-in-out infinite alternate; animation-delay: calc(var(--n) * 230ms); }
@keyframes film-twinkle { to { opacity: 1; scale: 1.6; } }
.timer { position: absolute; z-index: 4; right: 6%; top: 10%; padding: 10px 16px; border-radius: 14px; background: oklch(0.3 0.06 265 / 0.55); backdrop-filter: blur(8px);
  color: #fff; font: 800 21px/1 ui-monospace, Consolas, monospace; opacity: 0; }
.scene.on .timer { animation: film-fade 300ms ease 900ms forwards; }

.scene.on .join6 a.go { animation: film-rise2 500ms cubic-bezier(0.34, 1.4, 0.64, 1) forwards, film-pulse 900ms ease-in-out 500ms infinite alternate; }
@keyframes film-pulse { from { transform: none; opacity: 1; } to { transform: scale(1.07); opacity: 1; box-shadow: 0 0 0 10px oklch(0.82 0.11 345 / 0.35); } }
.conf { position: absolute; z-index: 2; top: 50%; left: 50%; width: 16px; height: 16px; border-radius: 4px; background: var(--c); opacity: 0; }
.conf.go { animation: film-burst 2.2s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
@keyframes film-burst { 15%, 70% { opacity: 1; } to { opacity: 0; translate: var(--x) var(--y); rotate: 360deg; } }

/* Portrait scenes: the 9:16 picture stays whole and sharp in a card; a blurred copy fills the frame behind it */
.pbg { position: absolute; inset: -40px; filter: blur(28px) saturate(1.15); }
.pbg > img, .pbg.montage > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcard { position: absolute; z-index: 2; right: 8%; top: 7%; height: 86%; aspect-ratio: 9 / 16; border-radius: 22px; overflow: clip; border: 6px solid #fff;
  box-shadow: 0 30px 60px -20px oklch(0.25 0.06 260 / 0.55); }
.pcard video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl .tint { background: linear-gradient(90deg, oklch(0.25 0.06 265 / 0.5), oklch(0.25 0.06 265 / 0.1) 70%); }
.pl .ttl { right: 42%; bottom: 20%; }
.pl .sub { bottom: 12%; }
.pl .wave { right: auto; left: 6%; bottom: auto; top: 12%; }
.pl .love-pop { right: 31%; top: 16%; }

/* More beats in LOVE and NIGHT */
.scene.on .pcard.go { animation: film-squeeze 700ms cubic-bezier(0.34, 1.5, 0.64, 1); }
@keyframes film-squeeze { 35% { scale: 1.06 0.95; } 65% { scale: 0.97 1.04; } }
.conf.hb { width: 22px; height: 22px; border-radius: 0; background: oklch(0.8 0.13 350); clip-path: path('M11 20 L2 11 A5 5 0 0 1 11 4 A5 5 0 0 1 20 11 Z'); top: 45%; }
.dim { position: absolute; inset: 0; z-index: 2; background: oklch(0.2 0.06 270); opacity: 0; pointer-events: none; }
.dim.go { opacity: 0.35; transition: opacity 1.6s ease; }
.love-pop.fnight { background: oklch(0.3 0.06 265 / 0.6); color: #fff; backdrop-filter: blur(8px); }
/* Phone: the two square sleep videos play one after the other at full size instead of two cropped halves */