/**
 * home.css — styles specific to the home page (index.html).
 *
 * Covers: the interactive globe, the services mega-dropdown + hero blur
 * overlay, and the templates marquee. Global rules live in base.css.
 */

/* Globe cursor is handled by src/js/globe-3d.js on the Three.js renderer */

.pulse-pin::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 9999px;
  background: rgba(234, 67, 37, 0.35);
  animation: pulse-ring 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.6);
    opacity: 0.8;
  }

  80%,
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* ---- Services dropdown overlay (full-width flat opaque white) ---- */
#servicesDropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  background-color: #ffffff !important;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 0 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
  padding: 0.75rem 0 !important;
  z-index: 50;
}

#servicesDropdown.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Blur overlay covering the entire viewport below the header */
#heroBlurOverlay {
  position: fixed;
  top: 58px; /* sits directly below the sticky header */
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(100vh - 58px);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(0, 0, 0, 0.2);
  transition: opacity 0.25s ease;
  opacity: 0;
  z-index: 20; /* behind the relative z-30 dropdown container */
  pointer-events: none;
  border-radius: 0 !important;
}

#heroBlurOverlay.active {
  opacity: 1;
}

/* ---- Templates marquee ---- */
.marquee {
  overflow: hidden;
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: 1.25rem;
  animation: marquee-scroll 40s linear infinite;
  will-change: transform;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

/* Second row scrolls the opposite way (left -> right) */
.marquee-track.reverse {
  animation-direction: reverse;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    /* Shift by exactly half (the duplicated set) for a seamless loop */
    transform: translateX(calc(-50% - 0.625rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-pin::before {
    animation: none;
  }

  .marquee-track {
    animation: none;
  }
}

/* ---- Domain search result cards ---- */

/* Card entrance: slides up and fades in */
@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.domain-result-card {
  animation: cardEnter 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Staggered pricing row entrance */
@keyframes rowSlide {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.domain-year-row {
  animation: rowSlide 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Keep old animate-fadeIn for any other uses */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn {
  animation: fadeIn 0.3s ease-out both;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin 0.7s linear infinite;
}

/* Services dropdown subpanel styling overrides */
#servicesDropdown .cat-panel > a {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  transition: background-color 0.2s ease, transform 0.2s ease;
  padding: 0.5rem 0.75rem !important; /* tight padding */
  gap: 0.75rem !important; /* tight gap between icon and text */
}

#servicesDropdown .cat-panel > a:hover {
  background-color: #f9fafb !important; /* light gray hover */
  transform: translateY(-1px);
}

/* Enlarge icons inside subpanels (desktop only fallback using sm query) */
#servicesDropdown .cat-panel > a img,
#servicesDropdown .cat-panel > a div.shrink-0 {
  width: 2.75rem !important; /* 44px on mobile screens */
  height: 2.75rem !important;
}

#servicesDropdown .cat-panel > a div.shrink-0 svg {
  width: 1.5rem !important; /* 24px on mobile screens */
  height: 1.5rem !important;
}

@media (min-width: 640px) {
  #servicesDropdown .cat-panel > a img,
  #servicesDropdown .cat-panel > a div.shrink-0 {
    width: 4rem !important; /* 64px (was 56px) on desktop screens */
    height: 4rem !important;
  }
  #servicesDropdown .cat-panel > a div.shrink-0 svg {
    width: 2rem !important; /* 32px on desktop screens */
    height: 2rem !important;
  }
}

/* Reduce gap between top categories and subpanels */
#servicesDropdown .mt-6 {
  margin-top: 0.75rem !important;
}

/* Tighter padding on inner dropdown content wrapper */
#servicesDropdown .max-w-6xl {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

/* Fixed min-height for services options panels to keep dropdown height constant */
#servicesDropdown .cat-panel {
  min-height: 320px; /* Stacked layout size on mobile screens (compact) */
  align-content: center; /* Center items vertically to balance empty space */
}

@media (min-width: 640px) {
  #servicesDropdown .cat-panel {
    min-height: 180px; /* 2x2 grid layout size on desktop screens */
    align-content: center; /* Center items vertically to balance empty space */
  }
}