.ocean-finale[hidden],.birthday-video[hidden],.video-placeholder[hidden],.video-error[hidden],.birthday-closure[hidden],.birthday-closure p[hidden]{display:none}
.ocean-finale{position:absolute;top:var(--finale-top);left:0;width:100%;isolation:isolate;background:linear-gradient(180deg,transparent 0%,#021c2c99 20%,#021622 46%,#021622 100%);color:#f2e6d7;overflow:hidden}
.dancing-light{height:84svh;min-height:520px;max-height:850px;position:relative;margin:0 auto;max-width:480px}
.video-destination{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:38px 24px max(100px,env(safe-area-inset-bottom));min-height:100svh;background:#021622}
.video-preface{text-align:center;margin:0 auto 38px;max-width:32rem}
.video-preface h2{font:400 clamp(1.85rem,7.7vw,2.7rem)/1.24 OceanSerif,Georgia,serif;letter-spacing:-.025em;margin:0 auto 22px;max-width:20ch;text-wrap:balance}
.video-preface>p{font:italic clamp(1.2rem,4.8vw,1.6rem)/1.5 OceanSerif,Georgia,serif;color:#c0d6db;margin:0 auto;max-width:29ch;text-wrap:balance}
.video-preface h2,.video-preface>p,.birthday-player{opacity:0;transform:translateY(7px);transition:opacity 1.2s ease,transform 1.4s ease}
.video-revealed .video-preface h2,.second-line-revealed .video-preface>p,.player-revealed .birthday-player{opacity:1;transform:none}

.birthday-player{position:relative;background:#061b27;border:1px solid #94b9c41e;border-radius:3px;overflow:hidden;box-shadow:0 16px 52px #00000019;isolation:isolate}
.video-placeholder{min-height:250px;aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px 20px;background:linear-gradient(160deg,#0b2532,#051722)}
.placeholder-label{font:400 .75rem/1.5 system-ui,sans-serif;letter-spacing:.19em;color:#8ba7b1}
.video-placeholder>p{font:400 clamp(1.5rem,6vw,2rem)/1.3 OceanSerif,Georgia,serif;margin:16px 0 7px;color:#c9d7d9}
.placeholder-detail{font:italic 1.05rem/1.5 OceanSerif,Georgia,serif;color:#94aab2}
.birthday-video{display:block;width:100%;max-height:70svh;aspect-ratio:16/9;object-fit:contain;background:#020c12}
.video-error{font:400 1.1rem/1.5 OceanSerif,Georgia,serif;text-align:center;padding:16px;color:#d3dfe1}
.birthday-closure{min-height:160px;margin:52px auto 0;text-align:center;opacity:0;transition:opacity 1.8s ease}
.birthday-closure.is-visible{opacity:1}
.birthday-closure p{font:400 clamp(2rem,8.6vw,3.2rem)/1.2 OceanSerif,Georgia,serif;letter-spacing:-.02em;margin:0;text-wrap:balance}
.closure-line{display:block;width:46px;height:1px;margin:27px auto 0;background:linear-gradient(90deg,transparent,#b8d4d666,transparent)}
@media(prefers-reduced-motion:reduce){.video-preface h2,.video-preface>p,.birthday-player{transform:none}.video-preface h2,.video-preface>p,.birthday-player,.birthday-closure{transition:opacity .2s ease!important}}
/* Articulated light apparition; effects remain inside this scene. */
.ballet-stage{position:absolute;top:7%;left:50%;width:min(100%,460px);aspect-ratio:1;transform:translateX(-50%);pointer-events:none;opacity:1}
.ballet-canvas{display:block;width:100%;height:100%}
.ballet-moonbeam{position:absolute;inset:0 4% 10%;pointer-events:none;opacity:0;background:conic-gradient(from 157deg at 54% -12%,transparent 0deg,#bbdfec08 11deg,#d7f0f00b 20deg,transparent 35deg);mask-image:linear-gradient(#000, #0009 45%,transparent 95%)}
.light-travelling .ballet-moonbeam{animation:ballet-shaft 6.6s ease both}
.light-arrived .ballet-stage,.light-arrived .ballet-moonbeam{opacity:0;transition:opacity .8s ease}
@keyframes ballet-shaft{0%,100%{opacity:0}24%,70%{opacity:1}}
@media(prefers-reduced-motion:reduce){.ballet-moonbeam{display:none}.light-arrived .ballet-stage{transition:opacity .2s ease!important}}

/* The recording is portrait: fit the entire frame and native controls. */
.birthday-player.has-video{width:min(100%,380px,39.38vh);width:min(100%,380px,39.38svh);margin-inline:auto}
.birthday-player.has-video .birthday-video{width:100%;height:auto;aspect-ratio:512/910;object-fit:contain;max-height:70vh;max-height:70svh}