/* ============================================================
   Stratus Visual Enhancements
   Load AFTER styles.css — these layers build on top of base vars.

   Design language: Linear / Vercel / Railway polish.
   Dev-tool grade, never gaudy. Every effect is measured in
   single-digit opacity and filtered blur radii.
   ============================================================ */

/* ───────────────────────────────────────────────
   1. Noise texture overlay (CSS-only SVG filter)
   ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.028;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
  }
}


/* ───────────────────────────────────────────────
   2. Multi-layered gradient mesh background
   Replaces the simple radial gradient on html,body.
   ─────────────────────────────────────────────── */

html,
body {
  background:
    /* Layer 4 — subtle noise grain (very faint dot pattern) */
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.003) 1px, transparent 1px),
    /* Layer 3 — blue glow, bottom-left */
    radial-gradient(ellipse 900px 700px at 10% 90%, rgba(35, 131, 229, 0.02) 0%, transparent 100%),
    /* Layer 2 — accent blue glow, top-right */
    radial-gradient(ellipse 1000px 800px at 85% 5%, rgba(35, 131, 229, 0.03) 0%, transparent 100%),
    /* Layer 1 — deep dark base */
    linear-gradient(180deg, #050608 0%, #08090B 55%, #0D0F12 100%);
  background-attachment: fixed;
}

/* Re-apply the base variable values so html/body vars cascade correctly */
body {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}


/* ───────────────────────────────────────────────
   3. Section divider effects
   ─────────────────────────────────────────────── */

/* Thin glowing line between major sections that follow glass-card containers */
section[id] {
  position: relative;
}

section[id]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, 80%);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(35, 131, 229, 0.08) 20%,
    rgba(35, 131, 229, 0.16) 50%,
    rgba(35, 131, 229, 0.08) 80%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* The hero section should not have a divider above it */
#hero-canvas-area::before {
  display: none;
}

/* A softer fade variant for sections that follow lighter content */
section[id]::after {
  content: "";
  position: absolute;
  top: -80px;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(5, 6, 8, 0.3) 100%
  );
  pointer-events: none;
  z-index: 1;
}

#hero-canvas-area::after {
  display: none;
}


/* ───────────────────────────────────────────────
   4. Glass card improvements
   ─────────────────────────────────────────────── */

.glass-card {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(13, 15, 18, 0.45);
  border: 1px solid var(--border);
  border-radius: 1rem;
  /* Top-edge inner highlight — the "light catching the glass" effect */
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.2);
  transition:
    border-color 200ms ease,
    transform 200ms ease,
    box-shadow 200ms ease;
}

.glass-card:hover {
  border-color: var(--border-accent);
  transform: scale(1.01);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.2),
    /* Radial glow positioned behind the card — simulates a light behind frosted glass */
    0 0 60px -20px rgba(35, 131, 229, 0.12),
    0 0 100px -40px rgba(35, 131, 229, 0.04);
}


/* ───────────────────────────────────────────────
   5. Animated border gradients on featured cards
   ─────────────────────────────────────────────── */

/* Target the "How It Works" feature cards — the 4 glass-card articles inside #how-it-works */
#how-it-works .glass-card {
  position: relative;
  z-index: 0;
}

/* Pseudo-element border via conic-gradient that rotates */
#how-it-works .glass-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--border-angle, 0deg),
    transparent 40%,
    rgba(35, 131, 229, 0.30) 50%,
    rgba(35, 131, 229, 0.15) 60%,
    transparent 70%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
  pointer-events: none;
}

/* The border animation — gentle rotation on hover */
@media (prefers-reduced-motion: no-preference) {
  #how-it-works .glass-card::before {
    animation: border-rotate 8s linear infinite;
  }

  /* Pause animation off-hover for a subtle "live" feel */
  #how-it-works .glass-card:not(:hover)::before {
    animation-play-state: paused;
  }

  #how-it-works .glass-card:hover::before {
    animation-play-state: running;
  }
}

@property --border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes border-rotate {
  from {
    --border-angle: 0deg;
  }
  to {
    --border-angle: 360deg;
  }
}


/* ───────────────────────────────────────────────
   Reduced motion: strip all motion-dependent effects
   ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  body::after {
    display: none;
  }

  #how-it-works .glass-card::before {
    animation: none;
    background: none;
  }

  .glass-card {
    transition: none;
  }
}