/* ============ AHA TOKYO HERO ============ */
:root {
  --navy: #101C2C;
  --navy-deep: #0B1422;
  --ivory: #F5F1E8;
  --ivory-60: rgba(245, 241, 232, .6);
  --ivory-35: rgba(245, 241, 232, .35);
  --orange: #E87532;
  --mark-accent: #CA9452; /* 正式ロゴファイル(.ai)のクロスバー色 */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --f-mincho: "Shippori Mincho B1", "Yu Mincho", serif;
  --f-gothic: "Zen Kaku Gothic New", "Yu Gothic", sans-serif;
  --f-latin: "Jost", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--navy);
  color: var(--ivory);
  font-family: var(--f-gothic);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* スクロール演出の尺。stickyの中で0→100%を消化する */
.hero { position: relative; height: 260svh; background: var(--navy); }
.hero__sticky {
  position: sticky; top: 0;
  height: 100svh; width: 100%;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 62% 45%, #15243A 0%, var(--navy) 55%, var(--navy-deep) 100%);
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- Logo ---------- */
.hero__logo {
  position: absolute;
  left: 46%; top: 50%;
  width: min(48vw, 860px);
  aspect-ratio: 995 / 480;
  transform: translateY(-56%);
  perspective: 1200px;
  pointer-events: none;
}
.hero__logo svg { width: 100%; height: 100%; display: block; overflow: visible; will-change: transform; }

.lm-mark { fill: var(--ivory); }
.lm-draw { fill: none; stroke: #fff; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.is-draw .lm-draw { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur) cubic-bezier(.65, 0, .35, 1) var(--delay); }

.lm-depth { fill: #050B14; opacity: 0; transition: opacity 2s ease; }
.is-word .lm-depth { opacity: .55; }

.lm-accent {
  fill: var(--orange);
  transform-box: fill-box; transform-origin: 50% 50%;
  transform: scaleX(0);
}
.is-ignite .lm-accent {
  transform: scaleX(1); fill: var(--mark-accent);
  transition: transform .75s var(--ease-out), fill 2.4s ease .9s;
}

.lm-light { fill: none; stroke: var(--orange); stroke-linecap: round; stroke-dasharray: .16 3; stroke-dashoffset: .16; opacity: 0; }
.lm-light-core .lm-light { stroke: #FFD9BE; stroke-width: 22; }
.lm-light-glow .lm-light { stroke-width: 30; }
.is-ignite .lm-light { animation: lm-run var(--dur) cubic-bezier(.5, 0, .25, 1) var(--delay) both; }
@keyframes lm-run {
  0% { stroke-dashoffset: .16; opacity: 1; }
  88% { opacity: 1; }
  100% { stroke-dashoffset: -1.02; opacity: 0; }
}

.lm-glyph {
  opacity: 0;
  transform: translateX(calc(var(--dx) * 1px));
}
.lm-glyph--accent { fill: var(--mark-accent); }
.lm-glyph--mark { fill: var(--ivory); }
.is-word .lm-glyph {
  opacity: 1; transform: none;
  transition: opacity 1.1s ease calc(var(--i) * 60ms), transform 1.8s var(--ease-out) calc(var(--i) * 60ms);
}
.lm-sheen { opacity: 0; transition: opacity 1.5s ease; mix-blend-mode: screen; }
.is-word .lm-sheen { opacity: 1; }

/* ---------- Copy ---------- */
.hero__content {
  position: absolute;
  left: max(6vw, 32px); top: 50%;
  transform: translateY(-50%);
  width: min(38vw, 560px);
  z-index: 2;
  will-change: transform, opacity;
}
.hero__eyebrow {
  margin: 0 0 28px;
  font: 400 12px/1 var(--f-latin);
  letter-spacing: .36em;
  color: var(--ivory-60);
}
.hero__rule { display: inline-block; width: 28px; height: 1px; background: var(--orange); vertical-align: middle; margin-right: 14px; }
.hero__title {
  margin: 0;
  font: 500 clamp(36px, 3.7vw, 62px)/1.38 var(--f-mincho);
  letter-spacing: .06em;
}
.hero__title > .reveal { display: block; }
.hero__title .hero__title-em > span, .js .hero__title .hero__title-em > span { position: relative; display: inline-block; }
.hero__underline {
  position: absolute; left: 0; right: .9em; bottom: .02em; height: 2px;
  background: var(--orange);
  transform: scaleX(0); transform-origin: left center;
}
.hero__title-em.is-in .hero__underline { transform: scaleX(1); transition: transform 1.2s var(--ease-out) .55s; }
.hero__sub {
  margin: 30px 0 40px;
  font: 400 clamp(15px, 1.12vw, 18px)/2 var(--f-gothic);
  letter-spacing: .08em;
  color: rgba(245, 241, 232, .82);
}
.hero__cta-row > span { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.hero__cta {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 17px 28px;
  border: 1px solid rgba(245, 241, 232, .45);
  border-radius: 999px;
  color: var(--ivory); text-decoration: none;
  font: 500 15px/1 var(--f-gothic); letter-spacing: .08em;
  transition: background .4s ease, border-color .4s ease, color .4s ease;
}
.hero__cta svg { width: 18px; height: 18px; fill: none; stroke: var(--orange); stroke-width: 1.6; transition: transform .4s var(--ease-out), stroke .4s; }
.hero__cta:hover, .hero__cta:focus-visible { background: var(--ivory); border-color: var(--ivory); color: var(--navy); }
.hero__cta:hover svg, .hero__cta:focus-visible svg { transform: translateX(4px); }
.hero__cta:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.hero__tagline { white-space: nowrap; font: 400 11px/1 var(--f-latin); letter-spacing: .3em; color: var(--ivory-35); }

.hero__scroll {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font: 400 10px/1 var(--f-latin); letter-spacing: .34em; color: var(--ivory-35);
  z-index: 2;
}
.hero__scroll i { display: block; width: 1px; height: 40px; background: linear-gradient(var(--ivory-35), transparent); position: relative; overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--orange); animation: scroll-cue 2.4s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes scroll-cue { to { top: 110%; } }

/* reveal: 行単位でマスクの下からせり上がる。JSが無ければ最初から表示 */
.js .reveal > span { display: block; transform: translateY(108%); opacity: 0; }
.js .reveal.is-in > span { transform: none; opacity: 1; transition: transform 1.3s var(--ease-out), opacity 1.1s ease; }
.reveal { display: block; overflow: hidden; padding-bottom: .08em; }
.hero__cta-row.reveal { overflow: visible; }
.js .hero__cta-row > span { transform: translateY(14px); }
.js .hero__scroll { opacity: 0; transition: opacity 1.2s ease; }
.js .hero__scroll.is-in { opacity: 1; }

/* ---------- HEROから次のセクションへ渡る線（02 LATEST THOUGHTS の頭） ---------- */
.next__thread { position: relative; height: 34svh; display: flex; justify-content: center; }
.next__line { display: block; width: 1px; height: 100%; background: linear-gradient(rgba(232, 117, 50, .9), rgba(245, 241, 232, .35)); transform-origin: top; transform: scaleY(var(--thread, 0)); }
.next__node { position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 6px rgba(232, 117, 50, .14); opacity: var(--node, 0); transform: scale(var(--node, 0)); }

/* ---------- Debug HUD (?debug) ---------- */
.hero-debug { position: fixed; right: 10px; top: 10px; z-index: 50; padding: 8px 10px; background: rgba(0, 0, 0, .6); color: #9f9; font: 11px/1.5 ui-monospace, monospace; white-space: pre; pointer-events: none; }

/* ---------- Mobile: 縦構図 ---------- */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .hero { height: 230svh; }
  .hero__sticky { background: radial-gradient(130% 70% at 50% 28%, #15243A 0%, var(--navy) 55%, var(--navy-deep) 100%); }
  .hero__logo { left: 50%; top: 13svh; width: min(84vw, 520px); transform: translateX(-50%); }
  .hero__content { left: 24px; right: 24px; top: auto; bottom: calc(12svh + env(safe-area-inset-bottom)); width: auto; transform: none; }
  .hero__eyebrow { margin-bottom: 18px; font-size: 11px; }
  .hero__title { font-size: clamp(30px, 8.6vw, 42px); }
  .hero__sub { margin: 18px 0 26px; font-size: 14.5px; line-height: 1.9; }
  .hero__cta { padding: 15px 22px; font-size: 14px; }
  .hero__cta-row > span { gap: 16px; flex-direction: column; align-items: flex-start; }
  .hero__scroll { bottom: calc(18px + env(safe-area-inset-bottom)); }
  .hero__scroll i { height: 28px; }
}

/* ---------- Reduced motion ---------- */
html:not(.js) .hero { height: 100svh; }
.is-reduced .hero { height: 100svh; }
.is-reduced .reveal > span, .is-reduced .hero__cta-row > span { transform: none !important; opacity: 1 !important; transition: none !important; }
.is-reduced .hero__underline { transform: scaleX(1); transition: none !important; }
.is-reduced .hero__scroll { opacity: 1; }
.is-reduced .hero__scroll i::after { animation: none; }