/* LP ファーストビュー — tour DEPARTURE 風（nav 下・フルブリード）
   ページ検出は body:has(.lp-hero)。id=lpHero は JS 用。
   ヒーロー（ロゴ・信号）は文書フロー。星空はビューポート固定。ナビは sticky。 */

/* FV 専用トークン（未スクロール時 PC の nav/ノッチは純粋な黒。stuck 後は --color-ink） */
body:has(.lp-hero) {
  --lp-hero-bg: #000;
  --lp-hero-signal: var(--color-tiffany-bright);
  --lp-hero-signal-cycle: 7s;
  --lp-hero-viewport-h: calc(100svh - var(--nav-bar-height));
  --lp-hero-signal-h: 100svh;
}
@supports (height: 100dvh) {
  body:has(.lp-hero) {
    --lp-hero-viewport-h: calc(100dvh - var(--nav-bar-height));
    --lp-hero-signal-h: 100dvh;
  }
}

body:has(.lp-hero) .site-nav:not(.is-stuck),
body:has(.lp-hero) .site-nav:not(.is-stuck) .site-nav__bar,
body:has(.lp-hero) .site-nav:not(.is-stuck) .site-nav__menu {
  background-color: var(--lp-hero-bg);
}

/* スマホ FV: バー・ノッチ帯を透過して星空とつなげる。メニュー／stuck 後は不透明のまま */
@media (max-width: 1023px) {
  body:has(.lp-hero) .site-nav:not(.is-stuck),
  body:has(.lp-hero) .site-nav:not(.is-stuck) .site-nav__bar {
    background-color: transparent;
  }

  /* notch-cover は Safari ノッチ色サンプル用の黒帯。FV では消して星空を上端まで出す */
  body:has(.lp-hero):not(:has(.site-nav.is-stuck)) .notch-cover {
    background-color: transparent;
    height: 0;
    min-height: 0;
  }

  body:has(.lp-hero):not(:has(.site-nav.is-stuck)) .starfield {
    top: 0;
  }
}

body:has(.lp-hero):has(.site-nav.is-stuck) .site-nav,
body:has(.lp-hero):has(.site-nav.is-stuck) .site-nav__bar,
body:has(.lp-hero):has(.site-nav.is-stuck) .site-nav__menu {
  background-color: var(--color-ink);
}

body:has(.lp-hero) .site-nav__bar {
  transition:
    border-bottom-color 0.2s ease,
    background-color 0.2s ease;
}

body:has(.lp-hero) .notch-cover {
  background-color: var(--lp-hero-bg);
  transition: background-color 0.2s ease;
}

body:has(.lp-hero):has(.site-nav.is-stuck) .notch-cover {
  background-color: var(--color-ink);
}

/* happylow 通信グリッチ — ロゴ群背面、ナビ領域へはみ出す（7s周期）
   0–16% / 52–100% QUIET（合計約 4.8s）
   17% サンダー予告1回 → 18–32% content 明滅 → 33–35% サンダー1回 → 36–46% 背景バースト
   signal(1) < stage ロゴ群(2)。pointer-events: none */
.lp-hero__signal {
  position: absolute;
  top: calc(-1 * var(--nav-bar-height));
  left: 0;
  right: 0;
  height: var(--lp-hero-signal-h);
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

body:has(.lp-hero):not(.is-lp-hero-signal) .lp-hero__signal {
  /* display:none は復帰時に animation 位相がリセットされるため使わない（iOS 26 は clip-path で非描画） */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(100%);
}

body:has(.lp-hero).is-lp-hero-signal .lp-hero__signal {
  visibility: visible;
  opacity: 1;
  clip-path: none;
}

/* 7s 信号サイクル — fx 未武装 or 信号 OFF 時は通信系を pause（走査線 .lp-hero__scan は常時） */
body:has(.lp-hero):not(.is-lp-hero-fx-armed) .lp-hero__content,
body:has(.lp-hero):not(.is-lp-hero-signal) .lp-hero__content,
body:has(.lp-hero):not(.is-lp-hero-fx-armed) .lp-hero__signal-thunder,
body:has(.lp-hero):not(.is-lp-hero-signal) .lp-hero__signal-thunder,
body:has(.lp-hero):not(.is-lp-hero-fx-armed) .lp-hero__signal-parallax,
body:has(.lp-hero):not(.is-lp-hero-signal) .lp-hero__signal-parallax,
body:has(.lp-hero):not(.is-lp-hero-fx-armed) .lp-hero__signal-track,
body:has(.lp-hero):not(.is-lp-hero-signal) .lp-hero__signal-track,
body:has(.lp-hero):not(.is-lp-hero-fx-armed) .lp-hero__signal-track img,
body:has(.lp-hero):not(.is-lp-hero-signal) .lp-hero__signal-track img,
body:has(.lp-hero):not(.is-lp-hero-fx-armed) .lp-hero__signal-veil,
body:has(.lp-hero):not(.is-lp-hero-signal) .lp-hero__signal-veil,
body:has(.lp-hero):not(.is-lp-hero-fx-armed) .lp-hero__signal-glitch__noise,
body:has(.lp-hero):not(.is-lp-hero-signal) .lp-hero__signal-glitch__noise,
body:has(.lp-hero):not(.is-lp-hero-fx-armed) .lp-hero__signal-glitch__rgb,
body:has(.lp-hero):not(.is-lp-hero-signal) .lp-hero__signal-glitch__rgb,
body:has(.lp-hero):not(.is-lp-hero-fx-armed) .lp-hero__signal-glitch__slice,
body:has(.lp-hero):not(.is-lp-hero-signal) .lp-hero__signal-glitch__slice,
body:has(.lp-hero):not(.is-lp-hero-fx-armed) .lp-hero__signal-glitch__bar,
body:has(.lp-hero):not(.is-lp-hero-signal) .lp-hero__signal-glitch__bar,
body:has(.lp-hero):not(.is-lp-hero-fx-armed) .lp-hero__cta-btn::after,
body:has(.lp-hero):not(.is-lp-hero-signal) .lp-hero__cta-btn::after {
  animation-play-state: paused !important;
}

/* SCROLL ヒント — 通信エフェクトの armed / 明滅と独立して常時表示 */
body:has(.lp-hero) .lp-hero__hint,
body:has(.lp-hero) .lp-hero__hint-icon {
  animation-play-state: running !important;
}

body:has(.lp-hero):not(.is-lp-hero-signal) .lp-hero__content {
  opacity: 1 !important;
}

/* PC: canvas 星を優先（.starfield は隠す） */
body:has(.lp-hero) .starfield {
  display: none !important;
}
/* スマホ: canvas 停止中は FV〜下層まで CSS 星を常時表示（黒 canvas は出さない） */
@media (max-width: 1023px) {
  body:has(.lp-hero) .starfield {
    display: block !important;
  }
  body:has(.lp-hero) .lp-hero__backdrop {
    display: none !important;
  }
}

body:has(.lp-hero) .site-main {
  position: relative;
  z-index: 5;
}

body:has(.lp-hero) .site-mountain {
  position: relative;
  z-index: 5;
}

.lp-hero__signal-parallax {
  position: absolute;
  inset: 0;
  animation: lp-hero-signal-shake var(--lp-hero-signal-cycle) steps(1, end) infinite;
  will-change: transform;
}

.lp-hero__signal-track {
  position: absolute;
  inset: -12% -8%;
  width: 116%;
  height: 124%;
  animation:
    lp-hero-signal-drift 28s ease-in-out infinite alternate,
    lp-hero-signal-jitter var(--lp-hero-signal-cycle) steps(1, end) infinite;
  will-change: transform, filter;
}

/* スマホ: filter jitter は重いので除外（drift のみ） */
@media (max-width: 639px) {
  .lp-hero__signal-track {
    animation: lp-hero-signal-drift 28s ease-in-out infinite alternate;
    will-change: transform;
  }
}

.lp-hero__signal-track img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  user-select: none;
  opacity: 0;
  animation: lp-hero-signal-flash var(--lp-hero-signal-cycle) steps(1, end) infinite;
}

/* 平時は透明。フラッシュ時だけ端を少し落として可読性を確保 */
.lp-hero__signal-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  background:
    radial-gradient(ellipse 72% 62% at 50% 48%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.2) 45%, transparent 78%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, transparent 22%, transparent 78%, rgba(0, 0, 0, 0.5) 100%);
  animation: lp-hero-signal-veil var(--lp-hero-signal-cycle) steps(1, end) infinite;
}

.lp-hero__signal-glitch {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
}

.lp-hero__signal-glitch__noise {
  position: absolute;
  inset: -10%;
  opacity: 0;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: lp-hero-signal-noise var(--lp-hero-signal-cycle) steps(1, end) infinite;
}

.lp-hero__signal-glitch__rgb {
  position: absolute;
  inset: 0;
  opacity: 0;
  mix-blend-mode: screen;
  background:
    linear-gradient(90deg, rgba(255, 40, 80, 0.32), transparent 42%, rgba(40, 220, 255, 0.28));
  animation: lp-hero-signal-rgb var(--lp-hero-signal-cycle) steps(1, end) infinite;
}

.lp-hero__signal-glitch__slice {
  position: absolute;
  left: -4%;
  width: 108%;
  height: 9%;
  top: 28%;
  opacity: 0;
  background:
    linear-gradient(
      180deg,
      transparent,
      var(--paper-a12) 40%,
      var(--tiffany-a20) 50%,
      var(--paper-a10) 60%,
      transparent
    );
  mix-blend-mode: soft-light;
  animation: lp-hero-signal-slice var(--lp-hero-signal-cycle) steps(1, end) infinite;
}

.lp-hero__signal-glitch__bar {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 14%;
  top: -20%;
  opacity: 0;
  background: rgba(0, 0, 0, 0.88);
  transform: skewY(-2deg);
  animation: lp-hero-signal-bar var(--lp-hero-signal-cycle) steps(1, end) infinite;
}

/* 背景バースト ~0.7s（39–45%）— 46% で全レイヤ同時消灯（46–52% の steps ホールドを避ける） */
@keyframes lp-hero-signal-flash {
  0%, 38%, 46%, 52%, 100% { opacity: 0; }
  39% { opacity: 1; }
  40% { opacity: 0.72; }
  41% { opacity: 0.96; }
  42% { opacity: 0.58; }
  43% { opacity: 0.92; }
  44% { opacity: 0.68; }
  45% { opacity: 0.88; }
}

@keyframes lp-hero-signal-veil {
  0%, 38%, 46%, 52%, 100% { opacity: 0; }
  39%, 45% { opacity: 0.55; }
  41%, 43% { opacity: 0.42; }
}

@keyframes lp-hero-signal-shake {
  0%, 38%, 46%, 52%, 100% { transform: translate3d(0, 0, 0); }
  38% { transform: translate3d(-14px, 6px, 0) skewX(-0.65deg); }
  40% { transform: translate3d(16px, -7px, 0) skewX(0.8deg); }
  41% { transform: translate3d(-10px, 4px, 0) skewX(-0.4deg); }
  42% { transform: translate3d(12px, -5px, 0) skewX(0.55deg); }
  43% { transform: translate3d(-8px, 3px, 0) skewX(-0.25deg); }
  44% { transform: translate3d(8px, -3px, 0) skewX(0.2deg); }
  45% { transform: translate3d(-5px, 2px, 0) skewX(-0.15deg); }
}

@keyframes lp-hero-signal-jitter {
  0%, 38%, 46%, 52%, 100% { filter: none; }
  40% { filter: contrast(1.32) saturate(1.45) hue-rotate(-14deg); }
  42% { filter: contrast(1.38) saturate(0.68) hue-rotate(18deg); }
  44% { filter: contrast(1.22) saturate(1.15) hue-rotate(-6deg); }
}

@keyframes lp-hero-signal-noise {
  0%, 38%, 46%, 52%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }
  38% { opacity: 0.5; transform: translate3d(-2%, 1.2%, 0); }
  40% { opacity: 0.42; transform: translate3d(2.4%, -1%, 0); }
  41% { opacity: 0.55; transform: translate3d(-1.8%, -1.6%, 0); }
  42% { opacity: 0.38; transform: translate3d(1.6%, 1%, 0); }
  43% { opacity: 0.48; transform: translate3d(-2.2%, 0.6%, 0); }
  44% { opacity: 0.36; transform: translate3d(1.8%, -0.8%, 0); }
  45% { opacity: 0.44; transform: translate3d(-1.4%, 1%, 0); }
}

@keyframes lp-hero-signal-rgb {
  0%, 38%, 46%, 52%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }
  40% { opacity: 0.88; transform: translate3d(-6px, 0, 0); }
  41% { opacity: 0.62; transform: translate3d(7px, 1px, 0); }
  42% { opacity: 0.8; transform: translate3d(-5px, -1px, 0); }
  43% { opacity: 0.52; transform: translate3d(6px, 0, 0); }
  44% { opacity: 0.72; transform: translate3d(-4px, 1px, 0); }
  45% { opacity: 0.45; transform: translate3d(3px, 0, 0); }
}

@keyframes lp-hero-signal-slice {
  0%, 38%, 46%, 52%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }
  38% { opacity: 1; top: 14%; transform: translate3d(-3.5%, 0, 0); }
  40% { opacity: 0.95; top: 32%; transform: translate3d(5%, 0, 0); }
  41% { opacity: 1; top: 50%; transform: translate3d(-5.5%, 0, 0); }
  42% { opacity: 0.92; top: 68%; transform: translate3d(4%, 0, 0); }
  43% { opacity: 0.98; top: 82%; transform: translate3d(-3%, 0, 0); }
  44% { opacity: 0.85; top: 24%; transform: translate3d(2.5%, 0, 0); }
  45% { opacity: 0.78; top: 58%; transform: translate3d(-2%, 0, 0); }
}

@keyframes lp-hero-signal-bar {
  0%, 38%, 46%, 52%, 100% { opacity: 0; top: -20%; }
  38% { opacity: 0.95; top: 6%; }
  40% { opacity: 0.88; top: 28%; }
  41% { opacity: 0.92; top: 48%; }
  42% { opacity: 0.9; top: 66%; }
  43% { opacity: 0.94; top: 84%; }
  44% { opacity: 0.86; top: 38%; }
  45% { opacity: 0.9; top: 72%; }
}

@keyframes lp-hero-signal-drift {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to { transform: translate3d(-4%, -6%, 0) scale(1.14); }
}

.lp-hero {
  /* FV タイポ: tick / meta（--font-mono ＝ Space Mono） */
  --lp-hero-mono: var(--font-mono);
  --lp-hero-display: var(--font-display);
  position: relative;
  isolation: isolate;
  z-index: 2;
  width: 100%;
  min-height: var(--lp-hero-viewport-h);
  background-color: transparent;
  color: var(--color-paper);
}

/* ロゴ群 + サンダー — ヒーロー内フロー（スクロールで画面外へ） */
.lp-hero__stage {
  position: relative;
  z-index: 2;
  min-height: var(--lp-hero-viewport-h);
  display: grid;
  place-items: center;
  padding: 0 6vw;
  box-sizing: border-box;
  text-align: center;
  pointer-events: none;
  overflow: hidden;
}

.lp-hero__stage-core {
  position: relative;
  z-index: 2;
  width: min(100%, 42rem);
  margin-inline: auto;
  display: grid;
  place-items: center;
}

/* tour .scan / .stage-scanlines 相当 */
.lp-hero__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--lp-hero-signal) 50%, transparent), transparent);
  opacity: 0.5;
  animation: lp-hero-scan 7s linear infinite;
}

@keyframes lp-hero-scan {
  0% { transform: translateY(4vh); }
  100% { transform: translateY(96vh); }
}

.lp-hero__scanlines {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    var(--paper-a12) 0 1px,
    transparent 1px 4px
  );
  opacity: 0.1;
}

@media (max-width: 639px) {
  .lp-hero__scanlines {
    opacity: 0.07;
  }
}

body.is-lp-hero-synced:not(.is-lp-hero-active) .lp-hero__scan,
body.is-lp-hero-synced:not(.is-lp-hero-active) .lp-hero__scanlines {
  display: none;
}

.lp-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  font-family: var(--lp-hero-display);
  pointer-events: none;
  /* 背景レイヤーと同じ起点で回す（fx-armed 後に開始してローダー直後の位相ズレを防ぐ） */
  animation: lp-hero-content-signal var(--lp-hero-signal-cycle) steps(1, end) infinite;
}

.lp-hero__cta .lp-hero__cta-btn {
  pointer-events: auto;
}

/* 通信バグ時のみ — ステージ全面の幾何中心（ロゴ群背面） */
.lp-hero__signal-mark {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}

/* 星 + ビネット — ビューポート固定（site-shell 直下・コンテンツ背面） */
.lp-hero__backdrop {
  position: fixed;
  top: var(--nav-bar-height);
  left: 0;
  right: 0;
  height: var(--lp-hero-viewport-h);
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--lp-hero-bg);
}

.lp-hero__stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--lp-hero-bg);
  pointer-events: none;
}

.lp-hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 75% 65% at 50% 48%, transparent 40%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 18%, transparent 78%, rgba(0, 0, 0, 0.5) 100%);
}

.lp-hero__signal-thunder {
  display: block;
  width: min(60vw, 16rem);
  height: auto;
  opacity: 0;
  visibility: visible;
  filter: drop-shadow(0 0 1.25rem color-mix(in srgb, var(--color-tiffany) 45%, transparent));
  animation: lp-hero-signal-thunder var(--lp-hero-signal-cycle) steps(1, end) infinite;
}

/* 信号 OFF 時はサンダーを出さない
   ※ animation: none にすると復帰時に 7s 周期が先頭へ戻り、点灯が大きく遅れて見える */
body:has(.lp-hero):not(.is-lp-hero-signal) .lp-hero__signal-thunder {
  opacity: 0 !important;
  visibility: hidden;
}

/* 17% 予告1回 → 33–35% 点滅1回 → 39–45% は flash と同相（peak × 0.72）→ 46% で消灯 */
@keyframes lp-hero-signal-thunder {
  0%, 16%, 18%, 32%, 35%, 38%, 46%, 52%, 100% {
    opacity: 0;
  }
  17% {
    opacity: 0.48;
  }
  33% {
    opacity: 0.42;
  }
  39% {
    opacity: 0.72;
  }
  40% {
    opacity: 0.52;
  }
  41% {
    opacity: 0.68;
  }
  42% {
    opacity: 0.42;
  }
  43% {
    opacity: 0.65;
  }
  44% {
    opacity: 0.49;
  }
  45% {
    opacity: 0.63;
  }
}

/* ロゴ群明滅 — 背景前（18–32%）。33% 以降は常に 1（バースト後に残らない） */
@keyframes lp-hero-content-signal {
  0% { opacity: 1; }
  17% { opacity: 1; }
  19% { opacity: 0.45; }
  22% { opacity: 0.72; }
  24% { opacity: 0.42; }
  26% { opacity: 0.68; }
  28% { opacity: 0.44; }
  29% { opacity: 0.7; }
  31% { opacity: 0.46; }
  32% { opacity: 0.82; }
  33% { opacity: 1; }
  100% { opacity: 1; }
}

.lp-hero__tick {
  margin: 0;
  font-family: var(--lp-hero-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--lp-hero-signal);
}

.lp-hero__logo-wrap {
  margin: 0.875rem 0 0;
}

.lp-hero__logo {
  display: block;
  width: 100%;
  max-width: 36rem;
  height: auto;
  margin-inline: auto;
}

.lp-hero__kanji {
  margin: 1.125rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(0.8125rem, 1.6vw, 1.25rem);
  color: var(--color-paper);
}

.lp-hero__kanji-icon {
  display: block;
  width: 0.87em; /* viewBox 91×120 */
  height: 1.15em;
  flex-shrink: 0;
  /* fill=currentColor → 漢字と同じ var(--color-paper) */
  color: inherit;
}

.lp-hero__meta {
  margin: 1.375rem 0 0;
  font-family: var(--lp-hero-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--paper-a75);
  line-height: 1.55;
}

/* 開催カウント — interlude と同 JS。ヒーローは tick / meta 系の mono＋signal */
.lp-hero__countdown {
  margin: 0.625rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.45em 0.65em;
  font-family: var(--lp-hero-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  line-height: 1.4;
  color: var(--lp-hero-signal);
}
.lp-hero__countdown-label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--paper-a75);
}
/* GET TICKET — FV 中央 CTA（.lp-hero__cta-btn） */
.lp-hero__cta {
  margin-top: 1.75rem;
  display: flex;
  justify-content: center;
  width: 100%;
}

.lp-hero__cta-btn {
  position: relative;
  overflow: hidden;
  width: min(100%, 20rem);
  min-height: 4.25rem;
  border: none;
  /* neon 基調グラデ（濃淡は --grad-ticket-cta） */
  background: var(--grad-ticket-cta);
  color: var(--color-ink);
  isolation: isolate;
  cursor: pointer;
}

/* スマホ: 現行デスクトップ比 roughly 70% */
@media (max-width: 639px) {
  .lp-hero__cta {
    margin-top: 1.35rem;
  }

  .lp-hero__cta-btn {
    width: min(100%, 16.5rem);
    min-height: 3.25rem;
    padding: 0.65rem 1.05rem;
  }

  .lp-hero__cta-label {
    font-size: clamp(0.875rem, 3.4vw, 1.4rem);
  }
}

.lp-hero__cta-btn::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -50%;
  z-index: 3;
  display: block;
  pointer-events: none;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--color-paper) 0%, transparent) 0%,
    color-mix(in srgb, var(--color-paper) 82%, transparent) 50%,
    color-mix(in srgb, var(--color-paper) 0%, transparent) 100%
  );
  transform: skewX(45deg);
  animation: lp-hero-cta-shine 4s -0.85s infinite ease-in-out;
}

@keyframes lp-hero-cta-shine {
  0%, 8% {
    left: -50%;
    opacity: 0;
  }
  10% {
    left: 150%;
    opacity: 1;
  }
  100% {
    left: 150%;
    opacity: 0;
  }
}

.lp-hero__cta-label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  font-family: var(--font-oxanium);
  font-size: clamp(1.25rem, 4.8vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  max-width: 100%;
  padding-inline: 0.25rem;
  box-sizing: border-box;
}

.lp-hero__cta-label-icon {
  display: block;
  width: 0.82em;
  height: 0.82em;
  flex-shrink: 0;
}

.lp-hero__cta-label-text {
  line-height: 1;
  text-box: trim-both cap alphabetic;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* 使用: .lp-hero__cta-btn 2行目
   効果: 販売状況（サイズは HTML の text-*） */
.lp-hero__cta-sub {
  position: relative;
  z-index: 2;
}

@supports not (text-box-trim: trim-both) {
  .lp-hero__cta-label-icon {
    transform: translateY(-0.06em);
  }
}

.lp-hero__cta-btn:hover,
.lp-hero__cta-btn:focus-visible {
  background: var(--grad-ticket-cta-hover);
  color: var(--color-ink);
  box-shadow: 0 0 18px var(--paper-a35);
  outline: none;
}

.lp-hero__hint {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  margin: 2.125rem 0 0;
  font-family: var(--lp-hero-mono);
  font-size: 0.75rem;
  color: var(--lp-hero-signal);
  opacity: 1;
  pointer-events: none;
}

.lp-hero__hint-label {
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  line-height: 1;
}

.lp-hero__hint-flow {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1rem;
  min-height: 1.75rem;
  overflow: visible;
}

.lp-hero__hint-icon {
  display: block;
  width: 1rem;
  height: auto;
  opacity: 0.85;
  filter: brightness(0) invert(84%) sepia(35%) saturate(1200%) hue-rotate(153deg) brightness(103%) contrast(92%);
  animation: lp-hero-hint-drift 1.9s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes lp-hero-hint-drift {
  0% {
    transform: translateY(-28%);
    opacity: 0.85;
  }
  62% {
    opacity: 0.85;
  }
  100% {
    transform: translateY(42%);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-hero__hint-icon {
    animation: none;
    opacity: 0.85;
    transform: none;
    will-change: auto;
  }

  .lp-hero__hint-flow {
    min-height: 0;
  }

  .lp-hero__scan {
    display: none;
  }

  .lp-hero__scanlines {
    opacity: 0.05;
  }

  .lp-hero__cta-btn::after {
    animation: none;
    opacity: 0;
  }

  .lp-hero__signal-parallax,
  .lp-hero__signal-track,
  .lp-hero__signal-track img,
  .lp-hero__signal-veil,
  .lp-hero__signal-thunder,
  .lp-hero__content,
  .lp-hero__signal-glitch__noise,
  .lp-hero__signal-glitch__rgb,
  .lp-hero__signal-glitch__slice,
  .lp-hero__signal-glitch__bar {
    animation: none !important;
  }

  .lp-hero__signal-track img {
    opacity: 0.18;
  }

  .lp-hero__signal-veil {
    opacity: 0.45;
  }

  .lp-hero__signal-thunder {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .lp-hero__content {
    opacity: 1 !important;
  }
}