/* ============================================================
   Eagle Eye Media — custom interaction styles
   (everything Tailwind couldn't pre-compile because it depends
   on classes toggled at runtime by plain JavaScript)
   ============================================================ */

/* ---- Scroll reveal (replaces framer-motion whileInView) ---- */
.reveal {
  opacity: 0;
  transform: translateX(var(--rx, 0px)) translateY(var(--ry, 0px)) scale(var(--rs, 1));
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.in-view {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- Mobile menu panel ---- */
.mobile-menu {
  display: none;
  background: linear-gradient(135deg, oklch(0.13 0.05 265 / 0.97), oklch(0.1 0.038 265 / 0.94));
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.mobile-menu.open { display: block; }

#mobileMenuBtn.open .icon-menu { display: none; }
#mobileMenuBtn.open .icon-close { display: block !important; }

/* ---- Desktop services dropdown ---- */
.services-dropdown { display: none; z-index: 50; }
.services-nav-item.open .services-dropdown { display: block; }
.dropdown-panel {
  background: linear-gradient(135deg, oklch(0.13 0.05 265 / 0.97), oklch(0.1 0.038 265 / 0.95));
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}

/* ---- Header scrolled state ---- */
#siteHeaderBar {
  transition: margin 0.5s, padding 0.5s, border-radius 0.5s, box-shadow 0.5s, background 0.5s;
}

/* ---- Hero eagle hover / mobile-scroll swap ---- */
.eagle-img {
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.eagle-img-alt { opacity: 0; }
#heroEagleContainer.show-right .eagle-img:not(.eagle-img-alt) { opacity: 0; transform: scale(0.98); }
#heroEagleContainer.show-right .eagle-img-alt { opacity: 1; transform: scale(1); }
#heroEagleStage { transition: transform 0.2s ease-out; }