/* ================================================================
   钩子之家 · Theme v2 — Cinematic Gold × Liquid Glass
   深海军蓝 + 暖金光带 + iOS 毛玻璃
   shared across index / protected-home / games / sova / invite / pdf-tools / pdf-unlock / sign
   ================================================================ */

:root {
  /* ===== Base — Deep navy cinematic ===== */
  --bg-base:   #0a1628;   /* 海军蓝 */
  --bg-mid:    #091223;
  --bg-deep:   #050a14;   /* 近黑 */
  --bg-gradient: radial-gradient(ellipse 120% 80% at 50% 0%, #132544 0%, var(--bg-base) 40%, var(--bg-deep) 100%);

  /* ===== Gold thread — poster signature ===== */
  --gold:        #d4a55c;
  --gold-hi:     #f0c674;
  --gold-lo:     #8c6a38;
  --gold-glow:   rgba(240, 198, 116, 0.45);
  --gold-tint:   rgba(240, 198, 116, 0.08);
  --gold-line:   linear-gradient(90deg,
                    transparent 0%,
                    rgba(240, 198, 116, 0.15) 15%,
                    rgba(240, 198, 116, 0.75) 50%,
                    rgba(240, 198, 116, 0.15) 85%,
                    transparent 100%);

  /* ===== Aurora orbs (muted, gold-tinted) ===== */
  --orb-1: rgba(212, 165, 92, 0.22);    /* gold */
  --orb-2: rgba(90, 200, 250, 0.14);    /* cool cyan accent */
  --orb-3: rgba(191, 90, 242, 0.10);    /* whisper purple */
  --orb-4: rgba(255, 159, 10, 0.10);    /* amber */

  /* ===== Liquid glass (warm-tinted) ===== */
  --glass-tint:        rgba(245, 236, 224, 0.045);
  --glass-tint-hi:     rgba(245, 236, 224, 0.09);
  --glass-tint-lo:     rgba(245, 236, 224, 0.025);
  --glass-gold-tint:   rgba(240, 198, 116, 0.05);
  --glass-edge:        rgba(245, 236, 224, 0.11);
  --glass-edge-top:    rgba(240, 198, 116, 0.32);
  --glass-edge-bottom: rgba(0, 0, 0, 0.40);
  --glass-shine:       linear-gradient(135deg,
                          rgba(245,236,224,0.18) 0%,
                          rgba(245,236,224,0.03) 38%,
                          rgba(245,236,224,0)    52%,
                          rgba(240,198,116,0.06) 100%);
  --glass-blur:        saturate(180%) blur(28px);
  --glass-blur-strong: saturate(200%) blur(44px);

  /* ===== Text — warm cream ===== */
  --text:   #F5ECE0;                        /* 主文字：米白 */
  --text2:  rgba(245, 236, 224, 0.74);
  --text3:  rgba(245, 236, 224, 0.48);
  --text4:  rgba(245, 236, 224, 0.28);
  --sub:    rgba(245, 236, 224, 0.60);
  --sub2:   rgba(245, 236, 224, 0.32);

  /* Back-compat aliases (old pages) */
  --card:        rgba(18, 30, 52, 0.72);
  --card-hover:  rgba(26, 42, 68, 0.82);
  --card-glass:  var(--glass-tint);
  --brd:         var(--glass-edge);
  --bg:          var(--bg-base);

  /* ===== Semantic ===== */
  --blue:   #5AC8FA;
  --blue-2: #64D2FF;
  --green:  #30D158;
  --orange: #FF9F0A;
  --red:    #FF453A;
  --purple: #BF5AF2;
  --pink:   #FF375F;
  --accent: var(--gold);            /* new canonical accent */
  --accent-hi: var(--gold-hi);

  /* ===== Motion ===== */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-native: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ===== Safe area ===== */
  --sai-t: env(safe-area-inset-top, 0px);
  --sai-b: env(safe-area-inset-bottom, 0px);

  /* ===== Radii ===== */
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 26px;
  --r-xl: 32px;

  /* ===== Typography ===== */
  --font-display: 'Playfair Display', 'Noto Serif SC', Georgia, 'Times New Roman', serif;
  --font-sans:    -apple-system, 'SF Pro Display', 'SF Pro Text', 'PingFang SC', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:    'SF Mono', 'Menlo', 'Consolas', monospace;
}

/* ================================================================
   GLOBAL BASE
   ================================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  background: var(--bg-deep);
}

body {
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: contain;
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
}

/* Aurora background — muted gold-tinted */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    var(--bg-gradient),
    radial-gradient(60% 70% at 15% 20%,  var(--orb-1) 0%, transparent 70%),
    radial-gradient(65% 65% at 85% 80%,  var(--orb-2) 0%, transparent 70%),
    radial-gradient(75% 70% at 50% 110%, var(--orb-3) 0%, transparent 70%),
    radial-gradient(50% 60% at 80% 12%,  var(--orb-4) 0%, transparent 70%);
  filter: saturate(130%);
  transform: translateZ(0);
  animation: auroraV2 40s ease-in-out infinite;
  z-index: -3;
  will-change: transform;
}

/* Film grain for authentic paper-poster feel */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.92 0 0 0 0 0.78 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  opacity: 0.055;
  mix-blend-mode: overlay;
  z-index: -2;
  pointer-events: none;
}

@keyframes auroraV2 {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  33%      { transform: translate3d(2%, -2%, 0) scale(1.03); }
  66%      { transform: translate3d(-2%, 1%, 0) scale(0.98); }
}

/* ================================================================
   GOLD THREAD — signature element (drop into any page)
   Usage:
     <div class="gold-thread"></div>  → horizontal ribbon
     <div class="gold-thread vertical"></div> → vertical
     .gold-text → gold gradient text
     .gold-divider → subtle horizontal gold line
   ================================================================ */
.gold-thread {
  position: relative;
  height: 2px;
  width: 100%;
  background: var(--gold-line);
  filter: drop-shadow(0 0 6px var(--gold-glow));
  opacity: 0.85;
  overflow: hidden;
  border-radius: 2px;
}
.gold-thread::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);
  animation: goldShimmer 3.8s ease-in-out infinite;
}
@keyframes goldShimmer {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

.gold-thread.vertical {
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg,
                transparent 0%,
                var(--gold-glow) 50%,
                transparent 100%);
}

.gold-text {
  background: linear-gradient(135deg, var(--gold-hi) 0%, var(--gold) 50%, var(--gold-lo) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.gold-divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  opacity: 0.4;
  margin: 12px 0;
}

/* Gold ornamental dot (map pin in the poster) */
.gold-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--gold-hi);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--gold-glow), 0 0 4px var(--gold);
  vertical-align: middle;
}

/* ================================================================
   HERO — cinematic headline block (optional, per-page)
   ================================================================ */
.hero-v2 {
  position: relative;
  padding: 32px 0 20px;
  text-align: left;
}
.hero-v2 .hero-kicker {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-v2 .hero-kicker::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold);
}
.hero-v2 .hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 7vw, 52px);
  line-height: 1.04;
  letter-spacing: -1.2px;
  color: var(--text);
  margin-bottom: 10px;
}
.hero-v2 .hero-sub {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.55;
  letter-spacing: 0.3px;
  max-width: 32ch;
}

/* ================================================================
   LIQUID GLASS PRIMITIVE v2 — warm-tinted
   Apply .glass-v2 to any container
   ================================================================ */
.glass-v2 {
  position: relative;
  isolation: isolate;
  background: var(--glass-tint);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  border-top-color: var(--glass-edge-top);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 1px 0 rgba(245, 236, 224, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 12px 36px rgba(0, 0, 0, 0.34),
    0 2px 6px rgba(0, 0, 0, 0.18);
}
.glass-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-shine);
  opacity: 0.65;
  pointer-events: none;
  z-index: 0;
}
.glass-v2 > * { position: relative; z-index: 1; }

/* ================================================================
   BUTTON v2 — gold cinematic CTA
   ================================================================ */
.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bg-deep);
  background: linear-gradient(135deg, var(--gold-hi), var(--gold));
  border: 1px solid rgba(240, 198, 116, 0.6);
  border-radius: 100px;
  box-shadow:
    0 6px 20px rgba(240, 198, 116, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: transform .25s var(--spring), box-shadow .25s var(--ease);
  text-decoration: none;
}
.btn-gold:hover  { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(240,198,116,0.35), inset 0 1px 0 rgba(255,255,255,0.4); }
.btn-gold:active { transform: translateY(0) scale(0.98); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--text);
  background: var(--glass-tint-hi);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  border-top-color: var(--glass-edge-top);
  border-radius: 100px;
  cursor: pointer;
  transition: transform .25s var(--spring), background .25s var(--ease);
  text-decoration: none;
}
.btn-ghost:hover  { background: var(--gold-tint); border-top-color: var(--gold); }
.btn-ghost:active { transform: scale(0.98); }

/* ================================================================
   SCROLLBAR hide
   ================================================================ */
.no-scrollbar {
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* ================================================================
   FADE-IN utility
   ================================================================ */
@keyframes fadeUpV2 {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { opacity: 0; animation: fadeUpV2 .55s var(--ease) forwards; }
.delay-1 { animation-delay: .08s; }
.delay-2 { animation-delay: .16s; }
.delay-3 { animation-delay: .24s; }
.delay-4 { animation-delay: .32s; }
.delay-5 { animation-delay: .40s; }