/*
 * Homepage cosmic journey
 * Original celestial-traveler styling for below-fold homepage sections.
 * All layers are decorative, pointer-safe, and reduced-motion aware.
 */

:root {
  --cosmic-ink: #071528;
  --cosmic-midnight: #0a2342;
  --cosmic-blue: #2563eb;
  --cosmic-teal: #14b8a6;
  --cosmic-gold: #f5c76b;
  --cosmic-paper: #fffdf7;
}

.cosmic-home main {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.cosmic-home #hero {
  isolation: isolate;
}

.cosmic-hero-bridge {
  position: absolute;
  z-index: 11;
  right: 0;
  bottom: -2px;
  left: 0;
  height: clamp(90px, 14vw, 180px);
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 42%, rgba(245, 199, 107, 0.95) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 27% 65%, rgba(255, 255, 255, 0.85) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 26%, rgba(20, 184, 166, 0.85) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 88% 56%, rgba(255, 255, 255, 0.8) 0 1px, transparent 2px),
    linear-gradient(180deg, transparent 0%, rgba(7, 21, 40, 0.38) 45%, #071528 100%);
}

.cosmic-hero-bridge::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -82%;
  width: min(1180px, 125vw);
  aspect-ratio: 2.8 / 1;
  border: 1px dashed rgba(245, 199, 107, 0.55);
  border-radius: 50%;
  transform: translateX(-50%) rotate(-3deg);
  box-shadow: 0 -28px 90px rgba(20, 184, 166, 0.12);
}

.cosmic-hero-bridge::after {
  content: "";
  position: absolute;
  right: 8%;
  bottom: 16%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cosmic-gold);
  box-shadow:
    -18vw -26px 0 -3px rgba(255, 255, 255, 0.9),
    -39vw 10px 0 -2px rgba(20, 184, 166, 0.9),
    -68vw -18px 0 -3px rgba(255, 255, 255, 0.85);
  animation: cosmic-star-breathe 4.8s ease-in-out infinite;
}

.cosmic-chapter {
  --cosmic-shift: 1;
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.cosmic-chapter > .container {
  position: relative;
  z-index: 3;
}

.cosmic-chapter:nth-of-type(odd) {
  --cosmic-shift: -1;
}

.cosmic-chapter::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: clamp(24px, 8vw, 110px);
  right: calc(-1 * clamp(70px, 9vw, 140px));
  width: clamp(150px, 20vw, 300px);
  aspect-ratio: 1;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.95) 0 2%, transparent 3%),
    radial-gradient(circle at 38% 36%, #b9f3e9 0%, #4eb7be 28%, #183e68 70%, #0a1929 100%);
  box-shadow:
    inset -24px -20px 48px rgba(3, 12, 27, 0.45),
    0 0 80px rgba(20, 184, 166, 0.13);
  opacity: 0.28;
  transform: translate3d(18px, 22px, 0) scale(0.88);
  transition: opacity 1s ease, transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cosmic-chapter:nth-of-type(even)::before {
  right: auto;
  left: calc(-1 * clamp(70px, 9vw, 140px));
  background:
    radial-gradient(circle at 35% 27%, rgba(255, 255, 255, 0.95) 0 2%, transparent 3%),
    radial-gradient(circle at 38% 36%, #ffe6a8 0%, #d69b5b 31%, #5a3554 72%, #171a35 100%);
}

.cosmic-chapter::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 3%;
  bottom: -5%;
  left: 50%;
  width: min(86vw, 1080px);
  pointer-events: none;
  border-left: 1px dashed rgba(37, 99, 235, 0.16);
  border-radius: 50%;
  transform: translateX(-50%) rotate(calc(var(--cosmic-shift) * 7deg));
  transform-origin: center;
}

.cosmic-chapter.is-cosmic-visible::before {
  opacity: 0.78;
  transform: translate3d(0, 0, 0) scale(1);
}

.cosmic-satellite,
.cosmic-stardust {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

.cosmic-satellite {
  top: clamp(34px, 10vw, 130px);
  left: clamp(16px, 5vw, 72px);
  width: clamp(38px, 4.5vw, 68px);
  aspect-ratio: 1;
  border: 1px solid rgba(245, 199, 107, 0.65);
  border-radius: 48% 52% 56% 44%;
  background: radial-gradient(circle at 32% 28%, #fff9da 0 8%, #f5c76b 10% 38%, #b96c54 72%, #5e3149 100%);
  box-shadow: 0 0 36px rgba(245, 199, 107, 0.25);
  opacity: 0;
  transform: translateY(28px) rotate(-18deg);
  transition: opacity 0.9s ease 0.16s, transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.16s;
}

.cosmic-chapter:nth-of-type(even) .cosmic-satellite {
  right: clamp(16px, 5vw, 72px);
  left: auto;
}

.cosmic-satellite::after {
  content: "";
  position: absolute;
  inset: -8px -17px;
  border: 1px solid rgba(245, 199, 107, 0.55);
  border-radius: 50%;
  transform: rotate(18deg);
}

.cosmic-stardust {
  top: 18%;
  right: 15%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  color: rgba(37, 99, 235, 0.58);
  background: currentColor;
  box-shadow:
    -7vw 8vh 0 -1px currentColor,
    4vw 15vh 0 -1px rgba(20, 184, 166, 0.72),
    -14vw 25vh 0 -1px rgba(245, 199, 107, 0.75),
    9vw 34vh 0 -1px currentColor;
  opacity: 0;
  transition: opacity 1.2s ease 0.35s;
}

.cosmic-chapter.is-cosmic-visible .cosmic-satellite {
  opacity: 0.88;
  transform: translateY(0) rotate(7deg);
}

.cosmic-chapter.is-cosmic-visible .cosmic-stardust {
  opacity: 1;
}

.cosmic-reveal {
  opacity: 0;
  transform: translate3d(0, 38px, 0) rotate(calc(var(--cosmic-card-turn, 0) * 1deg));
  transition:
    opacity 0.8s ease var(--cosmic-delay, 0ms),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1) var(--cosmic-delay, 0ms),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.is-cosmic-visible .cosmic-reveal {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0);
}

@media (hover: hover) and (pointer: fine) {
  .cosmic-chapter .marketing-pain-card:hover,
  .cosmic-chapter .marketing-audience-card:hover,
  .cosmic-chapter .value-card:hover,
  .cosmic-chapter .choose-path-card:hover,
  .cosmic-chapter .marketing-obstacle-card:hover,
  .cosmic-chapter .marketing-demo-card:hover,
  .cosmic-chapter .product-card:hover {
    border-color: rgba(20, 184, 166, 0.48);
    box-shadow: 0 24px 65px rgba(7, 21, 40, 0.16), 0 0 0 1px rgba(245, 199, 107, 0.14);
  }

  .cosmic-chapter.cosmic-active .cosmic-satellite {
    animation: cosmic-small-orbit 8s ease-in-out infinite alternate;
  }
}

@keyframes cosmic-small-orbit {
  0% { translate: 0 0; rotate: 0deg; }
  45% { translate: 10px -13px; rotate: 8deg; }
  100% { translate: -8px 8px; rotate: -5deg; }
}

@keyframes cosmic-star-breathe {
  0%, 100% { opacity: 0.48; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

@media (max-width: 768px) {
  .cosmic-chapter::after {
    left: 11%;
    width: 72vw;
    opacity: 0.7;
  }

  .cosmic-chapter::before {
    width: 170px;
    opacity: 0.2;
  }

  .cosmic-satellite {
    top: 24px;
    width: 38px;
    opacity: 0;
  }

  .cosmic-stardust {
    display: none;
  }

  .cosmic-reveal {
    transform: translate3d(0, 24px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cosmic-hero-bridge::after,
  .cosmic-chapter.cosmic-active .cosmic-satellite {
    animation: none !important;
  }

  .cosmic-reveal,
  .cosmic-chapter::before,
  .cosmic-satellite,
  .cosmic-stardust {
    opacity: 1;
    transform: none;
    transition: none !important;
  }
}