/* Shared motion layer, loaded last on every page. */

/* The poster glow bleeds past the column on purpose; clip it so it never adds a horizontal scrollbar. */
html{overflow-x:clip}

/* Backdrop: faint line icons from the games, tinted by the selected game and drifting very slowly. */
body::before{content:"";position:fixed;inset:-260px;z-index:0;pointer-events:none;background-color:var(--pattern-color,#5fbdc1);opacity:.06;-webkit-mask:url(media/pattern.svg) 0 0/260px 260px repeat;mask:url(media/pattern.svg) 0 0/260px 260px repeat;transition:background-color 1.2s ease;animation:pattern-drift 120s linear infinite}
.night::before{opacity:.075}
body[data-active-game="0"]{--pattern-color:#3ac79a}body[data-active-game="1"]{--pattern-color:#4c8dff}body[data-active-game="2"]{--pattern-color:#a46bff}body[data-active-game="3"]{--pattern-color:#a8ba6e}body[data-active-game="8"]{--pattern-color:#7da2b8}
@keyframes pattern-drift{to{transform:translate(260px,260px)}}

/* Page-to-page: covers and titles morph between the landing page and project pages. */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.6s;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
::view-transition-old(root){animation:vt-fade-out .22s ease both}
::view-transition-new(root){animation:vt-rise-in .5s .1s cubic-bezier(.22,.61,.36,1) both}
html:active-view-transition-type(forward)::view-transition-old(root){animation:vt-slide-out-left .35s cubic-bezier(.4,0,.2,1) both}
html:active-view-transition-type(forward)::view-transition-new(root){animation:vt-slide-in-right .5s .05s cubic-bezier(.22,.61,.36,1) both}
html:active-view-transition-type(back)::view-transition-old(root){animation:vt-slide-out-right .35s cubic-bezier(.4,0,.2,1) both}
html:active-view-transition-type(back)::view-transition-new(root){animation:vt-slide-in-left .5s .05s cubic-bezier(.22,.61,.36,1) both}
/* Portrait posters and landscape covers have different shapes: crop instead of stretching. */
::view-transition-old(*),::view-transition-new(*){height:100%;object-fit:cover}
::view-transition-group(root){animation-duration:.5s}
@keyframes vt-fade-out{to{opacity:0}}
@keyframes vt-rise-in{from{opacity:0;transform:translateY(14px)}}
@keyframes vt-slide-out-left{to{opacity:0;transform:translateX(-40px)}}
@keyframes vt-slide-in-right{from{opacity:0;transform:translateX(60px)}}
@keyframes vt-slide-out-right{to{opacity:0;transform:translateX(40px)}}
@keyframes vt-slide-in-left{from{opacity:0;transform:translateX(-60px)}}

/* Leaving from the detail dialog: the cards behind it must not fly over it. */
.no-morph [style*="view-transition-name"]{view-transition-name:none!important}

/* Theme switch: a circular reveal grows from the toggle (driven by theme.js). */
.theme-switching *,.theme-switching *::before,.theme-switching *::after{view-transition-name:none!important;transition:none!important}
.theme-switching::view-transition-old(root),.theme-switching::view-transition-new(root){animation:none;mix-blend-mode:normal}
#theme{transition:transform .5s cubic-bezier(.34,1.56,.64,1),background .3s}#theme:hover{transform:rotate(-18deg) scale(1.08)}#theme:active{transform:scale(.9)}

/* Reading progress along the top edge. */
.scroll-progress{display:none}
@supports (animation-timeline:scroll()){
 .scroll-progress{display:block;position:fixed;top:0;left:0;right:0;height:3px;z-index:30;pointer-events:none;background:linear-gradient(90deg,var(--green),#5fbdc1,#ba5bf3);transform-origin:0 50%;transform:scaleX(0);animation:scroll-grow linear both;animation-timeline:scroll(root)}
 header{animation:header-lift linear both;animation-timeline:scroll(root);animation-range:0 140px}
}
@keyframes scroll-grow{to{transform:scaleX(1)}}
@keyframes header-lift{to{box-shadow:0 8px 24px #10203a14;border-bottom-color:var(--line)}}
header{border-bottom:1px solid transparent}

/* Cards: lift, cover zoom and a soft light that follows the pointer. */
.game-card,.study-card{--mx:50%;--my:0%}
.game-card::after,.study-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--mx) var(--my),color-mix(in srgb,var(--green) 13%,transparent),transparent 60%)}
.study-card{position:relative}
.game-card:hover,.study-card:hover{transform:translateY(-6px)}
.game-card:hover::after,.study-card:hover::after{opacity:1}
.game-visual img{transition:scale .9s cubic-bezier(.2,.7,.2,1),filter .5s}
.cover-link{display:block;border-radius:11px;color:inherit}
.cover-link:hover .game-visual img,.study-card .project:hover .game-visual img{scale:1.05}
.cover-link:focus-visible{outline:3px solid #bd8a50;outline-offset:4px}
.game-copy h3 a{color:inherit;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .45s cubic-bezier(.22,.61,.36,1)}
.game-copy h3 a:hover{background-size:100% 2px}

/* Card trailer preview: the portrait clip sits centred over a blurred, dimmed cover. */
.card-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;opacity:0;scale:1.04;background:#0b1422a6;backdrop-filter:blur(12px) saturate(1.2);transition:opacity .45s ease,scale .6s cubic-bezier(.22,.61,.36,1);pointer-events:none}
.game-visual.previewing .card-preview{opacity:1;scale:1}
.game-visual.has-preview::after{content:attr(data-preview-label);position:absolute;right:10px;bottom:10px;z-index:3;padding:4px 9px;border-radius:20px;background:#0b1422c4;backdrop-filter:blur(6px);color:#e8f1ff;font-size:10px;font-weight:650;letter-spacing:.3px;border:1px solid #ffffff26;transition:opacity .3s}
.game-visual.previewing::after{opacity:0}

/* Panel: step to the neighbouring project; content slides in from that side. */
.panel-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:36px;padding-top:22px;border-top:1px solid var(--line)}
.panel-step{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--soft);text-align:left;transition:border-color .25s,transform .3s cubic-bezier(.22,.61,.36,1),background .25s}
.panel-step.next{text-align:right;align-items:flex-end}
.panel-step small{font-size:11px;color:var(--muted);letter-spacing:.3px}
.panel-step span{font:700 16px/1.3 Manrope,sans-serif;color:var(--text)}
.panel-step:hover{border-color:var(--green);transform:translateY(-2px)}
.panel-keys{margin:12px 0 0!important;text-align:center;font-size:11px!important;color:var(--muted)}
@media(hover:none){.panel-keys{display:none}}
dialog[open] #detail-content[data-dir="next"]>*{animation:panel-from-right .45s cubic-bezier(.22,.61,.36,1) both}
dialog[open] #detail-content[data-dir="prev"]>*{animation:panel-from-left .45s cubic-bezier(.22,.61,.36,1) both}
@keyframes panel-from-right{from{opacity:0;transform:translateX(36px)}}
@keyframes panel-from-left{from{opacity:0;transform:translateX(-36px)}}

/* Tactile buttons. */
.brand-link:active,.store-button:active,.primary:active,.detail-link:active,.poster-actions a:active,.poster-actions button:active,.project-links a:active{scale:.96;transition-duration:.08s}
.detail-link span,.page-link span{display:inline-block;transition:transform .3s}.detail-link:hover span,.page-link:hover span{transform:translateX(4px)}
.project-links a{transition:border-color .25s,color .25s,background .25s,transform .25s}.project-links a:hover{border-color:var(--green);transform:translateY(-2px)}
.project-links .page-link{background:var(--green);border-color:var(--green);color:#fff}
.night .project-links .page-link{color:#0d1a2a}

/* Scroll reveal: siblings cascade in (delay set by app.js). */
.reveal.revealed{transition-delay:var(--reveal-delay,0s)}
.reveal{filter:blur(4px)}.reveal.revealed{filter:none}
.reveal,.reveal.revealed{transition-property:opacity,transform,filter}

/* Project pages: gallery images ease in and zoom slightly on hover. */
.promo-gallery a,.astral-menu-gallery figure{display:block;overflow:hidden;border-radius:8px}
.promo-gallery img,.astral-menu-gallery img{transition:scale .7s cubic-bezier(.2,.7,.2,1)}
.promo-gallery a:hover img,.astral-menu-gallery figure:hover img{scale:1.05}
.project-page>.game-visual{animation:cover-settle .9s cubic-bezier(.22,.61,.36,1) both}
@keyframes cover-settle{from{opacity:.4;scale:.97}}

/* Dialog gallery tiles. */
.gallery-poster img{transition:scale .6s cubic-bezier(.2,.7,.2,1)}.gallery-poster:hover img{scale:1.03}.gallery-poster.expanded:hover img{scale:1}

/* Margin sketches drift slowly. */
.margin-sketch{animation:sketch-float 9s ease-in-out infinite alternate}.margin-sketch:nth-child(2){animation-delay:-4.5s}
@keyframes sketch-float{from{translate:0 -6px}to{translate:0 8px}}

@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 .scroll-progress{display:none}
 .reveal{filter:none}
 .game-card:hover,.study-card:hover{transform:none}
 .margin-sketch,.project-page>.game-visual{animation:none}
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* Compact poster panel: a small centred card instead of the side drawer. */
#detail.compact{margin:auto;width:min(420px,calc(100% - 32px));height:fit-content;max-height:calc(100dvh - 40px);padding:0;border-radius:22px;overflow:auto}
#detail.compact[open]{animation:compact-in .4s cubic-bezier(.22,.61,.36,1) both}
#detail.compact.closing{animation:compact-out .22s ease both}
#detail.compact .close{position:absolute;top:12px;right:12px;margin:0;background:#0b1422b3;color:#fff;border-color:#ffffff33;backdrop-filter:blur(6px)}
#detail.compact .compact-art{display:block;width:100%;height:190px;object-fit:cover;object-position:50% 35%;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
#detail.compact .compact-body{padding:0 24px 22px;margin-top:-34px;position:relative}
#detail.compact h2{font-size:28px;margin:6px 0 8px}
#detail.compact .panel-description{font-size:15px;margin:10px 0 6px}
#detail.compact .project-links{margin-top:16px}
#detail.compact:not(:has(.compact-art)) .compact-body{margin-top:0;padding-top:24px}
dialog[open]#detail.compact #detail-content>*{animation:none}
@keyframes compact-in{from{opacity:0;transform:translateY(18px) scale(.94)}}
@keyframes compact-out{to{opacity:0;transform:translateY(10px) scale(.96)}}