/* Brief, quiet feedback. Scroll choreography owns the cartridge transforms. */
:root{--ui-ease:cubic-bezier(.22,.7,.3,1);--ui-fast:140ms;--ui-enter:180ms}
.button,.menu-toggle,.dialog-close{transition:translate var(--ui-fast) var(--ui-ease),scale 90ms var(--ui-ease),background-color var(--ui-fast),border-color var(--ui-fast),color var(--ui-fast),box-shadow var(--ui-fast)}
.button:hover{filter:none}
.text-link,.back-to-top,.header-brand,.footer-signature{transition:color var(--ui-fast),border-color var(--ui-fast),opacity var(--ui-fast)}
.text-link>span,.button>span,.back-to-top>span{transition:transform var(--ui-fast) var(--ui-ease),background-color var(--ui-fast),color var(--ui-fast)}
.site-header #main-nav a,.footer-nav a{transition:background-color var(--ui-fast),color var(--ui-fast),box-shadow var(--ui-fast),scale 90ms var(--ui-ease)}
.site-header #main-nav a>span:not(.nav-index):not(.nav-arrow){transition:translate var(--ui-fast) var(--ui-ease)}
input,textarea,select{transition:border-color var(--ui-fast),background-color var(--ui-fast),box-shadow var(--ui-fast)}
input:focus,textarea:focus,select:focus{border-color:var(--dawn);background:#202b35;box-shadow:0 0 0 3px #e4b8890e}
.game-card,.team-card,.principles article{transition:border-color var(--ui-enter),background-color var(--ui-enter)}
.nen-cartridge .cartridge-front{transition:box-shadow var(--ui-fast)}
.nen-cartridge .cartridge-caption h3,.nen-cartridge .cartridge-caption p{transition:color var(--ui-fast)}
.nen-cartridge .cartridge-caption p>span{display:inline-block;transition:transform var(--ui-fast) var(--ui-ease)}
@media(hover:hover) and (pointer:fine){
  .button:not(:disabled):not([aria-disabled=true]):hover{translate:0 -2px;box-shadow:0 5px 16px #0002}
  .header-community .header-cta:hover,.footer-connect .footer-secondary:hover{box-shadow:none}
  .button.primary:hover,.footer-cta:hover{background:#edc79f;border-color:#edc79f}
  .button.secondary:hover{background:#e4b8890a;border-color:#e4b88970}
  .text-link:hover>span{transform:translate(2px,-2px)}
  .header-brand:hover{color:var(--dawn)}
  .site-header #main-nav a:hover>span:not(.nav-index):not(.nav-arrow){translate:0 -1px}
  .menu-toggle:hover,.dialog-close:hover{color:var(--dawn)}
  .game-card:hover{border-color:var(--game-accent)}
  .team-card:hover,.principles article:hover{border-color:#e4b88965}
  .nen-cartridge:hover .cartridge-front{box-shadow:0 14px 30px #0004,0 0 0 1px #e4b88988,0 0 18px #e4b88915}
  .nen-cartridge:hover .cartridge-caption h3,.nen-cartridge:hover .cartridge-caption p{color:var(--dawn)}
  .nen-cartridge:hover .cartridge-caption p>span{transform:translate(2px,-2px)}
}
.button:not(:disabled):active,.menu-toggle:active,.dialog-close:active{translate:0 0;scale:.975;transition-duration:70ms}
.site-header #main-nav a:active,.footer-nav a:active{scale:.97;transition-duration:70ms}
.text-link:active,.back-to-top:active,.header-brand:active,.footer-signature:active{opacity:.72}
.nen-cartridge:active .cartridge-front{box-shadow:0 7px 18px #0004,0 0 0 1px #e4b889aa}
.button:focus-visible,.menu-toggle:focus-visible{border-color:var(--dawn)}
@keyframes ui-reveal{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes ui-fade-in{from{opacity:0}to{opacity:1}}
@keyframes ui-fade-out{from{opacity:1}to{opacity:0}}
@media(max-width:900px){.site-header #main-nav.open{animation:ui-reveal var(--ui-enter) var(--ui-ease) both}}
#form-result:not([hidden]){animation:ui-reveal var(--ui-enter) var(--ui-ease) both}
/* Discrete transitions retain the native dialog's focus and Escape behavior. */
dialog{opacity:0;transform:translateY(5px) scale(.99);transition:opacity 140ms var(--ui-ease),transform 160ms var(--ui-ease),display 160ms allow-discrete,overlay 160ms allow-discrete}
dialog[open]{opacity:1;transform:none}
dialog::backdrop{background:#03070c00;transition:background-color 160ms,display 160ms allow-discrete,overlay 160ms allow-discrete}
dialog[open]::backdrop{background:#03070cdc}
@starting-style{dialog[open]{opacity:0;transform:translateY(5px) scale(.99)}dialog[open]::backdrop{background:#03070c00}}
/* A plain CSS entrance also works in embedded browsers without View Transitions.
   Only opacity changes: fixed story cards retain their coordinate system. */
main{animation:ui-fade-in 200ms ease-out}
.site-header #main-nav a:hover,.site-header #main-nav a:focus-visible{background:#35414c;color:#f3d6b7;box-shadow:inset 0 -2px 0 #e4b889}
.button:active{background-color:#e4b88930;box-shadow:inset 0 0 0 1px #e4b88999}
.button.primary:active,.button.footer-cta:active{background-color:#cfa678}
@media(prefers-reduced-motion:reduce){
  /* Reduced motion removes displacement, not useful color/opacity feedback. */
  :root{--ui-fast:120ms;--ui-enter:120ms}
  main,#form-result:not([hidden]),.site-header #main-nav.open{animation:ui-fade-in 120ms ease-out!important}
  .button,.menu-toggle,.dialog-close,.site-header #main-nav a,.footer-nav a{transition-property:color,background-color,border-color,box-shadow,opacity}
  .button,.menu-toggle,.dialog-close,.site-header #main-nav a,.footer-nav a{translate:none!important;scale:none!important}
  .site-header #main-nav a>span{translate:none!important}
  .button>span,.text-link>span,.back-to-top>span,.nen-cartridge .cartridge-caption p>span{transform:none!important}
  .footer-nav .footer-nav-arrow{transform:none!important;transition:opacity 120ms}
  .menu-lines i{transition:none!important}
  dialog,dialog[open]{transform:none!important;transition:opacity 120ms,display 120ms allow-discrete,overlay 120ms allow-discrete}
}