/* Light, camera, and reading each move on their own cadence. */
.brand-avatar{width:38px;height:38px;object-fit:contain;margin-left:9px;transition:rotate .5s var(--ease)}
.brand:hover .brand-avatar{rotate:7deg}.game-avatar{height:58px;width:58px;object-fit:contain;margin-bottom:12px}
html[data-transition] body{transition:none}
::view-transition-group(root){animation-duration:1100ms}
::view-transition-old(root){animation:leave-light 1100ms ease both;mix-blend-mode:normal}
::view-transition-new(root){animation:arrive-light 1100ms cubic-bezier(.65,0,.25,1) both;mix-blend-mode:normal;mask-image:linear-gradient(105deg,#000 35%,transparent 55%);mask-size:300% 100%;mask-repeat:no-repeat}
[data-transition=day]::view-transition-new(root){animation-duration:900ms;mask-image:linear-gradient(75deg,#000 35%,transparent 55%)}
@keyframes arrive-light{from{mask-position:100% 0}to{mask-position:0 0}}
@keyframes leave-light{from{filter:brightness(1)}to{filter:brightness(.82)}}
.scene-transition.active{pointer-events:auto}.scene-transition span{display:none}
.reveal,.reveal.visible{opacity:1;transform:none;transition:none}
.collection-item{transition:background .35s,padding .4s var(--ease)}
.collection-item .item-content{transition:translate .55s var(--ease)}
.collection-item:hover .item-content{translate:5px 0}.collection-item:hover{padding-left:0}
.item-plus{transition:rotate .45s var(--ease),color .3s}.collection-item:hover .item-plus{rotate:90deg;color:var(--accent)}
.item-action{display:inline-block;position:relative}.item-action:after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.collection-item:hover .item-action:after{transform:scaleX(1)}
.primary-button .button-mark{transition:rotate .65s var(--ease)}.primary-button:hover .button-mark{rotate:90deg}
.primary-button,.game-start,.response-options button{transition:background .3s,translate .3s,border-color .3s,color .3s}
.primary-button:active,.game-start:active{translate:0 2px}
.response-options button{position:relative}.response-options button i{transition:translate .4s var(--ease),opacity .3s}
.response-options button:hover i{translate:-6px 0;opacity:.55}
.desktop-nav a{position:relative}.desktop-nav a:after{content:'';height:1px;position:absolute;left:0;right:0;bottom:2px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.desktop-nav a:hover:after{transform:scaleX(1);transform-origin:left}
.day-scene>img{transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.012);transition:transform 1.2s var(--ease)}
.sunlight-drift{position:absolute;inset:-20%;background:linear-gradient(110deg,transparent 40%,#fffce928 46%,transparent 57%);mix-blend-mode:soft-light;pointer-events:none;animation:passing-sun 18s ease-in-out infinite alternate}
@keyframes passing-sun{from{translate:-4% 0;opacity:.35}to{translate:5% 1%;opacity:.8}}
.rain-window{position:absolute;right:0;top:0;width:27%;height:77%;pointer-events:none;opacity:.13;mask-image:linear-gradient(transparent,#000 20%,#000 70%,transparent);background-image:repeating-linear-gradient(105deg,transparent 0 39px,#a1b5cd50 40px,transparent 41px 81px);background-size:160px 210px;animation:window-rain 8s linear infinite}
@keyframes window-rain{to{background-position:-80px 210px}}
.opening-light{position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,#d3bb7e22 50%,transparent 64%);mix-blend-mode:screen;opacity:0;pointer-events:none}
.opening-shade{background:linear-gradient(90deg,#05091080,transparent 60%),linear-gradient(0deg,#05091077,transparent 32%)}
.opening-word>span{-webkit-text-stroke:.75px #c8c1b2}
.opening-track{opacity:.5}.opening-title p{font-weight:300}
dialog{box-shadow:0 30px 100px #0006;border-radius:4px}
[data-persona=day] dialog{box-shadow:0 30px 100px #24372422;border-color:#a8b3a0}
dialog[open]::backdrop{animation:reading-backdrop .45s ease both}
@keyframes reading-backdrop{from{opacity:0;backdrop-filter:blur(0)}to{opacity:1;backdrop-filter:blur(10px)}}
dialog.is-closing::backdrop{animation:close-reading .24s ease both}
@keyframes close-reading{to{opacity:0}}
.game-overlay.is-arriving{animation:pocket-arrival .65s cubic-bezier(.16,1,.3,1) both}
@keyframes pocket-arrival{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@media(max-width:760px){.rain-window{width:32%;opacity:.1}.sunlight-drift{opacity:.35}.opening-shade{background:linear-gradient(0deg,#050910d9,transparent 65%)}}
@media(hover:none){.collection-item:hover .item-content{translate:0}.collection-item:hover .item-plus{rotate:0}}
@media(max-width:370px){.site-header .brand{font-size:26px;letter-spacing:-1.6px}.site-header .brand-avatar{width:30px;height:30px;margin-left:6px}}
html[data-reduced=true]{scroll-behavior:auto}
html[data-reduced=true] *,html[data-reduced=true] *:before,html[data-reduced=true] *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
@media(prefers-reduced-motion:reduce){
 .sunlight-drift,.rain-window{animation:none}.day-scene>img,.night-scene>img{transform:none}.collection-item:hover .item-content{translate:0}
 ::view-transition-old(root),::view-transition-new(root){animation:none;mask-image:none}
}