/* ============================================================
 *  THE CHALLENGE — First-visit Intro Overlay
 *  Phase 5-G #25: Pattern F (vertical rule + horizontal subgroup)
 *  + Welcome to header + Exit glitch dispersion
 *
 *  - 初回訪問時のみ JS が `.is-active` を付与してアニメ開始
 *  - シーケンス完了後 `.is-exiting` で全体を ジジジッ + ポリゴン飛散
 *  - 2 回目以降は JS が要素ごと DOM から削除 (CSS で is-pending 時 hidden)
 *  - HERO 背面と title XY 一致のため ghost spacer を仕込む
 * ============================================================ */

.tc-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  overflow: hidden;
  /* HERO と同じ padding にして title を viewport 中央に揃える */
  padding-top:    max(100px, calc(50vh - 166px));
  padding-right:  24px;
  padding-bottom: 90px;
  padding-left:   24px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease-out;
}
.tc-intro.is-pending { display: none; }              /* 初期: JS が外す */
.tc-intro.is-fading-final { opacity: 0; pointer-events: none; }
.tc-intro.is-done { display: none; }

@media (max-width: 1023.98px) {
  /* モバイル: 下に tabbar があるのでその分 padding-bottom を増やす */
  .tc-intro {
    padding-bottom: calc(90px + var(--tc-tabbar-h, 72px));
  }
}

.tc-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(240,192,96,0.025) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(240,192,96,0.018) 0%, transparent 40%);
  z-index: 1;
}
.tc-intro::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.85) 100%);
  z-index: 2;
}

.tc-intro__inner {
  position: relative;
  z-index: 3;
  max-width: var(--max-w, 1100px);
  margin: 0 auto;
  width: 100%;
  /* Exit glitch transform / filter / opacity drivers */
  --jx: 0px; --jy: 0px; --jscale: 1; --jrot: 0deg;
  --jblur: 0px; --jop: 1;
  transform: translate(var(--jx), var(--jy)) scale(var(--jscale)) rotate(var(--jrot));
  filter: blur(var(--jblur));
  opacity: var(--jop);
}

/* Exit burst flash — brief white glow at the moment of dispersion */
.tc-intro.is-exiting::before {
  background-image: none;
  background: rgba(255, 255, 255, var(--burst-flash, 0));
  transition: background 60ms linear;
}

/* invisible spacers — match HERO content stack so title Y aligns.
   Welcome + margin (~38) を含むため ghost-pre は 58 に縮小して
   合計 above-title content を HERO の season+subtitle (96) と揃える。 */
.tc-intro__ghost-pre,
.tc-intro__ghost-post {
  visibility: hidden;
  pointer-events: none;
}
.tc-intro__ghost-pre  { height: 58px; }
.tc-intro__ghost-post { height: 306px; }

/* ============== WELCOME TO ============== */
.tc-intro__welcome {
  font-family: 'Zen Kaku Gothic New', var(--font-ja, sans-serif);
  font-weight: 300;
  font-style: normal;
  color: var(--ink-mute, #9b948a);
  letter-spacing: 0.45em;
  text-transform: uppercase;
  font-size: clamp(11px, 1.3vw, 15px);
  margin-bottom: 14px;
  opacity: 0;
  transform: translateY(6px);
}
.tc-intro.is-active .tc-intro__welcome {
  animation: tcIntroFadeUp 0.9s ease-out 0.4s forwards;
}
@keyframes tcIntroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ============== TITLE — same as .tc-hero__title ============== */
.tc-intro__title {
  font-family: 'Zen Kaku Gothic New', var(--font-ja, sans-serif);
  font-size: clamp(32px, 5.8vw, 76px);
  color: var(--white, #f5f1e8);
  font-weight: 400;
  letter-spacing: 0.22em;
  line-height: 1;
  margin: 8px 0 4px;
  white-space: nowrap;
  display: inline-block;
  position: relative;
  text-shadow:
    0 0 40px rgba(255,255,255,0.08),
    0 2px 12px rgba(0,0,0,0.7);
  --gx: 0px; --gcl-top: 0%; --gcl-bottom: 0%; --gop: 0;
}

.tc-intro__title::before,
.tc-intro__title::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  text-align: center;
  pointer-events: none;
  opacity: var(--gop);
  mix-blend-mode: screen;
  text-shadow: none;
  font-family: inherit; font-size: inherit; font-weight: inherit;
  letter-spacing: inherit; line-height: inherit;
  white-space: nowrap;
}
.tc-intro__title::before {
  color: #ff3a3a;
  transform: translateX(calc(-1 * var(--gx) - 2px));
  clip-path: inset(var(--gcl-top) 0 var(--gcl-bottom) 0);
}
.tc-intro__title::after {
  color: #3affff;
  transform: translateX(calc(var(--gx) + 2px));
  clip-path: inset(var(--gcl-bottom) 0 var(--gcl-top) 0);
}

/* per-character cascade — delayed by 1500ms to wait for welcome */
.tc-intro__char {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  filter: blur(6px);
}
.tc-intro__char--space {
  opacity: 1;
  filter: none;
  transform: none;
}
.tc-intro.is-active .tc-intro__char {
  animation: tcIntroCharIn 1.1s var(--ease, cubic-bezier(.2,.8,.2,1)) forwards;
  animation-delay: calc(var(--d, 0ms) + 1500ms);
}
.tc-intro.is-active .tc-intro__char--space {
  animation: none;
}
@keyframes tcIntroCharIn {
  0%   { opacity: 0; transform: translateY(10px); filter: blur(8px); }
  60%  { opacity: 1; transform: translateY(-2px); filter: blur(0); text-shadow: 0 0 30px rgba(255,255,255,0.5); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* gold quote bookends — fade-in late, after cascade settles */
.tc-intro__quote {
  display: inline-block;
  color: var(--accent, #f0c060);
  margin: 0 6px;
  opacity: 0;
}
.tc-intro__quote--l {
  transform: translateX(-14px) scale(0.85);
  filter: blur(4px);
}
.tc-intro__quote--r {
  transform: translateX(14px) scale(0.85);
  filter: blur(4px);
}
.tc-intro.is-active .tc-intro__quote--l {
  animation: tcIntroQuoteL 0.7s cubic-bezier(0.22, 1, 0.36, 1) 3.0s forwards;
}
.tc-intro.is-active .tc-intro__quote--r {
  animation: tcIntroQuoteR 0.7s cubic-bezier(0.22, 1, 0.36, 1) 3.0s forwards;
}
@keyframes tcIntroQuoteL { to { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); } }
@keyframes tcIntroQuoteR { to { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); } }

/* ============== Vertical rule (matches .tc-hero__rule) ============== */
.tc-intro__rule {
  width: 1px;
  height: 0;
  background: linear-gradient(to bottom, transparent, var(--text-4, #6a665d), transparent);
  margin: 36px auto;
  opacity: 0;
}
.tc-intro.is-active .tc-intro__rule {
  animation: tcIntroRuleGrow 1.0s var(--ease, cubic-bezier(.2,.8,.2,1)) 3.0s forwards;
}
@keyframes tcIntroRuleGrow {
  0%   { height: 0; opacity: 0; }
  100% { height: 48px; opacity: 1; }
}

/* ============== presented by + signature (horizontal, Pattern F) ============== */
.tc-intro__subgroup {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 0;
  opacity: 0;
  transform: translateY(6px);
}
.tc-intro.is-active .tc-intro__subgroup {
  animation: tcIntroFadeUp 0.9s ease-out 3.8s forwards;
}

.tc-intro__presented {
  font-family: var(--font-en, Georgia, serif);
  font-style: italic;
  color: var(--ink-mute, #9b948a);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-size: clamp(11px, 1.4vw, 16px);
  margin: 0;
  white-space: nowrap;
}

.tc-intro__signature {
  display: inline-block;
  height: clamp(38px, 5.5vw, 62px);
  width: auto;
  position: relative;
}
.tc-intro__signature img {
  height: 100%;
  width: auto;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* ============== EXIT GLITCH ==============
 *  is-exiting 中: 全要素が --gex で同期して横に揺れる
 *  inner 全体が --jx/--jy/--jscale/--jblur/--jop で飛散
 *  title は引き続き --gx/--gcl-top/--gcl-bottom/--gop で激しく slice */
.tc-intro.is-exiting .tc-intro__welcome,
.tc-intro.is-exiting .tc-intro__rule,
.tc-intro.is-exiting .tc-intro__subgroup {
  transform: translateX(var(--gex, 0px));
}

/* ============== Skip button ============== */
.tc-intro__skip {
  position: absolute;
  top: 24px;
  right: 28px;
  z-index: 10;
  background: transparent;
  border: 1px solid rgba(240,192,96,0.4);
  color: var(--ink-mute, #9b948a);
  font-family: var(--font-ui, Helvetica, Arial, sans-serif);
  font-size: 12px;
  letter-spacing: 0.2em;
  padding: 10px 18px;
  cursor: pointer;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.6s ease-out 1.2s, color 0.2s, border-color 0.2s, background 0.2s;
}
.tc-intro.is-active .tc-intro__skip { opacity: 0.85; }
.tc-intro__skip:hover {
  color: var(--accent, #f0c060);
  border-color: var(--accent, #f0c060);
  background: rgba(240,192,96,0.06);
}

/* ============== Reduced motion ============== */
@media (prefers-reduced-motion: reduce) {
  .tc-intro__welcome,
  .tc-intro__char,
  .tc-intro__quote,
  .tc-intro__rule,
  .tc-intro__subgroup {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .tc-intro__rule { height: 48px !important; }
}