/* ════════════════════════════════════════════════════════════
   experience.css — signature interaction layer (opt-in per page).
   1) #sig-intro  : first-visit hexagram opening overlay (entry page)
   2) .sig-particles : additive pointer particle trail (desktop)
   3) --sig-accent : per-page accent the trail/tint follow
   All effects self-disable under prefers-reduced-motion / touch.
   ════════════════════════════════════════════════════════════ */

:root { --sig-accent: #E6D2A8; }

.sig-particles {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Six-colour scroll tint — glow at top/bottom edges only, so the
   central reading area stays clean. Colour set per scroll position. */
.sig-tint {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.22;
  background:
    radial-gradient(80% 20% at 50% 0%, var(--sig-tint-c, #FF5FAE), transparent 75%),
    radial-gradient(80% 16% at 50% 100%, var(--sig-tint-c, #FF5FAE), transparent 78%);
}

#sig-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0908;
  opacity: 1;
  transition: opacity 1s ease;
}

#sig-intro.sig-done { opacity: 0; pointer-events: none; }

#sig-intro .sig-hexes {
  display: grid;
  grid-template-columns: repeat(6, auto);
  gap: 34px;
  place-items: center;
}

#sig-intro .sig-hex {
  width: 60px;
  height: auto;
  display: block;
  overflow: visible;
}

#sig-intro .sig-hex line { stroke-linecap: round; }
#sig-intro .sig-name { font-family: 'Noto Serif TC', serif; font-size: 18px; letter-spacing: 1px; }

@media (max-width: 639px) {
  #sig-intro .sig-hexes { grid-template-columns: repeat(2, auto); gap: 40px 70px; }
  #sig-intro .sig-hex { width: 72px; }
}

#sig-skip {
  position: fixed;
  right: 24px;
  bottom: 22px;
  z-index: 10001;
  font-family: 'Cormorant Garamond', 'Noto Serif TC', serif;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(205, 191, 158, 0.55);
  background: transparent;
  border: 1px solid rgba(205, 191, 158, 0.22);
  padding: 7px 16px;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, opacity 0.6s;
}

#sig-skip:hover { color: #ece0c4; border-color: rgba(236, 224, 196, 0.6); }

@media (prefers-reduced-motion: reduce) {
  .sig-particles { display: none; }
  #sig-intro { display: none; }
}