/* ── Techy effects toolkit ──────────────────────────────────────────────────
   Shared, opt-in motion/ambient-background system for public marketing
   pages. Include this stylesheet + techy-effects.js on a page, then:
     - Drop <div class="ambient-grid"></div> + up to 3 <div class="ambient-orb
       ambient-orb--1/2/3"></div> inside a position:relative dark section
       (e.g. a hero) for the animated grid + floating glow look.
     - Add class="reveal" to any element that should fade/slide up into view
       as the user scrolls to it (techy-effects.js activates these via
       IntersectionObserver). Add reveal-delay-1 / -2 / -3 for staggering.
     - Add class="hover-lift" to cards/buttons for a subtle lift + shadow on
       hover.
     - Add class="glow-pulse" to a CTA for an ambient pulsing glow.
   Respects prefers-reduced-motion throughout.
────────────────────────────────────────────────────────────────────────── */

.ambient-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(217,207,184,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217,207,184,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000 0%, transparent 75%);
  animation: techy-grid-drift 42s linear infinite;
}
@keyframes techy-grid-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 56px 112px, 56px 112px; }
}

.ambient-orb {
  position: absolute; border-radius: 50%; filter: blur(70px);
  pointer-events: none; z-index: 0; opacity: .45;
}
.ambient-orb--1 {
  width: 480px; height: 480px; top: -140px; left: -100px;
  background: radial-gradient(circle, rgba(184,46,0,.5), transparent 70%);
  animation: techy-float-a 24s ease-in-out infinite;
}
.ambient-orb--2 {
  width: 440px; height: 440px; bottom: -160px; right: -100px;
  background: radial-gradient(circle, rgba(15,91,91,.5), transparent 70%);
  animation: techy-float-b 28s ease-in-out infinite;
}
.ambient-orb--3 {
  width: 320px; height: 320px; top: 20%; right: 10%;
  background: radial-gradient(circle, rgba(15,91,91,.28), transparent 70%);
  animation: techy-float-a 32s ease-in-out infinite reverse;
}
@keyframes techy-float-a {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(36px,-26px) scale(1.07); }
}
@keyframes techy-float-b {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(-28px,22px) scale(1.05); }
}

/* ── Scroll reveal ── */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1.is-visible { transition-delay: .08s; }
.reveal-delay-2.is-visible { transition-delay: .16s; }
.reveal-delay-3.is-visible { transition-delay: .24s; }

/* ── Hover lift ── */
.hover-lift { transition: transform .22s cubic-bezier(.16,.8,.3,1), box-shadow .22s ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(26,20,16,.14); }

/* ── Glow pulse (for CTAs) ── */
.glow-pulse { position: relative; }
.glow-pulse::after {
  content: ''; position: absolute; inset: -3px; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(184,46,0,.45);
  animation: techy-glow-pulse 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes techy-glow-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(184,46,0,.4); }
  70%  { box-shadow: 0 0 0 14px rgba(184,46,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(184,46,0,0); }
}

/* ── Animated eyebrow cursor (matches concierge page's kicker style) ── */
.techy-cursor {
  display: inline-block; width: 7px; height: 12px; background: currentColor;
  margin-left: 2px; animation: techy-blink 1.1s step-end infinite; vertical-align: -1px;
}
@keyframes techy-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ambient-grid, .ambient-orb, .glow-pulse::after, .techy-cursor { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}