/* ==========================================================================
   GoBikeFit — depth layer
   Grain, elevation, ambient glow, hairlines, scroll reveal.
   Loads *after* styles.css and overrides .card — keep that order in the head.
   ========================================================================== */

:root {
  /* Only this layer's tokens; the base set lives in styles.css. */
  --surface-hover: #101823;
  --hairline: rgba(255, 255, 255, 0.06);
  --hairline-strong: rgba(255, 255, 255, 0.11);
}

/* --------------------------------------------------------------------------
   1. Film grain — z-index 9000 pairs with .site-header at 9500.
   -------------------------------------------------------------------------- */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. Elevation
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

@media (hover: hover) {
  .card:hover {
    background: var(--surface-hover);
    border-color: var(--hairline-strong);
    transform: translateY(-2px);
  }

  /* Ties with .card:hover on specificity; this file loads later. */
  .pricing-card.featured:hover {
    border-color: limegreen;
  }
}

/* --------------------------------------------------------------------------
   3. Ambient glow — removed. Section-bounded gradients left a hard seam at the
   hero handoff and under pricing. Keep the page background flat.
   -------------------------------------------------------------------------- */

.section {
  position: relative;
  /* Kept by request; inert since the glow was removed. */
  isolation: isolate;
}

/* --------------------------------------------------------------------------
   4. Hairline divider. Utility — not currently used on any page.
   -------------------------------------------------------------------------- */

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--hairline-strong) 50%,
    transparent
  );
}

/* --------------------------------------------------------------------------
   5. Scroll reveal — staggered by an inline --i index. Gated on .js so a
   script that fails to load can never leave a page blank.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
  }

  /* Animation, not transition: a transition here outspecifies .card's own and
     would reset it. `backwards` fills the delay, then releases transform. */
  .js .reveal.is-visible {
    opacity: 1;
    animation: reveal-rise 0.6s ease backwards;
    animation-delay: calc(var(--i, 0) * 60ms);
  }
}

@keyframes reveal-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}