/* ============================================================
   scroll.css — Apple風スクロール連動セクション（トップページ）
   ============================================================ */

/* ------------------------------------------------------------
   背景フレームシーケンス（固定canvas）
   ------------------------------------------------------------ */
.stage-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #06030a;
}
.stage-bg__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform, filter;
}
/* 各セクションのトーンを重ねるカラーフィルター層 */
.stage-bg__tint {
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  background: transparent;
  transition: background 0.9s ease;
  pointer-events: none;
}
.stage-bg__glow {
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  opacity: 0;
  background:
    radial-gradient(48% 40% at 50% 62%, rgba(255, 120, 0, 0.85), transparent 70%),
    radial-gradient(70% 50% at 50% 100%, rgba(255, 30, 0, 0.6), transparent 74%);
  pointer-events: none;
}
/* 上下の墨だまり（文字の可読性確保） */
.stage-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 3, 8, 0.72) 0%, transparent 26%, transparent 62%, rgba(6, 3, 8, 0.82) 100%);
}

/* ------------------------------------------------------------
   ローディング（爆裂開幕）
   ------------------------------------------------------------ */
#loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 55%, #24060a 0%, #080406 70%);
  transition: opacity 0.7s ease, visibility 0.7s;
}
#loader.is-done { opacity: 0; visibility: hidden; }
.loader__inner { text-align: center; }
.loader__kanji {
  font-family: var(--font-brush);
  font-size: clamp(46px, 13vw, 116px);
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--c-paper);
}
.loader__kanji span {
  display: inline-block;
  opacity: 0;
  transform: scale(0.4) rotate(-8deg);
  filter: blur(10px);
  animation: loaderPop 0.7s var(--e-blast) forwards;
}
.loader__kanji span:nth-child(1) { animation-delay: 0.05s; }
.loader__kanji span:nth-child(2) { animation-delay: 0.18s; }
.loader__kanji span:nth-child(3) { animation-delay: 0.31s; }
.loader__kanji span:nth-child(4) { animation-delay: 0.44s; }
@keyframes loaderPop {
  0%   { opacity: 0; transform: scale(0.35) rotate(-10deg); filter: blur(12px); }
  62%  { opacity: 1; transform: scale(1.22) rotate(2deg); filter: blur(0); }
  100% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); }
}
.loader__bar {
  width: min(220px, 52vw);
  height: 3px;
  margin: 26px auto 0;
  background: rgba(246, 239, 226, 0.2);
  border-radius: 3px;
  overflow: hidden;
}
.loader__bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--c-blaze), var(--c-spark));
  transition: width 0.3s ease;
}
.loader__pct {
  margin-top: 12px;
  font-family: var(--font-num);
  font-size: 12px;
  letter-spacing: 0.28em;
  color: rgba(246, 239, 226, 0.6);
}

/* ------------------------------------------------------------
   スクロールセクションの土台
   各 .panel は 100vh 固定表示（ScrollTrigger pin）
   ------------------------------------------------------------ */
.scroll-root {
  position: relative;
  z-index: 2;
}
.panel {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 24px) 0 90px;
}
.panel__inner {
  width: min(100% - var(--gut) * 2, 1220px);
  margin-inline: auto;
  position: relative;
}

/* セクション番号（巨大な飾り数字） */
.panel__num {
  position: absolute;
  top: -4%;
  right: -1%;
  font-family: var(--font-num);
  font-size: clamp(120px, 26vw, 340px);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1.6px rgba(255, 212, 58, 0.28);
  pointer-events: none;
  z-index: -1;
  user-select: none;
}

/* 縦書きのセクションラベル（左端） */
.panel__label {
  position: absolute;
  left: calc(var(--gut) * -0.62);
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--font-brush);
  font-size: clamp(13px, 1.5vw, 17px);
  letter-spacing: 0.4em;
  color: rgba(255, 212, 58, 0.8);
  text-shadow: 0 0 14px rgba(255, 45, 14, 0.7);
}
@media (max-width: 900px) { .panel__label { display: none; } }

/* ------------------------------------------------------------
   S1 : ヒーロー
   ------------------------------------------------------------ */
.hero { text-align: center; }
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px;
  margin-bottom: clamp(18px, 3vw, 30px);
  font-family: var(--font-num);
  font-size: clamp(10px, 1.3vw, 13px);
  letter-spacing: 0.34em;
  color: var(--c-spark);
  border: 1px solid rgba(255, 212, 58, 0.42);
  border-radius: 999px;
  background: rgba(12, 5, 8, 0.4);
  backdrop-filter: blur(6px);
}
.hero__eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-blaze);
  box-shadow: 0 0 12px 3px rgba(255, 45, 14, 0.9);
  animation: pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.55; }
}

.hero__title {
  font-family: var(--font-brush);
  /* 4文字が横一列で必ず収まるサイズ計算 */
  font-size: clamp(58px, 21vw, 230px);
  line-height: 0.98;
  letter-spacing: 0.02em;
  margin: 0;
}
.hero__title .blast-text { white-space: nowrap; }
.hero__sub {
  margin-top: clamp(14px, 2.6vw, 26px);
  font-family: var(--font-head);
  font-size: clamp(15px, 2.5vw, 26px);
  letter-spacing: 0.2em;
  color: var(--c-paper);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
}
.hero__meta {
  margin-top: clamp(20px, 3.4vw, 36px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  font-family: var(--font-num);
  font-size: clamp(13px, 1.9vw, 19px);
  letter-spacing: 0.16em;
  color: rgba(246, 239, 226, 0.94);
}
.hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero__meta span + span::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-blaze);
}
.hero__cta {
  margin-top: clamp(26px, 4.4vw, 46px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* スクロール誘導 */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-family: var(--font-num);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(246, 239, 226, 0.72);
  z-index: 5;
}
.scroll-hint__line {
  width: 1px;
  height: 46px;
  background: linear-gradient(180deg, var(--c-spark), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-hint__line::after {
  content: "";
  position: absolute;
  left: 0; top: -46px;
  width: 100%; height: 46px;
  background: linear-gradient(180deg, transparent, var(--c-blaze));
  animation: hintRun 1.9s ease-in-out infinite;
}
@keyframes hintRun {
  0% { transform: translateY(0); }
  100% { transform: translateY(92px); }
}

/* ------------------------------------------------------------
   S2 : テーマ解説（縦書き見出し + 本文）
   ------------------------------------------------------------ */
.theme-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(24px, 5vw, 68px);
  align-items: center;
}
.theme-vertical {
  writing-mode: vertical-rl;
  font-family: var(--font-brush);
  font-size: clamp(44px, 10.5vw, 132px);
  line-height: 1.06;
  letter-spacing: 0.08em;
  max-height: 74vh;
  text-shadow: 0 0 40px rgba(255, 45, 14, 0.55);
}
.theme-body {
  max-width: 44ch;
}
.theme-body p {
  font-size: clamp(14.5px, 1.75vw, 18px);
  line-height: 2.15;
  color: rgba(246, 239, 226, 0.94);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}
.theme-body p + p { margin-top: 1.2em; }
.theme-body .lead {
  font-family: var(--font-head);
  font-size: clamp(18px, 2.4vw, 27px);
  line-height: 1.7;
  letter-spacing: 0.06em;
  margin-bottom: 0.85em;
  color: #fff;
}
.theme-body__cta { margin-top: clamp(22px, 3.4vw, 36px); }

@media (max-width: 780px) {
  .theme-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 26px;
  }
  .theme-vertical {
    font-size: clamp(40px, 15vw, 76px);
    max-height: 46vh;
  }
  .theme-body { text-align: left; }
}

/* ------------------------------------------------------------
   S3 : 数字カウンター（爆裂スケール）
   ------------------------------------------------------------ */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(16px, 2.6vw, 34px);
  margin-top: clamp(24px, 4vw, 44px);
}
.stat {
  position: relative;
  padding: clamp(20px, 3vw, 30px) clamp(16px, 2.4vw, 26px);
  border: 1px solid rgba(255, 212, 58, 0.28);
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(24, 8, 12, 0.66), rgba(52, 10, 6, 0.42));
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.stat::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--c-blaze), var(--c-spark));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--e-out);
}
.stat.is-in::before { transform: scaleX(1); }
.stat__num {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-num);
  font-size: clamp(46px, 8vw, 84px);
  line-height: 1;
  letter-spacing: 0.02em;
}
.stat__unit {
  font-family: var(--font-head);
  font-size: clamp(15px, 2.2vw, 22px);
  color: var(--c-spark);
}
.stat__label {
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: rgba(246, 239, 226, 0.78);
}

/* ------------------------------------------------------------
   S4 : 横スクロール・コンテンツカード
   ------------------------------------------------------------ */
.hcards {
  display: flex;
  gap: clamp(16px, 2.4vw, 30px);
  will-change: transform;
}
.hcard {
  position: relative;
  flex: 0 0 auto;
  width: clamp(240px, 68vw, 380px);
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 212, 58, 0.24);
  background: #140609;
  transition: transform 0.5s var(--e-blast), box-shadow 0.5s;
}
.hcard:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 26px 60px -20px rgba(255, 45, 14, 0.9);
}
.hcard__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(120%) contrast(108%) brightness(0.82);
  transition: transform 0.9s var(--e-out), filter 0.6s;
}
.hcard:hover .hcard__img {
  transform: scale(1.09);
  filter: saturate(150%) contrast(114%) brightness(0.95);
}
.hcard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 34%, rgba(9, 3, 5, 0.92) 100%);
  pointer-events: none;
}
.hcard__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: clamp(18px, 2.6vw, 28px);
}
.hcard__tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  font-family: var(--font-num);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  color: #180405;
  background: var(--c-spark);
  border-radius: 999px;
}
.hcard__title {
  font-family: var(--font-brush);
  font-size: clamp(25px, 3.6vw, 38px);
  line-height: 1.18;
  letter-spacing: 0.05em;
}
.hcard__text {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.85;
  color: rgba(246, 239, 226, 0.82);
}
.hcard__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--c-spark);
}
.hcard__link::after {
  content: "→";
  transition: transform 0.35s var(--e-blast);
}
.hcard:hover .hcard__link::after { transform: translateX(6px); }
/* カード全面クリック */
.hcard__cover {
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* ------------------------------------------------------------
   S5 : 最終CTA（爆発中心）
   ------------------------------------------------------------ */
.finale { text-align: center; }
.finale__kanji {
  font-family: var(--font-brush);
  font-size: clamp(64px, 20vw, 240px);
  line-height: 0.96;
  letter-spacing: 0.02em;
}
.finale__lead {
  margin-top: clamp(16px, 2.6vw, 26px);
  font-family: var(--font-head);
  font-size: clamp(15px, 2.2vw, 23px);
  letter-spacing: 0.16em;
  color: rgba(246, 239, 226, 0.95);
}
.finale__links {
  margin-top: clamp(26px, 4vw, 44px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
/* 爆発の輪 */
.shock-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 30vmax; height: 30vmax;
  transform: translate(-50%, -50%) scale(0.2);
  border: 2px solid rgba(255, 212, 58, 0.6);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

/* ------------------------------------------------------------
   進行インジケーター（右端ドット）
   ------------------------------------------------------------ */
.progress-dots {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.progress-dots button {
  position: relative;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(246, 239, 226, 0.55);
  transition: transform 0.4s var(--e-blast), background 0.4s, border-color 0.4s;
}
.progress-dots button[aria-current="true"] {
  background: var(--c-blaze);
  border-color: var(--c-spark);
  transform: scale(1.5);
  box-shadow: 0 0 14px 3px rgba(255, 45, 14, 0.8);
}
.progress-dots button::after {
  content: attr(data-label);
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-brush);
  font-size: 12px;
  letter-spacing: 0.16em;
  white-space: nowrap;
  color: var(--c-spark);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.progress-dots button:hover::after { opacity: 1; }
@media (max-width: 600px) { .progress-dots { display: none; } }

/* ------------------------------------------------------------
   横向きスマホ・低身長画面の調整
   ------------------------------------------------------------ */
@media (max-height: 520px) and (orientation: landscape) {
  .hero__title { font-size: clamp(40px, 12vh, 90px); }
  .theme-vertical { max-height: 60vh; font-size: clamp(30px, 9vh, 60px); }
  .scroll-hint { display: none; }
}