/* ============================================================
   moonai · cosmos layer — scroll-driven lunar background system
   ============================================================ */

/* Cosmos defaults — overrides applied on top of dark theme. */
:root {
  --moon-phase: 0.35;      /* -1 → +1, shifts shadow disc */
  --moon-x: 50;            /* % across viewport (0 left, 100 right) */
  --moon-y: 28;            /* % down viewport */
  --moon-scale: 1;
  --scroll: 0;             /* 0 → 1 over full page */
  --scroll-vel: 0;         /* recent scroll velocity, normalized */
  --aurora-hue: 170;
}

/* Force cosmos theme: deep space palette with a hint of teal. */
body[data-theme="cosmos"] {
  --bg: #04060c;
  --bg-2: #0a0f1c;
  --fg: #F4F1EA;
  --fg-2: #DCD8CD;
  --fg-3: #9098A8;
  --fg-4: #5b6376;
  --line: rgba(244, 241, 234, 0.08);
  --line-soft: rgba(244, 241, 234, 0.04);
  --accent: #5FCFC0;
  --accent-tint: rgba(95, 207, 192, 0.14);
  --accent-glow: rgba(95, 207, 192, 0.5);
  background: transparent;
  color: var(--fg);
  /* Subtle dark halo behind ALL text — text-shadow is inherited, so this
     covers body copy, labels, code blocks, etc. Display headings get a
     stronger override below. */
  text-shadow: 0 0 10px rgba(4,6,12,0.7);
}

/* The whole page now sits over the cosmic backdrop. Wash sections so
   the moon can bleed through. */
body[data-theme="cosmos"] .nav {
  background: linear-gradient(to bottom,
    color-mix(in oklab, #04060c 80%, transparent) 0%,
    color-mix(in oklab, #04060c 50%, transparent) 100%);
  border-bottom: 1px solid var(--line);
}
body[data-theme="cosmos"] .hero-bg {
  background: none;
}
body[data-theme="cosmos"] .hero-bg::after {
  display: none;
}
body[data-theme="cosmos"] .section,
body[data-theme="cosmos"] .cta-band,
body[data-theme="cosmos"] .foot {
  background: transparent;
  border-top-color: rgba(244,241,234,0.06);
}
body[data-theme="cosmos"] .cta-band {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(95,207,192,0.10), transparent 60%);
}

/* Cards: dim translucent panels so moon and stars peek through. */
body[data-theme="cosmos"] .cap,
body[data-theme="cosmos"] .sku {
  background: color-mix(in oklab, #04060c 70%, transparent);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-color: var(--line);
}
body[data-theme="cosmos"] .cap:hover,
body[data-theme="cosmos"] .sku:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(95,207,192,0.12), 0 20px 60px -20px rgba(95,207,192,0.18);
}
body[data-theme="cosmos"] .sku.featured {
  background: linear-gradient(135deg, #0a0f1c, #04060c);
  border: 1px solid var(--accent);
  box-shadow: 0 0 0 1px rgba(95,207,192,0.2), 0 30px 80px -20px rgba(95,207,192,0.25);
}
body[data-theme="cosmos"] .cf-field input,
body[data-theme="cosmos"] .cf-field select,
body[data-theme="cosmos"] .cf-field textarea {
  background: rgba(10,15,28,0.6);
  border-color: var(--line);
  color: var(--fg);
}
body[data-theme="cosmos"] .work-tags span,
body[data-theme="cosmos"] .cap .tags span {
  background: rgba(10,15,28,0.6);
  border: 1px solid var(--line);
}

/* =========================================================
   Theme toggle button — switches between paper and cosmos.
   ========================================================= */
.theme-toggle {
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-2);
  background: transparent;
  transition: border-color 200ms ease, color 200ms ease, transform 200ms ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.theme-toggle:hover { border-color: var(--fg); color: var(--fg); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle-icon {
  width: 18px; height: 18px;
  position: absolute;
  transition: opacity 240ms ease, transform 320ms cubic-bezier(.4,.0,.2,1);
}
/* Paper mode: show moon (click to go dark) */
body[data-theme="light"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0); }
body[data-theme="light"] .theme-toggle .icon-sun  { opacity: 0; transform: rotate(90deg); }
/* Cosmos mode: show sun (click to go light) */
body[data-theme="cosmos"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg); }
body[data-theme="cosmos"] .theme-toggle .icon-sun  { opacity: 1; transform: rotate(0); }
body[data-theme="cosmos"] .theme-toggle {
  border-color: rgba(95,207,192,0.35);
  color: var(--accent);
}
body[data-theme="cosmos"] .theme-toggle:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(95,207,192,0.10);
}

/* The cosmos backdrop and moon ONLY render when the theme is cosmos. We
   hide via display:none in paper mode so the canvas + animations don't
   eat CPU while light theme is on. */
body:not([data-theme="cosmos"]) .cosmos { display: none; }

/* =========================================================
   Fixed cosmos backdrop — everything below the content
   ========================================================= */
.cosmos {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}

/* Deep space gradient — shifts hue with scroll. */
.cosmos::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at calc(var(--moon-x) * 1%) calc(var(--moon-y) * 1%),
      rgba(95,207,192,0.22) 0%, rgba(95,207,192,0.05) 30%, transparent 60%),
    radial-gradient(ellipse 100% 80% at 20% calc(80% - var(--scroll) * 30%),
      rgba(31,158,139,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 80% 60% at 80% calc(20% + var(--scroll) * 40%),
      rgba(64,90,150,0.10) 0%, transparent 70%),
    linear-gradient(180deg, #05070f 0%, #080c18 35%, #04060c 70%, #02040a 100%);
  transition: background 600ms linear;
}

/* Subtle vignette so edges feel infinite. */
.cosmos::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 100% 80% at 50% 50%, transparent 50%, rgba(0,0,0,0.55) 100%);
}

/* Stars canvas covers entire backdrop. */
.cosmos-stars {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0.95;
}

/* Aurora — slow drifting color waves. */
.cosmos-aurora {
  position: absolute;
  left: -10%; right: -10%;
  bottom: -10%;
  height: 80%;
  background:
    radial-gradient(ellipse 60% 80% at 30% 100%, rgba(95,207,192,0.18), transparent 65%),
    radial-gradient(ellipse 50% 70% at 70% 100%, rgba(124,93,255,0.12), transparent 65%),
    radial-gradient(ellipse 80% 90% at 50% 110%, rgba(31,158,139,0.10), transparent 65%);
  filter: blur(30px);
  transform: translateY(calc(var(--scroll) * -10%)) rotate(calc(var(--scroll) * 6deg));
  mix-blend-mode: screen;
  opacity: calc(0.4 + var(--scroll) * 0.6);
  animation: auroraDrift 24s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  0%   { transform: translate(-3%, calc(var(--scroll) * -10%)) rotate(calc(var(--scroll) * 6deg)); }
  100% { transform: translate(3%, calc(var(--scroll) * -10% - 2%)) rotate(calc(var(--scroll) * 6deg - 4deg)); }
}

/* Single subtle orbit ring around the moon. */
.cosmos-rings { display: none; }

/* THE MOON — real photo carved into the canvas with a glow that follows
   the actual lit shape (drop-shadow respects alpha, so the halo hugs the
   crescent at the top/bottom of the page and ring-glows the full moon mid). */
.cosmos-moon {
  position: absolute;
  top: calc(var(--moon-y) * 1%);
  left: calc(var(--moon-x) * 1%);
  width: clamp(280px, 60vmin, 720px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(var(--moon-scale, 1));
  transition: transform 80ms linear;
  will-change: transform;
}

/* Removed the static circular halo — we now draw a shape-following glow
   directly on the canvas via filter: drop-shadow. */
.moon-halo { display: none; }

.moon-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  /* Rotation moved here from the (now removed) .moon-clip wrapper. No
     parent has overflow:hidden, so the drop-shadow can render freely
     beyond the canvas's bounding box, hugging the actual lit shape. */
  transform: rotate(-30deg);
  /* Multi-layer drop-shadow that traces canvas alpha — glow follows the
     crescent at top/bottom of page, rings the full moon mid-page. */
  filter:
    drop-shadow(0 0 4px  rgba(95,207,192,0.55))
    drop-shadow(0 0 18px rgba(95,207,192,0.40))
    drop-shadow(0 0 48px rgba(95,207,192,0.22));
  animation: moonGlowPulse 6s ease-in-out infinite;
}
@keyframes moonGlowPulse {
  0%, 100% { filter:
    drop-shadow(0 0 4px  rgba(95,207,192,0.50))
    drop-shadow(0 0 18px rgba(95,207,192,0.35))
    drop-shadow(0 0 48px rgba(95,207,192,0.20)); }
  50%      { filter:
    drop-shadow(0 0 6px  rgba(95,207,192,0.65))
    drop-shadow(0 0 22px rgba(95,207,192,0.50))
    drop-shadow(0 0 60px rgba(95,207,192,0.28)); }
}

/* Wrapper that bounds the phase shadow to the image's frame, NOT to the
   visible moon silhouette inside the image. Square clip.
   Rotated −30° so the crescent's horns angle up-right, matching the logo. */
.moon-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: rotate(-30deg);
}

.moon-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
/* Hidden source image — used only to feed the canvas. */
.moon-src {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Subtle limb darkening at the edge of the disc — anchors it as a sphere. */
.moon-limb {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(0,0,0,0) 70%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}

/* Grain overlay — film texture. */
.cosmos-grain {
  position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>");
  opacity: 0.10;
  mix-blend-mode: overlay;
  animation: grainShift 600ms steps(3) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0,0); }
  33%  { transform: translate(-2%, 1%); }
  66%  { transform: translate(1%, -1%); }
  100% { transform: translate(0,0); }
}

/* Shooting stars — appear briefly during scroll. */
.cosmos-meteors {
  position: absolute; inset: 0;
  pointer-events: none;
}
.meteor {
  position: absolute;
  width: 140px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(95,207,192,0.4) 30%,
    rgba(255,255,255,0.95) 90%,
    #fff 100%);
  border-radius: 1px;
  /* The head is at the right end of the strip; rotate so the trail
     points back toward the travel origin. */
  transform-origin: 100% 50%;
  transform: rotate(35deg) translateX(0);
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(95,207,192,0.6));
}
.meteor::after {
  content: "";
  position: absolute;
  right: -2px; top: 50%;
  width: 4px; height: 4px;
  background: #fff;
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 8px rgba(255,255,255,0.95), 0 0 16px rgba(95,207,192,0.7);
}
.meteor.go { animation: meteorFly 1100ms cubic-bezier(.3,.1,.4,1) forwards; }
@keyframes meteorFly {
  0%   { opacity: 0; transform: rotate(var(--ang, 35deg)) translateX(0); }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--ang, 35deg)) translateX(var(--dist, 520px)); }
}

/* Section dividers in cosmos mode — clean, no ornamentation. */
body[data-theme="cosmos"] .section,
body[data-theme="cosmos"] .cta-band {
  border-top: 0;
  position: relative;
}

/* Hero treatment — moon halo behind the headline copy. */
body[data-theme="cosmos"] .hero {
  position: relative;
  z-index: 1;
}
body[data-theme="cosmos"] .display-1 em {
  color: var(--accent);
  opacity: 0.85;
}
body[data-theme="cosmos"] .display-1,
body[data-theme="cosmos"] .display-2,
body[data-theme="cosmos"] .display-3,
body[data-theme="cosmos"] .cta-band h2 {
  /* Dark halo behind display text so a bright moon never washes it out. */
  text-shadow:
    0 1px 0 rgba(0,0,0,0.4),
    0 0 16px rgba(4,6,12,0.7),
    0 0 36px rgba(4,6,12,0.55);
}

/* Section eyebrow glow in cosmos mode. */
body[data-theme="cosmos"] .section-eyebrow {
  color: rgba(95,207,192,0.7);
}
body[data-theme="cosmos"] .section-eyebrow .dot {
  box-shadow: 0 0 10px var(--accent);
}

/* Chat demo gets a subtle teal edge in cosmos mode. */
body[data-theme="cosmos"] .chat-demo {
  background: rgba(8,12,22,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Brand mark — small moon glow. */
body[data-theme="cosmos"] .brand img {
  box-shadow: 0 0 14px rgba(95,207,192,0.4);
}

/* The cosmos backdrop itself is z-index:0 fixed; in-flow content paints
   above it without needing forced relative positioning. Only force a stacking
   context on elements that need to sit above the moon's glow. */
body[data-theme="cosmos"] .hero,
body[data-theme="cosmos"] .section,
body[data-theme="cosmos"] .cta-band,
body[data-theme="cosmos"] .foot {
  position: relative;
  z-index: 1;
}

/* Tag and label texts under live demos — boost the inherited shadow so
   monospace tags read clearly when the moon is bright behind them. */
body[data-theme="cosmos"] .demo-foot,
body[data-theme="cosmos"] .demo-foot span,
body[data-theme="cosmos"] .work-tags span,
body[data-theme="cosmos"] .cap .tags span,
body[data-theme="cosmos"] .work-meta,
body[data-theme="cosmos"] .work-link {
  text-shadow:
    0 1px 2px rgba(4,6,12,0.85),
    0 0 8px rgba(4,6,12,0.9),
    0 0 18px rgba(4,6,12,0.7);
}

/* Reduced motion: tone everything down. */
@media (prefers-reduced-motion: reduce) {
  .cosmos-aurora,
  .cosmos-grain,
  .cosmos-moon .moon-glow-outer { animation: none; }
  .cosmos-moon { transition: none; }
}

/* =========================================================
   Mobile polish for the in-product live demos
   ========================================================= */
@media (max-width: 720px) {
  /* Smaller moon presence so mobile doesn't get overwhelmed. */
  .cosmos-moon { width: clamp(180px, 55vw, 320px); }

  /* Chat-demo frame: tighter padding, smaller radius. */
  .chat-demo {
    padding: 12px;
    border-radius: 14px;
  }
  .chat-bar {
    padding: 2px 2px 10px;
    margin-bottom: 12px;
    gap: 5px;
  }
  .chat-bar i { width: 8px; height: 8px; }
  .chat-bar .url {
    margin-left: 8px;
    font-size: 10px;
    flex: 1; min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .chat-bar .ai-pill {
    flex-shrink: 0;
    padding: 3px 7px;
    font-size: 9px;
    white-space: nowrap;
  }
  .chat-stage { min-height: 180px; padding: 2px 2px 4px; }
  .bubble { padding: 11px 13px; font-size: 13.5px; max-width: 92%; }
  .bubble .who { width: 20px; height: 20px; font-size: 9px; }
  .chat-input { padding: 9px 11px; font-size: 12px; margin-top: 10px; }
  .chip { font-size: 10.5px; padding: 6px 10px; }

  .demo-foot { font-size: 10px; gap: 4px 9px; margin-top: 10px; }

  /* PTA editor — stack panes vertically on mobile. */
  .pta2 {
    grid-template-columns: 1fr;
    padding: 10px;
    gap: 8px;
    min-height: 0;
  }
  .pta2-pane { padding: 8px 10px; }
  .pta2-question-text { font-size: 10.5px; min-height: 32px; }
  .pta2-code { font-size: 10px; padding: 6px 6px 6px 0; min-height: 90px; }

  /* Yushin search — already has mobile rules in styles.css, just nudge. */
  .ys-search { padding: 10px 12px 12px; min-height: 0; }
  .ys-bar { padding: 8px 10px; font-size: 12px; }
  .ys-meta { font-size: 10px; }
  .ys-search-btn { padding: 5px 12px; font-size: 10px; }
  .ys-row { padding: 8px 2px; gap: 10px; }

  /* Playshelf — let library cards breathe. */
  .ps3 { padding: 12px 12px 14px; min-height: 0; }
  .ps3-title { font-size: 12px; }
  .ps3-sub { font-size: 9px; }
  .ps3-library { gap: 5px; }
  .ps3-lib-card { padding: 5px; gap: 5px; }
  .ps3-cover { width: 24px; height: 32px; font-size: 12px; }
  .ps3-lib-name { font-size: 8.5px; }
  .ps3-lib-rating { font-size: 7.5px; }
  .ps3-rec { padding: 6px 8px; }
  .ps3-rec-name { font-size: 9.5px; }
  .ps3-rec-because { font-size: 8px; }
  .ps3-match { font-size: 8.5px; padding: 2px 4px; }

  /* Work-feature on mobile: tighten gap between info & visual. */
  .work-feature, .work-feature.reverse { gap: 24px; margin-top: 48px; padding-top: 32px; }
}

/* Extra tight at very narrow widths (older phones / split-screen). */
@media (max-width: 380px) {
  .chat-demo { padding: 10px; }
  .ps3-library { grid-template-columns: 1fr; }
  .ps3-lib-card { padding: 6px; }
  .ps3-cover { width: 30px; height: 40px; }
  .ps3-lib-name { font-size: 11px; }
  .ps3-lib-rating { font-size: 9.5px; }
  .pta2-code { font-size: 9.5px; }
  .ys-thumb { width: 28px; height: 28px; }
}