
/* Motion direction: restrained, tactile, and responsive */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-spring:cubic-bezier(.16,1,.3,1);--motion-fast:.22s;--motion-mid:.5s;--lift-shadow:8px 11px 0 rgba(23,25,27,.9)}
@keyframes reveal-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@keyframes scan-line{0%,100%{transform:translateX(-110%);opacity:0}18%,78%{opacity:.7}50%{transform:translateX(110%)}}@keyframes node-pulse{0%,100%{box-shadow:0 0 0 0 rgba(243,211,59,0)}45%{box-shadow:0 0 0 8px rgba(243,211,59,.16)}}@keyframes editor-in{from{opacity:0;transform:translateX(22px) scale(.98)}to{opacity:1;transform:none}}@keyframes pop-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}@keyframes group-scan{0%{transform:translateX(-120%) skewX(-18deg)}100%{transform:translateX(140%) skewX(-18deg)}}@keyframes decor-float{0%,100%{transform:translateY(0) rotate(var(--decor-rotation,0deg))}50%{transform:translateY(-6px) rotate(calc(var(--decor-rotation,0deg) + 3deg))}}@keyframes hero-panel-in{from{opacity:0;transform:translateX(-42px);clip-path:polygon(0 0,20% 0,24% 12%,24% 100%,3% 100%,0 88%)}to{opacity:1;transform:none}}@keyframes hero-hud-lock{0%{opacity:0;transform:scale(.72) rotate(-18deg)}65%{opacity:1;transform:scale(1.04) rotate(3deg)}100%{transform:none}}@keyframes hud-spin{to{transform:rotate(360deg)}}@keyframes title-signal{0%{text-shadow:-9px 0 var(--archive-secondary),9px 0 var(--archive-accent),6px 6px 0 #000}45%{text-shadow:4px 0 var(--archive-secondary),-4px 0 var(--archive-accent),6px 6px 0 #000}100%{text-shadow:6px 6px 0 #000}}@keyframes status-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes empty-wave{0%,100%{transform:scaleX(.88);opacity:.55}50%{transform:scaleX(1);opacity:1}}
body{--pointer-x:50%;--pointer-y:50%}.topbar{transition:background var(--motion-mid) var(--ease-out),box-shadow var(--motion-mid) var(--ease-out)}.topbar:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--orange),var(--yellow),transparent);transform:scaleX(0);transform-origin:center;transition:transform var(--motion-mid) var(--ease-out)}.topbar:hover:after{transform:scaleX(1)}.brand{transition:transform var(--motion-fast) var(--ease-out)}.brand:hover{transform:translateX(3px)}.brand-mark{transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast) var(--ease-out)}.brand:hover .brand-mark{transform:skew(-8deg) rotate(-4deg) scale(1.08);box-shadow:7px 7px 0 var(--orange)}nav a{position:relative;transition:color var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out)}nav a:not(.bili):after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:right;transition:transform var(--motion-fast) var(--ease-out)}nav a:hover{transform:translateY(-2px)}nav a:hover:after{transform:scaleX(1);transform-origin:left}.button,.icon-button,.player-control,.playlist-button,.play-button{position:relative;overflow:hidden;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast) var(--ease-out),background-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out)}.button:after,.icon-button:after,.player-control:after,.playlist-button:after{content:'';position:absolute;inset:-30% 55% -30% -20%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-180%) skewX(-18deg);transition:transform .65s var(--ease-out)}.button:hover:after,.icon-button:hover:after,.player-control:hover:after,.playlist-button:hover:after{transform:translateX(280%) skewX(-18deg)}.button:active,.icon-button:active,.player-control:active,.playlist-button:active,.play-button:active{transform:translate(2px,2px) scale(.97);box-shadow:1px 1px 0 var(--ink)}.button:focus-visible,.icon-button:focus-visible,.player-control:focus-visible,.playlist-button:focus-visible,.play-button:focus-visible,nav a:focus-visible{outline:2px solid var(--orange);outline-offset:4px}.hero-copy{animation:reveal-up .75s var(--ease-out) both}.hero-art{animation:reveal-up .9s .12s var(--ease-out) both}.hero-art:after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(243,211,59,.28) 50%,transparent 65%);transform:translateX(-120%);animation:scan-line 6s 1.2s ease-in-out infinite;pointer-events:none}.sun{transition:transform 1s var(--ease-out),filter 1s var(--ease-out)}.hero-art:hover .sun{transform:scale(1.04);filter:brightness(1.08)}.episode,.page-card{transform:perspective(900px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)) translateY(0);transform-style:preserve-3d;transition:transform .45s var(--ease-spring),box-shadow .45s var(--ease-out),border-color .3s var(--ease-out)}.episode:after,.page-card:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--glow-x,50%) var(--glow-y,50%),rgba(243,211,59,.18),transparent 38%);opacity:0;pointer-events:none;transition:opacity .35s var(--ease-out)}.episode:hover,.page-card:hover{transform:perspective(900px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)) translateY(-6px);box-shadow:var(--lift-shadow);border-color:var(--orange)}.episode:hover:after,.page-card:hover:after{opacity:1}.episode h3,.page-card h2{transition:color var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out)}.episode:hover h3,.page-card:hover h2{color:var(--orange);transform:translateX(3px)}.chapter{opacity:0;animation:reveal-up .65s var(--ease-out) both}.chapter:nth-child(2){animation-delay:.1s}.chapter:nth-child(3){animation-delay:.2s}.chapter-head{transition:color var(--motion-fast) var(--ease-out),padding-left var(--motion-fast) var(--ease-out)}.chapter-head:hover{color:var(--orange);padding-left:5px}.chapter-head:hover .chapter-no{background:var(--orange);color:var(--paper)}.chapter-no{transition:background var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out)}.episode:before{animation:node-pulse 2.6s 1s infinite}.editor.open .editor-head,.editor.open .editor-body,.editor.open .editor-foot{animation:editor-in .42s var(--ease-out) both}.editor.open .editor-body{animation-delay:.06s}.editor.open .editor-foot{animation-delay:.12s}.editor-tabs button{transition:background var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out),letter-spacing var(--motion-fast) var(--ease-out)}.editor-tabs button:hover{letter-spacing:1px}.content-row,.music-row{animation:pop-in .3s var(--ease-out) both}.playlist-popover:not(.hidden){animation:pop-in .28s var(--ease-out) both}.toast.show{animation:pop-in .3s var(--ease-out) both}.music-player{transition:transform .4s var(--ease-spring),box-shadow .4s var(--ease-out)}.music-player:hover{transform:translateX(-50%) translateY(-4px);box-shadow:10px 13px 0 var(--orange)}.music-player .play-button:hover{transform:rotate(-6deg) scale(1.08)}.page-timeline-item{opacity:0;animation:reveal-up .6s var(--ease-out) both}.page-timeline-item:nth-child(2){animation-delay:.08s}.page-timeline-item:nth-child(3){animation-delay:.16s}.page-timeline-item:nth-child(4){animation-delay:.24s}.page-timeline-item:nth-child(5){animation-delay:.32s}.page-node{transition:transform var(--motion-fast) var(--ease-spring),background var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out)}.page-timeline-item:hover .page-node{transform:scale(1.08) rotate(-3deg);background:var(--orange);color:var(--paper);box-shadow:6px 7px 0 var(--ink)}.page-timeline-item.dragging .page-card{transform:rotate(1deg) scale(1.02);box-shadow:12px 14px 0 var(--orange)}
.archive-group{animation:reveal-up var(--motion-mid) var(--ease-out) both}.archive-group-head:before{transition:opacity var(--motion-fast) var(--ease-out)}.archive-group-head:hover:before{opacity:.8}.archive-group-head .group-title{transition:transform var(--motion-fast) var(--ease-spring)}.archive-group-head:hover .group-title{transform:translateX(6px)}.archive-group-head:hover:after{animation:scan-line .75s var(--ease-out)}.archive-decor{animation:decor-float 5s ease-in-out infinite}.layout-editing .archive-decor{animation:none}.subpage .hero-copy-panel{animation:hero-panel-in .82s var(--ease-out) both}.subpage .page-hero h1{animation:title-signal .38s .48s steps(2,end) both}.subpage .hero-status{animation:status-in .45s .7s var(--ease-out) both}.subpage .hero-hud{animation:hero-hud-lock .9s .18s var(--ease-spring) both}.subpage .hero-hud:before{animation:hud-spin 22s linear infinite}.subpage .hero-hud:after{animation:hud-spin 13s linear infinite reverse}.subpage .hero-grid{animation:pop-in .8s var(--ease-out) both}.archive-empty-wave{animation:empty-wave 1.8s ease-in-out infinite}.archive-events .hero-copy-panel{animation-name:hero-panel-in}.page-card .episode-tag,.page-card .page-links{transition:transform var(--motion-fast) var(--ease-out),background var(--motion-fast) var(--ease-out)}.page-card:hover .episode-tag{transform:skew(-6deg) translateX(5px)}.page-card:hover .page-links{transform:translateY(-2px)}
@media (hover:none){.episode,.page-card{transform:none!important}.episode:after,.page-card:after{display:none}.music-player:hover{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.episode,.page-card{transform:none!important}}
