/* ========== Base / Tokens ========== */
* { box-sizing: border-box; }
:root {
  --text: #ffffff;
  --text-dim: #cfcfe6;
  --neon: #39FF14;     /* neon green */
  --yellow: #FFD600;
  --purple-dk: #24003a;
  --purple-md: #531b9e;
  --purple-lg: #7a2bdb;
  --green-a:  #00ffa3;
  --green-b:  #00d37f;
  --green-c:  #39ff14;
}

html, body { height: 100%; }

body {
  margin: 0;
  font-family: 'Satoshi', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  color: var(--text);
  background: #000;               /* main black base */
  overflow: hidden;               /* no scroll for this hero page */
}

/* ========== Background layers ========== */
.bg-layer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: 0;
}
#liquid { opacity: 0.40; pointer-events: none; }
#stars  { opacity: 0.40; pointer-events: none; }

/* ========== Hero layout ========== */
.hero {
  position: relative;
  z-index: 1;                     /* above canvases */
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: clamp(24px, 5vw, 56px);
  padding: clamp(16px, 3vw, 32px);
  max-width: 1200px;
  margin: 0 auto;
}

.hero-copy h1 {
  font-weight: 800;
  font-size: clamp(24px, 4.2vw, 44px);
  line-height: 1.12;
  letter-spacing: 0.2px;
  margin: 0 0 28px;
  text-wrap: balance;
  text-shadow: 0 0 18px rgba(0,0,0,0.65); /* lift off bg */
}

/* ========== CTA (single source of truth) ========== */
/* Idle: moving purple↔green gradient + bright yellow text
   Hover: green gradient + black text */
.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;         /* ensures vertical centering */
  gap: 10px;

  font-family: 'Satoshi', sans-serif;
  font-weight: 700;
  letter-spacing: .5px;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: 9999px;
  text-decoration: none;

  /* 🌈 moving gradient background */
  background: linear-gradient(135deg, #1a002b 0%, #280042 50%, #004d26 100%);
  background-size: 300% 300%;
  animation: ctaFlow 9s ease-in-out infinite;

  /* animated gradient border */
  border: 2px solid transparent;
  background-clip: padding-box;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(270deg, #56FFAA, #AA5EFF, #56FFAA);
  background-size: 400% 400%;
  animation: borderFlow 6s linear infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* 📝 text + effects */
.cta {
  color: #d6a6ff; /* light purple start */
  text-shadow: 0 0 8px rgba(214,166,255,.45);
  transition: all .28s ease;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);

  /* 🔄 animate text color between purple <-> green */
  animation: textPulse 4s ease-in-out infinite;
}

/* Arrow follows text color */
.cta svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  fill: currentColor;
  transition: transform .28s ease;
  position: relative;
  top: 1px; 
}

/* Hover / tap */
.cta:hover,
.cta:active {
  background: linear-gradient(135deg, var(--green-a) 0%, var(--green-b) 50%, var(--green-c) 100%);
  background-size: 220% 220%;
  color: #003300;   /* very dark green text */                       
  box-shadow:
    0 12px 30px rgba(0,0,0,.42),
    0 0 22px rgba(57,255,20,.45);
}
.cta:hover svg,
.cta:active svg { transform: translateX(3px); }

/* Animations */
@keyframes ctaFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes borderFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Keyframes for text color pulse */
@keyframes textPulse {
  0%   { color: #d6a6ff; text-shadow: 0 0 8px rgba(214,166,255,.45); }
  50%  { color: #9effc7; text-shadow: 0 0 8px rgba(158,255,199,.45); }
  100% { color: #d6a6ff; text-shadow: 0 0 8px rgba(214,166,255,.45); }
}

/* Apply the color pulse to the label and arrow only */
.cta .label,
.cta svg {
  animation: textPulse 3.2s ease-in-out infinite;
}

/* On hover/tap: stop the pulse and force very dark green */
.cta:hover .label,
.cta:active .label,
.cta:hover svg,
.cta:active svg {
  animation: none !important;
  color: #003300 !important;  /* very dark green */
  fill:  #003300 !important;  /* arrow */
  text-shadow: none !important;
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  .cta { animation: none; }
  .cta::before { animation: none; }
}

/* ========== Visual mount ========== */
.hero-visual {
  width: 100%;
  height: min(62vh, 560px);
  display: grid;
  place-items: center;
}
#capsule-mount {
  width: min(90%, 520px);
  height: 100%;
}

/* ===== Hero polish (desktop default) ===== */
.hero {
  gap: clamp(32px, 6vw, 72px);
  min-height: 100vh;
}
.hero-copy { max-width: 580px; }
.hero-copy h1 {
  font-size: clamp(28px, 4.8vw, 52px);
  line-height: 1.25;
  letter-spacing: 0.1px;
  margin: 0 0 28px;
}
.cta { margin-top: 24px; }

/* ===== Mobile (≤900px) ===== */
@media (max-width: 900px) {
  body { overflow: auto; }

  .hero {
    min-height: 100dvh;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: clamp(12px, 2.4vh, 20px);              /* tighten capsule-to-text gap */
    padding: 16px 18px max(20px, env(safe-area-inset-bottom));
  }

  .hero-visual {
    order: -1;
    height: min(42dvh, 340px);                  /* a bit smaller */
    margin-bottom: 0;                           /* remove extra gap */
    display: grid;
    place-items: center;
    transform: translateY(-2vh);                /* gentle lift */
  }

  .hero-copy {
    max-width: 640px;
    margin-top: 0;
  }

  .hero-copy h1 {
    text-align: left;
    font-size: clamp(24px, 6vw, 32px);
    line-height: 1.18;
    margin: 0 0 14px;                           /* breathing room above CTA */
  }

  .cta {
    margin-top: 18px;                           /* consistent space below text */
  }
}

/* ===== Short-height phones (Fold outer / older) ===== */
@media (max-width: 900px) and (max-height: 680px) {
  .hero-visual { height: min(36dvh, 300px); transform: translateY(-3vh); }
  .hero-copy h1 { font-size: clamp(22px, 5vw, 28px); line-height: 1.14; }
}

/* ===== Tall phones (S25 Ultra, etc.) ===== */
@media (max-width: 900px) and (min-height: 860px) {
  .hero-visual { height: min(46dvh, 400px); transform: translateY(-1.5vh); }
  .hero { gap: clamp(14px, 2vh, 22px); }
}

/* ===== XL screens ===== */
@media (min-width: 1400px) {
  .hero { max-width: 1280px; }
  .hero-copy { max-width: 620px; }
}
  .hero-copy { max-width: 620px; }
}