/* cosmos-theme.css — Universitube "Stellar Cartography" cosmic-glow theme.
 *
 * Loaded AFTER each page's inline <style>, so these rules win on shared
 * selectors. It re-declares the existing CSS custom properties (same names the
 * pages already use: --bg, --card, --red, --red2, --glow, etc.) with a vibrant
 * nebula palette, then layers in glass panels, gradient headlines, and glow.
 *
 * Pair with cosmos-bg.js (rotating telescope background + starfield + scrim).
 * Include order in <head>:
 *   <link rel="stylesheet" href="/assets/cosmos-theme.css">
 *   <script defer src="/assets/cosmos-bg.js"></script>
 */

:root {
  /* deep space base — near-black with a violet undertone, kept transparent-ish
     so the telescope photo shows through the page background */
  --bg:   #06050f;
  --bg2:  #0b0920;
  --card: rgba(20,16,44,.62);
  --card2:rgba(28,22,58,.7);
  --line: rgba(140,120,255,.20);

  --txt:  #f3f1ff;
  --dim:  #b9b2e6;
  --dim2: #8983bd;

  /* nebula accents — violet base, cyan + gold complements */
  --red:   #8b5cf6;   /* primary (was indigo) — electric violet */
  --red2:  #c4b5fd;   /* light violet for links/text accents */
  --glow:  rgba(139,92,246,.55);
  --cyan:  #5eead4;   /* teal-cyan — hottest light */
  --cyan2: #7be0ff;
  --gold:  #fbbf24;   /* warm CTA / dust */
  --magenta:#f472b6;
  --ok:    #5fe39a;
  --code:  #ffd479;
  --amber: #fbbf24;
  --blue:  #7be0ff;
}

/* the page itself is transparent so cosmos-bg.js layers show through */
html { background:#06050f; }
body { background:transparent !important; }

/* ---- HERO: let the telescope image carry it; drop the old flat gradient ---- */
.hero,
header.bar {
  background:
    radial-gradient(130% 150% at 16% 30%, rgba(40,28,90,.45) 0%, rgba(12,9,30,.35) 46%, rgba(6,5,15,.55) 100%)
    !important;
  border-bottom:1px solid var(--line) !important;
}
/* soften the hero's left-to-right darkening overlay so the nebula reads through */
.hero::after {
  background:linear-gradient(100deg, rgba(7,6,18,.74) 0%, rgba(7,6,18,.5) 44%, rgba(7,6,18,.12) 100%) !important;
}

/* ---- gradient headline: spectrum through a prism ---- */
h1 {
  background:linear-gradient(96deg,#ffffff 0%,#c4b5fd 34%,#7be0ff 70%,#5eead4 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
/* keep the logo mark + slash visible (they're inside h1) */
h1 .mark { -webkit-text-fill-color:initial; filter:drop-shadow(0 0 14px var(--glow)); }
h1 .u    { -webkit-text-fill-color:#a78bfa; color:#a78bfa; }
h1 .slash{ -webkit-text-fill-color:var(--dim2); color:var(--dim2); }
.promise .hl { color:var(--cyan2); }

/* ---- glass panels: frosted dark glass with a hairline of violet light ---- */
.card, .vidhead, .steps, .modalcard, .ytm-card,
.item, .codeblock, .explore, .pbox input, .actionbar,
.chvid, .filterbar, .results .rcard, .lib-card, .facet {
  backdrop-filter:blur(9px) saturate(1.15);
  -webkit-backdrop-filter:blur(9px) saturate(1.15);
}
.card, .vidhead, .item, .codeblock, .chvid {
  border:1px solid var(--line);
  box-shadow:0 8px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
}

/* paste box: glowing focus ring in violet */
.pbox input { background:rgba(14,11,32,.78) !important; }
.pbox input:focus {
  border-color:var(--red) !important;
  box-shadow:0 0 0 3px rgba(139,92,246,.28), 0 0 26px rgba(139,92,246,.22) !important;
}

/* ---- ⏩ SUPERCHARGED Analyze button: outlined teal that FILLS left→right like a
   progress bar (transform-origin:left scaleX, unmistakable direction), with a
   fast-forward bolt and a pink "done" blink when fired. The one high-energy action
   in the cool field. Overrides the page's inline button rule (loaded after it). */
.pbox button, .results .analyze, button.primary, .btn-primary {
  position:relative !important; overflow:hidden !important; isolation:isolate;
  background:rgba(45,212,191,.07) !important; color:var(--cyan) !important; font-weight:850 !important;
  border:1.5px solid rgba(45,212,191,.55) !important;
  box-shadow:0 6px 20px -8px rgba(45,212,191,.4), 0 0 18px -6px rgba(45,212,191,.4) !important;
  transition:transform .12s cubic-bezier(.2,.8,.2,1), box-shadow .2s, color .2s, border-color .2s !important;
}
/* the fill layer grows from the LEFT edge rightward, on a loop */
.pbox button::before, .results .analyze::before, button.primary::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:100%; z-index:-1; border-radius:inherit;
  transform-origin:left center; transform:scaleX(0);
  background:linear-gradient(90deg,#14b8a6,#2dd4bf 55%,#5eead4);
  animation:utFillLR 2.8s cubic-bezier(.45,0,.2,1) infinite;
}
.pbox button::after, .results .analyze::after, button.primary::after {
  content:""; position:absolute; top:0; bottom:0; width:30px; z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6));
  animation:utEdgeLR 2.8s cubic-bezier(.45,0,.2,1) infinite;
}
.pbox button:hover, .results .analyze:hover, button.primary:hover {
  transform:translateY(-2px) scale(1.02); color:#06302b !important; border-color:#5eead4 !important;
  box-shadow:0 12px 30px -8px rgba(45,212,191,.6), 0 0 26px rgba(94,234,212,.5) !important;
}
.pbox button:active, .results .analyze:active { transform:translateY(0) scale(.96); }
/* fired → snap to a full pink bar that blinks "done" */
.pbox button.launch, .results .analyze.launch {
  color:#fff !important; border-color:var(--magenta) !important; animation:utDonePulse 1.6s ease-out 1;
}
.pbox button.launch::before, .results .analyze.launch::before {
  animation:utFillSnap .5s cubic-bezier(.18,.9,.2,1) forwards;
}
.pbox button.launch::after, .results .analyze.launch::after { animation:none; opacity:0; }
@keyframes utFillLR { 0%{transform:scaleX(0)} 70%{transform:scaleX(1)} 100%{transform:scaleX(1);opacity:.55} }
@keyframes utEdgeLR { 0%{left:-30px} 70%{left:calc(100% - 30px)} 100%{left:calc(100% - 30px);opacity:0} }
@keyframes utFillSnap { 0%{transform:scaleX(.2);background:linear-gradient(90deg,#14b8a6,#2dd4bf)} 100%{transform:scaleX(1);background:linear-gradient(90deg,#ec4899,#f472b6)} }
@keyframes utDonePulse { 0%{box-shadow:0 0 0 0 rgba(244,114,182,.6)} 40%{box-shadow:0 0 0 10px rgba(244,114,182,0)} 100%{box-shadow:0 6px 20px -8px rgba(244,114,182,.4)} }
/* the ⏩ bolt nudges rightward (fast-forward feel) */
.pgo-bolt, .results .analyze .bolt { display:inline-block; animation:utFF 1.1s linear infinite; }
@keyframes utFF { 0%{transform:translateX(-2px);opacity:.75} 50%{transform:translateX(2px);opacity:1} 100%{transform:translateX(-2px);opacity:.75} }
@media (prefers-reduced-motion:reduce){
  .pbox button::before,.pbox button::after,.results .analyze::before,.results .analyze::after,.pgo-bolt{animation:none}
  .pbox button::before,.results .analyze::before{transform:scaleX(1);opacity:.85}
}

/* recommended-next CARD buttons: teal Analyze (echo of the hero), amber play Preview */
.nv .nv-row .nv-anl {
  position:relative !important; overflow:hidden !important; border:none !important; color:#06302b !important;
  background:linear-gradient(110deg,#14b8a6,#2dd4bf 55%,#5eead4) !important; background-size:200% 100% !important;
  box-shadow:0 5px 16px -5px rgba(45,212,191,.55) !important;
}
.nv .nv-row .nv-anl .bolt, .nv .nv-row .nv-anl::first-letter { }
.nv .nv-row .nv-anl:hover { transform:translateY(-1px) scale(1.02); filter:brightness(1.08); box-shadow:0 9px 24px -5px rgba(45,212,191,.85), 0 0 18px rgba(94,234,212,.5) !important; }
.nv .nv-row .nv-prev {
  background:rgba(251,191,36,.08) !important; border:1px solid rgba(251,191,36,.4) !important; color:var(--gold) !important;
}
.nv .nv-row .nv-prev:hover { background:rgba(251,191,36,.16) !important; border-color:var(--gold) !important; box-shadow:0 6px 16px -6px rgba(251,191,36,.5) !important; }

/* YouTube wordmark in the hero: brand red "You" + white "Tube" (the literal cue) */
h1 .yt-red { -webkit-text-fill-color:#ff0033 !important; color:#ff0033 !important; text-shadow:0 0 22px rgba(255,0,51,.4); }
h1 .yt-white { -webkit-text-fill-color:#fff !important; color:#fff !important; }

/* rich pink woven into accents: the promise highlight + a pink kicker option */
.promise .hl2, .pink-accent { color:#f472b6 !important; }

/* violet "tag" chips with a soft halo */
.tag, a.tag {
  background:rgba(139,92,246,.14) !important;
  border:1px solid rgba(150,130,255,.32) !important;
  color:var(--red2) !important;
}
a.tag:hover { background:rgba(139,92,246,.26) !important; }

/* section heading chip glows */
h2 .chip { background:var(--cyan) !important; box-shadow:0 0 14px rgba(94,234,212,.7) !important; }

/* jumpnav / sticky bars get the glass treatment over the cosmos */
.jumpnav {
  background:rgba(8,7,20,.82) !important;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line) !important;
}

/* links a touch brighter for contrast over imagery */
a { color:var(--cyan2); }
a:hover { color:#aef3ff; }

/* the floating mini-player keeps a violet edge-glow */
#player { border:1px solid var(--line) !important; box-shadow:0 18px 50px rgba(0,0,0,.7), 0 0 26px rgba(139,92,246,.22) !important; }

/* ---- community "explore together" band ---- */
.community { padding:38px 0 8px; }
.comm-card { position:relative; overflow:hidden; border-radius:20px; border:1px solid rgba(150,130,255,.25);
  background:linear-gradient(135deg, rgba(124,58,237,.16), rgba(45,212,191,.06) 55%, rgba(236,72,153,.12));
  box-shadow:0 30px 70px -36px rgba(0,0,0,.8), 0 0 50px -20px var(--glow); backdrop-filter:blur(8px); }
.comm-stars { position:absolute; inset:0; pointer-events:none; opacity:.6;
  background-image:radial-gradient(1.4px 1.4px at 18% 30%,#fff7,transparent),radial-gradient(1.4px 1.4px at 72% 60%,#a7f3e08a,transparent),radial-gradient(1px 1px at 44% 78%,#f9a8d48a,transparent),radial-gradient(1.3px 1.3px at 88% 22%,#c4b5fd8a,transparent),radial-gradient(1px 1px at 30% 64%,#fff5,transparent); }
.comm-inner { position:relative; padding:28px 30px; display:flex; align-items:center; gap:28px; }
.comm-text { flex:1; min-width:0; }
.comm-seal { width:200px; height:200px; flex:none; filter:drop-shadow(0 0 26px rgba(124,58,237,.45)); }
@media (max-width:720px){ .comm-seal { display:none; } }
.comm-eyebrow { font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); margin-bottom:8px; }
/* override the base h2{display:flex;gap} (meant for section-chip headings) so this
   prose headline flows as normal wrapping text, not gapped flex columns */
.comm-h { display:block !important; gap:0 !important; align-items:initial !important;
  font-size:clamp(22px,3.2vw,30px); font-weight:850; letter-spacing:-.02em; line-height:1.2; margin-bottom:8px;
  -webkit-text-fill-color:initial; color:var(--txt); background:none; }
.comm-h .hl2 { color:#f472b6; }
.comm-p { font-size:14.5px; color:var(--dim); line-height:1.6; max-width:680px; margin-bottom:16px; }
.comm-p b { color:var(--txt); }
.comm-cta { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.comm-go { display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:14.5px; color:#06160f !important;
  background:linear-gradient(110deg,#2dd4bf,#5eead4) !important; border-radius:12px; padding:12px 22px; text-decoration:none;
  box-shadow:0 8px 24px -8px rgba(45,212,191,.6); transition:transform .12s, box-shadow .2s; }
.comm-go:hover { transform:translateY(-2px); box-shadow:0 12px 30px -8px rgba(45,212,191,.8); text-decoration:none; }
.comm-note { font-size:12.5px; color:var(--dim2); }
@media (max-width:640px){ .comm-inner{padding:22px 18px} .comm-cta{flex-direction:column;align-items:stretch} .comm-go{justify-content:center} }

/* footer / muted regions stay readable */
footer { color:var(--dim); }

/* selection color */
::selection { background:rgba(139,92,246,.4); color:#fff; }

/* scrollbar (webkit) — subtle violet */
::-webkit-scrollbar { width:12px; height:12px; }
::-webkit-scrollbar-thumb { background:rgba(120,100,220,.35); border-radius:8px; border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background:rgba(140,120,255,.55); background-clip:content-box; }

/* =====================================================================
   MOBILE — intentional per-feature treatment, not just a reflow.
   Decisions (≤640px):
   • Touch targets: paste/search buttons forced to ≥48px tall, full-width,
     so the primary action is thumb-friendly (desktop keeps the compact inline
     button). The paste form stacks vertically.
   • Background: a touch stronger scrim for small-screen legibility, and on
     coarse-pointer devices we stop the slow drift + dim the starfield to save
     battery and avoid distraction while reading on a phone.
   • Credit chip: smaller, tucked tighter, and capped width so it never
     crowds content or wraps.
   • Hero: tighter vertical padding so more of the page shows above the fold.
   ===================================================================== */
@media (max-width:640px){
  /* tighter hero so the fold shows the paste box */
  .hero .inner{ padding:34px 18px 30px !important; }

  /* primary actions become big touch targets, full width */
  .pbox form{ flex-direction:column !important; }
  .pbox input{ width:100% !important; padding:15px 16px !important; }
  .pbox button{
    width:100% !important; min-height:50px !important; padding:14px 22px !important;
    font-size:16px !important;
  }
  /* search-row buttons (home + expanded + library) also thumb-sized */
  .tsearch button, .lib-search button, .results .analyze,
  form button[type="submit"]{ min-height:48px !important; }

  /* credit chip: smaller + tighter so it never crowds content */
  #cosmosCredit{ font-size:10px !important; right:8px !important; bottom:8px !important; max-width:58vw !important; padding:3px 9px !important; }
}

/* On touch / coarse-pointer devices, calm the motion + lighten layers:
   keeps the phone experience smooth and battery-friendly. */
@media (hover:none),(pointer:coarse){
  #cosmosBg{ animation:none !important; transform:scale(1.06) !important; }
  #cosmosStars{ animation:none !important; opacity:.35 !important; }
  #cosmosBg.ready{ opacity:.55 !important; }              /* slightly dimmer photo */
  #cosmosScrim{
    background:
      radial-gradient(130% 95% at 75% 16%, rgba(7,6,18,.28) 0%, rgba(6,5,16,.7) 55%, rgba(4,3,12,.94) 100%),
      linear-gradient(180deg, rgba(6,5,16,.82) 0%, rgba(6,5,16,.62) 32%, rgba(5,4,14,.84) 100%) !important;
  }
}
