/* ============================================================================
   LUXE-STATIC.CSS  ·  the luxury light layer for the static pages
   Self-contained (hardcoded Warm Studio light values) so it renders identically
   across pet / topic / tool / guide / long-tail templates regardless of which
   tokens each defines. Purely additive: only new pseudo-elements and classes,
   never overriding existing component properties. Grain is an inline data-uri
   (CSP-safe). All animation is gated behind reduced-motion; drift + spotlight +
   sheen are desktop / fine-pointer only so phones stay fast.
   ========================================================================== */

/* 1 · AMBIENT AURORA - fixed wash of warm light behind the page */
body::before {
  content: ""; position: fixed; inset: -20vmax; z-index: -2; pointer-events: none;
  mix-blend-mode: multiply; will-change: transform;
  background:
    radial-gradient(34vmax 34vmax at 12% 6%, rgba(255, 231, 215, .85), transparent 64%),
    radial-gradient(30vmax 30vmax at 92% 14%, rgba(226, 240, 235, .7), transparent 62%),
    radial-gradient(28vmax 28vmax at 62% 108%, rgba(251, 239, 214, .6), transparent 66%);
}
@media (min-width: 760px) and (prefers-reduced-motion: no-preference) {
  body::before { animation: luxe-s-drift 40s ease-in-out infinite alternate; }
}
@keyframes luxe-s-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(2vmax, -2vmax, 0) scale(1.06); }
}

/* 2 · FILM GRAIN - fixed, on top, ultra subtle */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  opacity: .035; mix-blend-mode: multiply; background-size: 150px 150px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 3 · CURSOR SPOTLIGHT - div injected + driven by reveal.js (fine pointer only) */
.luxe-spot {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  transition: opacity .5s ease; mix-blend-mode: soft-light;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 10%),
    rgba(255, 196, 148, .15), rgba(255, 196, 148, .04) 38%, transparent 64%);
}
@media (hover: hover) and (pointer: fine) { .luxe-spot.on { opacity: 1; } }

/* 4 · SPECULAR SHEEN - light sweep across the primary action on hover */
.cta { position: relative; overflow: hidden; isolation: isolate; }
.cta::after {
  content: ""; position: absolute; top: -10%; left: -75%; width: 45%; height: 120%;
  transform: skewX(-18deg); pointer-events: none; opacity: 0; z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cta:hover::after { animation: luxe-s-sheen .85s cubic-bezier(.16, 1, .3, 1); }
}
@keyframes luxe-s-sheen { 0% { left: -75%; opacity: 0; } 12% { opacity: 1; } 100% { left: 135%; opacity: 0; } }

/* 5 · GILDED HAIRLINE - a whisper of reflected light along surface edges */
.card, .panel, .hero, .cardlink, .related a {
  position: relative;
}
.card::before, .panel::before, .cardlink::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  pointer-events: none; z-index: 1; opacity: 0; transition: opacity .4s ease;
  background: linear-gradient(135deg, rgba(255, 233, 210, .95) 0%, transparent 30%,
    transparent 70%, rgba(251, 106, 44, .4) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.card:hover::before, .panel:hover::before, .cardlink:hover::before { opacity: .8; }

/* a faint top hairline of light, always on */
.card, .panel { box-shadow: 0 1px 2px rgba(72, 44, 18, .05), inset 0 1px 0 rgba(255, 255, 255, .6); }

/* 6 · HERO HEADLINE - a soft entrance sheen on the verdict / hero title */
.hero h1 { text-wrap: balance; }

/* REDUCED MOTION - hard stop */
@media (prefers-reduced-motion: reduce) {
  body::before, .cta::after { animation: none !important; }
  .luxe-spot { display: none !important; }
}

/* ###########################################################################
   ##  CHANPET VISUAL UPGRADE · static pages (hubs / topics / tools / guides)
   ##  Adds the self-hosted type system, the enriched 暖金画廊 palette, a richer
   ##  layered canvas, AND a brand-faithful dark theme (these pages were
   ##  light-only before; dark now follows the visitor's OS preference).
   ##  Appended last; governs the cascade over the per-page inline tokens.
   ########################################################################### */

/* ===========================================================================
   SELF-HOSTED TYPE SYSTEM  ·  ChanPet 暖金画廊 / Warm Atelier
   Free, commercial-use pairing, subset to the site's glyph set + Latin/Latin-ext.
   Noto Serif SC  -> bilingual display voice (editorial, gilded)
   Noto Sans SC   -> CJK body
   Manrope        -> Latin body (variable 400-700)
   JetBrains Mono -> data / figures / scores
   font-display:swap so text is never blocked; CJK files carry Latin too, so
   headings stay one cohesive face across 中文 + English. Missing glyphs fall
   through per-glyph to the system CJK stack (no tofu).
   =========================================================================== */
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("/assets/fonts/Manrope-var.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("/assets/fonts/Manrope-var-ext.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/JetBrainsMono-400.woff2") format("woff2");}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/fonts/JetBrainsMono-700.woff2") format("woff2");}
@font-face{font-family:"Noto Serif SC";font-style:normal;font-weight:500;font-display:swap;
  src:url("/assets/fonts/NotoSerifSC-500.woff2") format("woff2");}
@font-face{font-family:"Noto Serif SC";font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/fonts/NotoSerifSC-700.woff2") format("woff2");}
@font-face{font-family:"Noto Sans SC";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/NotoSansSC-400.woff2") format("woff2");}
@font-face{font-family:"Noto Sans SC";font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/fonts/NotoSansSC-700.woff2") format("woff2");}

/* ---- enriched LIGHT tokens + self-hosted type (static var names) --------- */
:root{
  --brand:#C2451B; --brand-deep:#9A3412; --brand-ink:#7A2F10; --brand-soft:#FFE3D0; --brand-tint:var(--brand-soft); --card:var(--surface);
  --accent:#1F7A66; --accent-deep:#15584A; --accent-soft:#DCEDE6;
  --bg:#FAF4EA; --surface:#FFFFFF;
  --ink:#211913; --ink2:#574A3D; --ink-2:#574A3D; --muted:#736353;
  --line:#ECE0CE;
  --display:"Noto Serif SC","Songti SC",ui-serif,Georgia,"Noto Serif",serif;
  --sans:"Manrope","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:var(--display); --font-body:var(--sans);
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
/* the gallery canvas (light) */
html{
  background-color:var(--bg);
  background-image:
    radial-gradient(125% 80% at 6% -10%, rgba(255,170,120,.16), transparent 56%),
    radial-gradient(120% 78% at 102% 2%, rgba(54,150,128,.10), transparent 55%),
    radial-gradient(135% 95% at 50% 116%, rgba(232,184,75,.12), transparent 62%),
    linear-gradient(168deg,#FBF6EE 0%,#F6EEE0 52%,#F1E6D4 100%);
}
body{ background:transparent; font-family:var(--sans); }

/* ---- enriched ambient aurora (richer blooms than before) ----------------- */
body::before{
  content:""; position:fixed; inset:-20vmax; z-index:-2; pointer-events:none;
  mix-blend-mode:multiply; will-change:transform;
  background:
    radial-gradient(34vmax 34vmax at 12% 6%, rgba(255,176,128,.42), transparent 64%),
    radial-gradient(30vmax 30vmax at 92% 14%, rgba(70,160,135,.22), transparent 62%),
    radial-gradient(30vmax 30vmax at 62% 108%, rgba(232,184,75,.30), transparent 66%),
    radial-gradient(24vmax 24vmax at 80% 64%, rgba(255,150,96,.14), transparent 70%);
}
/* film grain stays subtle, on top, never intercepts input */
body::after{ opacity:.030; }

/* ---- BRAND-FAITHFUL DARK THEME (new; follows OS preference) --------------- */
html[data-theme="dark"]{
    --brand:#FF9466; --brand-deep:#FF8A55; --brand-ink:#FFD6BF; --brand-soft:#3A2015; --brand-tint:var(--brand-soft); --card:var(--surface);
    --accent:#5BBBA3; --accent-deep:#2E7D6B; --accent-soft:#16271F;
    --bg:#15100B; --surface:#221A12;
    --ink:#F4EBDD; --ink2:#D6C7B4; --ink-2:#D6C7B4; --muted:#9C8B76;
    --line:#37291C;
  }
html[data-theme="dark"]{
    background-color:#15100B;
    background-image:
      radial-gradient(125% 80% at 6% -10%, rgba(255,122,60,.16), transparent 56%),
      radial-gradient(120% 78% at 102% 2%, rgba(60,170,140,.12), transparent 55%),
      radial-gradient(135% 95% at 50% 116%, rgba(232,184,75,.10), transparent 62%),
      linear-gradient(168deg,#181109 0%,#13100B 56%,#100B07 100%);
  }
html[data-theme="dark"] body::before{
    mix-blend-mode:screen;
    background:
      radial-gradient(34vmax 34vmax at 12% 6%, rgba(255,138,84,.30), transparent 64%),
      radial-gradient(30vmax 30vmax at 92% 14%, rgba(72,184,156,.20), transparent 62%),
      radial-gradient(30vmax 30vmax at 62% 108%, rgba(236,194,94,.20), transparent 66%);
  }
html[data-theme="dark"] body::after{ mix-blend-mode:screen; opacity:.022; }
/* keep opaque chrome legible on the dark canvas */
html[data-theme="dark"] .cc-nav,html[data-theme="dark"] .cc-foot,html[data-theme="dark"] .panel,html[data-theme="dark"] .card,html[data-theme="dark"] .cardlink{ background-color:var(--surface); }

/* ---- ambient cursor spotlight (created by analytics-dwell.js on content pages) --- */
.luxe-spot{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0;
  transition:opacity .5s ease; mix-blend-mode:multiply;
  background:
    radial-gradient(540px circle at var(--mx,50%) var(--my,12%),
      rgba(255,138,74,.15), rgba(255,178,130,.06) 40%, transparent 66%),
    radial-gradient(280px circle at var(--mx,50%) var(--my,12%),
      rgba(232,184,75,.08), transparent 60%);
}
.luxe-spot.on{ opacity:1; }
html[data-theme="dark"] .luxe-spot{ mix-blend-mode:screen;
  background:
    radial-gradient(620px circle at var(--mx,50%) var(--my,12%),
      rgba(255,178,118,.32), rgba(255,178,118,.12) 42%, transparent 70%),
    radial-gradient(320px circle at var(--mx,50%) var(--my,12%),
      rgba(245,206,120,.20), transparent 60%); }
@media (prefers-reduced-motion: reduce){ .luxe-spot{ display:none; } }

/* Dark-mode AA completion for generated static pages. */
html[data-theme="dark"] .cta:not(.ghost){color:#16110D}
html[data-theme="dark"] .cc-skip{color:#16110D}
html[data-theme="dark"] .cc-badge,html[data-theme="dark"] .chip,html[data-theme="dark"] .pill{border-color:var(--line)}