/* -------------------------------------------------------------
   PHOENIX LOCAL MARKETING - ANIMATIONS STYLESHEET
   ------------------------------------------------------------- */

/* Custom transition utility with agency cubic-bezier curve */
.transition-premium {
  transition: all var(--duration-custom) var(--ease-custom);
}

/* 1. Scroll-Driven Reveal System (Intersection Observer hook) */
.reveal-up {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(4px);
  transition: opacity 1000ms var(--ease-custom), transform 1000ms var(--ease-custom), filter 1000ms var(--ease-custom);
}

.reveal-up.revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.reveal-stagger-parent > * {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(4px);
  transition: opacity 800ms var(--ease-custom), transform 800ms var(--ease-custom), filter 800ms var(--ease-custom);
}

/* Delayed reveals for child lists */
.reveal-stagger-parent.revealed > *:nth-child(1) { transition-delay: 100ms; opacity: 1; transform: translateY(0); filter: blur(0); }
.reveal-stagger-parent.revealed > *:nth-child(2) { transition-delay: 200ms; opacity: 1; transform: translateY(0); filter: blur(0); }
.reveal-stagger-parent.revealed > *:nth-child(3) { transition-delay: 300ms; opacity: 1; transform: translateY(0); filter: blur(0); }
.reveal-stagger-parent.revealed > *:nth-child(4) { transition-delay: 400ms; opacity: 1; transform: translateY(0); filter: blur(0); }
.reveal-stagger-parent.revealed > *:nth-child(5) { transition-delay: 500ms; opacity: 1; transform: translateY(0); filter: blur(0); }
.reveal-stagger-parent.revealed > *:nth-child(6) { transition-delay: 600ms; opacity: 1; transform: translateY(0); filter: blur(0); }

/* 2. Radial Ambient glowing mesh orbs */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.15;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 0;
  will-change: transform;
}

.glow-primary {
  background: var(--primary);
  width: 500px;
  height: 500px;
}

.glow-secondary {
  background: var(--secondary);
  width: 400px;
  height: 400px;
}

.glow-accent {
  background: var(--accent);
  width: 300px;
  height: 300px;
}

/* 3. Noise Overlay for Ethereal/Luxury Texture */
.noise-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.02;
  pointer-events: none;
  z-index: 99; /* below sticky nav but above content */
}

/* 4. Infinite Floating animation for abstract items */
@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

.float-slow {
  animation: float 8s ease-in-out infinite;
}

/* 5. Custom Hamburger Morphing Animations */
.hamburger-line {
  transition: transform 300ms var(--ease-custom), opacity 300ms var(--ease-custom), background-color 300ms var(--ease-custom);
}

.menu-open .line-1 {
  transform: translateY(6px) rotate(45deg);
}

.menu-open .line-2 {
  opacity: 0;
}

.menu-open .line-3 {
  transform: translateY(-6px) rotate(-45deg);
}