/* =====================================================================
   KING CHARLES ($长毛) — COMIC BOOK SYSTEM
   Cinematic rural-Hebei palette rendered as an inked comic album.
   ===================================================================== */

:root {
  --ink:      #100d0b;
  --ink-soft: #241d17;
  --paper:    #f7edd8;
  --paper-2:  #efe0c1;
  --cream:    #fbf5e8;
  --gold:     #f0ad34;
  --gold-hi:  #ffd873;
  --brick:    #a5432c;
  --dusk:     #2a3d4e;
  --deep:     #0b0908;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--deep);
  color: var(--ink);
  font-family: "Inter", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------
   1. BACKGROUND STACK  (photo -> tone -> halftone -> shine)
   ------------------------------------------------------------------ */

.bg-stack { position: fixed; inset: 0; z-index: -3; pointer-events: none; overflow: hidden; }

.bg-photo {
  position: absolute; inset: -6%;
  background: url("chrome_dQBXMgbnDK.png") center 28% / cover no-repeat;
  filter: saturate(0.55) contrast(1.12) brightness(0.62);
  opacity: 0.5;
  transform: scale(1.06);
  animation: bgDrift 44s ease-in-out infinite alternate;
}

@keyframes bgDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-2.2%, -1.6%, 0); }
}

.bg-tone {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%,   rgba(240,173,52,.28), transparent 58%),
    radial-gradient(90% 70% at 12% 92%,   rgba(165,67,44,.30),  transparent 60%),
    radial-gradient(90% 70% at 88% 78%,   rgba(42,61,78,.42),   transparent 62%),
    linear-gradient(180deg, #14100d 0%, #1c1713 42%, #0d0a08 100%);
  mix-blend-mode: normal;
  opacity: .94;
}

/* ben-day dots + inked cross-hatch */
.bg-dots {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(0,0,0,.42) 1.05px, transparent 1.15px),
    radial-gradient(rgba(255,214,120,.16) .9px, transparent 1px);
  background-size: 6px 6px, 6px 6px;
  background-position: 0 0, 3px 3px;
  opacity: .55;
}

/* film grain / fur grain */
.bg-grain {
  position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='.42'/></svg>");
  opacity: .18;
  animation: grainShift 5.5s steps(6) infinite;
}

@keyframes grainShift {
  0%   { transform: translate3d(0,0,0); }
  20%  { transform: translate3d(-2%, 1.5%, 0); }
  40%  { transform: translate3d(1.6%, -1%, 0); }
  60%  { transform: translate3d(-1.2%, -1.8%, 0); }
  80%  { transform: translate3d(2%, 1%, 0); }
  100% { transform: translate3d(0,0,0); }
}

/* ---- THE SHINE: a slow raking light sweeping across everything ---- */
.bg-shine {
  position: absolute;
  top: -60%; left: -70%;
  width: 62%; height: 240%;
  transform: rotate(19deg);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,236,190,.045) 22%,
    rgba(255,224,150,.16)  44%,
    rgba(255,255,255,.30)  50%,
    rgba(255,224,150,.16)  56%,
    rgba(255,236,190,.045) 78%,
    transparent 100%);
  filter: blur(14px);
  mix-blend-mode: screen;
  animation: shineSweep 11s cubic-bezier(.55,.05,.35,1) infinite;
}

.bg-shine.delay { animation-delay: 5.5s; opacity: .55; width: 34%; }

@keyframes shineSweep {
  0%   { left: -70%; opacity: 0; }
  8%   { opacity: 1; }
  75%  { opacity: 1; }
  100% { left: 145%; opacity: 0; }
}

/* vignette so text always wins */
.bg-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 78% at 50% 44%, transparent 34%, rgba(6,5,4,.72) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .bg-photo, .bg-grain, .bg-shine { animation: none !important; }
}

/* ---------------------------------------------------------------------
   2. TYPE
   ------------------------------------------------------------------ */

.f-title  { font-family: "Bangers", "Noto Sans SC", cursive; letter-spacing: .035em; }
.f-block  { font-family: "Archivo Black", "Noto Sans SC", sans-serif; letter-spacing: -.01em; }
.f-slab   { font-family: "Anton", "Noto Sans SC", sans-serif; letter-spacing: .02em; }
.f-cn     { font-family: "Noto Sans SC", sans-serif; font-weight: 900; }
.f-body   { font-family: "Inter", "Noto Sans SC", sans-serif; }

.ink-stroke {
  color: var(--gold-hi);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 6px 7px 0 var(--ink), 0 0 42px rgba(240,173,52,.42);
}

.ink-stroke-sm {
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 3px 4px 0 var(--ink);
}

.ink-light {
  color: var(--cream);
  -webkit-text-stroke: 2.5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 5px 6px 0 var(--ink);
}

/* ---------------------------------------------------------------------
   3. INK PRIMITIVES — panels, buttons, bursts, bubbles
   ------------------------------------------------------------------ */

.panel {
  position: relative;
  background: var(--paper);
  border: 5px solid var(--ink);
  box-shadow: 13px 14px 0 var(--ink);
  border-radius: 4px;
}

.panel-dark { background: #16110d; color: var(--cream); }

.panel-tape::before,
.panel-tape::after {
  content: "";
  position: absolute;
  width: 92px; height: 26px;
  background: rgba(255,229,163,.62);
  border: 2px solid rgba(16,13,11,.45);
  top: -14px;
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
}
.panel-tape::before { left: 22px;  transform: rotate(-7deg); }
.panel-tape::after  { right: 22px; transform: rotate(6deg); }

.halftone-fill {
  background-image: radial-gradient(rgba(16,13,11,.30) 1.2px, transparent 1.3px);
  background-size: 7px 7px;
}

.halftone-gold {
  background-image: radial-gradient(rgba(240,173,52,.55) 1.3px, transparent 1.4px);
  background-size: 8px 8px;
}

/* action rays behind a focal element */
.rays::before {
  content: "";
  position: absolute; inset: -22%;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(255,216,115,.34) 0deg 6deg,
    transparent 6deg 15deg);
  filter: blur(.4px);
  z-index: -1;
  animation: raySpin 38s linear infinite;
  border-radius: 50%;
  mask-image: radial-gradient(closest-side, #000 38%, transparent 78%);
  -webkit-mask-image: radial-gradient(closest-side, #000 38%, transparent 78%);
}
@keyframes raySpin { to { transform: rotate(360deg); } }

/* jagged "POW" burst */
.burst {
  clip-path: polygon(50% 0%, 60% 16%, 76% 6%, 76% 24%, 94% 20%, 86% 36%, 100% 48%,
                     86% 60%, 94% 76%, 76% 74%, 76% 92%, 60% 82%, 50% 100%, 40% 82%,
                     24% 92%, 24% 74%, 6% 76%, 14% 60%, 0% 48%, 14% 36%, 6% 20%,
                     24% 24%, 24% 6%, 40% 16%);
}

/* speech balloon */
.balloon {
  position: relative;
  background: var(--cream);
  border: 5px solid var(--ink);
  border-radius: 26px;
  box-shadow: 11px 12px 0 var(--ink);
}
.balloon::after {
  content: "";
  position: absolute;
  left: 58px; bottom: -34px;
  width: 46px; height: 40px;
  background: var(--cream);
  border-right: 5px solid var(--ink);
  border-bottom: 5px solid var(--ink);
  clip-path: polygon(0 0, 100% 0, 8% 100%);
  transform: skewX(-10deg);
}

/* buttons */
.btn-comic {
  display: inline-flex; align-items: center; gap: .6rem;
  border: 4px solid var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease, filter .25s ease;
  text-decoration: none;
  cursor: pointer;
}
.btn-comic:hover {
  transform: translate(-3px, -3px);
  box-shadow: 11px 11px 0 var(--ink), 0 0 32px rgba(240,173,52,.55);
}
.btn-comic:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--ink); }

.btn-gold  { background: linear-gradient(160deg, var(--gold-hi), var(--gold)); color: var(--ink); }
.btn-ink   { background: var(--ink); color: var(--gold-hi); }
.btn-paper { background: var(--cream); color: var(--ink); }

/* shine glide across gold buttons */
.btn-gold { position: relative; overflow: hidden; }
.btn-gold::after {
  content: "";
  position: absolute; top: -120%; left: -60%;
  width: 40%; height: 340%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  transform: rotate(22deg);
  animation: btnShine 3.6s ease-in-out infinite;
}
@keyframes btnShine {
  0%, 62%  { left: -60%; }
  92%, 100%{ left: 130%; }
}

/* ---------------------------------------------------------------------
   4. PERSPECTIVE STAGE
   ------------------------------------------------------------------ */

.stage      { perspective: 1500px; perspective-origin: 50% 42%; }
.stage-near { perspective: 900px; }

.tilt-l  { transform: rotateY(11deg)  rotateX(3deg)  rotateZ(-1.6deg); transform-style: preserve-3d; }
.tilt-r  { transform: rotateY(-11deg) rotateX(3deg)  rotateZ(1.6deg);  transform-style: preserve-3d; }
.tilt-up { transform: rotateX(9deg)   rotateZ(-.8deg); transform-style: preserve-3d; }
.tilt-dn { transform: rotateX(-7deg)  rotateZ(.9deg);  transform-style: preserve-3d; }

.tilt-l, .tilt-r, .tilt-up, .tilt-dn, .lift {
  transition: transform .5s cubic-bezier(.2,.7,.25,1), box-shadow .5s ease;
}
.tilt-l:hover, .tilt-r:hover, .tilt-up:hover, .tilt-dn:hover {
  transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(30px);
  box-shadow: 22px 24px 0 var(--ink);
}
.lift:hover { transform: translateY(-10px) rotateZ(0deg); }

/* ---------------------------------------------------------------------
   5. SECTION DIVIDERS — every section is cut differently
   ------------------------------------------------------------------ */

.cut-slash  { clip-path: polygon(0 3.5vw, 100% 0, 100% calc(100% - 2.5vw), 0 100%); }
.cut-tear   { clip-path: polygon(0 0, 100% 2.4vw, 100% 100%, 0 calc(100% - 2.4vw)); }
.cut-arrow  { clip-path: polygon(0 0, 50% 3vw, 100% 0, 100% 100%, 50% calc(100% - 3vw), 0 100%); }

.rule-ink {
  height: 7px;
  background: var(--ink);
  box-shadow: 0 10px 0 -4px var(--gold);
}

/* ticker */
.ticker { overflow: hidden; white-space: nowrap; }
.ticker-track {
  display: inline-flex; align-items: center;
  animation: tickerRun 26s linear infinite;
  will-change: transform;
}
@keyframes tickerRun { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------------
   6. SCROLL REVEAL
   ------------------------------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(38px) rotateX(9deg);
  transition: opacity .7s ease, transform .8s cubic-bezier(.18,.75,.25,1);
}
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .10s; }
.reveal.d2 { transition-delay: .20s; }
.reveal.d3 { transition-delay: .30s; }
.reveal.d4 { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------------
   7. MISC
   ------------------------------------------------------------------ */

.ca-chip {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  word-break: break-all;
}

.img-ink { filter: contrast(1.1) saturate(1.05); }

.frame-screen {
  background:
    linear-gradient(180deg, rgba(255,216,115,.10), transparent 30%),
    #0a0908;
}

.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: -6px;
  height: 4px; background: var(--gold);
  transition: right .25s ease;
}
.nav-link:hover::after { right: 0; }

.copy-toast {
  position: fixed; left: 50%; bottom: 34px;
  transform: translate(-50%, 24px);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 90;
}
.copy-toast.show { opacity: 1; transform: translate(-50%, 0); }

::selection { background: var(--gold); color: var(--ink); }

/* scrollbar */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #0d0a08; }
::-webkit-scrollbar-thumb { background: var(--gold); border: 3px solid #0d0a08; border-radius: 8px; }

/* mobile softening of the 3D so nothing clips off-screen */
@media (max-width: 860px) {
  .tilt-l, .tilt-r, .tilt-up, .tilt-dn { transform: none; }
  .panel { box-shadow: 8px 9px 0 var(--ink); }
  .cut-slash, .cut-tear, .cut-arrow { clip-path: none; }
}