/* Only the three birthday openings enter this theatre. The complete 9:16 painting stays in frame. */
.birthday-motion{--birthday-pink:#ddb4bc;--birthday-blue:#93b4c9;--birthday-gold:#dfbc79;--birthday-cream:#fff5d8;perspective:1100px;isolation:isolate}
.birthday-motion .oc-cinematic-backdrop{background-image:none!important}
.birthday-painted-scene{position:absolute;inset:0;transform-origin:50% 54%;will-change:transform,opacity}
.birthday-painted-scene>img{display:block;width:100%;height:100%;object-fit:contain}
.birthday-dawn{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 24%,#ffe3a766,transparent 60%);opacity:0;mix-blend-mode:soft-light}
.birthday-light-strand{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.birthday-light-halo{fill:#ffe0a4;opacity:0}.birthday-light-core{fill:#fff6d6;opacity:0}
.birthday-candle-glows{position:absolute;inset:0;z-index:3;pointer-events:none}.birthday-candle-glows>i{position:absolute;width:1%;height:1.8%;border-radius:60% 60% 45% 45%;background:#fff8ce;box-shadow:0 0 8px 3px #ffdc8588;opacity:0;transform-origin:center bottom}
.oc-playing .birthday-candle-glows>i{animation:birthday-candle-light 1.4s ease both,birthday-candle-flicker 1.7s ease-in-out infinite alternate;animation-delay:calc(1.8s + var(--i)*.3s),calc(3.2s + var(--i)*.3s)}
.birthday-sparkles,.birthday-confetti,.birthday-petals{position:absolute;inset:0;z-index:5;overflow:hidden;pointer-events:none}
.birthday-sparkles>i{position:absolute;left:var(--x);top:var(--y);width:4px;height:4px;border-radius:50%;background:#ffefc1;box-shadow:0 0 10px 2px #e7bf7e77;opacity:0;transform:scale(.2)}
.birthday-paper-gate{position:absolute;inset-block:0;width:50.4%;z-index:8;display:grid;place-items:center;backface-visibility:hidden;background:linear-gradient(95deg,var(--oc-paper),#eddfc8,var(--oc-paper));box-shadow:0 0 30px #5e402d1a;border:1px solid #c8ad7f70;transform-style:preserve-3d}
.birthday-paper-gate:before{content:'';position:absolute;inset:3% 8%;border:1px solid #c1a67888;border-radius:150px 150px 5px 5px}.birthday-paper-gate:after{content:'';position:absolute;inset:5% 12%;border:1px solid #c1a67844;border-radius:150px 150px 5px 5px}.birthday-paper-gate>span{font:75px var(--serif);color:var(--oc-gold);opacity:.7}.birthday-paper-gate.gate-left{left:0;transform-origin:left}.birthday-paper-gate.gate-right{right:0;transform-origin:right}.gate-right>span{transform:scaleX(-1)}
.birthday-wish-ring{position:absolute;left:50%;top:45%;width:30%;aspect-ratio:1;border:1px solid #ffe5a9;border-radius:50%;z-index:3;opacity:0;box-shadow:0 0 40px #ffe3a966,inset 0 0 30px #ffe3a933;pointer-events:none}
.birthday-butterfly{position:absolute;z-index:6;left:var(--start-x);top:var(--start-y);width:var(--butterfly-size);aspect-ratio:3/2;opacity:0;pointer-events:none;transform-style:preserve-3d;perspective:160px}
.birthday-wing{position:absolute;inset:0;transform-origin:50% 50%;backface-visibility:visible}.birthday-wing img{width:100%;height:100%;object-fit:contain}.wing-left{clip-path:inset(0 50% 0 0)}.wing-right{clip-path:inset(0 0 0 50%)}
.birthday-gift-stage{position:absolute;z-index:6;left:25%;top:52%;width:50%;aspect-ratio:1;opacity:0;pointer-events:none}
.birthday-gift-body,.birthday-gift-lid{position:absolute;inset:0}.birthday-gift-stage img{width:100%;height:100%;object-fit:contain}.birthday-gift-body{clip-path:inset(55.2% 0 0)}.birthday-gift-lid{clip-path:inset(0 0 44.8%);transform-origin:30% 55%}
.birthday-gift-light{position:absolute;inset:27% 5% 5%;border-radius:50%;background:radial-gradient(ellipse,#fff9da,#ffe29b66 35%,transparent 68%);opacity:0;mix-blend-mode:screen}
.birthday-gift-stars{position:absolute;inset:0;z-index:2}.birthday-gift-stars i{position:absolute;left:50%;top:53%;width:7px;height:7px;background:#ffe7a0;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:0}
.birthday-flight{position:absolute;left:0;top:12%;width:36%;aspect-ratio:3/2;z-index:7;opacity:0;pointer-events:none}.birthday-flight>img{position:relative;width:100%;height:100%;object-fit:contain;z-index:1;filter:drop-shadow(0 6px 4px #4e392b22)}
.birthday-flight-trail{position:absolute;width:170%;height:5px;right:80%;top:55%;background:linear-gradient(90deg,transparent,#ffeacb88,#fff5df);border-radius:50%;box-shadow:0 0 9px #ffe8b4;transform-origin:right}
.birthday-propeller{position:absolute;right:6%;top:30%;width:3%;height:43%;border-radius:50%;background:#dab78399;z-index:2;box-shadow:0 0 5px #f5dba088}
.birthday-balloon-bouquet{position:absolute;z-index:6;width:29%;height:44%;opacity:0;pointer-events:none}.birthday-balloon-bouquet>img{width:100%;height:100%;object-fit:contain}.bouquet-0{left:-5%;top:51%;--rise:-42%}.bouquet-1{right:-7%;top:39%;width:26%;--rise:-48%}.bouquet-2{left:32%;top:55%;width:35%;--rise:-75%}
.birthday-confetti i{position:absolute;left:var(--x);top:-5%;width:5px;height:10px;border-radius:1px;background:var(--birthday-gold);opacity:0;transform:translateY(-20px)}.birthday-confetti i:nth-child(4n+1){background:var(--birthday-pink)}.birthday-confetti i:nth-child(4n+2){background:var(--birthday-blue);border-radius:50%}.birthday-confetti i:nth-child(4n+3){background:#fff0c8;width:4px;height:4px}
.birthday-petals i{position:absolute;left:var(--x);top:-7%;width:12px;height:16px;border-radius:90% 10% 80% 20%;background:radial-gradient(at 25% 15%,#fff4ec,#dfb0b9 70%);opacity:0;box-shadow:0 1px 3px #80485613}
.oc-playing .birthday-painted-scene{animation:birthday-paint-arrival 3.6s cubic-bezier(.18,.6,.22,1) both,birthday-breath 9s ease-in-out 3.6s both}
.oc-playing .birthday-dawn{animation:birthday-dawn 6s ease .5s both}
.oc-playing .birthday-paper-gate.gate-left{animation:birthday-gate-left 2.8s cubic-bezier(.2,.65,.2,1) both}.oc-playing .birthday-paper-gate.gate-right{animation:birthday-gate-right 2.8s cubic-bezier(.2,.65,.2,1) .14s both}
.oc-playing .birthday-light-halo{animation:birthday-bulb-halo 2s ease both;animation-delay:calc(.8s + var(--i)*.15s)}.oc-playing .birthday-light-core{animation:birthday-bulb-core 1.3s ease both;animation-delay:calc(.8s + var(--i)*.15s)}
.oc-playing .birthday-sparkles>i{animation:birthday-sparkle 3.1s ease-in-out infinite;animation-delay:calc(1.2s + var(--i)*.21s)}
.oc-playing .birthday-wish-ring{animation:birthday-wish-ring 2.5s ease-out 4.6s both}
.oc-playing .birthday-butterfly{animation:birthday-butterfly-flight 8s cubic-bezier(.3,.1,.4,1) both;animation-delay:calc(2.4s + var(--i)*.9s)}
.oc-playing .birthday-wing.wing-left{animation:birthday-wing-left .46s ease-in-out infinite alternate}.oc-playing .birthday-wing.wing-right{animation:birthday-wing-right .46s ease-in-out infinite alternate}
.oc-playing .birthday-gift-stage{animation:birthday-gift-arrival 7.2s ease 1.4s both}.oc-playing .birthday-gift-lid{animation:birthday-gift-unbox 3.8s cubic-bezier(.25,.6,.2,1) 3s both}.oc-playing .birthday-gift-light{animation:birthday-gift-glow 3.6s ease 3.5s both}.oc-playing .birthday-gift-stars i{animation:birthday-gift-star 2.2s ease-out both;animation-delay:calc(3.8s + var(--i)*.07s)}
.oc-playing .birthday-flight{animation:birthday-plane-flight 6.3s cubic-bezier(.25,.2,.45,1) 3.6s both}.oc-playing .birthday-propeller{animation:birthday-propeller .07s linear infinite}
.oc-playing .birthday-balloon-bouquet{animation:birthday-balloons-rise 9.6s cubic-bezier(.18,.4,.45,1) both;animation-delay:calc(.8s + var(--i)*.7s)}
.oc-playing .birthday-confetti i{animation:birthday-confetti-fall 5.1s linear both;animation-delay:calc(5.5s + var(--i)*.07s)}.oc-playing .birthday-petals i{animation:birthday-petal-fall 8s ease-in-out both;animation-delay:calc(1.4s + var(--i)*.3s)}
.oc-opening:has(.birthday-stage) .oc-opening-copy{z-index:8;inset:auto 7% 7%;text-shadow:none}.oc-playing:has(.birthday-stage) .oc-opening-copy{animation:birthday-name-arrival 2.1s cubic-bezier(.2,.6,.2,1) 7.8s both}.oc-opening:has(.birthday-stage) .oc-opening-copy>p,.oc-opening:has(.birthday-stage) .oc-opening-copy>span{background:color-mix(in srgb,var(--oc-paper) 88%,transparent);border-radius:18px;padding:2px 9px;display:table;margin-inline:auto}.oc-opening:has(.birthday-stage) .envelope-play-status{font-size:11px}
.oc-opening:has(.birthday-stage){overflow:clip}
html:has(body.oc-intro-open .birthday-stage){overflow:hidden}
.oc-dismissed:has(.birthday-stage){transition:opacity 1.2s ease,visibility 1.2s}
.oc-opening .birthday-pause{position:absolute;z-index:10;right:18px;bottom:19px;width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--oc-gold);border-radius:50%;background:var(--oc-paper);color:var(--oc-ink);font-size:17px;line-height:1;cursor:pointer}.oc-opening:has(.birthday-stage) .envelope-play-status{inset-inline:65px}
.birthday-ambient .birthday-paper-gate,.birthday-ambient .birthday-butterfly{display:none}.birthday-ambient .birthday-light-halo{opacity:.22}.birthday-ambient .birthday-light-core{opacity:.7}.birthday-ambient .birthday-sparkles>i{animation:birthday-sparkle 5s ease-in-out infinite;animation-delay:calc(var(--i)*-.8s)}.phone-tour-paused .birthday-ambient *{animation-play-state:paused!important}
@keyframes birthday-gate-left{0%,8%{transform:none;opacity:1}75%{opacity:1}100%{transform:perspective(1000px) rotateY(-105deg);opacity:0}}
@keyframes birthday-gate-right{0%,8%{transform:none;opacity:1}75%{opacity:1}100%{transform:perspective(1000px) rotateY(105deg);opacity:0}}
@keyframes birthday-paint-arrival{from{opacity:.4;transform:scale(.94);filter:brightness(.7)}to{opacity:1;transform:scale(1);filter:brightness(1)}}
@keyframes birthday-breath{0%,100%{transform:scale(1)}50%{transform:scale(.985)}}
@keyframes birthday-dawn{0%{opacity:0}45%{opacity:.9}100%{opacity:.3}}
@keyframes birthday-candle-light{from{opacity:0;transform:scale(.1)}to{opacity:.8;transform:scale(1)}}@keyframes birthday-candle-flicker{from{transform:scale(.8,.9);opacity:.6}to{transform:scale(1,1.1);opacity:.9}}
@keyframes birthday-bulb-halo{0%{opacity:0;transform:scale(.6);transform-origin:center;transform-box:fill-box}50%{opacity:.65}100%{opacity:.2}}
@keyframes birthday-bulb-core{0%{opacity:0}45%{opacity:1}100%{opacity:.8}}
@keyframes birthday-sparkle{0%,100%{opacity:0;transform:translateY(5px) scale(.2)}45%{opacity:.85;transform:translateY(-5px) scale(1.05)}}
@keyframes birthday-wish-ring{from{opacity:.7;transform:translate(-50%,-50%) scale(.2)}to{opacity:0;transform:translate(-50%,-50%) scale(3.8)}}
@keyframes birthday-butterfly-flight{0%{opacity:0;transform:translate(-20px,110px) rotate(-18deg) scale(.6)}12%{opacity:1}35%{transform:translate(32px,-15px) rotate(15deg) scale(1)}65%{transform:translate(-12px,-100px) rotate(-13deg) scale(.85)}88%{opacity:1}100%{opacity:0;transform:translate(55px,-220px) rotate(8deg) scale(.55)}}
@keyframes birthday-wing-left{from{transform:rotateY(8deg)}to{transform:rotateY(65deg)}}@keyframes birthday-wing-right{from{transform:rotateY(-8deg)}to{transform:rotateY(-65deg)}}
@keyframes birthday-gift-arrival{0%{opacity:0;transform:translateY(100px) scale(.45) rotate(-7deg)}22%{opacity:1;transform:translateY(0) scale(1) rotate(0)}75%{opacity:1;transform:none}100%{opacity:0;transform:translateY(30px) scale(.78)}}
@keyframes birthday-gift-unbox{0%,10%{transform:none}25%{transform:translateY(-4%) rotate(-4deg)}75%,100%{transform:translate(-9%,-44%) rotate(-17deg)}}
@keyframes birthday-gift-glow{0%,100%{opacity:0;transform:scale(.6)}40%{opacity:1;transform:scale(1.4)}}
@keyframes birthday-gift-star{0%{opacity:0;transform:rotate(var(--angle)) translateY(0) scale(.2)}20%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateY(-95px) scale(1.5)}}
@keyframes birthday-plane-flight{0%{opacity:0;transform:translateX(-150%) translateY(80px) rotate(-15deg) scale(.5)}12%{opacity:1}48%{transform:translateX(90%) translateY(-10px) rotate(3deg) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateX(360%) translateY(-110px) rotate(-14deg) scale(.7)}}
@keyframes birthday-propeller{to{transform:rotateX(180deg)}}
@keyframes birthday-balloons-rise{0%{opacity:0;transform:translateY(95%) rotate(-5deg) scale(.75)}18%{opacity:1}45%{transform:translate(8px,-10%) rotate(5deg) scale(1)}78%{opacity:1;transform:translate(-8px,var(--rise)) rotate(-4deg)}100%{opacity:0;transform:translate(12px,-150%) rotate(5deg) scale(.8)}}
@keyframes birthday-confetti-fall{0%{opacity:0;transform:translate(0,0) rotate(0)}10%{opacity:.9}85%{opacity:.75}100%{opacity:0;transform:translate(var(--drift),690px) rotate(580deg)}}
@keyframes birthday-petal-fall{0%{opacity:0;transform:translate(0,0) rotate(0)}15%{opacity:.7}80%{opacity:.6}100%{opacity:0;transform:translate(38px,640px) rotate(330deg)}}
@keyframes birthday-name-arrival{from{opacity:0;transform:translateY(18px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@media(prefers-reduced-motion:reduce){.birthday-motion *,.oc-playing:has(.birthday-stage) .oc-opening-copy{animation:none!important;transition:none!important}.birthday-stage .birthday-paper-gate,.birthday-confetti,.birthday-petals,.birthday-butterfly,.birthday-flight,.birthday-gift-stage,.birthday-balloon-bouquet{display:none!important}.birthday-painted-scene{opacity:1;transform:none;filter:none}.birthday-light-core{opacity:.65}}