/* The hero character is summoned first; a warm magical flame aura follows. */
.reference-home .hero{animation:none!important}
.reference-home .hero-character{isolation:isolate}
.reference-home .hero-character:before{content:'';position:absolute;z-index:-1;left:50%;bottom:16px;width:330px;height:420px;transform:translateX(-50%) scale(.55);transform-origin:50% 100%;opacity:0;background:radial-gradient(ellipse at 50% 82%,#fff6bd 0 8%,#ffc85fb8 18%,transparent 47%),radial-gradient(ellipse at 24% 64%,#ff9d4588 0 8%,transparent 30%),radial-gradient(ellipse at 76% 55%,#c770ff73 0 7%,transparent 29%),conic-gradient(from 205deg at 50% 100%,transparent 0 10%,#ffb34d8c 14%,transparent 22% 30%,#a95ef28c 35%,transparent 45% 56%,#ffd36f99 62%,transparent 72%);filter:blur(17px) saturate(1.2);clip-path:polygon(50% 0,62% 24%,75% 13%,72% 43%,94% 37%,79% 67%,100% 82%,67% 87%,50% 100%,30% 88%,0 83%,20% 65%,8% 42%,30% 47%,26% 16%,42% 29%);animation:auraIgnite 1.45s .62s cubic-bezier(.18,.78,.2,1) both,auraPulse 3.2s 2.07s ease-in-out infinite}
.reference-home .hero-character:after{content:'';position:absolute;z-index:-1;left:50%;bottom:4px;width:280px;height:58px;border:2px solid #ffe5a099;border-radius:50%;background:radial-gradient(ellipse,#fff6ba55 0 18%,#f2a34b24 42%,transparent 68%);box-shadow:0 0 18px #ffcc72aa,0 0 42px #9c5bdc66,inset 0 0 18px #fff2b58c;opacity:0;transform:translateX(-50%) scale(.25);animation:magicSeal 1.1s .38s cubic-bezier(.2,.8,.2,1) both,sealPulse 3.2s 1.5s ease-in-out infinite}
.reference-home .hero-character img{position:relative;z-index:2;animation:heroCharacterSummon 1.15s .12s cubic-bezier(.16,.82,.2,1) both!important;transform-origin:50% 100%}
.hero-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-particles i{bottom:-20px;top:auto!important;animation-name:particleRise!important;animation-timing-function:linear!important;animation-iteration-count:infinite!important;opacity:0}
.hero-particles i:nth-child(1){left:7%;width:4px;height:4px;animation-duration:7s!important}.hero-particles i:nth-child(2){left:14%;width:9px;height:9px;animation-duration:11s!important;animation-delay:1s!important}.hero-particles i:nth-child(3){left:21%;width:5px;height:5px;animation-duration:8s!important;animation-delay:4s!important}.hero-particles i:nth-child(4){left:29%;width:12px;height:12px;animation-duration:13s!important;animation-delay:2s!important}.hero-particles i:nth-child(5){left:36%;width:6px;height:6px;animation-duration:9s!important;animation-delay:5s!important}.hero-particles i:nth-child(6){left:43%;width:3px;height:3px;animation-duration:6s!important}.hero-particles i:nth-child(7){left:49%;width:8px;height:8px;animation:particleRise 10s 3s linear infinite!important}.hero-particles i:nth-child(8){left:55%;width:14px;height:14px;animation:particleRise 14s 1s linear infinite!important}.hero-particles i:nth-child(9){left:61%;width:5px;height:5px;animation:particleRise 7s 4s linear infinite!important}.hero-particles i:nth-child(10){left:67%;width:10px;height:10px;animation:particleRise 12s 2s linear infinite!important}.hero-particles i:nth-child(11){left:73%;width:4px;height:4px;animation:particleRise 8s 6s linear infinite!important}.hero-particles i:nth-child(12){left:79%;width:7px;height:7px;animation:particleRise 9s 1s linear infinite!important}.hero-particles i:nth-child(13){left:85%;width:12px;height:12px;animation:particleRise 15s 5s linear infinite!important}.hero-particles i:nth-child(14){left:91%;width:5px;height:5px;animation:particleRise 8s 2s linear infinite!important}.hero-particles i:nth-child(15){left:25%;width:7px;height:7px;animation:particleRise 12s 7s linear infinite!important}.hero-particles i:nth-child(16){left:70%;width:3px;height:3px;animation:particleRise 6s 3s linear infinite!important}
@keyframes particleRise{0%{transform:translate3d(0,0,0) scale(.35);opacity:0}12%{opacity:.8}55%{transform:translate3d(18px,-350px,0) scale(1);opacity:.65}100%{transform:translate3d(-12px,-720px,0) scale(.45);opacity:0}}
@keyframes heroCharacterSummon{0%{opacity:0;transform:translateY(55px) scale(.82);filter:blur(8px) brightness(1.8) drop-shadow(0 0 28px #ffe09c)}58%{opacity:1;filter:blur(0) brightness(1.15) drop-shadow(0 0 20px #ffe09c99)}100%{opacity:1;transform:translateY(0) scale(1);filter:drop-shadow(0 10px 25px #66321e33)}}
@keyframes auraIgnite{0%{opacity:0;transform:translateX(-50%) scale(.45,.18)}55%{opacity:.92;transform:translateX(-50%) scale(1.08,1.04)}100%{opacity:.58;transform:translateX(-50%) scale(1)}}
@keyframes auraPulse{0%,100%{opacity:.42;transform:translateX(-50%) scale(.96,1)}50%{opacity:.7;transform:translateX(-50%) scale(1.04,1.08)}}
@keyframes magicSeal{0%{opacity:0;transform:translateX(-50%) scale(.2) rotate(-22deg)}70%{opacity:.9}100%{opacity:.62;transform:translateX(-50%) scale(1) rotate(0)}}
@keyframes sealPulse{0%,100%{opacity:.42;transform:translateX(-50%) scale(.96)}50%{opacity:.72;transform:translateX(-50%) scale(1.06)}}
@media(prefers-reduced-motion:reduce){.reference-home .hero-character img,.reference-home .hero-character:before,.reference-home .hero-character:after{animation:none!important;opacity:1}.reference-home .hero-character:before{transform:translateX(-50%) scale(1)}.reference-home .hero-character:after{transform:translateX(-50%) scale(1)}}

/* Female/male profession variants from the reference artwork. */
.gender-icons button{width:52px;height:52px;padding:0;border:2px solid transparent;border-radius:14px;display:grid;place-items:center;background:#ffffff99;color:#4a414b;font-size:29px;cursor:pointer;transition:background .2s,color .2s,transform .2s,opacity .2s}
.gender-icons button:hover{transform:translateY(-2px);background:#fff}.gender-icons button[aria-pressed=true]{background:#fff;color:#241747;border-color:#fff;box-shadow:0 8px 20px #33234f28}.gender-icons button[aria-pressed=false]{opacity:.6}
.animate .class-visual img.gender-swap{animation:genderSwap .38s cubic-bezier(.2,.75,.25,1)!important}
@keyframes genderSwap{0%{opacity:0;transform:translateX(25%) scale(.9)}100%{opacity:1;transform:translateX(38%) scale(1)}}
@media(max-width:650px){@keyframes genderSwap{0%{opacity:0;transform:translateY(25%) scale(.9)}100%{opacity:1;transform:translateY(15%) scale(1)}}}