.cloud-image{overflow:hidden}
.vanilla-vortex-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;pointer-events:none;transition:opacity .55s ease;z-index:2}
.vanilla-film-playing .vanilla-vortex-film{opacity:1}
.vanilla-awake.vanilla-film-playing .vanilla-atmosphere{opacity:0}
@media(max-width:1100px) and (min-width:761px){.vanilla-vortex-film{object-position:60% center}}
@media(max-width:760px){.vanilla-vortex-film{object-position:72% center}}
@media(prefers-reduced-motion:reduce){.vanilla-vortex-film{display:none;transition:none}}
.vanilla-atmosphere{position:absolute;inset:0 -3% 0 32%;pointer-events:none;opacity:0;transition:opacity .55s ease;transform:translate3d(var(--scent-x,0px),var(--scent-y,0px),0);z-index:1}
.vanilla-awake .vanilla-atmosphere{opacity:1}
.vanilla-silk,.vanilla-motes{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vanilla-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 58% 65%,transparent 23%,#fff8e840 48%,transparent 78%);opacity:0}
.milk-veil{opacity:0;transform-origin:center}
.vanilla-awake .milk-veil-left{animation:milk-descend 4.8s ease-in-out both}
.vanilla-awake .milk-veil-right{animation:milk-descend 4.5s .2s ease-in-out both}
.vanilla-awake .vanilla-thread{animation:milk-descend 4.2s .4s ease-in-out both}
.vanilla-awake .milk-cloud{animation:cream-rise 4.8s ease-in-out both}
.vanilla-awake .vanilla-glow{animation:cream-glow 4.8s ease-in-out both}
.vanilla-motes i{position:absolute;left:var(--left);top:82%;width:7px;height:13px;border-radius:70% 20% 70% 20%;background:#fff8e6;opacity:0}
.vanilla-awake .vanilla-motes i{animation:vanilla-float 3.5s var(--delay) ease-out both}
.vanilla-awaken{position:absolute;right:5%;top:24px;z-index:2;display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 18px;border:1px solid #164e6850;border-radius:30px;background:#fffdf3ed;color:#164e68;font:500 12px var(--sans);cursor:pointer;box-shadow:0 4px 22px #164e6810;transition:background .2s}
.vanilla-awaken:hover{background:#fff}.vanilla-awaken:focus-visible{outline:3px solid #164e68;outline-offset:4px}.vanilla-awaken-icon{font-size:23px;line-height:1}
.vanilla-awaken[aria-pressed=true]{background:#164e68;color:#fffdf3}
@keyframes milk-descend{0%{opacity:0;transform:translateY(-140px) scaleX(.9)}28%{opacity:1}70%{opacity:.8}100%{opacity:0;transform:translateY(120px) scaleX(1.24)}}
@keyframes cream-rise{0%{opacity:0;transform:translateY(100px) scaleX(.95)}35%{opacity:.85}100%{opacity:0;transform:translateY(-65px) scaleX(1.12)}}
@keyframes cream-glow{0%,100%{opacity:0}45%{opacity:1}}
@keyframes vanilla-float{0%{opacity:0;transform:translateY(0) rotate(-25deg)}25%{opacity:.9}100%{opacity:0;transform:translateY(-220px) translateX(38px) rotate(110deg)}}
@media(max-width:760px){.vanilla-atmosphere{left:0}.vanilla-awaken{top:auto;bottom:380px;left:7%;right:auto;font-size:12px}.cloud-credits{pointer-events:none}}
@media(prefers-reduced-motion:reduce){.vanilla-atmosphere,.vanilla-awaken{transition:none;transform:none}.vanilla-awake .milk-veil,.vanilla-awake .vanilla-motes i,.vanilla-awake .vanilla-glow{animation:none}.vanilla-awake .vanilla-glow{opacity:1}}