.petHatchReveal{transform:translateY(8vh)}.playing .petRevealEgg,.playing .petEggCrack,.playing .petRevealCompanion,.playing .petRevealName,.playing .petShellLeft,.playing .petShellRight{animation-duration:15s!important}

.petHatchReveal{--pet-rarity:#be7bfa;--shine-size:290px;--shine-peak:.75;--shine-blur:12px;--shine-brightness:1.25}.petRevealName{color:var(--pet-rarity)}
.petHatchReveal[data-rarity=green]{--shine-size:170px;--shine-peak:.28;--shine-blur:5px;--shine-brightness:1}
.petHatchReveal[data-rarity=blue]{--shine-size:225px;--shine-peak:.5;--shine-blur:8px;--shine-brightness:1.1}
.petHatchReveal[data-rarity=orange]{--shine-size:390px;--shine-peak:1;--shine-blur:20px;--shine-brightness:1.8}
.petHatchReveal:not([data-rarity=white]) .petEggCrack{background:var(--pet-rarity);filter:brightness(var(--shine-brightness)) drop-shadow(0 0 3px var(--pet-rarity)) drop-shadow(0 0 var(--shine-blur) var(--pet-rarity))}
.petHatchReveal:not([data-rarity=white]) .petRevealStage:before{content:'';position:absolute;width:var(--shine-size);height:var(--shine-size);border-radius:50%;background:radial-gradient(circle,var(--pet-rarity),transparent 65%);filter:brightness(var(--shine-brightness));opacity:0}
.playing:not([data-rarity=white]) .petRevealStage:before{animation:rarityLight 15s linear both}
@keyframes rarityLight{0%,59%{opacity:0;transform:scale(.25)}62%{opacity:calc(var(--shine-peak)*.28);transform:scale(.45)}73%{opacity:calc(var(--shine-peak)*.65);transform:scale(.75)}79%{opacity:var(--shine-peak);transform:scale(1.1)}88%,100%{opacity:0;transform:scale(1.3)}}


.petRevealBox{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;width:420px!important;color:#eee}
.petRevealStage{height:240px}.petEggMotion{position:absolute;width:144px;height:144px;display:flex;align-items:center;justify-content:center;transform-origin:50% 85%}
.playing .petRevealEgg{animation-name:eggEscapeVisibility!important}
.petRevealName{text-shadow:0 2px 3px #000,0 0 8px #000;font:700 48px/1.15 Arial,sans-serif;overflow-wrap:anywhere}
.petRevealBox p{font:600 32px/1.4 Arial,sans-serif;text-shadow:0 2px 3px #000,0 0 8px #000;margin:12px 0 0}
@keyframes eggEscapeVisibility{0%,74%{opacity:1;transform:scale(1)}77%{opacity:1;transform:scale(1.07)}79%,100%{opacity:0;transform:scale(1.2)}}


/* All light is projected from an opening in the shell. No radial halo. */
.petRevealStage:before{display:none!important}
.petEggMotion{z-index:2}
.petEggCrack{z-index:3;width:68px;height:7px;left:43px;top:55px;transform:rotate(-32deg);clip-path:polygon(0 42%,22% 25%,35% 45%,52% 10%,67% 38%,82% 20%,100% 35%,100% 70%,79% 57%,64% 80%,49% 48%,34% 77%,20% 55%,0 80%)}
.playing .petEggCrack{animation:sideSplit 15s linear both!important}
.petCrackBeam{position:absolute;z-index:4;left:73px;top:27px;width:calc(var(--shine-size)*.9);height:66px;transform-origin:0 50%;transform:rotate(-55deg);clip-path:polygon(0 47%,100% 0,100% 100%,0 53%);background:linear-gradient(90deg,#fff 0%,var(--pet-rarity) 12%,color-mix(in srgb,var(--pet-rarity) 45%,transparent) 60%,transparent 100%);filter:blur(2px);opacity:0}
.playing .petCrackBeam{animation:crackBeam 15s linear both}
.petTopLight{position:absolute;z-index:4;width:var(--shine-size);height:270px;left:50%;bottom:calc(50% - 18px);transform-origin:50% 100%;transform:translateX(-50%);opacity:0;pointer-events:none}
.petTopLight i,.petTopLight b{display:block;position:absolute;inset:0;clip-path:polygon(48% 100%,7% 0,93% 0,52% 100%);background:linear-gradient(0deg,#fff 0%,var(--pet-rarity) 18%,color-mix(in srgb,var(--pet-rarity) 70%,transparent) 55%,transparent 100%);filter:blur(4px)}
.petTopLight b{left:24%;right:24%;height:90%;top:10%;background:linear-gradient(0deg,#fff 0%,#fff9 30%,var(--pet-rarity) 65%,transparent 100%);filter:blur(2px)}
.playing .petTopLight{animation:topEruption 15s linear both}
.petHatchReveal[data-rarity=white] .petCrackBeam,.petHatchReveal[data-rarity=white] .petTopLight{display:none}
.playing .petShellLeft{clip-path:polygon(0 0,100% 0,100% 43%,78% 48%,62% 40%,48% 49%,31% 41%,15% 48%,0 43%);animation:eggCap 15s ease-out both}
.playing .petShellRight{clip-path:polygon(0 43%,15% 48%,31% 41%,48% 49%,62% 40%,78% 48%,100% 43%,100% 100%,0 100%);animation:eggBowl 15s ease-out both}
.petRevealShell{z-index:3}.petRevealCompanion{z-index:5}
@keyframes sideSplit{0%,50%{opacity:0}53%,75%{opacity:1}78%,100%{opacity:0}}
@keyframes crackBeam{0%,52%{opacity:0;transform:rotate(-55deg) scaleX(.1)}56%{opacity:calc(var(--shine-peak)*.55);transform:rotate(-55deg) scaleX(.7)}66%{opacity:var(--shine-peak);transform:rotate(-55deg) scaleX(1)}73%{opacity:var(--shine-peak)}77%,100%{opacity:0}}
@keyframes topEruption{0%,73%{opacity:0;transform:translateX(-50%) scale(.2)}76%{opacity:var(--shine-peak);transform:translateX(-50%) scale(.65,1)}79%{opacity:var(--shine-peak);transform:translateX(-50%) scale(1.1,1.15)}84%{opacity:calc(var(--shine-peak)*.6)}92%,100%{opacity:0;transform:translateX(-50%) scale(1.25,1.3)}}
@keyframes eggCap{0%,73%{opacity:0;transform:translate(0) rotate(0)}74%{opacity:1}79%{opacity:1;transform:translate(-28px,-100px) rotate(-24deg)}85%,100%{opacity:0;transform:translate(-60px,-145px) rotate(-45deg)}}
@keyframes eggBowl{0%,73%{opacity:0;transform:translate(0)}74%,80%{opacity:1;transform:translate(0,8px)}89%,100%{opacity:0;transform:translate(0,24px)}}


.petCrackBeam{top:0;width:calc(var(--shine-size)*1.15);height:120px;clip-path:none;background:none;filter:blur(4px) drop-shadow(0 0 var(--shine-blur) var(--pet-rarity));overflow:visible}
.petCrackBeam:before{content:'';position:absolute;inset:0;clip-path:polygon(0 48%,100% 0,100% 100%,0 52%);background:linear-gradient(90deg,#fff 0%,var(--pet-rarity) 10%,color-mix(in srgb,var(--pet-rarity) 58%,transparent) 42%,color-mix(in srgb,var(--pet-rarity) 20%,transparent) 72%,transparent 100%);filter:blur(5px)}
.petCrackBeam:after{content:'';position:absolute;left:0;top:calc(50% - 3px);width:45%;height:6px;background:linear-gradient(90deg,#fff,var(--pet-rarity),transparent);filter:blur(3px)}
.petTopLight{width:calc(var(--shine-size)*1.2);filter:blur(7px) drop-shadow(0 0 var(--shine-blur) var(--pet-rarity))}
@keyframes crackBeam{0%,52.99%{opacity:0;transform:rotate(-55deg)}53%,72%{opacity:var(--shine-peak);transform:rotate(-55deg)}76%,100%{opacity:0;transform:rotate(-55deg)}}
@keyframes topEruption{0%,73.99%{opacity:0;transform:translateX(-50%)}74%,80%{opacity:var(--shine-peak);transform:translateX(-50%)}85%{opacity:calc(var(--shine-peak)*.6);transform:translateX(-50%)}92%,100%{opacity:0;transform:translateX(-50%)}}


.petCrackBeam{top:-15px;width:calc(var(--shine-size)*.62);height:150px;filter:blur(12px) drop-shadow(0 0 var(--shine-blur) var(--pet-rarity))}
.petCrackBeam:before{clip-path:none;border-radius:30% 65% 65% 30%;background:radial-gradient(ellipse at 8% 50%,#fff9 0%,var(--pet-rarity) 13%,color-mix(in srgb,var(--pet-rarity) 48%,transparent) 35%,transparent 72%);filter:blur(8px)}
.petCrackBeam:after{left:-3px;top:calc(50% - 7px);width:28px;height:14px;border-radius:50%;background:var(--pet-rarity);filter:blur(8px)}
.petTopLight{height:215px;width:calc(var(--shine-size)*.82);filter:blur(17px) drop-shadow(0 0 var(--shine-blur) var(--pet-rarity))}
.petTopLight i,.petTopLight b{clip-path:none;border-radius:65% 55% 35% 35%;background:radial-gradient(ellipse at 50% 88%,#fffd 0%,var(--pet-rarity) 15%,color-mix(in srgb,var(--pet-rarity) 60%,transparent) 35%,transparent 72%);filter:blur(8px)}
.petTopLight b{left:32%;right:27%;top:30%;height:70%;background:radial-gradient(ellipse at 50% 95%,#fff9,var(--pet-rarity) 30%,transparent 75%);filter:blur(10px)}


.petRevealBox{transform:scale(.5);transform-origin:50% 50%;width:min(640px,calc(200vw - 48px))!important}
.petShellRight{display:none!important}
.playing .petRevealCompanion{animation:petFromGlow 15s linear both!important}
.playing .petRevealName{animation:petNameAfterGlow 15s linear both!important}
@keyframes eggEscapeVisibility{0%,73.99%{opacity:1;transform:scale(1)}74%,100%{opacity:0;transform:scale(1)}}
@keyframes petFromGlow{0%,77%{opacity:0;filter:blur(14px);transform:scale(.65)}82%{opacity:.15;filter:blur(9px);transform:scale(.78)}87%{opacity:.55;filter:blur(4px);transform:scale(.91)}94%,100%{opacity:1;filter:blur(0);transform:scale(1)}}
@keyframes petNameAfterGlow{0%,91%{opacity:0;transform:translateY(4px)}97%,100%{opacity:1;transform:translateY(0)}}


.petEggCrack{left:10px;top:6px;width:124px;height:132px;transform:none;clip-path:none;background:transparent!important;color:var(--pet-rarity)}
.petEggCrack svg{width:100%;height:100%;overflow:visible}
.petHatchReveal[data-rarity=white] .petEggCrack{color:#3b303c;filter:none}
.eggFracture{stroke-dasharray:180;stroke-dashoffset:180;opacity:0}
.playing .eggFracture{animation:eggFractures 15s linear both}
.playing .fracture2{animation-name:eggFractures2}.playing .fracture3{animation-name:eggFractures3}.playing .fracture4{animation-name:eggFractures4}.playing .fracture5{animation-name:eggFractures5}.playing .fracture6{animation-name:eggFractures6}
@keyframes sideSplit{0%,34%{opacity:0}35%,73.99%{opacity:1}74%,100%{opacity:0}}
@keyframes eggFractures{0%,35%{stroke-dashoffset:180;opacity:0}36%{opacity:1}49%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes eggFractures2{0%,43%{stroke-dashoffset:180;opacity:0}44%{opacity:1}56%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes eggFractures3{0%,49%{stroke-dashoffset:180;opacity:0}50%{opacity:1}61%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes eggFractures4{0%,55%{stroke-dashoffset:180;opacity:0}56%{opacity:1}65%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes eggFractures5{0%,59%{stroke-dashoffset:180;opacity:0}60%{opacity:1}69%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes eggFractures6{0%,64%{stroke-dashoffset:180;opacity:0}65%{opacity:1}73%,100%{stroke-dashoffset:0;opacity:1}}


/* Soft light only: no projected cones, polygons, rays or moving light shapes. */
.petCrackBeam{left:12px;top:-2px;width:120px;height:120px;transform:none;clip-path:none;border-radius:50%;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--pet-rarity) 80%,white) 0%,color-mix(in srgb,var(--pet-rarity) 60%,transparent) 22%,color-mix(in srgb,var(--pet-rarity) 25%,transparent) 44%,transparent 70%);filter:blur(9px)}
.petCrackBeam:before,.petCrackBeam:after,.petTopLight i,.petTopLight b{display:none!important}
.petTopLight{left:50%;top:50%;bottom:auto;width:calc(var(--shine-size)*.9);height:calc(var(--shine-size)*.9);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse at center,#ffffffb0 0%,color-mix(in srgb,var(--pet-rarity) 88%,white) 12%,color-mix(in srgb,var(--pet-rarity) 65%,transparent) 28%,color-mix(in srgb,var(--pet-rarity) 25%,transparent) 46%,transparent 70%);filter:blur(12px);box-shadow:none}
.petHatchReveal:not([data-rarity=white]) .petEggCrack{filter:drop-shadow(0 0 2px var(--pet-rarity))}
@keyframes crackBeam{0%,52.99%{opacity:0;transform:none}53%,72%{opacity:var(--shine-peak);transform:none}78%,100%{opacity:0;transform:none}}
@keyframes topEruption{0%,73.99%{opacity:0;transform:translate(-50%,-50%)}74%,81%{opacity:var(--shine-peak);transform:translate(-50%,-50%)}87%{opacity:calc(var(--shine-peak)*.55);transform:translate(-50%,-50%)}94%,100%{opacity:0;transform:translate(-50%,-50%)}}


.eggFracture{stroke-dasharray:none;stroke-dashoffset:0}
@keyframes eggFractures{0%,35.99%{opacity:0}36%,100%{opacity:1}}
@keyframes eggFractures2{0%,43.99%{opacity:0}44%,100%{opacity:1}}
@keyframes eggFractures3{0%,49.99%{opacity:0}50%,100%{opacity:1}}
@keyframes eggFractures4{0%,55.99%{opacity:0}56%,100%{opacity:1}}
@keyframes eggFractures5{0%,59.99%{opacity:0}60%,100%{opacity:1}}
@keyframes eggFractures6{0%,64.99%{opacity:0}65%,100%{opacity:1}}
.petCompanionGlow{position:absolute;z-index:4;width:180px;height:180px;border-radius:50%;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--pet-rarity) 55%,transparent),color-mix(in srgb,var(--pet-rarity) 22%,transparent) 35%,transparent 70%);filter:blur(10px);opacity:0;pointer-events:none}
.playing .petCompanionGlow{animation:companionGentleGlow 15s linear both}
.petHatchReveal[data-rarity=white] .petCompanionGlow{display:none}
@keyframes companionGentleGlow{0%,80%{opacity:0}89%{opacity:calc(var(--shine-peak)*.65)}95%,100%{opacity:calc(var(--shine-peak)*.8)}}


.petShellRight{display:block!important}
.playing .petShellLeft{animation:eggUpperAway 15s linear both!important}
.playing .petShellRight{animation:eggLowerAway 15s linear both!important}
@keyframes eggUpperAway{0%,73.99%{opacity:0;transform:translate(0) rotate(0)}74%{opacity:1;transform:translate(0) rotate(0)}81.5%{opacity:1;transform:translate(-45px,-110px) rotate(-32deg)}85%,100%{opacity:0;transform:translate(-60px,-145px) rotate(-45deg)}}
@keyframes eggLowerAway{0%,73.99%{opacity:0;transform:translate(0) rotate(0)}74%{opacity:1;transform:translate(0) rotate(0)}81.5%{opacity:1;transform:translate(55px,45px) rotate(24deg)}85%,100%{opacity:0;transform:translate(75px,65px) rotate(35deg)}}


.playing .petShellBottomLeft{clip-path:polygon(0 43%,15% 48%,31% 41%,48% 49%,53% 62%,47% 76%,52% 89%,50% 100%,0 100%);animation:eggBottomLeftFall 15s linear both!important}
.playing .petShellBottomRight{clip-path:polygon(48% 49%,62% 40%,78% 48%,100% 43%,100% 100%,50% 100%,52% 89%,47% 76%,53% 62%);animation:eggBottomRightFall 15s linear both!important}
@keyframes eggBottomLeftFall{0%,73.99%{opacity:0;transform:translate(0) rotate(0)}74%{opacity:1;transform:translate(0) rotate(0)}77%{opacity:1;transform:translate(-14px,2px) rotate(-10deg)}81.5%{opacity:1;transform:translate(-40px,38px) rotate(-28deg)}85%,100%{opacity:0;transform:translate(-65px,95px) rotate(-48deg)}}
@keyframes eggBottomRightFall{0%,73.99%{opacity:0;transform:translate(0) rotate(0)}74%{opacity:1;transform:translate(0) rotate(0)}77%{opacity:1;transform:translate(14px,2px) rotate(10deg)}81.5%{opacity:1;transform:translate(40px,38px) rotate(28deg)}85%,100%{opacity:0;transform:translate(65px,95px) rotate(48deg)}}


.petEggCrack{left:0;top:0;width:144px;height:144px;mask-image:url('/previews/hatch-shell-interior-mask.png');mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-image:url('/previews/hatch-shell-interior-mask.png');-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat}
.petEggCrack svg{position:absolute;left:10px;top:6px;width:124px;height:132px;overflow:hidden}
.petShellBottomLeft{transform-origin:30% 85%}.petShellBottomRight{transform-origin:70% 85%}
@keyframes eggBottomLeftFall{0%,73.99%{opacity:0;transform:translate(0) rotate(0)}74%{opacity:1;transform:translate(0) rotate(0)}77%{opacity:1;transform:translate(-8px,1px) rotate(-12deg)}81.5%{opacity:1;transform:translate(-24px,2px) rotate(-35deg)}85%,100%{opacity:0;transform:translate(-32px,3px) rotate(-50deg)}}
@keyframes eggBottomRightFall{0%,73.99%{opacity:0;transform:translate(0) rotate(0)}74%{opacity:1;transform:translate(0) rotate(0)}77%{opacity:1;transform:translate(8px,1px) rotate(12deg)}81.5%{opacity:1;transform:translate(24px,2px) rotate(35deg)}85%,100%{opacity:0;transform:translate(32px,3px) rotate(50deg)}}


.playing .petShellLeft,.playing .petShellBottomLeft,.playing .petShellBottomRight{animation:none!important}
.petShellLeft{transform-origin:50% 45%}


@keyframes petFromGlow{0%,73.99%{opacity:0;filter:blur(12px);transform:scale(.92)}74%{opacity:.48;filter:blur(12px);transform:scale(.92)}78%{opacity:.58;filter:blur(10px);transform:scale(.94)}84%{opacity:.72;filter:blur(7px);transform:scale(.96)}91%{opacity:.88;filter:blur(3px);transform:scale(.99)}98%,100%{opacity:1;filter:blur(0);transform:scale(1)}}


@keyframes petFromGlow{0%,73.99%{visibility:hidden;opacity:1;filter:blur(3px);transform:scale(1)}74%{visibility:visible;opacity:1;filter:blur(3px);transform:scale(1)}80%{visibility:visible;opacity:1;filter:blur(2.5px);transform:scale(1)}89%{visibility:visible;opacity:1;filter:blur(1.5px);transform:scale(1)}98%,100%{visibility:visible;opacity:1;filter:blur(0);transform:scale(1)}}


.petRevealCompanion{z-index:5}
.petRevealShell{z-index:6}


/* Centered flex items shift by half the margin, then the effect scales to 50%. */
.petRevealCompanion,.petCompanionGlow{margin-top:-36px}


.petTopLight{width:calc(var(--shine-size)*1.15);height:calc(var(--shine-size)*1.15);background:radial-gradient(ellipse at center,#ffffffed 0%,color-mix(in srgb,var(--pet-rarity) 75%,white) 14%,color-mix(in srgb,var(--pet-rarity) 82%,transparent) 31%,color-mix(in srgb,var(--pet-rarity) 35%,transparent) 50%,transparent 72%);filter:blur(10px)}
@keyframes topEruption{0%,65%{opacity:0;transform:translate(-50%,-50%)}69%{opacity:calc(var(--shine-peak)*.7);transform:translate(-50%,-50%)}73%,74%{opacity:var(--shine-peak);transform:translate(-50%,-50%)}80%{opacity:calc(var(--shine-peak)*.88);transform:translate(-50%,-50%)}87%{opacity:calc(var(--shine-peak)*.62);transform:translate(-50%,-50%)}93%{opacity:calc(var(--shine-peak)*.3);transform:translate(-50%,-50%)}98%,100%{opacity:0;transform:translate(-50%,-50%)}}


.petCompanionGlow{z-index:3}
.petRevealCompanion{z-index:4}
.petTopLight{z-index:5}
.petEggMotion,.petRevealShell{z-index:6}


.petHatchReveal:not([data-rarity=white]) .eggFracture{stroke:color-mix(in srgb,var(--pet-rarity) 28%,white);stroke-width:1.5;filter:drop-shadow(0 0 1px var(--pet-rarity)) drop-shadow(0 0 3px var(--pet-rarity))}

.petEggCrack{mask-image:var(--hatch-mask)!important;-webkit-mask-image:var(--hatch-mask)!important}