/* ── Launch Labs — shared styles ──
   Tailwind (Play CDN) handles layout/utilities.
   This file holds the brand gradient + ambient glow only. */

:root {
  --brand-blue: #007DFF;
  --brand-magenta: #DD00FF;
  --brand-violet: rgba(100, 40, 255, 0.18);
}

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ambient brand glow — sits behind everything, very subtle. */
.ambient {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 40% at 50% 30%, rgba(100, 40, 255, 0.12) 0%, transparent 100%),
    radial-gradient(ellipse 30% 25% at 30% 25%, rgba(0, 125, 255, 0.08) 0%, transparent 100%),
    radial-gradient(ellipse 30% 25% at 70% 30%, rgba(221, 0, 255, 0.08) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* The hero "space" box.
   Drop a real image in by setting:  background-image: url('space.jpg');
   on the .hero-box element (it layers under the gradient). */
.hero-box {
  background-color: #050505;
  background-size: cover;
  background-position: center;
  position: relative;
  isolation: isolate;
}

.hero-box::before {
  /* Slight brand-gradient tint + dark vignette, layered over the NASA photo
     (or over the #050505 base on boxes without an image). */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(100, 40, 255, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 15% 90%, rgba(0, 125, 255, 0.20) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 85% 80%, rgba(221, 0, 255, 0.18) 0%, transparent 70%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.55));
}

/* Tiled outline-icon watermark — sits behind the Launchies hero only. */
.icon-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('launch_icon_outline.svg');
  background-repeat: repeat;
  background-position: center;
  background-size: 160px;
  opacity: 0.045;
}

/* Animated brand gradient line — used as a thin accent. */
.gradient-line {
  background: linear-gradient(
    90deg,
    var(--brand-blue),
    var(--brand-magenta),
    var(--brand-blue),
    var(--brand-magenta),
    var(--brand-blue)
  );
  background-size: 300% 100%;
  animation: gradientScroll 6s linear infinite;
}

/* Gradient text accent (used sparingly). */
.gradient-text {
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-magenta));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

@keyframes gradientScroll {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-line { animation: none; }
  html { scroll-behavior: auto; }
}