/* ============================================================
   Re Design株式会社 — shared.css
   Direction A (Editorial Refinement) — tokens + shared styles
   See DESIGN-SPEC.md for full system.
   ============================================================ */

/* ─────────────── TOKENS ─────────────── */
:root {
  /* Color — primitive */
  --c-ink-navy: #1E2340;
  --c-navy: #2D3250;
  --c-navy-deep: #15182A;
  --c-paper-ink: #2B2A29;
  --c-gold: #B8935A;
  --c-gold-dark: #A58151;
  --c-gold-soft: #D9C89C;
  --c-gold-faint: #EDE5C8;
  --c-cream: #FBF8F1;
  --c-cream-warm: #FFFDF7;
  --c-cream-2: #F2EFE7;
  --c-bone: #D9D4C5;
  --c-text-primary: #3D3B3A;
  --c-text-secondary: #7A7574;
  --c-text-faint: #B7B4B1;

  /* Semantic */
  --c-sage: #5E7D5A;
  --c-terracotta: #C17B5D;
  --c-info: #3D4470;

  /* Motion */
  --dur-fast: 180ms;
  --dur-base: 240ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Elevation — Tier 2 + Tier 3 */
  --sh-elevated: 0 1px 2px rgba(45,50,80,0.04), 0 12px 48px -16px rgba(45,50,80,0.10);
  --sh-floating-gold: 0 8px 16px -8px rgba(184,147,90,0.25), 0 20px 40px -16px rgba(184,147,90,0.35);
  --sh-floating-navy: 0 8px 16px -8px rgba(45,50,80,0.20), 0 24px 60px -28px rgba(45,50,80,0.28);
}

/* ─────────────── BASE ─────────────── */
html { scroll-behavior: smooth; }
body {
  font-family: '"Noto Sans JP"', sans-serif;
  background-color: var(--c-cream);
  color: var(--c-text-primary);
  font-feature-settings: "palt";
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}
.font-display {
  font-family: '"Noto Serif JP"', serif;
  letter-spacing: -0.04em;
  font-feature-settings: "palt";
}
:lang(en) .font-display { letter-spacing: -0.03em; }
.tabular { font-variant-numeric: tabular-nums; }

/* ─────────────── BACKGROUNDS ─────────────── */
/* Grain — retained for the dark navy bands (SEESAW, contact, product-CTA) */
.grain::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.24  0 0 0 0 0.24  0 0 0 0 0.23  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: 0.04;
  mix-blend-mode: multiply;
}

/* hero-bg / warm-bg — retired to flat cream per Direction A.
   Kept as classes for backwards-compat (both point to cream base). */
.hero-bg { background-color: var(--c-cream); }
.warm-bg { background-color: var(--c-cream-warm); }

.ease-spring { transition-timing-function: var(--ease-spring); }

/* ─────────────── TEXT WRAP CONTROL ─────────────── */
/* Prevent mid-word splits in English headings. */
:lang(en) h1,
:lang(en) h2,
:lang(en) h3,
:lang(en) .font-display {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  -webkit-hyphens: none;
}
/* Japanese headings: keep CJK words together and respect kinsoku (禁則処理). */
:lang(ja) h1,
:lang(ja) h2,
:lang(ja) h3 {
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: normal;
}
/* English CEO/COO message body: prevent mid-word splits across all breakpoints. */
:lang(en) #coo-message p,
:lang(en) #coo-message span {
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
  -webkit-hyphens: none;
}
/* Phrase that must not wrap internally: <span class="nowrap">…</span> */
.nowrap { white-space: nowrap; }
/* Responsive <br> utilities for controlling break points per viewport. */
.br-pc { display: none; }
@media (min-width: 1024px) { .br-pc { display: initial; } }
.br-sp { display: initial; }
@media (min-width: 1024px) { .br-sp { display: none; } }

/* ─────────────── REVEAL ─────────────── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 480ms var(--ease-out),
    transform 480ms var(--ease-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ─────────────── MISSION §WHY — HEADLINE + SUMMARY CARD ─────────────── */
/* Headline: slightly larger lift + gold underline sweep */
.why-headline {
  position: relative;
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 720ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 920ms cubic-bezier(0.16, 1, 0.3, 1);
}
.why-headline.in { opacity: 1; transform: translateY(0); }

.why-headline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -14px;
  height: 3px;
  width: clamp(72px, 14vw, 160px);
  background: linear-gradient(90deg, #B8935A 0%, #D9C89C 55%, rgba(217,200,156,0) 100%);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition:
    transform 840ms cubic-bezier(0.22, 1, 0.36, 1) 280ms,
    opacity 420ms ease-out 280ms;
  pointer-events: none;
}
.why-headline.in::after { transform: scaleX(1); opacity: 1; }

/* Summary card: override base .reveal for a softer scale-in */
.why-summary-card {
  transform: translateY(22px) scale(0.985);
  transition:
    opacity 680ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 820ms cubic-bezier(0.16, 1, 0.3, 1);
}
.why-summary-card.in { transform: translateY(0) scale(1); }

/* Interior cascade: eyebrow → title → body */
.why-summary-card .summary-eyebrow,
.why-summary-card .summary-title,
.why-summary-card .summary-body {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 540ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 640ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.why-summary-card .summary-eyebrow { transform: translateY(6px) scale(0.94); transform-origin: left center; }
.why-summary-card.in .summary-eyebrow,
.why-summary-card.in .summary-title,
.why-summary-card.in .summary-body {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.why-summary-card.in .summary-eyebrow { transition-delay: 240ms; }
.why-summary-card.in .summary-title   { transition-delay: 360ms; }
.why-summary-card.in .summary-body    { transition-delay: 480ms; }

@media (prefers-reduced-motion: reduce) {
  .why-headline,
  .why-summary-card,
  .why-summary-card .summary-eyebrow,
  .why-summary-card .summary-title,
  .why-summary-card .summary-body {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .why-headline::after { transform: scaleX(1); opacity: 1; transition: none; }
}

/* ─────────────── MISSION §OUR ANSWER — STAIRCASE DIAGRAM ─────────────── */
/* Three colored "step" boxes arranged staircase-wise (01 top-left → 03
   bottom-right) with thin gold L-connectors between them. Mobile collapses
   to a vertical stack with a dotted gold connector. */
.staircase {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto auto;
  gap: 28px 0;
  position: relative;
}

.staircase-step {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Source order 01 → 02 → 03; visual stack: 01 top, 03 bottom */
.staircase .step-01 { grid-column: 1 / span 7; grid-row: 1; }
.staircase .step-02 { grid-column: 4 / span 7; grid-row: 2; }
.staircase .step-03 { grid-column: 6 / span 7; grid-row: 3; }

.step-card {
  position: relative;
  display: flex;
  align-items: stretch;
  padding: clamp(20px, 2.4vw, 30px) clamp(22px, 2.6vw, 34px);
  border-radius: 2px;
  overflow: hidden;
  isolation: isolate;
}

.step-num {
  font-family: '"Noto Serif JP"', serif;
  font-weight: 600;
  font-size: clamp(34px, 3.6vw, 48px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-gold-soft);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-right: clamp(18px, 2.2vw, 28px);
  font-feature-settings: "lnum";
}

.step-bar {
  flex-shrink: 0;
  width: 1px;
  background: rgba(217, 200, 156, 0.55);
  margin-right: clamp(18px, 2.2vw, 28px);
  align-self: stretch;
}

.step-title {
  font-family: '"Noto Serif JP"', serif;
  font-weight: 600;
  color: #fff;
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.55;
  letter-spacing: -0.015em;
  margin: 0;
  align-self: center;
}

.step-caption {
  margin-top: 16px;
  padding-left: 6px;
  max-width: 360px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--c-navy);
  letter-spacing: 0.01em;
}

/* Step backgrounds */
.staircase .step-01 .step-card {
  background: linear-gradient(135deg, var(--c-navy-deep) 0%, #1A2042 100%);
  box-shadow: var(--sh-floating-navy);
}
.staircase .step-02 .step-card {
  background: linear-gradient(95deg, var(--c-navy-deep) 0%, #1F2542 35%, var(--c-gold-dark) 88%, var(--c-gold) 100%);
  box-shadow: var(--sh-floating-navy);
}
.staircase .step-03 .step-card {
  background: linear-gradient(95deg, var(--c-gold) 0%, var(--c-gold-soft) 100%);
  box-shadow: var(--sh-floating-gold);
}
.staircase .step-03 .step-num { color: #fff; }
.staircase .step-03 .step-bar { background: rgba(255, 255, 255, 0.55); }
.staircase .step-03 .step-caption { color: var(--c-gold-dark); }

/* L-shaped connectors. The vertical drops from the upper step's left edge
   into the lower step; the horizontal connects across the visual gap. */
.staircase .step-02::before,
.staircase .step-03::before {
  content: "";
  position: absolute;
  width: 1px;
  background: var(--c-gold);
  opacity: 0.7;
  left: 18px;
  top: -28px;
  height: 28px;
  pointer-events: none;
}
.staircase .step-02::after,
.staircase .step-03::after {
  content: "";
  position: absolute;
  height: 1px;
  background: var(--c-gold);
  opacity: 0.7;
  left: -68px;
  top: -28px;
  width: 86px;
  pointer-events: none;
}

/* Reveal — staggered 01 → 02 → 03 */
.staircase-wrap .staircase-step {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 620ms var(--ease-out),
    transform 620ms var(--ease-out);
}
.staircase-wrap.in .staircase-step { opacity: 1; transform: translateY(0); }
.staircase-wrap.in .step-01 { transition-delay: 0ms; }
.staircase-wrap.in .step-02 { transition-delay: 180ms; }
.staircase-wrap.in .step-03 { transition-delay: 360ms; }

/* Connectors fade with the upper step they belong to */
.staircase-wrap .staircase-step::before,
.staircase-wrap .staircase-step::after {
  opacity: 0;
  transition: opacity 480ms var(--ease-out);
}
.staircase-wrap.in .step-02::before,
.staircase-wrap.in .step-02::after { opacity: 0.7; transition-delay: 260ms; }
.staircase-wrap.in .step-03::before,
.staircase-wrap.in .step-03::after { opacity: 0.7; transition-delay: 440ms; }

/* ── Tablet ── */
@media (max-width: 1023px) {
  .staircase { gap: 24px 0; }
  .staircase .step-01 { grid-column: 1 / span 8; }
  .staircase .step-02 { grid-column: 3 / span 8; }
  .staircase .step-03 { grid-column: 5 / span 8; }
  .step-caption { max-width: 320px; }
}

/* ── Mobile: vertical stack, dotted vertical connectors ── */
@media (max-width: 767px) {
  .staircase {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .staircase .staircase-step {
    grid-column: unset !important;
    grid-row: unset !important;
  }
  .step-card { padding: 18px 20px; }
  .step-num { font-size: 30px; padding-right: 16px; }
  .step-bar { margin-right: 16px; }
  .step-title { font-size: 16px; }
  .step-caption { max-width: none; padding-left: 0; }

  .staircase .step-02::before,
  .staircase .step-03::before {
    left: 26px;
    top: -26px;
    width: 1px;
    height: 26px;
    background: transparent;
    background-image: linear-gradient(to bottom, var(--c-gold) 50%, transparent 50%);
    background-size: 1px 6px;
    opacity: 0.75;
  }
  .staircase .step-02::after,
  .staircase .step-03::after { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .staircase-wrap .staircase-step,
  .staircase-wrap .staircase-step::before,
  .staircase-wrap .staircase-step::after {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .staircase-wrap .step-02::before,
  .staircase-wrap .step-02::after,
  .staircase-wrap .step-03::before,
  .staircase-wrap .step-03::after {
    opacity: 0.55 !important;
  }
}

/* ─────────────── REBUTTER BANNER POP-UP ─────────────── */
.rebutter-pop .rebutter-pop-line,
.rebutter-pop .rebutter-pop-rule {
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transition:
    opacity 620ms var(--ease-out),
    transform 620ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rebutter-pop.in .rebutter-pop-line { transition-delay: 120ms; }
.rebutter-pop.in .rebutter-pop-rule { transition-delay: 340ms; }
.rebutter-pop.in .rebutter-pop-line,
.rebutter-pop.in .rebutter-pop-rule {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ─────────────── HEADER ─────────────── */
.header-scrolled {
  background: #FBF8F1;
  box-shadow:
    0 1px 0 rgba(45,50,80,0.08),
    0 8px 24px -16px rgba(45,50,80,0.14);
}

/* ─────────────── DECORATIVE ─────────────── */
@keyframes slow-spin { to { transform: rotate(360deg); } }
.spin-slow { animation: slow-spin 120s linear infinite; }

@keyframes chev {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(8px); opacity: 1; }
}
.chev { animation: chev 1.8s ease-in-out infinite; }

.bridge-line {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  transition: stroke-dashoffset 1.2s var(--ease-out);
}
.reveal.in .bridge-line { stroke-dashoffset: 0; }

/* ─────────────── NAV LINK ─────────────── */
.nav-link {
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-link:hover::after,
.nav-link:focus-visible::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--c-gold); }
.nav-link.is-active::after {
  transform: scaleX(1);
  background: var(--c-gold);
  height: 2px;
}

/* ─────────────── FOCUS ─────────────── */
:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ─────────────── CARDS ─────────────── */
.stat-card {
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.stat-card:hover { transform: translateY(-2px); }

/* ─────────────── DIVIDERS ─────────────── */
.gold-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold) 20%, var(--c-gold) 80%, transparent);
}
.hairline { height: 1px; background: var(--c-bone); }

/* ─────────────── DRAWER ─────────────── */
.drawer {
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.drawer.open { transform: translateX(0); }

/* ─────────────── FORM ─────────────── */
.form-input {
  width: 100%;
  background: var(--c-cream);
  border: 1px solid rgba(45,50,80,0.14);
  border-radius: var(--r-md);
  padding: 13px 16px;
  font-size: 14px;
  color: var(--c-text-primary);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}
.form-input::placeholder { color: var(--c-text-faint); }
.form-input:hover { border-color: rgba(184,147,90,0.45); }
.form-input:focus {
  outline: none;
  border-color: var(--c-gold);
  background: var(--c-cream-warm);
  box-shadow: 0 0 0 4px rgba(184,147,90,0.18);
}
.form-input:invalid:not(:placeholder-shown) {
  border-color: rgba(193,123,93,0.6);
}

/* ─────────────── RADIO TILE ─────────────── */
.radio-tile {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  background: var(--c-cream);
  border: 1px solid rgba(45,50,80,0.14);
  border-radius: var(--r-md);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}
.radio-tile:hover { border-color: rgba(184,147,90,0.5); }
.radio-tile .radio-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(45,50,80,0.25);
  background: var(--c-cream-warm);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
}
.radio-tile:has(input:checked) {
  border-color: var(--c-gold);
  background: var(--c-cream-warm);
  box-shadow: 0 0 0 3px rgba(184,147,90,0.15);
}
.radio-tile:has(input:checked) .radio-dot {
  border-color: var(--c-gold);
  background: var(--c-gold);
  box-shadow: inset 0 0 0 3.5px var(--c-cream-warm);
}

/* ─────────────── FOOTER LOGO ─────────────── */
.footer-logo-wrapper {
  position: relative;
  display: inline-block;
  padding: 24px 32px;
  isolation: isolate;
}
.footer-logo-wrapper::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 200%; height: 200%;
  background: radial-gradient(
    ellipse at center,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.05) 40%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.footer-logo-wrapper img {
  position: relative;
  z-index: 1;
}

/* ─────────────── FOOTER SOCIAL ICONS ─────────────── */
.social-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 1px solid var(--c-gold);
  color: var(--c-gold);
  background: transparent;
  transition:
    transform 240ms cubic-bezier(.34, 1.56, .64, 1),
    color 200ms ease,
    border-color 200ms ease,
    background-color 200ms ease;
}
.social-icon::before {
  content: '';
  position: absolute;
  inset: -4px;
}
.social-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.social-icon:hover {
  color: var(--c-gold-soft);
  border-color: var(--c-gold-soft);
  background-color: rgba(184, 147, 90, 0.08);
  transform: scale(1.08);
}
.social-icon:active {
  transform: scale(0.96);
}
.social-icon:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
}
@media (max-width: 767px) {
  .social-icon {
    width: 36px;
    height: 36px;
  }
  .social-icon svg {
    width: 16px;
    height: 16px;
  }
}

/* ─────────────── PAGE-END NAV ─────────────── */
.page-end-nav {
  display: flex; flex-wrap: wrap; gap: 32px;
  align-items: center; justify-content: center;
  padding: 56px 24px;
  font-size: 14px;
}
.page-end-nav a.prev { color: var(--c-text-secondary); }
.page-end-nav a.next { color: var(--c-gold); font-weight: 600; }
.page-end-nav a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ─────────────── CIRCULAR DIAGRAM (index WHO) ─────────────── */
@keyframes circleFadeIn {
  from { opacity: 0; transform: translate(-50%, -50%) translateY(12px); }
  to   { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
}
@keyframes dashFlow {
  to { stroke-dashoffset: -36; }
}
.circle-node {
  animation: circleFadeIn 0.6s var(--ease-out) both;
}
.circle-path {
  stroke-dasharray: 8 4;
  animation: dashFlow 6s linear infinite;
}
.circle-dot {
  /* Per DESIGN-SPEC §8.1 — static dots, no pulse */
}

/* ─────────────── HERO CASCADE ─────────────── */

/* Linear chain: staggered scale-pop on nodes + arrows */
.reveal .linear-node,
.reveal .linear-arrow {
  opacity: 0;
  transform: scale(0.82);
  transition:
    opacity 0.55s var(--ease-out),
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal.in .linear-node,
.reveal.in .linear-arrow {
  opacity: 1;
  transform: scale(1);
}
.reveal.in .linear-chain > *:nth-child(1) { transition-delay: 0.05s; }
.reveal.in .linear-chain > *:nth-child(2) { transition-delay: 0.20s; }
.reveal.in .linear-chain > *:nth-child(3) { transition-delay: 0.35s; }
.reveal.in .linear-chain > *:nth-child(4) { transition-delay: 0.50s; }
.reveal.in .linear-chain > *:nth-child(5) { transition-delay: 0.65s; }

/* Cascade badge: staggered fade-up per badge + number pop */
.reveal .cascade-badge {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out);
}
.reveal.in .cascade-badge {
  opacity: 1;
  transform: translateY(0);
}
.reveal.in .cascade-badge:nth-child(1) { transition-delay: 0.10s; }
.reveal.in .cascade-badge:nth-child(2) { transition-delay: 0.25s; }
.reveal.in .cascade-badge:nth-child(3) { transition-delay: 0.40s; }

.reveal .cascade-badge-value {
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity 0.45s var(--ease-out),
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal.in .cascade-badge-value { opacity: 1; transform: scale(1); }
.reveal.in .cascade-badge:nth-child(1) .cascade-badge-value { transition-delay: 0.30s; }
.reveal.in .cascade-badge:nth-child(2) .cascade-badge-value { transition-delay: 0.45s; }
.reveal.in .cascade-badge:nth-child(3) .cascade-badge-value { transition-delay: 0.60s; }

/* Downward dashed cascade arrow: clip-path top-to-bottom reveal (preserves dash pattern) */
.reveal .cascade-arrow {
  clip-path: inset(0 0 100% 0);
  -webkit-clip-path: inset(0 0 100% 0);
  transition:
    clip-path 0.9s var(--ease-out),
    -webkit-clip-path 0.9s var(--ease-out);
}
.reveal.in .cascade-arrow {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
  transition-delay: 0.1s;
}

/* Re: gate rays: stroke draw-in from center outward */
.re-gate-ray {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.8s var(--ease-out);
}
.reveal.in .re-gate-ray { stroke-dashoffset: 0; }
.reveal.in .re-gate-ray:nth-of-type(1) { transition-delay: 0.35s; }
.reveal.in .re-gate-ray:nth-of-type(2),
.reveal.in .re-gate-ray:nth-of-type(3) { transition-delay: 0.50s; }
.reveal.in .re-gate-ray:nth-of-type(4),
.reveal.in .re-gate-ray:nth-of-type(5) { transition-delay: 0.65s; }

/* Re: gate central core: scale-pop */
.re-gate-core {
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.55s var(--ease-out),
    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal.in .re-gate-core { opacity: 1; transform: scale(1); }

/* Hero circular loop: outer ring draw + path stagger + node stagger */
.hero-loop .hero-loop-ring {
  stroke-dasharray: 1100;
  stroke-dashoffset: 1100;
  transition: stroke-dashoffset 1.4s var(--ease-out);
}
.hero-loop.in .hero-loop-ring { stroke-dashoffset: 0; }

/* Curved arrows: fade-in stagger (keeps dashed pattern intact) */
.hero-loop .hero-loop-path {
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.hero-loop.in .hero-loop-path { opacity: 0.55; }
.hero-loop.in .hero-loop-path:nth-of-type(1) { transition-delay: 0.50s; }
.hero-loop.in .hero-loop-path:nth-of-type(2) { transition-delay: 0.80s; }
.hero-loop.in .hero-loop-path:nth-of-type(3) { transition-delay: 1.10s; }
.hero-loop.in .hero-loop-path:nth-of-type(4) { transition-delay: 1.40s; }

/* Marching dashes: the dashed arcs flow clockwise so the loop feels alive. */
@keyframes hero-loop-march {
  to { stroke-dashoffset: -20; }
}
.hero-loop.in .hero-loop-path {
  animation: hero-loop-march 2.5s linear infinite;
}

/* Hero loop nodes: override global .circle-node page-load animation; reveal-driven instead */
.hero-loop .circle-node {
  animation: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.72);
  transition:
    opacity 0.55s var(--ease-out),
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hero-loop.in .circle-node {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.hero-loop.in .circle-node:nth-of-type(1) { transition-delay: 0.65s; }
.hero-loop.in .circle-node:nth-of-type(2) { transition-delay: 0.95s; }
.hero-loop.in .circle-node:nth-of-type(3) { transition-delay: 1.25s; }
.hero-loop.in .circle-node:nth-of-type(4) { transition-delay: 1.55s; }

/* Re:Butter node glow pulse (fires once, after loop completes ~2.2s) */
@keyframes hero-rebutter-glow {
  0%   { box-shadow: 0 8px 32px rgba(184,147,90,0.25), 0 4px 12px rgba(0,0,0,0.15); }
  50%  { box-shadow: 0 14px 48px rgba(184,147,90,0.65), 0 4px 12px rgba(0,0,0,0.15); }
  100% { box-shadow: 0 8px 32px rgba(184,147,90,0.25), 0 4px 12px rgba(0,0,0,0.15); }
}
.hero-loop-rebutter-inner {
  box-shadow: 0 8px 32px rgba(184,147,90,0.25), 0 4px 12px rgba(0,0,0,0.15);
}
.hero-loop.in .hero-loop-rebutter-inner {
  animation: hero-rebutter-glow 1.6s ease-in-out 2.15s 1;
}

/* ─────────────── HERO BAND — EN i18n variant ─────────────── */
/* Reusable pattern for dark-navy page heroes that carry a small gold English
   label above a Japanese title + Japanese subtitle. In EN mode, hide the JP
   lines and promote the label to the main title, while preserving the hero's
   overall height. Applied via `:lang(en)` driven by <html lang="…"> set by
   the i18n runtime. Intended for privacy, terms, about, contact, news. */
:lang(en) .hero-band .hero-ja-only { display: none; }

:lang(en) .hero-band .hero-band-label {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.75rem, 5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 0;
}

:lang(en) .hero-band .hero-band-inner {
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1024px) {
  :lang(en) .hero-band .hero-band-inner { min-height: 130px; }
}

/* ─────────────── REDUCED MOTION ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: opacity 180ms linear;
    transform: none !important;
  }
  .reveal.in { transform: none !important; }
  .spin-slow,
  .chev,
  .circle-node,
  .circle-path { animation: none !important; }

  /* Hero cascade: collapse to opacity-only */
  .reveal .linear-node, .reveal .linear-arrow,
  .reveal .cascade-badge, .reveal .cascade-badge-value,
  .reveal .re-gate-core,
  .hero-loop .circle-node {
    opacity: 1 !important;
    transform: none !important;
    transition: opacity 180ms linear !important;
  }
  .reveal .cascade-arrow {
    clip-path: none !important;
    -webkit-clip-path: none !important;
    transition: opacity 180ms linear !important;
  }
  .re-gate-ray,
  .hero-loop .hero-loop-ring {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  .hero-loop .hero-loop-path {
    opacity: 0.55 !important;
    transition: none !important;
    animation: none !important;
  }
  .hero-loop.in .hero-loop-rebutter-inner {
    animation: none !important;
  }

  html { scroll-behavior: auto; }
}

/* ─────────────── STATS SNAPSHOT cards (mission.html #stats-snapshot) ─────────────── */
.cascade-badge-stat {
  box-shadow: 0 4px 24px rgba(11, 30, 63, 0.06), 0 1px 2px rgba(11, 30, 63, 0.04);
  transition: box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.cascade-badge-stat:hover {
  box-shadow: 0 12px 36px rgba(11, 30, 63, 0.10), 0 2px 6px rgba(11, 30, 63, 0.05);
  transform: translateY(-2px);
}
.cascade-stat-pre,
.cascade-stat-suf {
  font-size: clamp(18px, 2.2vw, 26px);
  letter-spacing: -0.01em;
}
.cascade-num {
  display: inline-block;
  font-size: clamp(28px, 3.6vw, 44px);
  letter-spacing: -0.02em;
  padding: 0 4px 2px;
  background-image: linear-gradient(180deg, transparent 70%, rgba(201, 169, 97, 0.40) 70%, rgba(201, 169, 97, 0.18) 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
@media (max-width: 1023px) {
  .cascade-stat-pre,
  .cascade-stat-suf { font-size: clamp(16px, 2.4vw, 22px); }
  .cascade-num { font-size: clamp(26px, 4.2vw, 36px); }
}
@media (max-width: 767px) {
  .cascade-badge-stat { box-shadow: 0 2px 12px rgba(11, 30, 63, 0.05); }
  .cascade-stat-pre,
  .cascade-stat-suf { font-size: 18px; }
  .cascade-num { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .cascade-badge-stat,
  .cascade-badge-stat:hover {
    transform: none !important;
    transition: none !important;
  }
}