/* ==========================================================================
   sample-web · 共用樣式（Design Tokens + 動態效果）
   色彩變數可在此調整；各頁面 Tailwind 設定會對應相同色票。
   ========================================================================== */

:root {
  /* Business / Tech */
  --c-biz-bg: #05060f;
  --c-biz-brand: #6366f1;
  --c-biz-accent: #22d3ee;
  /* Lifestyle / Editorial */
  --c-life-paper: #f7f4ef;
  --c-life-ink: #2b2a27;
  --c-life-terracotta: #b5835a;
  --c-life-sage: #8a9a7b;
  /* Elegant / Gallery */
  --c-ele-obsidian: #0b0b0d;
  --c-ele-alabaster: #f4f1ea;
  --c-ele-gold: #c9a961;

  /* 複合陰影（多層柔和陰影） */
  --shadow-layered: 0 1px 1px rgba(0,0,0,.04), 0 2px 2px rgba(0,0,0,.05),
                    0 4px 4px rgba(0,0,0,.06), 0 8px 8px rgba(0,0,0,.08),
                    0 16px 16px rgba(0,0,0,.10);
  --ease-out-soft: cubic-bezier(.2, .7, .2, 1);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; }

/* 無障礙：跳至內容連結 */
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: .5rem 1rem; border-radius: .5rem; background: #fff; color: #000;
  transition: top .3s ease-in-out;
}
.skip-link:focus { top: 1rem; }

/* 鍵盤焦點樣式 */
:focus-visible { outline: 2px solid var(--c-biz-accent); outline-offset: 3px; border-radius: 6px; }

/* ---------- Glassmorphism & Glow（商務深色頁） ---------- */
.glass {
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-layered), inset 0 1px 0 rgba(255,255,255,.06);
}
.glow-card { position: relative; isolation: isolate; }
.glow-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(99,102,241,.75), rgba(34,211,238,0) 45%, rgba(34,211,238,.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .35; transition: opacity .3s ease-in-out;
}
.glow-card:hover::before, .glow-card:focus-within::before { opacity: 1; }
.glow-text {
  background: linear-gradient(90deg, #a5b4fc, #67e8f9 50%, #a5b4fc);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: 200% center; } }
.hero-orbs::before, .hero-orbs::after {
  content: ""; position: absolute; border-radius: 9999px; filter: blur(80px); pointer-events: none; z-index: -1;
}
.hero-orbs::before { width: 28rem; height: 28rem; left: -8rem; top: -6rem; background: rgba(99,102,241,.35); }
.hero-orbs::after  { width: 26rem; height: 26rem; right: -6rem; bottom: -6rem; background: rgba(34,211,238,.22); }

/* 按鈕磁吸式微互動 */
.btn-glow { transition: transform .3s ease-in-out, box-shadow .3s ease-in-out, background-color .3s ease-in-out; }
.btn-glow:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 10px 30px -8px rgba(99,102,241,.65); }
.btn-glow:active { transform: translateY(0) scale(.98); }

/* ---------- Marquee（客戶商標牆） ---------- */
.marquee-wrap { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Reveal（捲動淡入） ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-out-soft), transform .8s var(--ease-out-soft); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }

/* ---------- Image hover zoom（雜誌 / 藝廊） ---------- */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform .8s var(--ease-out-soft); }
.img-zoom:hover img { transform: scale(1.04); }

/* ---------- Lifestyle：紙張紋理 ---------- */
.paper-grain { position: relative; }
.paper-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: multiply;
  background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px); background-size: 4px 4px;
}

/* ---------- Elegant：金線分隔與時間軸 ---------- */
.gold-rule { height: 1px; background: linear-gradient(90deg, transparent, var(--c-ele-gold), transparent); }
.timeline-line { background: linear-gradient(to bottom, transparent, var(--c-ele-gold) 10%, var(--c-ele-gold) 90%, transparent); }
.parallax-img { will-change: transform; }

/* 原生 <dialog>：統一的 Modal / Lightbox 外觀 */
dialog.site-dialog { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1100px); width: 100%; }
dialog.site-dialog::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(6px); }
dialog.site-dialog[open] { animation: dialog-in .35s var(--ease-out-soft); }
@keyframes dialog-in { from { opacity: 0; transform: scale(.97) translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .marquee { animation: none; }
  .reveal { opacity: 1; transform: none; }
  .parallax-img { transform: none !important; }
}