/* Native page transitions keep the sidebar steady while the next canvas appears. */
@media(prefers-reduced-motion:no-preference){
 @view-transition{navigation:auto}
 aside{view-transition-name:brand-sidebar}
 ::view-transition-old(root){animation:page-away 180ms ease both}
 ::view-transition-new(root){animation:page-appear 380ms ease both}
 ::view-transition-group(brand-sidebar){animation-duration:0s}
 ::view-transition-old(brand-sidebar),::view-transition-new(brand-sidebar){animation:none;mix-blend-mode:normal}
 .page-arriving .cover-word{display:inline-block;transform-origin:50% 90%;animation:word-arrive 620ms cubic-bezier(.2,.8,.2,1) var(--word-delay,80ms) both}
 .page-arriving .chapter-cover>div:first-child>.eyebrow,.page-arriving .landing-welcome>.eyebrow{animation:detail-arrive 450ms ease 60ms both}
 .page-arriving .chapter-cover>p,.page-arriving .landing-welcome>p,.page-arriving .hero-copy>p,.page-arriving .hero-copy>.light-button{animation:detail-arrive 520ms ease 230ms both}
 .page-arriving .cover-art{animation:art-arrive 800ms cubic-bezier(.2,.8,.2,1) 120ms both}
 .page-arriving .heading-character{animation:character-peek 700ms cubic-bezier(.2,.8,.2,1) 300ms both}
 .page-arriving .cover-bottom{animation:detail-arrive 450ms ease 380ms both}
 .page-arriving .landing-cast{animation:art-arrive 800ms cubic-bezier(.2,.8,.2,1) 180ms both}
 .page-arriving .landing .chapter{animation:card-arrive 550ms cubic-bezier(.2,.8,.2,1) both}
 .page-arriving .landing .chapter:nth-child(1){animation-delay:100ms}
 .page-arriving .landing .chapter:nth-child(2){animation-delay:150ms}
 .page-arriving .landing .chapter:nth-child(3){animation-delay:200ms}
 .page-arriving .landing .chapter:nth-child(4){animation-delay:250ms}
 .page-arriving .landing .chapter:nth-child(5){animation-delay:300ms}
 .page-arriving .landing .chapter:nth-child(6){animation-delay:350ms}
 .page-arriving .landing-index .intro-bottom>p{animation:detail-arrive 520ms ease 160ms both}
 .page-arriving .landing-index .chapter{animation:card-arrive 550ms cubic-bezier(.2,.8,.2,1) both}
 .page-arriving .landing-index .chapter:nth-child(1){animation-delay:80ms}
 .page-arriving .landing-index .chapter:nth-child(2){animation-delay:130ms}
 .page-arriving .landing-index .chapter:nth-child(3){animation-delay:180ms}
 .page-arriving .landing-index .chapter:nth-child(4){animation-delay:230ms}
 .page-arriving .landing-index .chapter:nth-child(5){animation-delay:280ms}
 .page-arriving .landing-index .chapter:nth-child(6){animation-delay:330ms}
}
@keyframes page-away{to{opacity:0}}
@keyframes page-appear{from{opacity:0}to{opacity:1}}
@keyframes word-arrive{0%{opacity:0;transform:translateY(20px) rotate(var(--word-tilt,1.5deg))}70%{opacity:1;transform:translateY(-2px) rotate(0)}100%{opacity:1;transform:none}}
@keyframes detail-arrive{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes art-arrive{0%{opacity:0;transform:translateY(22px) scale(.92)}65%{opacity:1;transform:translateY(-5px) scale(1.015)}100%{opacity:1;transform:none}}
@keyframes character-peek{0%{opacity:0;transform:translateY(10px) rotate(-12deg) scale(.8)}70%{opacity:1;transform:translateY(-2px) rotate(4deg) scale(1.04)}100%{opacity:1;transform:none}}
@keyframes card-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Original vector silhouettes feed into the glyph's open wedge. No background mask. */
.cover-art-logo{display:flex;align-items:center;justify-content:center}
.logo-arcade{width:86%;max-width:550px;margin:auto;position:relative}
.logo-arcade-scene{display:block;width:100%;height:auto;overflow:visible}
.logo-pellet{transform:translateX(0)}
@media(prefers-reduced-motion:no-preference){
 .logo-pellet{animation:pellet-march 5.4s linear infinite}
 .logo-arcade.is-paused .logo-pellet{animation-play-state:paused}
}
@keyframes pellet-march{
 0%{opacity:0;transform:translateX(0)}
 7%,12%{opacity:1;transform:translateX(0)}
 80%{opacity:1;transform:translateX(-410px)}
 81%,100%{opacity:0;transform:translateX(-410px)}
}
@media(max-width:700px){.logo-arcade{max-width:440px}}
@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 .cover-word{display:inline-block}
 .page-arriving *{animation:none!important}
}


/* A small greeting on hover, returning to rest when the pointer leaves. */
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .cover-quote>span{transform-origin:50% 65%;transition:transform 250ms ease}
 .cover-quote:hover>span{animation:hello-wave 1.2s ease-in-out}
}
@keyframes hello-wave{
 0%,100%{transform:translate(-50%,-50%) rotate(-7deg)}
 25%{transform:translate(-50%,calc(-50% - 8px)) rotate(-2deg)}
 48%{transform:translate(-50%,calc(-50% - 3px)) rotate(-10deg)}
 72%{transform:translate(-50%,calc(-50% - 1px)) rotate(-5deg)}
}