/* Shared motion layer: subtle by default, calm on touch devices, disabled by reduced-motion. */
:root {
  --motion-accent: rgba(0, 168, 107, 0.18);
  --stack-y: 0px;
  --stack-scale: 1;
}

/* A soft, responsive glow makes hero areas feel alive without competing with copy. */
.hero,
.page-hero,
.legal-hero {
  isolation: isolate;
}

.hero::before,
.page-hero::before,
.legal-hero::before {
  content: '';
  position: absolute;
  width: clamp(220px, 30vw, 460px);
  aspect-ratio: 1;
  top: 13%;
  right: 5%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(72, 214, 157, 0.2), rgba(72, 214, 157, 0) 68%);
  filter: blur(8px);
  opacity: 0.72;
  pointer-events: none;
  transform: translate3d(calc(var(--hero-x, 0) * 1px), calc(var(--hero-y, 0) * 1px), 0) scale(1);
  transition: transform 0.7s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
  z-index: -1;
  animation: motionFloat 8s ease-in-out infinite;
}

.hero::after,
.page-hero::after,
.legal-hero::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  top: 27%;
  left: 13%;
  border-radius: 50%;
  background: #66dca8;
  box-shadow: 0 0 0 9px rgba(102, 220, 168, .1), 0 0 36px rgba(0, 168, 107, .42);
  opacity: .85;
  pointer-events: none;
  transform: translate3d(calc(var(--hero-x, 0) * -0.6px), calc(var(--hero-y, 0) * -0.6px), 0);
  animation: motionPulse 3.4s ease-in-out infinite;
  z-index: -1;
}

.motion-stack {
  perspective: 1200px;
}

.motion-stack > .service-card,
.motion-stack > .blog-card,
.motion-stack > .service-page-panel,
.motion-stack > .legal-section,
.motion-stack > .rate-card,
.motion-stack > .intro-card,
.motion-stack > .contact-card,
.motion-stack > .callout {
  position: relative;
  z-index: var(--stack-index, 1);
  transform: perspective(1100px) translate3d(0, var(--stack-y, 0px), 0) rotateZ(var(--stack-rotate, 0deg)) scale(var(--stack-scale, 1));
  transform-origin: center top;
  transition: transform .18s ease-out, box-shadow .3s ease, opacity .3s ease;
  will-change: transform;
}

.motion-stack > .service-card:hover,
.motion-stack > .blog-card:hover,
.motion-stack > .service-page-panel:hover,
.motion-stack > .legal-section:hover,
.motion-stack > .rate-card:hover,
.motion-stack > .intro-card:hover,
.motion-stack > .contact-card:hover,
.motion-stack > .callout:hover {
  transform: perspective(1100px) translate3d(0, calc(var(--stack-y, 0px) - 5px), 0) rotateZ(var(--stack-rotate, 0deg)) scale(var(--stack-scale, 1.01));
}

@keyframes motionFloat {
  0%, 100% { margin-top: 0; }
  50% { margin-top: 16px; }
}

@keyframes motionPulse {
  0%, 100% { opacity: .58; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1.12); }
}

@media (max-width: 768px) {
  .hero::before,
  .page-hero::before,
  .legal-hero::before { right: -18%; top: 9%; opacity: .55; }
  .hero::after,
  .page-hero::after,
  .legal-hero::after { left: 8%; top: 20%; }
  .motion-stack > .service-card,
  .motion-stack > .blog-card,
  .motion-stack > .service-page-panel,
  .motion-stack > .legal-section,
  .motion-stack > .rate-card,
  .motion-stack > .intro-card,
  .motion-stack > .contact-card,
  .motion-stack > .callout { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after,
  .page-hero::before,
  .page-hero::after,
  .legal-hero::before,
  .legal-hero::after { animation: none; transform: none; }
  .motion-stack > * { transform: none !important; transition: none !important; }
}