/* Motion is decoration: no content or navigation depends on an animation. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
.hero,.page-hero{position:relative}
.hero h1,.page-hero h1{text-wrap:balance}
.hero .kicker,.page-hero .kicker{display:inline-flex;align-items:center;gap:12px}
.hero .kicker::before,.page-hero .kicker::before{content:"";width:24px;height:1px;background:var(--gold);box-shadow:0 0 12px #d5b77766}
.hero-visual{overflow:hidden;background:radial-gradient(ellipse at 30% 20%,#d5b77719,transparent 60%),radial-gradient(circle at 65% 75%,#83d6c218,transparent 65%),#0b1118;box-shadow:inset 0 0 65px #d5b77708,0 24px 100px #0005}
.hero-visual::before{border-top-color:#e8cf94aa;border-right-color:#d5b77755;animation:morph-orbit 3.8s var(--motion-ease) 1 both}
.hero-visual::after{border-bottom-color:#83d6c266;animation:morph-orbit-reverse 4.4s var(--motion-ease) 1 both}
.hero-visual img{animation:morph-arrive 1.3s var(--motion-ease) 1 both}
.hero-visual span{position:relative;z-index:1}
.card{position:relative;transition:transform .35s var(--motion-ease),border-color .25s ease,box-shadow .35s ease,background-color .25s ease}
.card:focus-within{border-color:#d5b77777;box-shadow:0 12px 40px #0003}
.button,button{transition:transform .2s var(--motion-ease),box-shadow .25s ease,background-color .2s ease,border-color .2s ease,color .2s ease}
.button:active,button:active{transform:translateY(1px)}
.button:focus-visible,button:focus-visible{box-shadow:0 0 0 4px #83d6c218}
.topbar nav>a{position:relative;transition:color .2s ease}
.topbar nav>a:not(.button)::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--motion-ease)}
.topbar nav>a:hover::after,.topbar nav>a:focus-visible::after{transform:scaleX(1)}
.faq details[open]>p{animation:morph-arrive .35s var(--motion-ease) 1 both}
.morph-reading-progress{position:fixed;inset:0 0 auto;width:100%;height:2px;z-index:50;border:0;appearance:none;pointer-events:none;background:transparent;color:var(--gold)}
.morph-reading-progress::-webkit-progress-bar{background:transparent}
.morph-reading-progress::-webkit-progress-value{background:linear-gradient(90deg,#a4874e,#e4ce94,#83d6c2)}
.morph-reading-progress::-moz-progress-bar{background:linear-gradient(90deg,#a4874e,#e4ce94,#83d6c2)}
@media(hover:hover) and (pointer:fine){
 .hero~.section .card:hover,.section .grid>.card:hover,#store-catalog>.card:hover{transform:translateY(-5px);border-color:#d5b77777;box-shadow:0 18px 50px #0005,0 0 28px #d5b77708}
 .button:not(:disabled):hover,button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 8px 26px #d5b77720}
 .button:active,button:active{transform:translateY(0)}
}
@keyframes morph-arrive{from{opacity:.25;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes morph-orbit{from{transform:rotate(-45deg);opacity:.2}to{transform:rotate(20deg);opacity:1}}
@keyframes morph-orbit-reverse{from{transform:rotate(35deg);opacity:.2}to{transform:rotate(-15deg);opacity:1}}
@media(max-width:650px){.hero .hero-visual{display:grid;width:min(100%,280px);justify-self:center}.hero .hero-visual img{width:90px}.hero .hero-visual span{font-size:10px}.hero{gap:32px}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 .hero-visual::before,.hero-visual::after,.hero-visual img,.faq details[open]>p{animation:none!important}
 .card,.button,button,.topbar nav>a,.topbar nav>a::after{transition:none!important}
 .card:hover,.button:hover,button:hover,.button:active,button:active{transform:none!important}
 .morph-reading-progress{display:none}
}