.hero h1{position:relative;isolation:isolate}
.hero h1.hero-spell{animation:avaira-letters 1.9s cubic-bezier(.2,.65,.2,1) both}
.hero h1.hero-spell::before{content:'';position:absolute;inset:-8px;pointer-events:none;background:linear-gradient(105deg,transparent 35%,#fce4b447 48%,transparent 61%);background-size:250% 100%;mix-blend-mode:screen;animation:avaira-gold 2.1s ease-out both;border-radius:20px;z-index:1}
.hero h1.hero-spell::after{content:'✦';position:absolute;left:0;top:45%;font-family:Georgia,serif;font-size:26px;color:#ffe3a9;text-shadow:0 0 12px #ffdaa9,0 0 26px #ffca7b;pointer-events:none;animation:avaira-wand 2.1s ease-in-out both;z-index:2}
@keyframes avaira-letters{0%{clip-path:inset(-15% 100% -15% -10%);filter:blur(2px);opacity:.3}65%{filter:blur(0);opacity:1}100%{clip-path:inset(-15% -10% -15% -10%);filter:blur(0);opacity:1}}
@keyframes avaira-gold{0%{background-position:140% 0;opacity:0}25%{opacity:1}80%{opacity:.5}100%{background-position:-80% 0;opacity:0}}
@keyframes avaira-wand{0%{left:0;top:55%;opacity:0;transform:scale(.3) rotate(0)}20%{opacity:1}60%{top:30%;opacity:1;transform:scale(1) rotate(90deg)}100%{left:96%;top:58%;opacity:0;transform:scale(.2) rotate(180deg)}}
html[dir=rtl] .hero h1.hero-spell{animation-name:avaira-letters-rtl}
@keyframes avaira-letters-rtl{0%{clip-path:inset(-15% -10% -15% 100%);filter:blur(2px);opacity:.3}65%{filter:blur(0);opacity:1}100%{clip-path:inset(-15% -10% -15% -10%);filter:blur(0);opacity:1}}
@media(prefers-reduced-motion:reduce){.hero h1.hero-spell{animation:none}.hero h1.hero-spell::before,.hero h1.hero-spell::after{display:none}}