/* The launch splash: markup in index.html, behavior in app/splash.js. Also used inline by the landing site. */
/* Viewport-relative sizing so the ~75% panel works in either orientation. */
.splash { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity .5s ease; }
.splash.fading { opacity: 0; }
/* No page scroll while the splash is up; releases itself when it is hidden. */
html:has(.splash:not([hidden])) { overflow: hidden; }
.splash { overscroll-behavior: none; touch-action: none; }
/* No transition here -- backdropBlurred is present from first paint, must never ramp up. */
.splashbackdrop { position: absolute; inset: 0; backdrop-filter: blur(0px); }
.splash.backdropBlurred .splashbackdrop { backdrop-filter: blur(10px); }
.splashpanel { position: relative; isolation: isolate; width: min(75vw, 75vh, 560px); aspect-ratio: 1 / 1; --logo-est: var(--parch-fill); --logo-planned: var(--parch-ink); --logo-surface: var(--parch-white); --logo-burn: var(--parch-red); display: flex; align-items: center; justify-content: center; }
.splashsvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .3)); }
.splashart { transition: filter .6s ease; }
.splash.artBlurred .splashart { filter: blur(5px); }
/* The quote box is fixed and two lines tall: --q is its width in em (measured in the Georgia fallback), so every active affirmation fits two lines. Title and quote stack in one cell; only the text is masked and blurred. */
.splashpanel { container-type: inline-size; }
.splashtextwrap { --q: 11.5; position: relative; z-index: 1; box-sizing: border-box; display: grid; align-items: center; width: calc(var(--q) * 1em + 32px); height: calc(2.8em + 2 * var(--space-12) + 4px); padding: var(--space-12) var(--space-14); text-align: center; color: var(--parch-fill); background: var(--brown); border: 2px solid var(--parch-fill); border-radius: 14px; font-family: var(--font-serif); font-size: min(1.15rem, calc((94cqw - 32px) / var(--q))); font-weight: 400; line-height: 1.4; }
.splashtitle, .splashaffirm { grid-area: 1 / 1; margin: 0; }
/* Balances the two lines so a quote never ends on a single word. */
.splashaffirm { text-wrap: balance; }
/* Sidequest grows to the same height as the two-line quote box, vertically centered. */
.splashtitle { font-family: var(--font-display); display: flex; align-items: center; justify-content: center; height: 100%; font-size: 1.45em; }
/* --wipe moves a wide, soft mask edge across the text, left to right, while
   the text blurs. Registered because gradients and calc() inside filter
   can't be transitioned any other way. */
@property --wipe { syntax: "<number>"; inherits: false; initial-value: 0; }
.splashtitle, .splashaffirm { transition: --wipe .9s ease; }
.splashtitle { filter: blur(calc(var(--wipe) * 6px)); -webkit-mask-image: linear-gradient(to right, transparent calc(var(--wipe) * 150% - 50%), black calc(var(--wipe) * 150%)); mask-image: linear-gradient(to right, transparent calc(var(--wipe) * 150% - 50%), black calc(var(--wipe) * 150%)); }
.splashaffirm { filter: blur(calc((1 - var(--wipe)) * 6px)); -webkit-mask-image: linear-gradient(to right, black calc(var(--wipe) * 150% - 50%), transparent calc(var(--wipe) * 150%)); mask-image: linear-gradient(to right, black calc(var(--wipe) * 150% - 50%), transparent calc(var(--wipe) * 150%)); }
.splash.textIn .splashtitle, .splash.textIn .splashaffirm { --wipe: 1; }
/* Initial dasharray/dashoffset come from real SVG attributes, not a CSS var fallback. */
#splashLines path { transition: stroke-dashoffset .65s ease; }
#splashLines path.drawn { stroke-dashoffset: 0; }
/* Fade in place -- no scale/size change, so rect's rotate() attribute isn't fought. */
#splashNodes circle, #splashNodes rect { opacity: 0; transition: opacity .3s ease; }
#splashNodes circle.shown, #splashNodes rect.shown { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .splash, .splashbackdrop, .splashsvg, .splashtitle, .splashaffirm, #splashLines path, #splashNodes circle, #splashNodes rect { transition-duration: .01ms !important; }
}

@media (max-width: 899px) {
  /* Widen the floor so the panel stays legible on a small phone. */
  .splashpanel { width: min(85vw, 85vh, 420px); }
  .splashtextwrap { font-size: min(var(--text-100), calc((94cqw - 32px) / var(--q))); }
}