/* ========================== OKLCH Design Tokens ========================== */
:root {
  /* ── Core neutrals ── */
  --c-white: oklch(1 0 0);
  --c-black: oklch(0 0 0);

  /* ── Brand cyan / aqua family ── */
  --c-cyan: oklch(0.9 0.1721 195);
  --c-cyan-glow: oklch(0.9 0.1721 195 / 0.4);
  --c-aqua: oklch(0.9002 0.2112 185.72);
  --c-aqua-88: oklch(0.9235 0.1569 185.72 / 88%);
  --c-aqua-72: oklch(0.9235 0.1569 185.72 / 72%);
  --c-aqua-35: oklch(0.9235 0.1569 185.72 / 35%);
  --c-aqua-25: oklch(0.9235 0.1569 185.72 / 25%);
  --c-aqua-15: oklch(0.9235 0.1569 185.72 / 15%);
  --c-aqua-14: oklch(0.9235 0.1569 185.72 / 14%);
  --c-aqua-12: oklch(0.9235 0.1569 185.72 / 12%);

  /* ── Backgrounds ── */
  --c-bg-deep: oklch(0.3939 0.2473 258.84);
  --c-bg-card: oklch(0.13 0.04 265 / 0.56);
  --c-bg-dark: oklch(0.15 0.025 265 / 0.96);
  --c-bg-dark-78: oklch(0.15 0.025 265 / 0.78);

  /* ── Borders ── */
  --c-border-subtle: oklch(1 0 0 / 0.16);
  --c-border-faint: oklch(1 0 0 / 0.12);
  --c-border-ghost: oklch(1 0 0 / 0.1);

  /* ── Text ── */
  --c-text-label: oklch(1 0 0 / 0.82);
  --c-text-muted: oklch(1 0 0 / 0.76);
  --c-text-dim: oklch(1 0 0 / 0.75);
  --c-text-faded: oklch(1 0 0 / 0.72);
  --c-text-hint: oklch(1 0 0 / 0.52);
  --c-text-ghost: oklch(1 0 0 / 0.4);

  /* ── Shadows ── */
  --c-shadow-card: oklch(0 0 0 / 0.28);
  --c-shadow-toast: oklch(0 0 0 / 0.2);
  --c-shadow-suggest: oklch(0 0 0 / 0.22);

  /* ── Surfaces ── */
  --c-hover-bg: oklch(1 0 0 / 0.08);
  --c-glass-bg: oklch(1 0 0 / 0.04);

  /* ── Overlays (manifesto) ── */
  --c-overlay-ribbon: oklch(0.16 0.045 265 / 0.9);
  --c-overlay-pill: oklch(0.1 0.035 265 / 0.95);
  --c-overlay-slogan: oklch(0.12 0.04 265 / 0.92);
  --c-badge-gold: oklch(0.7086 0.1714 82.15);

  /* ── Buttons ── */
  --c-btn-blue: oklch(0.7159 0.1838 237.76);
  --c-btn-blue-shadow: oklch(0.7159 0.1838 237.76 / 22%);
  --c-btn-blue-shadow-h: oklch(0.7159 0.1838 237.76 / 28%);

  /* ── Privacy link ── */
  --c-privacy-link: oklch(0.9 0.1721 195 / 0.8);

  /* ── Toast semantic ── */
  --c-toast-success-bg: oklch(0.9617 0.0732 159.42);
  --c-toast-success: oklch(86.645% 0.29481 142.511);
  --c-toast-error-bg: oklch(0.9794 0.0185 17.48);
  --c-toast-error: oklch(0.6542 0.3062 28.66);
  --c-toast-warning-bg: oklch(0.9882 0.0239 85.79);
  --c-toast-warning: oklch(0.7652 0.2032 62.57);
  --c-toast-info-bg: oklch(0.96 0.025 245);
  --c-toast-info: oklch(0.6243 0.2232 255.4861);
}

/* ========================== @font-face ========================== */
@font-face {
  font-family: 'Omnes';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/Omnes-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Omnes';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/Omnes-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Omnes';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/Omnes-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Omnes';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/Omnes-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'Omnes';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/Omnes-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Omnes';
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/Omnes-Black.ttf') format('truetype');
}

@font-face {
  font-family: 'Inter';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/Inter-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'Inter';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/Inter-Bold.ttf') format('truetype');
}

/* =================== Animated Gradient Title ==================== */
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 200% 50%;
  }
}

.gradient-title {
  background: linear-gradient(90deg,
      oklch(0.7 0.32 330),
      oklch(0.68 0.2 350),
      oklch(0.83 0.17 85),
      oklch(0.93 0.22 105),
      oklch(0.9 0.22 125),
      oklch(0.88 0.2 145),
      oklch(0.88 0.16 160),
      oklch(0.9 0.13 175),
      oklch(0.91 0.12 185),
      oklch(0.91 0.13 190),
      oklch(0.91 0.14 192),
      oklch(0.9 0.1721 195),
      oklch(0.7 0.32 330));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 8s linear infinite;
}

/* =================== Animated CTA Button ======================== */
@keyframes cta-gradient {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 200% 50%;
  }
}

.cta-button {
  display: inline-block;
  padding: 16px 36px;
  border-radius: 16px;
  font-family: 'Omnes', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--c-black);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: linear-gradient(90deg,
      oklch(0.7 0.32 330),
      oklch(0.68 0.2 350),
      oklch(0.83 0.17 85),
      oklch(0.93 0.22 105),
      oklch(0.9 0.22 125),
      oklch(0.88 0.2 145),
      oklch(0.88 0.16 160),
      oklch(0.9 0.13 175),
      oklch(0.91 0.12 185),
      oklch(0.91 0.13 190),
      oklch(0.91 0.14 192),
      oklch(0.9 0.1721 195),
      oklch(0.7 0.32 330));
  background-size: 200% auto;
  animation: cta-gradient 8s linear infinite;
  box-shadow: 0 4px 24px var(--c-aqua-25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  letter-spacing: 0.5px;
  will-change: transform, box-shadow;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px var(--c-aqua-35);
}

.cta-button:active {
  transform: translateY(0);
}

/* =================== Globe Loader =============================== */
@keyframes pulse-glow {

  0%,
  100% {
    opacity: 0.4;
    transform: scale(0.95);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

.globe-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 300px;
}

.globe-loader-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid var(--c-aqua-15);
  border-top-color: var(--c-aqua);
  animation: pulse-glow 2s ease-in-out infinite;
}

/* =================== Hero Entrance Animation ==================== */
@keyframes entrance-reveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-content .landing-title {
  animation: entrance-reveal 400ms cubic-bezier(0.25, 1, 0.5, 1) both;
  animation-delay: 150ms;
}

.hero-content .subtitle:not(.subtitle-secondary) {
  animation: entrance-reveal 400ms cubic-bezier(0.25, 1, 0.5, 1) both;
  animation-delay: 270ms;
}

.hero-content .subtitle-secondary {
  animation: entrance-reveal 400ms cubic-bezier(0.25, 1, 0.5, 1) both;
  animation-delay: 390ms;
}

.hero-content .waitlist-shell {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity;
  transform: translateY(20px) translateZ(0);
  contain: paint;
}

body.globe-ready .hero-content .waitlist-shell {
  animation: entrance-reveal 400ms cubic-bezier(0.25, 1, 0.5, 1) both;
  animation-delay: 00ms;
  visibility: visible;
  pointer-events: auto;
}

/* =================== Nav link transitions (Shuffles-inspired) === */
.nav-link {
  display: inline-block;
  transition: none;
}

.nav-link:active {
  transform: none;
}

/* =================== i18n fade transition ======================= */
[data-i18n],
[data-i18n-ph],
.waitlist-shell,
.contact-form-shell {
  transition: opacity 150ms ease-in-out;
}

html.i18n-transitioning [data-i18n],
html.i18n-transitioning [data-i18n-ph],
html.i18n-transitioning .waitlist-shell,
html.i18n-transitioning .contact-form-shell {
  opacity: 0 !important;
}

/* =================== Route-driven Pages ========================= */
.page {
  display: none !important;
  transition: opacity 75ms ease-in-out;
}

html:not([data-page]) .globe-canvas,
html[data-page="home"] .globe-canvas {
  display: block;
  opacity: 1;
  filter: none;
  transform: scale(1);
  pointer-events: auto;
}

html[data-page="our-vision"] .globe-canvas,
html[data-page="contact"] .globe-canvas,
html[data-page="privacy-policy"] .globe-canvas {
  display: none !important;
  opacity: 0;
  pointer-events: none !important;
}

html.page-transitioning .page {
  opacity: 0 !important;
}

html:not([data-page]) .page-home,
html[data-page="home"] .page-home {
  display: flex !important;
}

html {
  overflow: hidden;
  height: 100vh;
  height: 100svh;
}

body {
  overflow: hidden;
  height: 100vh;
  height: 100svh;
}

html[data-page="our-vision"] .page-vision,
html[data-page="contact"] .page-contact,
html[data-page="privacy-policy"] .page-privacy-policy {
  display: block !important;
}

html:not([data-page]) .nav-home,
html[data-page="home"] .nav-home,
html[data-page="our-vision"] .nav-vision,
html[data-page="contact"] .nav-contact,
html[data-page="privacy-policy"] .nav-privacy {
  color: var(--c-cyan) !important;
  text-shadow: 0 0 12px var(--c-cyan-glow);
}

.brand-bar a {
  pointer-events: auto;
}

.info-page {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + clamp(8px, 2.5vw, 24px) + clamp(28px, 8vw, 84px) + 12px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 24px 24px calc(env(safe-area-inset-bottom, 0px) + 96px);
}

.page-vision.info-page,
.page-contact.info-page,
.page-privacy-policy.info-page {
  min-height: auto;
}

html[data-page="our-vision"] .page-vision.info-page {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.info-page-shell {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

/* ---- Vision Article ---- */
.vision-article-page {
  padding-top: 0 !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 48px) !important;
}

.vision-article-content {
  width: 100%;
  max-width: 740px;
}

.vision-article-heading {
  font-family: 'Omnes', sans-serif;
  font-size: clamp(1.25rem, 1rem + 1.5vw, 1.75rem);
  font-weight: 600;
  color: var(--c-white);
  margin: 2.5rem 0 0.6rem;
  line-height: 1.25;
}

.vision-article-intro {
  font-size: clamp(1rem, 0.9rem + 0.7vw, 1.2rem) !important;
  margin-bottom: 2rem;
}

.vision-article-closing {
  margin-top: 3rem;
  font-size: clamp(1.05rem, 0.95rem + 0.8vw, 1.3rem);
  line-height: 1.5;
}

.vision-closing-prefix {
  color: var(--c-text-muted);
}

.vision-closing-bold {
  font-weight: 700;
  background: linear-gradient(to right,
      oklch(0.88 0.18 95),
      oklch(0.88 0.17 97),
      oklch(0.87 0.14 105),
      oklch(0.85 0.15 130),
      oklch(0.84 0.18 150),
      oklch(0.83 0.14 170),
      oklch(0.83 0.13 172),
      oklch(0.72 0.14 240));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-card {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-faint);
  border-radius: 32px;
  box-shadow: 0 32px 120px var(--c-shadow-card);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: clamp(24px, 4vw, 40px);
}

.page-card-wide {
  max-width: 980px;
}

.page-kicker {
  margin: 0 0 12px;
  color: var(--c-aqua-88);
  font-family: 'Omnes', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-title {
  margin: 0 0 20px;
  color: var(--c-white);
  font-family: 'Omnes', sans-serif;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  line-height: 1.05;
}

.page-copy {
  margin: 0 0 18px;
  max-width: 760px;
  color: var(--c-text-muted);
  font-family: 'Omnes', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
}

.page-copy-compact {
  margin-bottom: 0;
  font-size: 16px;
}

.page-section-title {
  margin: 0 0 10px;
  color: var(--c-white);
  font-family: 'Omnes', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.vision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.vision-card {
  padding: 22px;
  border-radius: 24px;
  border: 1px solid var(--c-border-ghost);
  background: var(--c-glass-bg);
}

.contact-page-card {
  max-width: 1120px;
}

.contact-page-copy {
  max-width: 100%;
  margin-bottom: 28px;
}

.secondary-cta {
  min-width: 188px;
  text-align: center;
}

/* =================== Responsive ================================= */
@media (max-width: 800px) {
  .hero-layout {
    justify-content: center !important;
    align-items: flex-end !important;
    padding: 0 24px calc(env(safe-area-inset-bottom, 0px) + 160px) !important;
  }

  .hero-content {
    width: 100% !important;
    max-width: 560px !important;
    text-align: center !important;
    align-items: center !important;
    margin-top: auto !important;
    justify-content: flex-end !important;
  }

  .vision-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-copy {
    font-size: 16px;
  }
}