/* 深夜球場 內頁互動層 — Motion / Layout Variance / Visual Density
   套用對象:betting/football/worldcup-2026/nba(卡片式內容頁,不含scroll-world首頁) */

/* ── 背景紋理:取代純色平面,加一層極低調的光暈網格,呼應首頁的深夜氛圍 ── */
body{
  background-image:
    radial-gradient(ellipse 800px 500px at 15% -10%, color-mix(in srgb, var(--hot) 7%, transparent), transparent),
    radial-gradient(ellipse 600px 400px at 100% 20%, color-mix(in srgb, var(--turf, var(--amber)) 5%, transparent), transparent);
  background-attachment: fixed;
}

/* ── Hero 強化:加大留白+微光暈,不再是純文字疊背景色 ── */
.hero{position:relative;overflow:hidden}
.hero::before{
  content:'';position:absolute;top:-40%;left:50%;width:600px;height:600px;
  background:radial-gradient(circle, color-mix(in srgb, var(--hot) 12%, transparent) 0%, transparent 70%);
  transform:translateX(-50%);pointer-events:none;z-index:0;
}
.hero h1,.hero p{position:relative;z-index:1}
.hero h1{
  background:linear-gradient(135deg, var(--text) 40%, var(--hot) 120%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ── 卡片:從「灰底+邊框變色」升級成有層次的懸浮感 ── */
.card{
  position:relative;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
}
.card::before{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .35s;
  background:linear-gradient(135deg, color-mix(in srgb, var(--hot) 8%, transparent), transparent 60%);
  pointer-events:none;
}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 32px -12px rgba(0,0,0,.5)}
.card:hover::before{opacity:1}
.card .tag{transition:transform .3s}
.card:hover .tag{transform:translateY(-1px)}

/* ── 進場動畫:滾動到視野內才浮現,不是一次全部貼在畫面上(密度感的關鍵) ── */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
[data-reveal].is-visible{opacity:1;transform:translateY(0)}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}
[data-reveal-delay="4"]{transition-delay:.32s}
[data-reveal-delay="5"]{transition-delay:.4s}

/* ── h2 標題列強化:底線用漸層掃過去的動畫,取代死板的靜態色塊 ── */
h2{position:relative}
h2::after{
  content:'';position:absolute;left:0;bottom:-8px;height:2px;width:0;
  background:linear-gradient(90deg, var(--hot), transparent);
  transition:width .8s cubic-bezier(.2,.8,.2,1);
}
h2.is-visible::after{width:64px}

/* ── nav 當前頁底線滑動效果 ── */
nav a{position:relative;padding-bottom:2px}
nav a::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--hot);transition:width .25s}
nav a:hover::after{width:100%}

/* ── 統計數字條(bento風格小工具,首頁與內頁可共用) ── */
.stat-strip{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}
.stat-chip{flex:1;min-width:120px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 18px;position:relative;overflow:hidden}
.stat-chip::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--hot)}
.stat-chip .num{font-size:1.6rem;font-weight:900;color:var(--hot);line-height:1.1}
.stat-chip .label{font-size:.76rem;color:var(--muted);margin-top:4px}

/* ── reduced-motion 使用者:直接顯示,不做動畫 ── */
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .card,.hero::before,h2::after{transition:none}
}