/* Rose, ice blue and pearl from the original artwork; no hue rotation. */
.butterfly img{mask-image:url('assets/glass-butterfly-v1.webp');mask-mode:luminance;mask-size:100% 100%;mask-repeat:no-repeat;object-fit:fill;animation:none!important;filter:saturate(1.18) contrast(1.06) brightness(1.08)!important}
.butterfly--pearl img{filter:saturate(.72) contrast(1.06) brightness(1.13)!important}
.night .butterfly img{filter:saturate(1.08) contrast(1.04) brightness(1.15)!important}
.butterfly{animation-name:glassFlight!important;animation-timing-function:linear;filter:drop-shadow(0 2px 3px #784b9e66) drop-shadow(0 0 2px #e6c6ff70)}
.wings{position:absolute;inset:0;perspective:220px;animation:bodySway 2.3s ease-in-out infinite;animation-delay:var(--wing-phase)}
.wing{position:absolute;top:0;width:50%;height:100%;overflow:hidden;backface-visibility:visible;animation:wingBeat var(--wing-speed) ease-in-out infinite;animation-delay:var(--wing-phase)}
.wing.left{left:0;transform-origin:100% 50%}.wing.right{right:0;transform-origin:0 50%;animation-name:wingBeatRight}
.wing img{position:absolute;top:0;width:200%;height:100%;max-width:none}.wing.left img{left:0}.wing.right img{left:-100%}
.wing::after{content:'';position:absolute;left:var(--spark-x,35%);top:28%;width:12px;height:12px;background:radial-gradient(circle,#fff 0 16%,#fff3fcbb 30%,transparent 72%);clip-path:polygon(50% 0,58% 40%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);animation:wingGlint 2.8s ease-in-out infinite;animation-delay:var(--wing-phase);pointer-events:none}.wing.right::after{top:63%;left:35%;width:9px;height:9px;animation-delay:calc(var(--wing-phase) - 1.3s)}
@keyframes wingBeat{0%,100%{transform:rotateY(0deg)}38%{transform:rotateY(-67deg)}68%{transform:rotateY(-8deg)}}
@keyframes wingBeatRight{0%,100%{transform:rotateY(0deg)}38%{transform:rotateY(67deg)}68%{transform:rotateY(8deg)}}
@keyframes bodySway{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(5deg) translateY(-4px)}}
@keyframes wingGlint{0%,24%,75%,100%{opacity:.05;transform:scale(.55)}38%{opacity:.95;transform:scale(1.15)}52%{opacity:.3;transform:scale(.8)}}
@keyframes glassFlight{
0%{transform:translate(0,12px) rotate(-5deg) scale(.82);opacity:0}
10%{transform:translate(calc(var(--wander)*.25),calc(var(--rise)*.06)) rotate(5deg) scale(.95);opacity:.95}
25%{transform:translate(var(--wander),calc(var(--rise)*.18)) rotate(11deg) scale(1);opacity:1}
42%{transform:translate(calc(var(--wander)*.3),calc(var(--rise)*.34)) rotate(-7deg) scale(1);opacity:1}
60%{transform:translate(calc(var(--wander)*-.65),calc(var(--rise)*.53)) rotate(-10deg) scale(.98);opacity:1}
78%{transform:translate(calc(var(--wander)*-.1),calc(var(--rise)*.73)) rotate(6deg) scale(.94);opacity:.95}
90%{transform:translate(calc(var(--wander)*.55),calc(var(--rise)*.88)) rotate(9deg) scale(.9);opacity:.8}
100%{transform:translate(calc(var(--wander)*.4),var(--rise)) rotate(2deg) scale(.84);opacity:0}}
.bubble{border-color:rgba(140,169,221,.68);background:radial-gradient(ellipse at 28% 22%,rgba(255,255,255,.7),transparent 13%),radial-gradient(circle at 50% 50%,transparent 77%,rgba(241,166,223,.46) 86%,rgba(166,225,250,.55) 93%,transparent 100%),conic-gradient(from 140deg,rgba(155,223,243,.12),rgba(217,170,241,.17),rgba(255,198,217,.18),rgba(163,223,250,.1),rgba(222,188,241,.17),rgba(155,223,243,.12));box-shadow:inset 2px 2px 3px #ffffff80,inset -2px -2px 4px #b18bc87a,0 0 0 1px #fbd3f46b,0 3px 7px #806a992b;backdrop-filter:blur(.25px)}
.bubble::before{inset:6% 12% 63% 16%;border-top-width:2px}.bubble::after{inset:62% 12% 8% 38%;border-right-color:#bcefffa6;border-bottom-color:#edb9f7a8}
.star{position:absolute;display:block;width:19%;height:19%;background:radial-gradient(circle,#fff 0 14%,#fff9df 22%,#ffffff40 60%,transparent 75%);clip-path:polygon(50% 0,57% 40%,100% 50%,58% 58%,50% 100%,42% 59%,0 50%,40% 42%);animation:glint 2.2s ease-in-out infinite;filter:drop-shadow(0 0 3px white)}
.s1{left:16%;top:14%;width:27%;height:27%;animation-delay:-.3s}.s2{left:63%;top:60%;animation-delay:-1.3s}.s3{left:52%;top:30%;width:11%;height:11%;animation-delay:-.8s}.dust{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 28% 49%,#fff8dc 0 .6px,transparent 1.4px),radial-gradient(circle at 61% 22%,#ffffffdd 0 .7px,transparent 1.3px),radial-gradient(circle at 75% 43%,#fce1ff 0 .6px,transparent 1.2px),radial-gradient(circle at 37% 70%,#fff8dc 0 .8px,transparent 1.4px),radial-gradient(circle at 58% 77%,#d9fcff 0 .7px,transparent 1.4px),radial-gradient(circle at 46% 41%,#ffffffcc 0 .6px,transparent 1.2px);animation:glint 3s ease-in-out infinite alternate}.night .bubble{border-color:#a9b7e2a6;box-shadow:inset 2px 2px 4px #e7f5ff7a,inset -2px -2px 5px #b59ee585,0 0 5px #b6d3ff38}
@keyframes glint{0%,100%{opacity:.25;transform:scale(.85)}45%{opacity:1;transform:scale(1.08)}70%{opacity:.55;transform:scale(.96)}}
@media(prefers-reduced-motion:reduce){.star,.dust{animation:none}}

@media(prefers-reduced-motion:reduce){.butterfly{animation:none!important}.wing,.wings,.wing::after{animation:none!important}}

/* Clear tinted glass: transparent membranes, stronger rims and white highlights. */
.butterfly img,.night .butterfly img{mask-image:none!important;filter:url('#glass-rose')!important}
.butterfly--blue img,.night .butterfly--blue img{filter:url('#glass-blue')!important}
.butterfly--pearl img,.night .butterfly--pearl img{filter:url('#glass-pearl')!important}
.butterfly{animation:none!important;will-change:transform,opacity;filter:drop-shadow(0 1px 1px #53466e38)}
.wings{animation-duration:3.8s}
@keyframes wingBeat{0%,100%{transform:rotateY(-3deg)}50%{transform:rotateY(-48deg)}}
@keyframes wingBeatRight{0%,100%{transform:rotateY(3deg)}50%{transform:rotateY(48deg)}}
@keyframes bodySway{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-2px)}}

/* Softer flight: quiet body sway and less pronounced wing folding. */
.wings{animation-duration:4.6s}
@keyframes wingBeat{0%,100%{transform:rotateY(-4deg)}50%{transform:rotateY(-40deg)}}
@keyframes wingBeatRight{0%,100%{transform:rotateY(4deg)}50%{transform:rotateY(40deg)}}