/* Shared scroll-reveal + tilt support styles, applied site-wide via interactions.js. */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.tilt-target {
  transition: transform .15s ease-out;
  will-change: transform;
}

/* ── Ambient glow orbs (injected by interactions.js) ──
   Soft blurred color blobs for background depth. Fallback colors match the
   site's default green/blue/amber palette for pages whose own :root uses
   different custom-property names. */
.glow-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  opacity: .22;
  animation: orbDrift 20s ease-in-out infinite alternate;
}
.glow-orb-a { width: 440px; height: 440px; top: -120px; left: -120px; background: var(--green, #3dffa0); }
.glow-orb-b { width: 380px; height: 380px; top: 35%; right: -140px; background: var(--blue, #3d9fff); animation-delay: -7s; }
.glow-orb-c { width: 340px; height: 340px; bottom: -120px; left: 25%; background: var(--amber, #ffbb3d); animation-delay: -13s; }
@keyframes orbDrift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(50px, 36px) scale(1.15); }
}

/* ── Glassmorphism depth for card-like elements ──
   Overrides each page's opaque card background with a frosted, semi-
   transparent one so the glow orbs read through. Relies on load order:
   this stylesheet is linked after each page's own <style> block, so equal-
   specificity rules here win the cascade without editing every page file. */
.post-card, .talk-card, .project-card, .service-card,
.value-card, .option-card, .product-card, .link-card,
.stat-card, .price-card {
  background: rgba(17, 21, 28, .6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative;
  z-index: 1;
}
.post-card:hover, .talk-card:hover, .project-card:hover, .service-card:hover,
.value-card:hover, .option-card:hover, .product-card:hover, .link-card:hover,
.stat-card:hover, .price-card:hover {
  box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 24px rgba(61,255,160,.14);
}

/* ── Neon glow on large accent headings (not small inline labels) ── */
h1 .accent, h2 .accent, .hero-title .accent {
  text-shadow: 0 0 24px rgba(61,255,160,.45);
}

/* ── Gradient + glow on primary buttons ── */
.btn-primary {
  background: linear-gradient(135deg, var(--green, #3dffa0), var(--blue, #3d9fff));
  color: var(--bg, #0a0c0f);
  box-shadow: 0 0 24px rgba(61,255,160,.35);
}
.btn-primary:hover {
  box-shadow: 0 0 40px rgba(61,255,160,.55);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .tilt-target { transition: none; }
  .glow-orb { animation: none; }
}