/* ═══════════════════════════════════════════════
   HighSite Radio — Custom Animations & Overrides
   (Layout handled by Tailwind CSS)
   ═══════════════════════════════════════════════ */

/* — Smooth scroll — */
html { scroll-behavior: smooth; }

/* — Geometric floating animation for services section — */
@keyframes geoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.geo-float { animation: geoFloat 4s ease-in-out infinite; }
.geo-float-delay { animation: geoFloat 4s ease-in-out 2s infinite; }

/* ─ Video Billboard: static, no parallax transform ─ */
.video-parallax {
  /* will-change and transform removed — parallax JS disabled for performance */
}
.video-parallax video {
  /* no GPU hints needed for static video */
}

/* — Parallax background section — */
.parallax-bg {
  will-change: transform;
}
@supports (background-attachment: fixed) {
  .parallax-bg .bg-fixed { background-attachment: fixed; }
}

/* — Navbar: transparent by default, red gradient on scroll — */
.navbar-gradient {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 40%, #991b1b 100%);
  box-shadow: 0 2px 20px rgba(220, 38, 38, 0.3);
}

/* — Navbar logo: CSS color invert to white — */
.navbar-logo {
  filter: brightness(0) invert(1) !important;
}

/* — Header: smooth red gradient on scroll using pseudo-element opacity — */
#siteHeader {
  background: transparent;
  position: fixed;
}
#siteHeader::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 40%, #991b1b 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -1;
  pointer-events: none;
}
#siteHeader.scrolled::before {
  opacity: 1;
}
#siteHeader.scrolled {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 30px rgba(153, 27, 27, 0.4);
  transition: box-shadow 0.5s ease, border-bottom 0.5s ease;
}

/* — Non-home pages: red navbar always — */
.navbar-gradient::before {
  opacity: 1 !important;
}

/* — Active nav link — */
.nav-link.active {
  color: #ffffff !important;
  background: rgba(255,255,255,0.2);
  border-radius: 0.5rem;
}

/* — Language dropdown open — */
#langSelector.open .lang-dropdown { display: block !important; }
#langSelector.open .lang-chevron { transform: rotate(180deg); }

/* — Services mega menu — */
#servicesMega.open .mega-dropdown { display: block !important; }
#servicesMega.open .mega-chevron { transform: rotate(180deg); }
.mega-dropdown-anim {
  animation: megaFadeIn 0.15s ease-out;
}
@keyframes megaFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.mega-item:hover { transform: translateY(-1px); }

/* — Mobile services accordion — */
#mobileServicesAccordion.open .mobile-services-panel { display: block !important; }
#mobileServicesAccordion.open .mobile-services-chevron { transform: rotate(180deg); }

/* — Language dropdown animation — */
.lang-dropdown-anim {
  transform-origin: top right;
  animation: langDropIn 0.2s ease-out;
}
@keyframes langDropIn {
  from { opacity: 0; transform: scale(0.95) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.lang-option { position: relative; }
.lang-option::before {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 0;
  height: 1px;
  background: #f1f5f9;
}
.lang-option:last-child::before { display: none; }

/* — Mobile menu open state — */
#mobileNav.open {
  opacity: 1 !important;
  pointer-events: auto !important;
}
/* Hide page scrollbar when mobile menu is open */
body.mobile-menu-open {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
  height: 100%;
}
.mobile-nav-item { animation: mobileNavSlide 0.3s ease-out both; }
.mobile-nav-item:nth-child(1) { animation-delay: 0.05s; }
.mobile-nav-item:nth-child(2) { animation-delay: 0.1s; }
.mobile-nav-item:nth-child(3) { animation-delay: 0.15s; }
.mobile-nav-item:nth-child(4) { animation-delay: 0.2s; }
.mobile-service-card { animation: mobileNavSlide 0.3s ease-out both; }
.mobile-service-card:nth-child(1) { animation-delay: 0.15s; }
.mobile-service-card:nth-child(2) { animation-delay: 0.18s; }
.mobile-service-card:nth-child(3) { animation-delay: 0.21s; }
.mobile-service-card:nth-child(4) { animation-delay: 0.24s; }
.mobile-service-card:nth-child(5) { animation-delay: 0.27s; }
.mobile-service-card:nth-child(6) { animation-delay: 0.3s; }
@keyframes mobileNavSlide {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

/* — Mobile-specific optimizations — */
@media (max-width: 639px) {
  /* Hide heavy geometric SVG elements on small screens for performance */
  #services-section > .absolute svg,
  #services-section > .absolute .geo-float,
  #services-section > .absolute .geo-float-delay {
    display: none;
  }
  /* Keep subtle glows and lines but reduce them */
  #services-section > .absolute > div[class*="blur-3xl"] {
    opacity: 0.3;
  }
  /* Tighter section spacing on mobile */
  .space-y-8 > * + * { margin-top: 1.25rem; }
  /* Services CTA button */
  #services-section .text-center.mt-14 { margin-top: 2rem; }
}

/* — Equalizer animation — */
.equalizer.active { opacity: 1 !important; }
.equalizer.active + i { opacity: 0; }
.equalizer.active span {
  animation: equalizerBounce 0.6s ease-in-out infinite alternate;
}
.equalizer.active span:nth-child(1) { animation-delay: 0s; height: 40%; }
.equalizer.active span:nth-child(2) { animation-delay: 0.1s; height: 65%; }
.equalizer.active span:nth-child(3) { animation-delay: 0.2s; height: 85%; }
.equalizer.active span:nth-child(4) { animation-delay: 0.15s; height: 50%; }
.equalizer.active span:nth-child(5) { animation-delay: 0.05s; height: 70%; }

@keyframes equalizerBounce {
  0% { height: 15%; }
  100% { height: 90%; }
}

/* ═══ Mobile Floating Mini Player ═══ */
#miniPlayer.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#miniPlayer {
  transform: translateY(20px);
}

/* Button shape: collapsed = circle, expanded = pill */
.mini-player-btn {
  border-radius: 9999px;
  padding: 3px;
  cursor: pointer;
}
.mini-player-btn:active {
  transform: scale(0.95);
}

/* Expanded state */
#miniPlayerInner.expanded .mini-player-btn {
  border-radius: 9999px;
}
#miniPlayerInner.expanded .mini-player-info {
  width: 120px !important;
  opacity: 1 !important;
}

/* Mini equalizer animation */
.mini-eq.active { opacity: 1 !important; }
.mini-eq.active + i { opacity: 0; }
.mini-eq.active span {
  animation: miniEqBounce 0.5s ease-in-out infinite alternate;
}
.mini-eq.active span:nth-child(1) { animation-delay: 0s; height: 35%; }
.mini-eq.active span:nth-child(2) { animation-delay: 0.12s; height: 60%; }
.mini-eq.active span:nth-child(3) { animation-delay: 0.06s; height: 80%; }
.mini-eq.active span:nth-child(4) { animation-delay: 0.18s; height: 45%; }
@keyframes miniEqBounce {
  0% { height: 15%; }
  100% { height: 85%; }
}

/* Pulse ring for playing state */
#miniPlayerPulse.active {
  opacity: 1;
}
@keyframes animate-ping-slow {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}
.animate-ping-slow {
  animation: animate-ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Reduce initial render work for below-the-fold sections. */
@supports (content-visibility: auto) {
  main > section.reveal {
    content-visibility: auto;
    contain-intrinsic-size: 900px;
  }
}

/* — Wave path animation — */
.player-wave.active .wave-path {
  animation: waveDance 2s ease-in-out infinite;
}
@keyframes waveDance {
  0%, 100% {
    d: path("M0,20 Q10,10 20,20 T40,20 T60,20 T80,20 T100,20 T120,20 T140,20 T160,20 T180,20 T200,20");
  }
  25% {
    d: path("M0,20 Q10,5 20,15 T40,25 T60,10 T80,30 T100,15 T120,25 T140,10 T160,20 T180,15 T200,20");
  }
  50% {
    d: path("M0,20 Q10,25 20,30 T40,10 T60,25 T80,15 T100,30 T120,10 T140,25 T160,15 T180,25 T200,20");
  }
  75% {
    d: path("M0,20 Q10,15 20,10 T40,30 T60,15 T80,25 T100,10 T120,30 T140,15 T160,25 T180,20 T200,20");
  }
}

/* — Hero ping animations — */
@keyframes ping-slow {
  0% { transform: scale(0.8); opacity: 0.4; }
  70% { transform: scale(1.2); opacity: 0; }
  100% { transform: scale(1.2); opacity: 0; }
}
@keyframes ping-slower {
  0% { transform: scale(0.7); opacity: 0.3; }
  70% { transform: scale(1.15); opacity: 0; }
  100% { transform: scale(1.15); opacity: 0; }
}
.animate-ping-slow { animation: ping-slow 3s cubic-bezier(0, 0, 0.2, 1) infinite; }
.animate-ping-slower { animation: ping-slower 4s cubic-bezier(0, 0, 0.2, 1) infinite 0.5s; }

/* — Pulse subtle (live badge) — */
@keyframes pulse-subtle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.animate-pulse-subtle { animation: pulse-subtle 2s ease-in-out infinite; }

/* — Scroll reveal animation — */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.22s ease-out, transform 0.22s ease-out;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

/* — Selection color — */
::selection {
  background: rgba(220, 38, 38, 0.2);
  color: #1e293b;
}

/* — Scrollbar (Webkit) — */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* — RTL adjustments — */
[dir="rtl"] .gap-2 { direction: rtl; }

/* ═══════════════════════════════════════
   Billboard Banner Slider (Boxed Card)
   ═══════════════════════════════════════ */

/* Billboard box container */
.billboard-box {
  background: rgba(15,23,42,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.billboard-box:hover {
  border-color: rgba(220,38,38,0.4);
  box-shadow: 0 25px 60px rgba(0,0,0,0.6), 0 0 40px rgba(220,38,38,0.12);
}

/* Billboard slide transitions */
.billboard-slide {
  /* will-change removed — promoted compositor layers for ALL slides was wasteful */
  transition: opacity 0.7s ease,
              transform 0.7s ease;
}
.billboard-slide[data-state="exit"] {
  opacity: 0 !important;
  transform: scale(1.04);
  pointer-events: none;
}
.billboard-slide[data-state="enter"] {
  opacity: 1 !important;
  transform: scale(1);
  z-index: 2;
}
.billboard-slide[data-state="hidden"] {
  opacity: 0 !important;
  transform: scale(0.97);
  pointer-events: none;
}
.billboard-slide[data-state="active"] {
  opacity: 1 !important;
  transform: scale(1);
  z-index: 2;
}

/* Keep full banner visible (no text cropping) */
.billboard-slide,
.billboard-slide > a {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #eaf3ff 0%, #dbeafe 100%);
}

.billboard-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Billboard particles — disabled (removed for performance) */
.billboard-particles { display: none; }

/* Dot indicators */
.billboard-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  border: 2px solid rgba(255,255,255,0.4);
  cursor: pointer;
  transition: all 0.3s ease;
}
.billboard-dot.active {
  width: 28px;
  border-radius: 10px;
  background: #dc2626;
  border-color: #dc2626;
  box-shadow: 0 0 10px rgba(220,38,38,0.5);
}
.billboard-dot:hover:not(.active) {
  background: rgba(255,255,255,0.5);
  border-color: rgba(255,255,255,0.6);
}

/* ═══════════════════════════════════════
   Professional Effects
   ═══════════════════════════════════════ */

/* Hero fade-in entrance animation */
.hero-fade-in {
  opacity: 0;
  transform: translateY(30px);
  animation: heroFadeIn 0.8s ease forwards;
}
@keyframes heroFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Hero floating particles — disabled (removed for performance)
   15 infinitely-animated elements caused constant GPU work. */
.hero-floating-particles { display: none; }

/* Back to Top button */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 50;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  pointer-events: none;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.5);
}

/* Page loading animation */
.page-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease;
}
.page-loading.loaded {
  opacity: 0;
  pointer-events: none;
}
.page-loading .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(220,38,38,0.2);
  border-top-color: #dc2626;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Glassmorphism card hover effect */
.glass-card {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  transition: all 0.3s ease;
}
.glass-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(220,38,38,0.3);
  box-shadow: 0 8px 32px rgba(220,38,38,0.1);
}

/* Contact form styles */
.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  color: #1e293b;
  transition: all 0.2s ease;
}
.form-input:focus {
  outline: none;
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.1);
}
.form-input::placeholder {
  color: #94a3b8;
}

/* Smooth page transition */
main {
  animation: pageIn 0.3s ease;
}
@keyframes pageIn {
  from { opacity: 0.8; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}