/* UI motion: short, restrained entrances and feedback for panels, prompts and
   menus. Everything here is presentation only. It uses the independent
   translate/scale properties, so existing positioning transforms are kept.
   prefers-reduced-motion and the in-game "Visual effects: Off" setting
   (html[data-effects="off"]) turn it all off. */

@keyframes ui-fade{from{opacity:0}to{opacity:1}}
@keyframes ui-rise{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes ui-drop{from{opacity:0;translate:0 -10px}to{opacity:1;translate:0 0}}
@keyframes ui-pop{0%{opacity:0;scale:.9}60%{opacity:1;scale:1.03}100%{opacity:1;scale:1}}
@keyframes ui-card{from{opacity:0;translate:0 16px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
@keyframes ui-slide-in{from{opacity:0;translate:36px 0}to{opacity:1;translate:0 0}}
@keyframes ui-nudge{0%,100%{translate:0 0}50%{translate:3px 0}}
@keyframes ui-bump{0%{scale:1}35%{scale:1.28}100%{scale:1}}
@keyframes ui-quest{0%{box-shadow:4px 4px 0 #21172966,0 0 0 0 #ffd48b00}25%{box-shadow:4px 4px 0 #21172966,0 0 0 3px #ffd48bcc}100%{box-shadow:4px 4px 0 #21172966,0 0 0 10px #ffd48b00}}
@keyframes ui-quest-title{0%,100%{color:inherit}20%{color:#ffe2a6}}
@keyframes ui-twinkle{0%,100%{opacity:.15;scale:.6}50%{opacity:.95;scale:1}}
@keyframes ui-scene{from{opacity:.001}to{opacity:1}}
@keyframes ui-portrait{0%{translate:0 0}35%{translate:0 -4px}100%{translate:0 0}}

/* Dialogue typewriter overlay. The paragraph keeps the complete page for
   layout and screen readers; the overlay only paints the revealed letters. */

.dialogue-type{position:absolute;margin:0!important;pointer-events:none}
.dialogue-type>span:last-child{visibility:hidden}
#dialogue-text.typing{color:transparent}
.dialogue.typing #continue span{opacity:.35}

/* Health damage trail: a pale bar lags behind the fill after a hit. */
#health-bar,#boss-health .boss-track{position:relative}
#health-bar::before{content:'';position:absolute;left:2px;top:2px;bottom:2px;width:calc(var(--hp-ghost,100%) - 4px);max-width:calc(100% - 4px);background:#ffe3b0;opacity:.75;transition:width .5s ease-in .32s}
#health-fill{position:relative;z-index:1}
#boss-fill{transition:width .2s ease-out}

@media (prefers-reduced-motion:no-preference){
 :root:not([data-effects="off"]) .dialogue:not([hidden]){animation:ui-rise .24s cubic-bezier(.2,.8,.3,1) both}
 :root:not([data-effects="off"]) #dialogue-portrait.speaker-change{animation:ui-portrait .3s ease-out}
 :root:not([data-effects="off"]) .dialogue:not(.typing) #continue span{display:inline-block;animation:ui-nudge 1.1s ease-in-out infinite}
 :root:not([data-effects="off"]) .interact:not([hidden]){animation:ui-pop .22s cubic-bezier(.2,.8,.3,1.2) both}
 :root:not([data-effects="off"]) .toast:not([hidden]){animation:ui-drop .26s cubic-bezier(.2,.8,.3,1) both}
 :root:not([data-effects="off"]) .death-banner:not([hidden]){animation:ui-pop .34s cubic-bezier(.2,.8,.3,1.2) both}
 :root:not([data-effects="off"]) .boss-health:not([hidden]){animation:ui-drop .36s cubic-bezier(.2,.8,.3,1) both}
 :root:not([data-effects="off"]) .overlay:not([hidden]):not(#loading):not(.chapter-unlock){animation:ui-fade .2s ease-out both}
 :root:not([data-effects="off"]) .overlay:not([hidden]):not(#loading)>.overlay-card{animation:ui-card .3s cubic-bezier(.2,.8,.3,1) both}
 :root:not([data-effects="off"]) .chapter-unlock:not([hidden]) .chapter-card>*{animation:ui-rise .42s cubic-bezier(.2,.8,.3,1) both}
 :root:not([data-effects="off"]) .chapter-unlock:not([hidden]) .chapter-card>:nth-child(2){animation-delay:.05s}
 :root:not([data-effects="off"]) .chapter-unlock:not([hidden]) .chapter-card>:nth-child(3){animation-delay:.1s}
 :root:not([data-effects="off"]) .chapter-unlock:not([hidden]) .chapter-card>:nth-child(4){animation-delay:.15s}
 :root:not([data-effects="off"]) .chapter-unlock:not([hidden]) .chapter-card>:nth-child(5){animation-delay:.2s}
 :root:not([data-effects="off"]) .chapter-unlock:not([hidden]) .chapter-card>:nth-child(6){animation-delay:.25s}
 :root:not([data-effects="off"]) .chapter-unlock:not([hidden]) .chapter-card>:nth-child(n+7){animation-delay:.3s}
 :root:not([data-effects="off"]) .chapter-unlock:not([hidden]) #chapter-cast{animation:ui-slide-in .7s cubic-bezier(.2,.8,.3,1) .1s both}
 :root:not([data-effects="off"]) body:not(.booting) .title-screen:not([hidden]) .title-copy>*{animation:ui-rise .5s cubic-bezier(.2,.8,.3,1) both}
 :root:not([data-effects="off"]) body:not(.booting) .title-screen:not([hidden]) .title-copy>:nth-child(2){animation-delay:.06s}
 :root:not([data-effects="off"]) body:not(.booting) .title-screen:not([hidden]) .title-copy>:nth-child(3){animation-delay:.12s}
 :root:not([data-effects="off"]) body:not(.booting) .title-screen:not([hidden]) .title-copy>:nth-child(4){animation-delay:.18s}
 :root:not([data-effects="off"]) body:not(.booting) .title-screen:not([hidden]) .title-copy>:nth-child(n+5){animation-delay:.24s}
 :root:not([data-effects="off"]) body:not(.booting) .title-screen:not([hidden]) .title-cast-wrap{animation:ui-rise .7s cubic-bezier(.2,.8,.3,1) .15s both}
 :root:not([data-effects="off"]) .title-twinkles i{animation:ui-twinkle 3.2s ease-in-out infinite}
 :root:not([data-effects="off"]) .quest.quest-updated{animation:ui-quest 1.1s ease-out}
 :root:not([data-effects="off"]) .quest.quest-updated h2{animation:ui-quest-title 1.1s ease-out}
 :root:not([data-effects="off"]) #wallet-number.bump,:root:not([data-effects="off"]) #shop-wallet.bump{display:inline-block;animation:ui-bump .34s ease-out}
 :root:not([data-effects="off"]) #stage.scene-enter>#game{animation:ui-scene .42s ease-out both}
 /* Buttons lift on hover and press down on click. */
 :root:not([data-effects="off"]) :is(.primary,.menu-start,.menu-secondary,#pause,.shop-item button,.overlay-card button:not(.text-button)){transition:translate .12s ease-out,filter .12s ease-out,background-color .12s}
 :root:not([data-effects="off"]) :is(.primary,.menu-start,.menu-secondary,#pause,.overlay-card button:not(.text-button)):not(:disabled):hover{translate:0 -1px;filter:brightness(1.06)}
 :root:not([data-effects="off"]) :is(.primary,.menu-start,.menu-secondary,#pause,.overlay-card button:not(.text-button)):not(:disabled):active{translate:0 1px;filter:brightness(.96)}
 :root:not([data-effects="off"]) .menu-secondary>span:last-child{transition:translate .15s ease-out}
 :root:not([data-effects="off"]) .menu-secondary:not(:disabled):hover>span:last-child{translate:3px 0}
 :root:not([data-effects="off"]) .touch-action:active{scale:.94}
}

/* Title sky twinkles sit over the painted stars in the upper sky. */
.title-twinkles{position:absolute;inset:0;pointer-events:none;z-index:0}
.title-twinkles i{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;opacity:0;background:radial-gradient(circle,#fff 0 1.5px,#fff8 2px,transparent 3px),linear-gradient(#fff0,#fffc,#fff0) center/1.5px 100% no-repeat,linear-gradient(90deg,#fff0,#fffc,#fff0) center/100% 1.5px no-repeat}
.title-twinkles i:nth-child(1){left:51%;top:8%;animation-delay:.2s!important}
.title-twinkles i:nth-child(2){left:57%;top:4.5%;animation-delay:1.1s!important;animation-duration:2.6s!important}
.title-twinkles i:nth-child(3){left:48%;top:21%;animation-delay:2s!important}
.title-twinkles i:nth-child(4){left:54.5%;top:28%;animation-delay:.7s!important;animation-duration:3.8s!important}
.title-twinkles i:nth-child(5){left:61%;top:12%;animation-delay:1.6s!important;animation-duration:2.9s!important}
.title-twinkles i:nth-child(6){left:46%;top:43%;animation-delay:2.6s!important;animation-duration:3.4s!important}
@media(max-width:600px){.title-twinkles{display:none}}
/* Same metrics as #dialogue #dialogue-text in style.css. */
#dialogue .dialogue-type{min-height:0;max-width:none;overflow:hidden;font-size:16px;line-height:22px;overflow-wrap:anywhere;-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Arrival card: chapter number and name, centered in the upper stage. */
@keyframes scene-title{0%{opacity:0;translate:0 -12px}16%{opacity:1;translate:0 0}78%{opacity:1;translate:0 0}100%{opacity:0;translate:0 -4px}}
.scene-title{position:absolute;left:50%;top:16%;transform:translateX(-50%);z-index:4;text-align:center;pointer-events:none;white-space:nowrap;padding:18px 70px 22px;background:radial-gradient(ellipse at center,#100c20e0 0,#100c20b0 42%,#100c2000 72%)}
.scene-title span{display:block;font-family:PixelFallback,monospace;font-size:.8rem;font-weight:700;letter-spacing:.3em;color:var(--accent);text-shadow:1px 1px 0 #1b1426,0 0 6px #100c20}
.scene-title strong{display:block;margin-top:8px;font-size:clamp(1.7rem,4.2vw,3rem);font-weight:900;letter-spacing:-.03em;line-height:1;color:#ffefd2;text-shadow:3px 3px 0 #bc785f,6px 6px 0 #452741,8px 8px 0 #11142699}
.scene-title.show{opacity:1}
@media (prefers-reduced-motion:no-preference){:root:not([data-effects="off"]) .scene-title.show{animation:scene-title 2.9s ease-out both}}
@media (prefers-reduced-motion:reduce){.scene-title{transition:none}}
:root[data-effects="off"] .scene-title{display:none!important}
@media(max-width:600px){.scene-title{top:30%;white-space:normal;width:92%;padding:14px 20px 18px}.scene-title span{font-size:.62rem}.scene-title strong{font-size:1.5rem}}

/* The arrival card takes the toast's place while it shows. */
#stage:has(.scene-title.show:not([hidden])) .toast{visibility:hidden}
body.mobile-game .scene-title{top:30%;white-space:normal;width:92%;padding:14px 20px 18px}
body.mobile-game .scene-title strong{font-size:clamp(1.4rem,7vw,2.1rem)}

/* Low health: the stage edges pulse a soft red while health is 25 or less. */
@keyframes low-health{0%,100%{box-shadow:inset 0 0 0 0 #d9406000,inset 0 0 60px 6px #c7305033}50%{box-shadow:inset 0 0 0 2px #e0507066,inset 0 0 90px 14px #c7305055}}
#stage::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit;box-shadow:none}
#stage:has(#health-panel.low)::after{box-shadow:inset 0 0 60px 6px #c7305033}
@media (prefers-reduced-motion:no-preference){:root:not([data-effects="off"]) #stage:has(#health-panel.low)::after{animation:low-health 1.6s ease-in-out infinite}}
body.on-title #stage::after,body.on-voyage #stage::after{display:none}