/* A little more magic: CSS does the drifting; JS adds interaction. */
.hero{isolation:isolate}
.hero-copy,.hero-art{z-index:1}
.hero-copy{position:relative}
.daydream-atmosphere{position:absolute;inset:0 -35px;z-index:-1;overflow:hidden;pointer-events:none;contain:paint}
.sky-cloud{position:absolute;width:440px;height:180px;border-radius:50%;background:radial-gradient(ellipse at 30% 60%,#fff 0 16%,transparent 60%),radial-gradient(ellipse at 70% 60%,#fff 0 20%,transparent 60%),radial-gradient(ellipse at 53% 48%,#d7ebfa 0 23%,transparent 64%);filter:blur(14px);opacity:.85;animation:cloud-drift 15s ease-in-out infinite alternate}
.sky-cloud-one{top:5%;left:-160px;animation-delay:-4s}
.sky-cloud-two{bottom:5%;right:-170px;width:560px;height:240px;animation-duration:21s;animation-delay:-11s}
.sky-cloud-three{top:37%;left:28%;width:370px;opacity:.55;animation-duration:18s;animation-delay:-8s}
.sky-butterfly{position:absolute;display:block;color:#79acd0;filter:drop-shadow(0 5px 8px #8fb8d532);animation:butterfly-flight 15s ease-in-out infinite}
.sky-butterfly svg{width:100%;height:100%;overflow:visible}
.butterfly-1{width:43px;height:36px;top:7%;left:39%;animation-delay:-3s}
.butterfly-2{width:32px;height:27px;top:74%;left:6%;animation-delay:-8s;animation-duration:19s;color:#93bfdd}
.butterfly-3{width:36px;height:30px;right:2%;top:36%;animation-delay:-13s;animation-duration:17s}
.butterfly-wing{transform-box:fill-box;animation:butterfly-flutter 1.3s ease-in-out infinite alternate}
.wing-left{transform-origin:right center}
.wing-right{transform-origin:left center;animation-delay:-.1s}
.sky-firefly{position:absolute;left:var(--firefly-x);top:var(--firefly-y);width:4px;height:4px;border-radius:50%;background:#84b4d8;box-shadow:0 0 10px 3px #bedff8;animation:firefly-wander var(--firefly-duration) ease-in-out var(--firefly-delay) infinite}
.hero-photo-frame{animation:portrait-hover 6.5s ease-in-out infinite}
.portrait-magic{position:absolute;inset:0;z-index:2;border-radius:inherit;overflow:hidden;pointer-events:none;contain:paint}
.portrait-light{position:absolute;top:5%;height:86%;width:38%;border:2px solid transparent;border-radius:50%;opacity:.55;filter:blur(.6px);animation:portrait-light-flow 9s ease-in-out infinite alternate}
.portrait-light-left{left:-30%;border-right-color:#d7f3ff;box-shadow:7px 0 15px -8px #c5edff;rotate:-13deg}
.portrait-light-right{right:-30%;border-left-color:#e4f8ff;box-shadow:-7px 0 15px -8px #c5edff;rotate:13deg;animation-delay:-5s}
.portrait-butterfly{position:absolute;display:block;width:35px;height:30px;color:#a5deff;filter:drop-shadow(0 1px 4px #2e82be90);animation:portrait-butterfly-dance 10s ease-in-out infinite}
.portrait-butterfly svg{width:100%;height:100%;overflow:visible}
.portrait-butterfly .butterfly-wing{animation-duration:.55s}
.portrait-butterfly-1{left:5%;top:33%;animation-delay:-3s}
.portrait-butterfly-2{right:7%;top:55%;width:28px;height:24px;animation-delay:-7s;animation-duration:12s;color:#d0ecff}
.portrait-butterfly-3{right:10%;top:14%;width:23px;height:20px;animation-delay:-1s;animation-duration:14s}
.portrait-petal{position:absolute;left:var(--petal-x);top:var(--petal-y);width:var(--petal-size);height:calc(var(--petal-size) * 1.6);background:linear-gradient(140deg,#fcffff,#b6ddf8 65%,#81bce6);border-radius:85% 10% 80% 15%;box-shadow:0 1px 5px #b3e0ff66;animation:portrait-petal-drift var(--petal-duration) ease-in-out var(--petal-delay) infinite}
.portrait-glimmer{position:absolute;left:var(--glimmer-x);top:var(--glimmer-y);color:#e5f8ff;font:16px/1 Georgia,serif;text-shadow:0 0 9px #a6e0ff;animation:portrait-glimmer 4.5s ease-in-out var(--glimmer-delay) infinite}
.hero-art::before{animation:backdrop-sway 11s ease-in-out infinite}
.ambient-stars span{animation-duration:4.8s}
.hero-actions>.button-dark{box-shadow:0 0 0 0 #6b9bbe35;animation:invitation-glow 4.5s ease-in-out infinite}
.stardust-hint{display:flex;align-items:center;gap:7px;margin:17px 0 0;color:#507697;font-size:10px;line-height:1.7}
.stardust-hint>span:first-child{font-size:18px}
.stardust-hint .touch-hint{display:none}
.hero-footnote{margin-top:24px}
.pointer-stardust{position:fixed;inset:0;z-index:45;pointer-events:none;overflow:hidden;contain:strict}
.cursor-star{position:absolute;color:#669ec6;font:var(--trail-size)/1 Georgia,serif;text-shadow:0 0 9px #d6efff;animation:cursor-sparkle 1.2s ease-out forwards;translate:-50% -50%;pointer-events:none}
.cursor-star:nth-child(3n){color:#8cb8d7}
.moment-icon{transition:rotate .65s ease,translate .65s ease}
.moment:hover .moment-icon{rotate:20deg;translate:0 -5px}
.dance-card{transition:translate .4s ease}
.dance-card:hover{translate:0 -7px}
body.motion-paused .hero-photo-frame{animation-play-state:paused!important}
body.motion-paused .stardust-hint{visibility:hidden}
body.motion-paused .pointer-stardust,body.page-asleep .pointer-stardust{display:none}
body.page-asleep *,body.page-asleep *::before,body.page-asleep *::after{animation-play-state:paused!important}
.hero-out-of-view *,.hero-out-of-view *::before,.hero-out-of-view *::after{animation-play-state:paused!important}
@keyframes cloud-drift{from{transform:translate3d(-25px,7px,0) scale(.92)}to{transform:translate3d(80px,-20px,0) scale(1.08)}}
@keyframes butterfly-flight{0%,100%{transform:translate3d(0,0,0) rotate(-18deg)}25%{transform:translate3d(39px,-25px,0) rotate(8deg)}50%{transform:translate3d(65px,15px,0) rotate(-4deg)}75%{transform:translate3d(15px,31px,0) rotate(13deg)}}
@keyframes butterfly-flutter{from{transform:scaleX(.35) rotate(-4deg)}to{transform:scaleX(1) rotate(4deg)}}
@keyframes firefly-wander{0%,100%{transform:translate3d(0,15px,0);opacity:.15}40%{transform:translate3d(19px,-23px,0);opacity:.65}70%{transform:translate3d(-12px,-43px,0);opacity:.3}}
@keyframes portrait-hover{0%,100%{translate:0 4px;rotate:-.7deg}50%{translate:0 -13px;rotate:.8deg}}
@keyframes portrait-light-flow{0%{translate:0 18px;scale:.94 1;opacity:.25}50%{opacity:.8}100%{translate:0 -26px;scale:1.2 1.05;opacity:.4}}
@keyframes portrait-butterfly-dance{0%,100%{transform:translate3d(0,0,0) rotate(-15deg)}25%{transform:translate3d(9px,-25px,0) rotate(12deg)}50%{transform:translate3d(-5px,-9px,0) rotate(-5deg)}75%{transform:translate3d(5px,15px,0) rotate(18deg)}}
@keyframes portrait-petal-drift{0%{transform:translate3d(0,30px,0) rotate(-25deg);opacity:0}18%{opacity:.75}50%{transform:translate3d(var(--petal-drift),-14px,0) rotate(55deg);opacity:.9}82%{opacity:.65}100%{transform:translate3d(0,-65px,0) rotate(135deg);opacity:0}}
@keyframes portrait-glimmer{0%,100%{transform:translateY(8px) scale(.5);opacity:.12}50%{transform:translateY(-9px) scale(1.2);opacity:.95}}
@keyframes backdrop-sway{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(-2deg) translateY(8px)}}
@keyframes invitation-glow{0%,100%{box-shadow:0 0 0 0 #6b9bbe00}50%{box-shadow:0 0 0 8px #6b9bbe13}}
@keyframes cursor-sparkle{0%{opacity:.85;transform:translate3d(0,0,0) scale(.8) rotate(0)}25%{opacity:.8;transform:translate3d(0,-5px,0) scale(1.1) rotate(12deg)}100%{opacity:0;transform:translate3d(var(--trail-x),var(--trail-y),0) scale(.2) rotate(var(--trail-turn))}}
@media(hover:none),(pointer:coarse){.stardust-hint .pointer-hint{display:none}.stardust-hint .touch-hint{display:inline}}
.stardust-hint[data-input="mouse"] .pointer-hint{display:inline}
.stardust-hint[data-input="mouse"] .touch-hint{display:none}
.stardust-hint[data-input="touch"] .pointer-hint{display:none}
.stardust-hint[data-input="touch"] .touch-hint{display:inline}
@media(max-width:780px){.daydream-atmosphere{inset:0 -20px}.sky-cloud{width:310px;height:150px}.butterfly-1{top:2%;left:38%;width:31px;height:26px}.butterfly-2{left:2%;width:26px;height:22px}.butterfly-3{right:3%;width:25px;height:21px}.stardust-hint{font-size:9px}.sky-firefly:nth-child(2n){display:none}}
@media(max-width:560px){.sky-cloud-one{top:0;left:-160px}.sky-cloud-two{bottom:10%;right:-210px}.sky-cloud-three{top:44%;left:-30px}.butterfly-1{top:2%;left:78%}.butterfly-2{top:39%;left:3%}.butterfly-3{top:87%;right:14%}.stardust-hint{font-size:10px;margin-top:15px}.hero-photo-frame{animation-duration:7.5s}.portrait-butterfly{width:28px;height:24px}.portrait-butterfly-2{width:23px;height:20px}.portrait-butterfly-3{width:20px;height:17px}.portrait-glimmer{font-size:13px}.portrait-petal:nth-of-type(3n){display:none}}
@media(prefers-reduced-motion:reduce){body:not(.motion-enabled) .stardust-hint{display:none}body:not(.motion-enabled) .pointer-stardust{display:none}body:not(.motion-enabled) .portrait-magic{display:none}body:not(.motion-enabled) .dance-card:hover{translate:none}body:not(.motion-enabled) .moment:hover .moment-icon{rotate:none;translate:none}}
