/* A scroll-controlled introduction, with a complete static fallback. */
.hero-story { --story-accent: #c9e8ad; position: relative; background: #101915; color: #f5f6ee; }
.home-kinetic-hero .story-film { background: #101915; background-image: radial-gradient(ellipse at 82% 48%, #263b2e 0, #17241d 34%, #101915 73%); }
.home-kinetic-hero .hero-network-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: .9; }
.home-kinetic-hero .story-shade { background: linear-gradient(90deg, #101915f5 0%, #101915db 36%, #10191567 72%, #10191545), linear-gradient(0deg, #101915, transparent 46%, #10191545); }
.home-kinetic-hero .story-grid { opacity: .11; }
.home-kinetic-hero .story-copy { position: relative; z-index: 2; }
.home-kinetic-hero .story-panel h1 { max-width: 13em; font-size: clamp(30px, 4.1vw, 58px); line-height: 1.45; }
.home-kinetic-hero .story-panel h1 .sentence-clause { display: inline-block; }
.home-kinetic-hero .story-panel > p { max-width: 34em; }
.home-kinetic-hero.network-unavailable .story-film { background: radial-gradient(ellipse at 78% 48%, #243627 0, #17231c 29%, #101915 67%); }
.home-kinetic-hero.network-unavailable .story-film::before,
.home-kinetic-hero.network-unavailable .story-film::after { content: ""; position: absolute; left: 70%; top: 52%; width: min(52vw, 680px); aspect-ratio: 1; border: 1px solid #c9e8ad35; border-radius: 50%; transform: translate(-50%, -50%) rotate(-24deg) scaleY(.48); }
.home-kinetic-hero.network-unavailable .story-film::after { width: min(39vw, 510px); border-color: #c9e8ad28; transform: translate(-50%, -50%) rotate(57deg) scaleY(.52); }
@media (prefers-reduced-motion: no-preference) {
  .home-kinetic-hero.network-unavailable .story-film::before { animation: hero-orbit-drift 18s ease-in-out infinite alternate; }
  .home-kinetic-hero.network-unavailable .story-film::after { animation: hero-orbit-drift 23s ease-in-out infinite alternate-reverse; }
}
@keyframes hero-orbit-drift { from { translate: -10px 8px; opacity: .4; } to { translate: 12px -10px; opacity: .95; } }
@media (prefers-reduced-motion: no-preference) {
  .home-kinetic-hero .story-panel h1 .sentence-clause { animation: hero-copy-arrive .8s cubic-bezier(.2,.7,.2,1) both; }
  .home-kinetic-hero .story-panel h1 .sentence-clause:nth-child(2) { animation-delay: .14s; }
  .home-kinetic-hero .story-panel > p { animation: hero-copy-arrive .8s .28s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes hero-copy-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.hero-story.is-enhanced { height: 300svh; }
.story-stage { position: sticky; top: 0; height: 100svh; min-height: 660px; overflow: hidden; isolation: isolate; }
.story-film, .story-film video, .story-shade, .story-grid { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.story-film { z-index: -3; background: url('./assets/tokyo/tokyo-city-street-poster.png') center / cover; }
.story-film video { object-fit: cover; opacity: .5; }
.story-shade { z-index: -2; background: linear-gradient(90deg, #101915ed 0%, #101915c7 45%, #10191560), linear-gradient(0deg, #101915, transparent 65%); }
.story-grid { z-index: -1; opacity: .2; background-image: radial-gradient(#b8d2be 1px, transparent 1px); background-size: 9px 9px; mask-image: linear-gradient(90deg, transparent 20%, #000); }
.story-topline { position: absolute; top: 128px; left: 6vw; right: 6vw; display: flex; justify-content: space-between; gap: 20px; color: #b7c4b9; font: 500 10px/1.5 'DM Sans', sans-serif; letter-spacing: .16em; }
.story-topline span:last-child { letter-spacing: .06em; }
.story-layout { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 2vw; height: 100%; padding: 160px 6vw 120px; }
.story-copy { display: grid; align-items: center; min-width: 0; }
.story-panel { grid-area: 1 / 1; }
.story-panel:not(:first-child) { opacity: 0; visibility: hidden; }
.story-panel .story-eyebrow { color: #c3ccc4; font: 400 13px/1.5 var(--font-display); letter-spacing: .02em; margin: 0 0 27px; }
.story-panel h1, .story-panel h2 { color: #f5f6ee; font-size: clamp(28px, 3.35vw, 54px); font-weight: 500; line-height: 1.55; letter-spacing: -.04em; margin: 0 0 28px; }
.story-panel h1 span, .story-panel h2 span { display: block; }
.story-panel h1, .story-panel h2 { line-break: strict; word-break: normal; }
.story-panel h1 span, .story-panel h2 span { max-width: 100%; }
.story-panel h2 span:last-child { color: inherit; }
.story-system .system-guide circle { display: none; }
.story-panel > p:last-child { max-width: 32em; margin: 0; color: #c3ccc4; font-size: clamp(14px, 1.1vw, 16px); line-height: 2; }
.story-system { width: 100%; max-width: 600px; justify-self: end; overflow: visible; }
.story-system .system-guide { stroke: #c9e8ad; stroke-width: 1; fill: none; opacity: .12; }
.story-system .system-route { stroke: #c9e8ad; stroke-width: 1.5; fill: none; opacity: .7; stroke-dasharray: 1; stroke-dashoffset: 1; }
.story-system .system-node rect { fill: #15251fe8; stroke: #9ab78f66; stroke-width: 1; }
.story-system .node-number { fill: #adc29f; font: 11px 'DM Sans', sans-serif; letter-spacing: .15em; }
.story-system .node-name { fill: #f4f6eb; font: 500 23px 'Noto Sans JP', sans-serif; }
.story-system .node-detail { fill: #b2beb4; font: 11px 'Noto Sans JP', sans-serif; }
.story-system .system-core circle { fill: #192b20; stroke: #c9e8ad88; stroke-width: 1; }
.story-system .core-brand { fill: #eaf5de; font: 600 31px 'DM Sans', sans-serif; letter-spacing: -.05em; }
.story-system .core-caption { fill: #b7cba9; font: 10px 'Noto Sans JP', sans-serif; }
.story-system .system-dot { fill: #dcfac2; }
.story-system .system-caption { fill: #adbcac; font: 10px 'DM Sans', sans-serif; letter-spacing: .2em; }
.story-bottom { position: absolute; left: 6vw; right: 6vw; bottom: 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid #c9e8ad33; padding-top: 20px; }
.story-steps { display: flex; gap: 24px; }
.story-steps button { color: #b0bdb2; background: none; min-height: 44px; padding: 10px 0; font-size: 11px; }
.story-steps button span { margin-right: 8px; font-family: 'DM Sans', sans-serif; }
.story-steps button[aria-current='step'] { color: var(--story-accent); }
.story-actions { display: flex; align-items: center; gap: 25px; }
.story-skip { display: inline-flex; gap: 24px; align-items: center; min-height: 44px; font-size: 12px; padding: 10px 0; }
.story-pause { min-height: 44px; padding: 10px 0; background: none; color: #c2cec4; font-size: 11px; }
.hero-story button, .hero-story a { touch-action: manipulation; -webkit-tap-highlight-color: #c9e8ad33; }
.hero-story button:hover, .hero-story a:hover { color: #fff; }
.hero-story button:focus-visible, .hero-story a:focus-visible { outline: 2px solid var(--story-accent); outline-offset: 4px; }
.story-access-skip { position: fixed; z-index: 100; top: 12px; left: 24px; padding: 14px 20px; background: #f5f6ee; color: #101915; transform: translateY(-180%); }
.story-access-skip:focus { transform: translateY(0); outline: 2px solid #101915; }
.story-progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #c9e8ad; transform: scaleX(0); transform-origin: left; }
.story-static-value { display: none; }
.hero-story:not(.is-enhanced) .story-steps, .hero-story:not(.is-enhanced) .story-pause { display: none; }
.hero-story.is-static .story-stage { height: auto; min-height: 700px; }
.hero-story.is-static .story-layout { min-height: 700px; }
.hero-story.is-static .story-static-value { display: block; position: absolute; bottom: 100px; left: 6vw; color: var(--story-accent); font-size: 14px; }
@media (max-width: 900px) {
  .story-layout { grid-template-columns: 1fr 1fr; padding-left: 7vw; padding-right: 7vw; }
  .story-panel h1, .story-panel h2 { font-size: clamp(25px, 3.65vw, 34px); }
  .story-steps { gap: 14px; }
  .story-actions { gap: 14px; }
}
@media (max-width: 650px) {
  .hero-story.is-enhanced { height: 240svh; }
  .story-stage { min-height: 610px; }
  .story-topline { top: 99px; left: 7vw; right: 7vw; font-size: 8px; }
  .story-topline span:last-child { display: none; }
  .story-layout { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 134px 7vw 110px; }
  .story-copy { width: 100%; min-height: 188px; flex: 0 0 auto; }
  .story-panel .story-eyebrow { margin-bottom: 14px; font-size: 9px; }
  .story-panel h1, .story-panel h2 { font-size: clamp(23px, 6.2vw, 36px); margin-bottom: 15px; line-height: 1.5; }
  .story-panel > p:last-child { font-size: 12px; line-height: 1.85; }
  .story-system { width: min(100%, 390px); height: min(34svh, 310px); min-height: 200px; align-self: center; }
  .story-bottom { left: 7vw; right: 7vw; bottom: max(12px, env(safe-area-inset-bottom)); flex-wrap: wrap; gap: 0; padding-top: 4px; }
  .story-steps { width: 100%; justify-content: space-between; }
  .story-steps button { padding: 5px 0; font-size: 10px; }
  .story-actions { width: 100%; justify-content: space-between; }
  .story-skip, .story-pause { padding: 6px 0; font-size: 10px; }
  .hero-story.is-static .story-layout { padding-bottom: 140px; }
  .hero-story.is-static .story-static-value { left: 7vw; right: 7vw; bottom: 78px; font-size: 12px; }
}
@media (max-height: 620px) {
  .hero-story.is-enhanced { height: auto; }
  .story-stage { position: relative; height: auto; }
  .story-layout { min-height: 660px; }
}

/* The existing animated diagram now belongs to the service example, not the hero. */
.home-page .story-panel h1 .sentence-clause { display: inline-block; max-width: 100%; white-space: normal; }
.diagram-surface .story-system { width: 100%; height: auto; min-height: 0; }
.diagram-surface .story-system .core-brand { font-size: 20px; }
.diagram-surface .story-system .core-subtitle { font-size: 15px; }
.diagram-surface .story-system .node-name { font-size: 20px; }
.diagram-surface .story-system .node-detail { font-size: 10px; }

/* Keep the home hierarchy, with a quieter reading scale. */
.home-page .story-panel h1 { font-size: clamp(26px, 2.8vw, 42px); }
.home-page .story-panel > p { font-size: clamp(15px, 1.05vw, 16px); font-weight: 400; line-height: 1.9; }
@media (max-width: 650px) {
  .home-page .story-panel h1 { font-size: clamp(22px, 5.5vw, 30px); }
}