/* 22PURSUIT — styles for the "Universe" store background (js/universe.js).
   Everything is scoped to html.u-on / html.u-prebang, which only universe.js sets,
   so if the 3D can't run the page looks exactly as before. */

/* before the Big Bang: the brand waits in the dark (a head script adds this, with a safety timeout) */
html.u-prebang .hero > *{opacity:0 !important; transform:translateY(22px)}
.hero > *{transition:opacity 1.2s ease, transform 1.2s cubic-bezier(.2,.7,.2,1)}

/* a dark reading lane down the middle (where the text is); the universe stays visible at the edges */
html.u-on .warp-veil{background:linear-gradient(90deg, rgba(11,8,5,.12) 0%, rgba(11,8,5,.5) 26%, rgba(11,8,5,.5) 74%, rgba(11,8,5,.12) 100%)}
html.u-game body::before{content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 58% 64% at 50% 45%, rgba(11,8,5,.5), rgba(11,8,5,.12) 70%, rgba(11,8,5,0))}
@media (max-width:760px){ html.u-on .warp-veil{background:rgba(11,8,5,.42)} }
html.u-on .glow{display:none}

/* stronger text contrast over the universe */
html.u-on .letter{background:linear-gradient(180deg, rgba(24,18,11,.92), rgba(16,12,7,.95))}
html.u-on .card, html.u-on .daily-post, html.u-on .wall-card{background:rgba(16,12,7,.93)}
html.u-on .letter p, html.u-on .card-desc, html.u-on .daily-post .daily-excerpt{color:#D4C8B0}
html.u-on .say-intro{opacity:1}
html.u-on .subnote{color:#B3A385}
html.u-on .sechead h2, html.u-on .letter h2{text-shadow:0 4px 28px rgba(0,0,0,.9)}

/* keep the wordmark crisp in front of the explosion */
html.u-on .hero::before{content:""; position:absolute; inset:14% 0; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(11,8,5,.62), rgba(11,8,5,.2) 60%, transparent)}
html.u-on .hero-mark{text-shadow:0 8px 60px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.6)}
html.u-on .hero-tag{text-shadow:0 2px 18px rgba(0,0,0,.95)}

/* the explosion's flash of light */
.u-flash{position:fixed; inset:0; z-index:4; pointer-events:none; opacity:0; mix-blend-mode:screen;
  background:radial-gradient(circle at 50% 50%, rgba(255,246,228,.95) 0%, rgba(240,200,130,.55) 18%, rgba(199,154,84,.18) 42%, rgba(0,0,0,0) 70%)}

/* drag the empty background to look around */
.u-drag-hint{display:none}
@media (hover:hover){
  html.u-on .u-drag-hint{display:inline}
  html.u-on .hero, html.u-on .void-space, html.u-on .wrap > section{cursor:grab}
  html.u-on .letter, html.u-on .card, html.u-on .sechead, html.u-on .shopgrid, html.u-on .daily-feed,
  html.u-on .wall, html.u-on .wall-head, html.u-on .hero-mark, html.u-on .hero-tag{cursor:auto}
}
html.u-orbiting, html.u-orbiting *{cursor:grabbing !important; user-select:none}

/* compact The Daily Pursuit panel (+ its post feed) */
#daily .letter{max-width:500px; margin:0 auto; padding:clamp(20px,3vw,30px) clamp(18px,3vw,32px)}
#daily .letter h2{font-size:clamp(30px,4.2vw,46px); margin:8px 0 6px}
#daily .letter p{font-size:14px; line-height:1.55; margin:0 auto 16px}
#daily .subrow{max-width:none}
#daily .subrow input{min-width:0; padding:12px 14px; font-size:13px}
#daily .subrow .btn-solid{padding-left:20px; padding-right:20px}
#daily .subnote{margin-top:10px}
#daily .daily-feed{max-width:500px; margin-left:auto; margin-right:auto}

/* compact Track + My Pursuit panels, so the universe has room around them
   (scoped to #track / #say — the checkout form shares these classes and stays as it was) */
#track .letter, #say .letter{padding:clamp(20px,3vw,30px) clamp(18px,3vw,32px)}
#track .letter{max-width:460px; margin:0 auto}
#say .letter{max-width:540px; margin:0 auto}
#track .letter h2{font-size:clamp(30px,4.2vw,44px); margin:8px 0 6px}
#track .letter p{font-size:14px; line-height:1.55; margin:0 auto 16px}
#track .subrow{max-width:none}
#track .subrow input{min-width:0; padding:12px 14px; font-size:13px}
#track .subrow .btn-solid{padding-left:20px; padding-right:20px}
#say .say-intro{font-size:14px; line-height:1.55; margin:0 auto 18px}
#say .share-choice{padding:10px 14px 12px; margin-bottom:14px}
#say .share-choice label{font-size:13px; padding:4px 0}
#say .field-grid{gap:10px}
#say .field{gap:4px; margin-bottom:10px}
#say .field input, #say .field select, #say .field textarea{padding:10px 12px; font-size:13px}
#say .field textarea{height:110px; min-height:80px}
#say .sechead{max-width:540px}
/* wider screens (laptops, tablets sideways, desktops): each panel sits opposite its 3D shape
   (star right of The Daily Pursuit, globe left of Track, galaxy right of My Pursuit).
   Keep 860px in sync with sidePx() in js/universe.js. */
@media (min-width:860px){
  #daily .letter, #daily .daily-feed{margin-left:0; margin-right:auto}
  #track .letter{margin:0 0 0 auto}
  #say .letter, #say .sechead{margin-left:0; margin-right:auto}
}
/* smaller laptops / browser windows: slimmer panels so the shape beside them stays in view */
@media (min-width:860px) and (max-width:1099px){
  #daily .letter, #daily .daily-feed{max-width:min(500px, 50vw)}
  #track .letter{max-width:min(460px, 48vw)}
  #say .letter, #say .sechead{max-width:min(540px, 52vw)}
}

@media (prefers-reduced-motion:reduce){
  html.u-prebang .hero > *{opacity:1; transform:none}
}