/* Landing page kit styles. Sits on top of /styles/foundations.css. */
@import url('foundations.css');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--paper); color: var(--ink); font-family: var(--font-body); overflow-x: hidden; }
html[lang="ja"] body { font-family: var(--font-body-jp); }

img { max-width: 100%; display: block; }

/* ---- Skip link ---- */
.skip { position: absolute; left: -9999px; top: 0; padding: 8px 12px; background: var(--ink); color: #fff; z-index: 1000; }
.skip:focus { left: 12px; top: 12px; }

/* ---- Sticky nav ---- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; height: 64px; z-index: 100;
  display: flex; align-items: center;
  padding: 0 var(--sp-7);
  background: rgba(250, 247, 242, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--mist);
}
.nav-logo { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.nav-logo img { width: 100%; height: 100%; object-fit: cover; }
.nav-links { display: flex; gap: 28px; margin-left: auto; align-items: center; }
.nav-link { font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.06em; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 4px 0; }
html[lang="ja"] .nav-link { font-family: var(--font-body-jp); font-size: 12px; }
.nav-link .num { color: var(--charcoal); font-variant-numeric: tabular-nums; margin-right: 2px; }
.nav-link:hover { color: var(--crimson); }
.nav-link:hover .num { color: var(--crimson); }
.nav-link .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--crimson); display: inline-block; opacity: 0; transition: opacity var(--dur-base) var(--ease-default); }
.nav-link.active .dot { opacity: 1; }
.nav-lang { display: inline-flex; gap: 6px; margin-left: 24px; font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.04em; }
.nav-lang .a { color: var(--ink); cursor: pointer; background: none; border: 0; padding: 0; font: inherit; text-decoration: none; }
.nav-lang .a:hover { color: var(--crimson); }
.nav-lang .a.inactive { color: rgba(26, 26, 26, 0.25); }
.nav-lang .sl { color: rgba(26, 26, 26, 0.2); }

/* ---- Layout container ---- */
.container { max-width: var(--max-content); margin: 0 auto; padding: 0 var(--sp-7); }

/* ---- Hero ---- */
.hero {
  position: relative;
  min-height: 100vh;
  background: var(--paper-warm);
  padding: 120px var(--sp-7) 80px;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
}
.hero-inner { max-width: 920px; margin: 0 auto; position: relative; z-index: 2; text-align: left; }
.hero h1 { margin-bottom: 28px; }
.hero .sub { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); max-width: 720px; margin-bottom: 56px; }
.hero .scroll-prompt { font-family: var(--font-body); font-style: italic; font-size: 14px; color: var(--charcoal); display: inline-flex; align-items: center; gap: 10px; }
html[lang="ja"] .hero .scroll-prompt { font-family: var(--font-body-jp); font-style: normal; }
.hero .scroll-prompt .arrow { display: inline-block; animation: bounce 2s ease-in-out infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

.hero-manta {
  position: absolute; top: 8%; right: -8%;
  width: 56vw; max-width: 720px;
  opacity: 0.7;
  pointer-events: none;
  animation: drift 36s linear infinite;
  z-index: 1;
}
@keyframes drift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-20vw, 18vh); }
  100% { transform: translate(0, 0); }
}
.hero-wrasse {
  position: absolute; bottom: 0; left: 0; right: 0; width: 100%;
  height: auto; opacity: 0.85;
  pointer-events: none;
  animation: float-h 60s linear infinite;
  z-index: 1;
}
@keyframes float-h {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-3%); }
}

/* ---- Section base ---- */
section.s {
  padding: 160px var(--sp-7);
  position: relative;
}
section.s.warm { background: var(--paper-warm); }
.section-head { display: flex; flex-direction: column; gap: 18px; max-width: var(--max-content); margin: 0 auto 64px; }
.eyebrow { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 12px; }
html[lang="ja"] .eyebrow { font-family: var(--font-body-jp); letter-spacing: 0.12em; }
.eyebrow .num { color: var(--charcoal); }

/* ---- Section 01 — Vision ---- */
.vision-wrap { max-width: var(--max-content); margin: 0 auto; position: relative; }
.vision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.vision-body p { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); margin-bottom: 24px; }
.vision-quote { padding-left: 32px; border-left: 1px solid var(--mist-strong); }
.vision-quote .pull-quote { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 32px; line-height: 1.35; letter-spacing: var(--tracking-quote); margin: 0 0 16px; }
html[lang="ja"] .vision-quote .pull-quote { font-family: var(--font-display-jp); font-style: normal; }
.vision-quote .attr { font-size: var(--fs-caption); color: var(--charcoal); }
.vision-coral { position: absolute; bottom: -160px; right: -40px; width: 36vw; max-width: 480px; opacity: 0.95; pointer-events: none; z-index: 0; }

/* ---- Section 02 — Regions / map ---- */
.regions-section { padding-bottom: 120px; }
.map-frame { position: relative; max-width: 1280px; margin: 0 auto; aspect-ratio: 1.45 / 1; }
.map-frame img.map { width: 100%; height: 100%; object-fit: contain; }
.map-marker {
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--crimson);
  border: 0; padding: 0; cursor: pointer;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.map-marker::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid var(--crimson);
  opacity: 0.3;
  animation: ring-pulse 3s ease-in-out infinite;
}
@keyframes ring-pulse {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.8); opacity: 0; }
}
.map-label {
  position: absolute;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crimson);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
}
.map-caption-card {
  position: absolute;
  background: var(--paper);
  padding: 14px 18px;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(26, 26, 26, 0.08);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 240px;
  z-index: 4;
  transform: translate(-50%, calc(-100% - 24px));
}
.map-caption-card .reg { font-weight: 500; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--crimson); display: block; margin-bottom: 6px; }
.map-cap { text-align: center; max-width: 720px; margin: 32px auto 0; color: var(--charcoal); font-size: var(--fs-caption); }

/* ---- Section 03 — Why it matters / stats ---- */
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  max-width: var(--max-content);
  margin: 0 auto 64px;
  align-items: end;
}
.stat-cell { display: flex; flex-direction: column; gap: 12px; }
.stat-cell .num { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-stat); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-cell .num .accent { color: var(--crimson); font-size: 0.55em; vertical-align: 0.45em; margin-left: 2px; }
.stat-cell .lbl { font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--charcoal); line-height: 1.45; max-width: 200px; }
html[lang="ja"] .stat-cell .lbl { font-family: var(--font-body-jp); letter-spacing: 0.06em; }
.why-body { max-width: 720px; margin: 0 auto; font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); text-align: left; }

/* ---- Section 04 — What's coming ---- */
.coming-lead { max-width: 720px; font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); margin: 0 auto 80px; }
.cards-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: var(--max-content); margin: 0 auto; }
.preview-card {
  background: var(--paper);
  border: 1px solid var(--mist);
  border-radius: var(--radius-md);
  padding: 32px 28px 28px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  transition: transform var(--dur-base) var(--ease-default), box-shadow var(--dur-base) var(--ease-default);
}
.preview-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.preview-card .ill { height: 96px; display: flex; align-items: center; justify-content: flex-start; margin-bottom: 4px; }
.preview-card .ill img { max-height: 96px; max-width: 100%; }
.preview-card .pin { width: 36px; height: 36px; border-radius: 50%; background: var(--crimson); position: relative; }
.preview-card .pin::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1.5px solid var(--crimson); opacity: 0.3; }
.preview-card .eb { font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--charcoal); }
html[lang="ja"] .preview-card .eb { font-family: var(--font-body-jp); letter-spacing: 0.08em; }
.preview-card .ph { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.25; color: var(--ink); margin: 0; }
html[lang="ja"] .preview-card .ph { font-family: var(--font-display-jp); }
.preview-card .pb { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--ink); margin: 0; }
html[lang="ja"] .preview-card .pb { font-family: var(--font-body-jp); }
.preview-card .badge-row { display: flex; justify-content: flex-end; margin-top: 8px; }

/* ---- Section 05 — Coming soon ---- */
.soon-wrap { max-width: 880px; margin: 0 auto; text-align: left; display: flex; flex-direction: column; gap: 32px; }
.soon-closing { font-family: var(--font-display); font-weight: 300; font-size: 56px; line-height: 1.15; letter-spacing: -0.01em; margin: 0; }
html[lang="ja"] .soon-closing { font-family: var(--font-display-jp); font-weight: 400; font-size: 40px; line-height: 1.5; }
.soon-meta { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-body); }
.soon-meta .launch { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--ink); }
html[lang="ja"] .soon-meta .launch { font-family: var(--font-display-jp); font-style: normal; }
.soon-meta .person { font-size: var(--fs-body); color: var(--charcoal); }

.social-row { display: flex; align-items: center; gap: 20px; margin-top: 32px; }
.social-row .lbl { font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--charcoal); }
html[lang="ja"] .social-row .lbl { font-family: var(--font-body-jp); letter-spacing: 0.08em; }
.social-row .icons { display: inline-flex; gap: 16px; }
.social-row a { color: var(--ink); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; transition: color var(--dur-fast) var(--ease-default), background var(--dur-fast) var(--ease-default); text-decoration: none; }
.social-row a:hover { color: var(--crimson); }
.social-row svg { width: 18px; height: 18px; }

/* ---- Footer ---- */
.footer { padding: 64px var(--sp-7) 48px; border-top: 1px solid var(--mist); display: flex; flex-direction: column; gap: 24px; align-items: flex-start; max-width: var(--max-content); margin: 0 auto; }
.footer .lines { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-caption); color: var(--charcoal); }
.footer .lines .l1 { color: var(--ink); font-weight: 500; }
.footer .alt { font-family: var(--font-body); font-size: var(--fs-caption); color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
html[lang="ja"] .footer .alt { font-family: var(--font-body-jp); }
.footer .alt:hover { color: var(--crimson); }

/* ---- Scroll-progress dot rail ---- */
.rail {
  position: fixed; right: 24px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 14px;
  z-index: 50;
}
.rail .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(26, 26, 26, 0.18); transition: background var(--dur-base), transform var(--dur-base); cursor: pointer; }
.rail .dot.active { background: var(--crimson); transform: scale(1.4); }

/* ---- Section reveal ---- */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity 600ms var(--ease-default), transform 600ms var(--ease-default); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .nav { padding: 0 var(--sp-5); }
  section.s { padding: 120px var(--sp-5); }
  .hero { padding: 120px var(--sp-5) 80px; }
  .vision-grid { grid-template-columns: 1fr; gap: 32px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .cards-row { grid-template-columns: 1fr; }
  .footer { padding: 64px var(--sp-5) 48px; }
}
@media (max-width: 767px) {
  .nav { padding: 0 var(--sp-3); }
  .nav-links { gap: 14px; }
  .nav-link { font-size: 11px; }
  .nav-link .num { display: none; }
  section.s { padding: 80px var(--sp-3); }
  .hero { padding: 96px var(--sp-3) 64px; min-height: 90vh; }
  .soon-closing { font-size: 36px; }
  .rail { display: none; }
  .map-label { font-size: 9px; }
  .map-caption-card { font-size: 11px; max-width: 200px; }
}