/* Motion is opt-in. Content stays visible if scripting or an observer is unavailable. */
:root{--hvh-motion-ease:cubic-bezier(.2,.75,.25,1);--hvh-scroll:0}
.hvh-tactile-host{position:relative}
.hvh-surface{position:relative;isolation:isolate}
.hvh-surface::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:radial-gradient(380px circle at var(--hvh-light-x,50%) var(--hvh-light-y,0),rgb(var(--hvh-ruby-rgb,226 41 71) / .08),transparent 75%);opacity:0;transition:opacity .4s}
.hvh-surface-active::after{opacity:1}
body.site-ui .hvh-surface::after{display:block!important;content:""!important}
.hvh-motion-toggle{display:inline-flex;align-items:center;gap:9px;min-height:38px;padding:8px 12px;border:1px solid #30303a;border-radius:5px;background:#000;color:#a1a1ac;font:500 11px var(--ui-font);cursor:pointer}
.hvh-motion-toggle svg{width:14px;height:14px;stroke:var(--ui-accent)}
.hvh-motion-toggle small{color:#858594;font-size:9px}
.hvh-motion-toggle:hover{border-color:var(--ui-accent);color:#e6e6ea}
.hvh-motion-toggle:disabled{cursor:default;opacity:.65}
.control-footer{flex-wrap:wrap;gap:12px}
.hvh-tactile-pulse{position:absolute;inset:0;z-index:4;overflow:hidden;border-radius:inherit;pointer-events:none;contain:paint}
.hvh-tactile-pulse::after{content:"";position:absolute;left:var(--hvh-pulse-x,50%);top:var(--hvh-pulse-y,50%);width:220%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,.035) 55%,transparent 70%);translate:-50% -50%;animation:hvh-tactile 600ms var(--hvh-motion-ease) both}
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .hvh-motion-ready .admin-chart-card.is-revealed svg{animation:hvh-chart-draw 1.2s var(--hvh-motion-ease) both}
  .hvh-motion-ready .hvh-hero__word{animation:hvh-word-in 1.2s var(--hvh-motion-ease) both}
  .hvh-motion-ready .top--signal::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,var(--hvh-ruby-deep),var(--ui-accent));transform:scaleX(var(--hvh-scroll));transform-origin:left;pointer-events:none}
  @keyframes hvh-chart-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
  @keyframes hvh-word-in{from{opacity:0;transform:translateY(18px);letter-spacing:-.12em}to{opacity:1;transform:translateY(0)}}
  .hvh-motion-ready [data-hvh-hero]{--hvh-x:0;--hvh-y:0}
  .hvh-motion-ready [data-hvh-depth]{transition:transform 850ms var(--hvh-motion-ease)}
  .hvh-motion-ready .hvh-pointer-active [data-hvh-depth]{transition-duration:300ms}
  .hvh-motion-ready [data-hvh-reveal].is-revealed{animation:hvh-reveal 780ms var(--hvh-motion-ease) var(--hvh-reveal-delay,0ms) backwards}
  .hvh-motion-ready [data-hvh-reveal="line"].is-revealed{animation-name:hvh-reveal-line}
  .hvh-motion-ready [data-hvh-reveal="fade"].is-revealed{animation-name:hvh-reveal-fade}
  .hvh-motion-ready [data-hvh-reveal="left"].is-revealed{animation-name:hvh-reveal-left}
  .hvh-motion-ready [data-hvh-magnet]{translate:var(--hvh-magnet-x,0px) var(--hvh-magnet-y,0px);transition:translate 300ms var(--hvh-motion-ease)}
  .hvh-motion-ready [data-hvh-magnet].is-hvh-magnetic{transition-duration:160ms}
  .hvh-motion-ready .hvh-scene-paused [data-hvh-depth],
  .hvh-motion-ready .hvh-scene-paused [data-hvh-ambient],
  .hvh-motion-ready .hvh-scene-paused::before,
  .hvh-motion-ready .hvh-scene-paused::after{animation-play-state:paused!important}
  @keyframes hvh-reveal{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
  @keyframes hvh-reveal-line{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
  @keyframes hvh-reveal-fade{from{opacity:0}to{opacity:1}}
  @keyframes hvh-reveal-left{from{opacity:0;transform:translate3d(-20px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
  @keyframes hvh-tactile{from{opacity:.85;scale:.05}to{opacity:0;scale:1}}
}
@media(prefers-reduced-motion:reduce){
  [data-hvh-reveal],[data-hvh-depth],[data-hvh-ambient],.hvh-tactile-pulse::after{animation:none!important;transition:none!important}
  [data-hvh-magnet]{translate:none!important}
  .hvh-tactile-pulse{display:none}
}

html.hvh-reduced-motion{scroll-behavior:auto!important}
html.hvh-reduced-motion :is([data-hvh-reveal],[data-hvh-reveal] *,[data-hvh-hero] *,[data-hvh-magnet],.hvh-tactile-pulse::after){animation:none!important;transition:none!important}
html.hvh-reduced-motion [data-hvh-magnet]{translate:none!important}
html.hvh-reduced-motion .hvh-surface::after{display:none}
html.hvh-reduced-motion .hvh-hero__spectrum,html.hvh-reduced-motion .hvh-hero__scan{display:none}
html.hvh-reduced-motion :is(.hvh-hero__figure,.hvh-hero__echo,.hvh-hero__traces){transform:none!important;translate:none!important}
html.hvh-reduced-motion .hvh-trace{stroke-dashoffset:0;opacity:.35}
html.hvh-page-hidden *,html.hvh-page-hidden *::before,html.hvh-page-hidden *::after{animation-play-state:paused!important}
.hvh-scene-paused *,.hvh-scene-paused *::before,.hvh-scene-paused *::after{animation-play-state:paused!important}

/* Anime.js owns these entrances; CSS remains the fallback when the vendor cannot load. */
.hvh-anime-ready [data-hvh-anime].is-revealed,
.hvh-anime-ready .hvh-hero__word[data-hvh-anime]{animation:none!important}
.hvh-anime-playing{will-change:opacity,translate}
.hvh-nav-ready{position:relative}
.hvh-nav-rail{position:absolute;pointer-events:none;left:var(--rail-x,0px);top:var(--rail-y,0px);width:var(--rail-w,0px);height:var(--rail-h,2px);z-index:3;background:var(--ui-accent);border-radius:4px;box-shadow:0 0 12px rgb(var(--hvh-ruby-rgb,226 41 71) / .2);transition:left 360ms var(--hvh-motion-ease),top 360ms var(--hvh-motion-ease),width 360ms var(--hvh-motion-ease),height 360ms var(--hvh-motion-ease),opacity 180ms}
html:not(.hvh-reduced-motion) .top--signal .nav.hvh-nav-ready a::after{display:none}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  html:not(.hvh-reduced-motion) .home-offer>span:last-child,
  html:not(.hvh-reduced-motion) .hvh-link>span{display:inline-block;transition:translate 400ms var(--hvh-motion-ease),color 250ms}
  html:not(.hvh-reduced-motion) .home-offer:hover>span:last-child,
  html:not(.hvh-reduced-motion) .hvh-link:hover>span{translate:3px -3px;color:var(--ui-accent)}
  html:not(.hvh-reduced-motion) .home-server__join{transition:translate 400ms var(--hvh-motion-ease),background 250ms,border-color 250ms}
  html:not(.hvh-reduced-motion) .hvh-server:hover .home-server__join{translate:-4px 0}
  html:not(.hvh-reduced-motion) .profile-performance article{transition:background 350ms}
  html:not(.hvh-reduced-motion) .profile-performance article:hover{background:rgb(var(--hvh-ruby-rgb) / .035)}
}
html.hvh-reduced-motion .hvh-nav-rail{display:none}
@media(prefers-reduced-motion:reduce){.hvh-nav-rail{display:none}.hvh-anime-playing{will-change:auto}}
@media(forced-colors:active){.hvh-nav-rail{background:Highlight;box-shadow:none}}

/* Native same-origin page transitions preserve regular PHP navigation and browser history. */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:no-preference){
  .top--signal{view-transition-name:yuten-header}
  ::view-transition-old(root){animation:hvh-route-out 180ms ease-out both}
  ::view-transition-new(root){animation:hvh-route-in 340ms var(--hvh-motion-ease) both}
  ::view-transition-group(yuten-header){animation-duration:250ms}
  @keyframes hvh-route-out{to{opacity:0;transform:translateY(-6px)}}
  @keyframes hvh-route-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
}
html.hvh-reduced-motion::view-transition-group(*),
html.hvh-reduced-motion::view-transition-old(*),
html.hvh-reduced-motion::view-transition-new(*){animation:none!important}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}