/* =========================================================
   intro.css — JBK 品牌開場動畫（~6 秒 · logo 為主角）
   建立：2026-08-07 · 由 AI 產生
   還原方式：從 frontend-header.php 移除 intro.css 的 <link>、
             #jbk-intro 標記與其後的內嵌 <script> 三段即可，全站不受影響。
   設計：深墨底（--ink）× 金線（--gold）× Spectral 襯線，
         六邊形金線描出 → logo 白色剪影揭示 → 金色細線掃過 →
         中英字標與標語浮現 → 停頓呼吸 → 簾幕上升露出網站。
   僅在 .is-playing 時運作；預設 display:none，由 script 依 session 決定是否播放。
   ========================================================= */

.jbk-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483000;                 /* 蓋過 header(50)、chatbot 等所有層 */
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 42%, #17150F 0%, #0C0B09 46%, #070605 100%);
  color: var(--cream, #FAFAF7);
  -webkit-font-smoothing: antialiased;
}

/* 金色微光暈，襯在 logo 後方 */
.jbk-intro::before {
  content: "";
  position: absolute;
  width: 60vmin; height: 60vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,153,104,0.20) 0%, rgba(184,153,104,0) 62%);
  filter: blur(6px);
  opacity: 0;
}
.jbk-intro.is-playing::before { animation: jbkGlow 2.6s var(--ease, cubic-bezier(.2,.65,.2,1)) 0.4s both; }

.jbk-intro__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px;
  transform: translateZ(0);
}

/* logo 區：六邊形金線罩在 mark 之上，穩定置中 */
.jbk-intro__logo {
  position: relative;
  width: 236px;
  height: 236px;
  display: grid;
  place-items: center;
}

/* 六邊形金線 */
.jbk-intro__hex {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.jbk-intro__hex polygon {
  stroke: var(--gold, #B89968);
  stroke-width: 0.7;
  fill: none;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  filter: drop-shadow(0 0 3px rgba(184,153,104,0.35));
}
.jbk-intro.is-playing .jbk-intro__hex polygon {
  animation: jbkHexDraw 0.9s cubic-bezier(.7,0,.2,1) 0.15s both;
}

/* 金色掃光劃過 logo */
.jbk-intro__mark-wrap { position: relative; display: inline-flex; }

/* logo 白色剪影 */
.jbk-intro__mark {
  width: 148px; height: auto;
  display: block;
  filter: brightness(0) invert(1) drop-shadow(0 6px 26px rgba(0,0,0,0.5));
  opacity: 0;
  transform: scale(0.86);
  will-change: transform, opacity, filter;
}
.jbk-intro.is-playing .jbk-intro__mark {
  animation: jbkMarkIn 0.8s cubic-bezier(.16,1,.3,1) 0.7s both;
}
.jbk-intro__shine {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(212,188,138,0.55) 50%, transparent 62%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateX(-120%);
}
.jbk-intro.is-playing .jbk-intro__shine {
  animation: jbkShine 0.9s ease-in-out 1.6s both;
}

/* 金色細線 */
.jbk-intro__rule {
  width: 116px; height: 1px;
  margin: 18px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold, #B89968), transparent);
  transform: scaleX(0);
  opacity: 0;
}
.jbk-intro.is-playing .jbk-intro__rule {
  animation: jbkRule 0.5s var(--ease, cubic-bezier(.2,.65,.2,1)) 1.2s both;
}

/* 英文字標（電影感 tracking-in：字距由寬收到正常）*/
.jbk-intro__word {
  font-family: var(--ff-display, 'Spectral', 'Noto Serif TC', Georgia, serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 4.4vw, 2.4rem);
  letter-spacing: 0.5em;
  padding-left: 0.5em;
  margin-top: 26px;
  color: var(--cream, #FAFAF7);
  opacity: 0;
}
.jbk-intro__word b {
  font-weight: 500;
  color: var(--champagne, #D4BC8A);
}
/* 英文副標——國際感 */
.jbk-intro__word::after {
  content: "PROFESSIONAL HAIR CURATION";
  display: block;
  font-family: var(--ff-body, 'Inter', system-ui, sans-serif);
  font-size: 0.3em;
  font-weight: 500;
  letter-spacing: 0.44em;
  padding-left: 0.44em;
  color: rgba(212,188,138,0.72);
  margin-top: 16px;
}
.jbk-intro.is-playing .jbk-intro__word {
  animation: jbkWordIn 0.8s cubic-bezier(.16,1,.3,1) 1.4s both;
}
@keyframes jbkWordIn {
  0%   { opacity: 0; letter-spacing: 0.92em; padding-left: 0.92em; transform: translateY(14px); }
  60%  { opacity: 1; }
  100% { opacity: 1; letter-spacing: 0.5em; padding-left: 0.5em; transform: translateY(0); }
}

/* 中文標語 */
.jbk-intro__tag {
  font-family: var(--ff-body, 'Inter', system-ui, sans-serif);
  font-size: clamp(0.78rem, 2.4vw, 0.95rem);
  letter-spacing: 0.42em;
  padding-left: 0.42em;
  margin-top: 14px;
  color: rgba(250,250,247,0.72);
  opacity: 0;
  transform: translateY(10px);
}
.jbk-intro.is-playing .jbk-intro__tag {
  animation: jbkRise 0.6s cubic-bezier(.16,1,.3,1) 1.9s both;
}

/* 跳過鍵 */
.jbk-intro__skip {
  position: absolute;
  right: clamp(16px, 4vw, 40px);
  bottom: clamp(16px, 4vw, 36px);
  z-index: 2;
  background: transparent;
  border: 0;
  color: rgba(250,250,247,0.55);
  font-family: var(--ff-body, 'Inter', system-ui, sans-serif);
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  cursor: pointer;
  padding: 10px 12px;
  opacity: 0;
  transition: color var(--t-fast, 220ms) ease;
  animation: jbkFadeIn 0.5s ease 0.7s both;
}
.jbk-intro__skip:hover { color: var(--gold, #B89968); }
.jbk-intro__skip:focus-visible { outline: 1px solid var(--gold, #B89968); outline-offset: 3px; }

/* 離場：整體上升淡出，露出網站 */
.jbk-intro.is-leaving {
  animation: jbkExit 0.72s cubic-bezier(.7,0,.3,1) both;
  pointer-events: none;
}

/* ---------------- keyframes ---------------- */
@keyframes jbkHexDraw { to { stroke-dashoffset: 0; } }
@keyframes jbkGlow    { 0%{opacity:0} 34%{opacity:1} 82%{opacity:1} 100%{opacity:0.85} }
@keyframes jbkMarkIn  {
  0%   { opacity: 0; transform: scale(0.86); filter: brightness(0) invert(1) blur(6px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1);    filter: brightness(0) invert(1) blur(0) drop-shadow(0 6px 26px rgba(0,0,0,0.5)); }
}
@keyframes jbkShine   { 0%{opacity:0;transform:translateX(-120%)} 12%{opacity:1} 100%{opacity:0;transform:translateX(120%)} }
@keyframes jbkRule    { to { transform: scaleX(1); opacity: 1; } }
@keyframes jbkRise    { to { opacity: 1; transform: translateY(0); } }
@keyframes jbkFadeIn  { to { opacity: 1; } }
@keyframes jbkExit    { to { opacity: 0; transform: translateY(-2.2%) scale(1.012); } }

/* 無障礙：偏好減少動態者，直接不播（script 也會擋，這裡雙保險） */
@media (prefers-reduced-motion: reduce) {
  .jbk-intro { display: none !important; }
}