/* ── 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;
}

/* The whole site is designed to look right at ~80% browser zoom —
   bake that in on desktop instead of relying on the user's zoom level.
   (Kept off on small screens, where sizes are already compact.) */
@media (min-width: 1024px) {
  html {
    zoom: 0.8;
  }
}

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.15), rgba(0, 0, 0, 0.40));
}

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

/* ── Fanned stack card ──
   Solid dark-grey panel with two lighter cards peeking out behind the
   top edge, like a fanned deck. Used on the landing-page "doors". */
.stack-card {
  position: relative;
  background-color: #1b1b1e;   /* dark grey, a touch lighter than the black bg */
  transition: background-color 0.25s ease, transform 0.25s ease;
}

/* the two peeking cards behind — only their rounded top edges show */
.stack-card::before,
.stack-card::after {
  content: "";
  position: absolute;
  height: 70px;
  border-radius: 1rem;         /* matches rounded-2xl */
}

/* nearer, medium-grey — second layer */
.stack-card::before {
  top: -12px;
  left: 18px;
  right: 18px;
  background-color: #2b2b30;
  z-index: -1;
}

/* farther, lighter grey — third layer, sits furthest back */
.stack-card::after {
  top: -24px;
  left: 36px;
  right: 36px;
  background-color: #3b3b42;
  z-index: -2;
}

/* No transform on hover — it would turn the card into a stacking context
   and push the negative-z layers in front of the card. Use shadow instead. */
.stack-card:hover {
  background-color: #232327;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

/* Fades content out towards the bottom — used for the second references row. */
.fade-bottom {
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 65%);
  mask-image: linear-gradient(to bottom, black 0%, transparent 65%);
  pointer-events: none;
}

/* 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; }
}