/* effects.css — animated hero backdrop + scroll-reveal animations */

/* ─── ANIMATED HERO BACKDROP ──────────────────────────────────────── */
/* Three layered effects:
   1. Mesh gradient blobs that orbit on slow keyframes (CSS only, GPU-friendly)
   2. Mouse-reactive parallax (driven by --mx / --my CSS vars, set by JS)
   3. Subtle dot grid that drifts very slowly
   Sits in a container with overflow:hidden + position:relative.
*/

.hero-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  --mx: 0;
  --my: 0;
}

.hero-backdrop__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.hero-backdrop__blob--1 {
  width: 540px; height: 540px;
  background: radial-gradient(circle at center, #0a2540 0%, transparent 70%);
  top: -120px;
  left: -80px;
  animation: blobOrbit1 24s ease-in-out infinite;
}

.hero-backdrop__blob--2 {
  width: 460px; height: 460px;
  background: radial-gradient(circle at center, #1e40af 0%, transparent 70%);
  top: 30%;
  right: -100px;
  opacity: 0.40;
  animation: blobOrbit2 28s ease-in-out infinite;
}

.hero-backdrop__blob--3 {
  width: 600px; height: 600px;
  background: radial-gradient(circle at center, #0ea5e9 0%, transparent 70%);
  bottom: -180px;
  left: 30%;
  opacity: 0.30;
  animation: blobOrbit3 32s ease-in-out infinite;
}

.hero-backdrop__blob--4 {
  width: 380px; height: 380px;
  background: radial-gradient(circle at center, #6366f1 0%, transparent 70%);
  top: 5%;
  left: 50%;
  opacity: 0.25;
  animation: blobOrbit4 20s ease-in-out infinite;
}

@keyframes blobOrbit1 {
  0%, 100% { transform: translate3d(calc(var(--mx) * -16px), calc(var(--my) * -16px), 0) scale(1); }
  33%      { transform: translate3d(calc(var(--mx) * -16px + 120px), calc(var(--my) * -16px + 60px), 0) scale(1.15); }
  66%      { transform: translate3d(calc(var(--mx) * -16px + 60px), calc(var(--my) * -16px + 140px), 0) scale(0.95); }
}

@keyframes blobOrbit2 {
  0%, 100% { transform: translate3d(calc(var(--mx) * 18px), calc(var(--my) * 18px), 0) scale(1); }
  50%      { transform: translate3d(calc(var(--mx) * 18px - 140px), calc(var(--my) * 18px - 80px), 0) scale(1.2); }
}

@keyframes blobOrbit3 {
  0%, 100% { transform: translate3d(calc(var(--mx) * -12px), calc(var(--my) * -12px), 0) scale(1); }
  40%      { transform: translate3d(calc(var(--mx) * -12px + 80px), calc(var(--my) * -12px - 100px), 0) scale(1.1); }
  70%      { transform: translate3d(calc(var(--mx) * -12px - 100px), calc(var(--my) * -12px - 60px), 0) scale(0.9); }
}

@keyframes blobOrbit4 {
  0%, 100% { transform: translate3d(calc(var(--mx) * 22px), calc(var(--my) * 22px), 0) rotate(0deg); }
  50%      { transform: translate3d(calc(var(--mx) * 22px + 60px), calc(var(--my) * 22px - 40px), 0) rotate(180deg); }
}

/* Dot grid overlay that drifts diagonally */
.hero-backdrop__grid {
  position: absolute;
  inset: -100px;
  background-image: radial-gradient(circle, rgba(10, 37, 64, 0.18) 1px, transparent 1.5px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 90%);
  animation: gridDrift 50s linear infinite;
  opacity: 0.6;
}

@keyframes gridDrift {
  from { transform: translate(0, 0); }
  to   { transform: translate(28px, 28px); }
}

/* Soft inner glow / vignette to focus content area */
.hero-backdrop__veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(255,255,255,0.4), transparent 60%),
              linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.45) 100%);
  pointer-events: none;
}

/* Hero content has to sit above the backdrop */
.hero {
  position: relative;
  isolation: isolate;
}
.hero > .hero__grid { position: relative; z-index: 2; }

/* ─── SCROLL-REVEAL SYSTEM ────────────────────────────────────────── */
/* Default state: hidden. Add .reveal--in via IntersectionObserver to animate in. */

.reveal {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal--in { opacity: 1; transform: translate3d(0, 0, 0); }

.reveal--up   { transform: translate3d(0,  56px, 0); }
.reveal--up.reveal--in { transform: translate3d(0, 0, 0); }

.reveal--left { transform: translate3d(-48px, 0, 0); }
.reveal--left.reveal--in { transform: translate3d(0, 0, 0); }

.reveal--right { transform: translate3d(48px, 0, 0); }
.reveal--right.reveal--in { transform: translate3d(0, 0, 0); }

.reveal--scale { transform: scale(0.94) translateZ(0); opacity: 0; }
.reveal--scale.reveal--in { transform: scale(1) translateZ(0); opacity: 1; }

.reveal--blur { filter: blur(8px); opacity: 0; }
.reveal--blur.reveal--in { filter: blur(0); opacity: 1; }

/* Stagger children inside a container marked .reveal-stack */
.reveal-stack > * { transition-delay: 0s; }
.reveal-stack.reveal--in > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stack.reveal--in > *:nth-child(2) { transition-delay: 0.12s; }
.reveal-stack.reveal--in > *:nth-child(3) { transition-delay: 0.19s; }
.reveal-stack.reveal--in > *:nth-child(4) { transition-delay: 0.26s; }
.reveal-stack.reveal--in > *:nth-child(5) { transition-delay: 0.33s; }
.reveal-stack.reveal--in > *:nth-child(6) { transition-delay: 0.40s; }
.reveal-stack.reveal--in > *:nth-child(7) { transition-delay: 0.47s; }
.reveal-stack.reveal--in > *:nth-child(8) { transition-delay: 0.54s; }

/* Accessibility: respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--up, .reveal--left, .reveal--right, .reveal--scale, .reveal--blur,
  .reveal-stack > *,
  .hero-backdrop__blob, .hero-backdrop__grid {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

/* ─── PUB IMAGE LOGOS ─────────────────────────────────────────────── */
.pub-img {
  height: 28px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  display: inline-block;
  filter: grayscale(0%) opacity(1);
  transition: filter 0.2s ease;
}
.pub-img--xs { height: 18px; max-width: 90px; }
.pub-img--lg { height: 36px; max-width: 180px; }

/* In context where the surrounding card uses a hover state */
.logo-wall__item .pub-img { height: 32px; }
.pub-tile .pub-img { height: 26px; }
.case-card__pubs-list .pub-img { height: 22px; }