/* Copyright (C) 2026 Wachirawich Kripindakul. SPDX-License-Identifier: AGPL-3.0-or-later. See LICENSE. */
html{scrollbar-gutter:stable}
html.intro-playing{overflow:hidden;scroll-behavior:auto}
.intro-screen[hidden]{display:none!important}
.intro-screen{position:fixed;inset:0;z-index:200;isolation:isolate;overflow:hidden}
.intro-curtain{position:absolute;inset:0;background:#080f20;will-change:opacity}
.intro-curtain::before{content:'';position:absolute;width:min(90vw,680px);aspect-ratio:1;top:50%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(83,107,162,.15),transparent 67%)}
.intro-orbit{position:absolute;left:50%;top:50%;width:min(84vw,510px);aspect-ratio:1;transform:translate(-50%,-50%) rotate(-24deg);border:1px solid rgba(167,189,237,.1);border-radius:50%;pointer-events:none}
.intro-orbit::before{content:'';position:absolute;inset:25px;border:1px dashed rgba(167,189,237,.055);border-radius:50%}
.intro-orbit::after{content:'';position:absolute;right:14%;top:14%;width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 18px #dac7a050}
.intro-lockup{position:fixed;left:50%;top:48%;transform:translate(-50%,-50%);display:flex;align-items:center;flex-direction:column;gap:27px;white-space:nowrap;font-family:Manrope,sans-serif;font-size:clamp(2.65rem,8vw,4.5rem);font-weight:650;letter-spacing:-.06em;line-height:1.4;will-change:transform;pointer-events:none}
.intro-moon{display:block;fill:var(--paper);width:88px;height:88px;overflow:visible;flex-shrink:0;filter:drop-shadow(0 0 24px #c7d7fc15)}
.intro-word{display:flex;align-items:baseline;position:relative;line-height:1.4;white-space:nowrap}
.intro-retired{display:inline-block;position:relative;flex-shrink:0;overflow:visible;will-change:width,opacity}
.intro-crossout{position:absolute;inset:30% 0 15%;width:100%;height:55%;overflow:visible;pointer-events:none}
.intro-crossout path{fill:none;stroke:#ee625b;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 2px #ed514422)}
.intro-dot{display:inline-block;width:0;overflow:hidden;opacity:0;color:var(--gold)}
.intro-lockup.is-inline{flex-direction:row;align-items:center;gap:10px;line-height:1.4}
.intro-lockup.is-inline .intro-moon{filter:none}
.intro-lockup.is-inline .intro-dot{width:auto;overflow:visible;opacity:1}
.intro-playing .site-header .brand{visibility:hidden}
.intro-playing .reading-progress{visibility:hidden}
/* Scroll motion follows input with a short frame-rate-independent settle. */
.js.motion-enabled .reveal{transition-duration:1s;transition-timing-function:cubic-bezier(.16,1,.3,1)}
.privacy-art{transform:translateY(var(--privacy-shift,0px));will-change:transform}
.app-preview img{transform:translateY(var(--preview-shift,0px)) rotate(2deg);will-change:transform}
.journey-node{transition:background .55s,border-color .55s,color .55s,box-shadow .55s}
.journey>li.is-reached .journey-node{background:#172441;border-color:#a99e88;color:var(--paper);box-shadow:0 0 0 10px var(--night),0 0 25px #a7bded0c}
.feature-tabs{position:relative;--tab-left:0px;--tab-width:0px}
.js .feature-tabs::after{content:'';position:absolute;left:0;bottom:-1px;width:var(--tab-width);height:2px;background:var(--gold);transform:translateX(var(--tab-left));transition:width .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1);pointer-events:none}
.js .feature-tab.is-active{border-bottom-color:transparent}
.feature-tab .icon{transition:color .3s,transform .45s cubic-bezier(.22,1,.36,1)}
.feature-tab:hover .icon{transform:translateY(-2px)}
.button-primary .icon:has(use[href='#icon-arrow']){transition:transform .35s cubic-bezier(.22,1,.36,1)}
.button-primary:hover .icon:has(use[href='#icon-arrow']){transform:translateX(3px)}
.intro-replay{white-space:nowrap}
.intro-replay .icon{width:13px;height:13px;color:var(--gold)}
.motion-reduced .privacy-art,.motion-reduced .app-preview img{transform:none!important;will-change:auto}
@media(max-width:640px){.intro-lockup{gap:24px;top:47%}.intro-moon{width:72px;height:72px}.intro-orbit{width:88vw}.app-preview img{transform:translateY(var(--preview-shift,0px)) rotate(1deg)}.footer-bottom .intro-replay{margin-right:15px}}
@media(prefers-reduced-motion:reduce){.intro-screen{display:none!important}.privacy-art,.app-preview img{transform:none!important;will-change:auto}}
@media print{.intro-screen,.intro-replay{display:none!important}.privacy-art,.app-preview img{transform:none!important}}
.intro-replay[hidden]{display:none!important}

.intro-screen:focus{outline:none}

/* The writing point is (12,72) in the pen asset and stays on the animated ink. */
.intro-pen{--pen-width:22px;--pen-height:66px;position:absolute;left:0;top:0;width:0;height:0;opacity:0;pointer-events:none;z-index:2;will-change:transform,opacity}
.intro-pen-body{position:absolute;left:calc(var(--pen-width) / -2);top:calc(-1 * var(--pen-height));width:var(--pen-width);height:var(--pen-height);max-width:none;transform-origin:50% 100%;transform:rotate(30deg);filter:drop-shadow(1px 3px 3px #02071366)}
@media(max-width:640px){.intro-pen{--pen-width:18px;--pen-height:54px}}