/* Global Font */
body {
  font-family: 'Montserrat', sans-serif;
  background-color: #000000;
}

/* Headers use Kulim Park */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Kulim Park', 'Lato', 'Montserrat', sans-serif;
}

/* Mission Section Styles - Clip path only (other styles converted to Tailwind) */
.mission-section-clip {
  clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 100%);
}

@media (max-width: 768px) {
  .mission-section-clip {
    clip-path: polygon(0 2%, 100% 0, 100% 100%, 0 100%);
  }
}

/* Page Header Clip Path */
/* .page-header-clip {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

@media (max-width: 768px) {
  .page-header-clip {
    clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
  }
} */

/* Conference Map Styles */

.hotspot {
  position: absolute;
  z-index: 2;
}

/* Radar ping effect */
.radar-ping {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(220, 38, 38, 0.4);
  animation: radar-pulse 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Green variant for scheduled conferences */
.radar-ping-green {
  background-color: rgba(22, 163, 74, 0.4);
}

@keyframes radar-pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.hover\:animate-none:hover {
  animation: none;
}

/* Stop radar animation on hover */
.group:hover .radar-ping {
  animation: none;
  opacity: 0;
}

/* Smooth popup transitions */
.hotspot-popup {
  --popup-offset: 0%;
  --popup-hidden-y: -10px;
  --popup-visible-y: 0px;
  opacity: 0;
  left: 50%;
  transform: translate(calc(-50% - var(--popup-offset, 0%)), var(--popup-hidden-y));
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  pointer-events: none;
}

.hotspot-popup-left {
  --popup-hidden-x: 10px;
  --popup-visible-x: 0px;
  left: auto;
  transform: translate(var(--popup-hidden-x), -50%);
}

.group:hover .hotspot-popup {
  opacity: 1;
  transform: translate(calc(-50% - var(--popup-offset, 0%)), var(--popup-visible-y));
}

.group:hover .hotspot-popup-left {
  opacity: 1;
  transform: translate(var(--popup-visible-x), -50%);
}

.hotspot-popup__arrow {
  left: calc(50% + var(--popup-offset, 0%));
  transform: translateX(-50%);
}

/* Disable popups on mobile */
@media (max-width: 768px) {
  .hotspot-popup {
    display: none !important;
  }

  /* Make radar animations smaller on mobile but more pronounced and faster */
  .radar-ping {
    width: 18px;
    height: 18px;
    animation-duration: 1.0s;
  }

  @keyframes radar-pulse {
    0% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) scale(2.5);
      opacity: 0;
    }
  }
}

/* New Zealand Design Elements */

/* Koru pattern border */
.koru-border-accent {
  border-image: linear-gradient(135deg,
    transparent 0%,
    rgba(21, 128, 61, 0.1) 25%,
    rgba(21, 128, 61, 0.2) 50%,
    rgba(21, 128, 61, 0.1) 75%,
    transparent 100%) 1;
}

/* Subtle green accent inspired by NZ jade (pounamu) */
.pounamu-accent {
  color: #10b981;
}

.pounamu-bg-subtle {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.02) 0%, rgba(5, 150, 105, 0.03) 100%);
}

/* Faculty Card Target Highlight */
/* When a faculty card is targeted via anchor link, highlight it briefly */
div[id]:target {
  animation: faculty-highlight 2.5s ease-in-out;
  scroll-margin-top: 100px; /* Offset for fixed headers if any */
}

@keyframes faculty-highlight {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transform: scale(1);
  }
  10% {
    box-shadow: 0 0 0 10px rgba(220, 38, 38, 0.4), 0 20px 25px -5px rgba(220, 38, 38, 0.3);
    transform: scale(1.02);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(220, 38, 38, 0.2), 0 20px 25px -5px rgba(220, 38, 38, 0.15);
  }
  100% {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: scale(1);
  }
}

/* === Scroll-triggered Loading Animations === */

/* Initial state - elements waiting to animate */
[data-animate] {
  opacity: 0;
}

[data-animate="fade-up"] {
  transform: translateY(20px);
}

[data-animate="scale-in"] {
  transform: scale(0.95);
}

/* Make targeted elements (via anchor links) immediately visible */
[data-animate]:target {
  opacity: 1 !important;
}

/* Reset transform for targeted fade-up and scale-in elements */
[data-animate="fade-up"]:target,
[data-animate="scale-in"]:target {
  transform: none !important;
}

/* Animation classes */
.animate-fade-up {
  animation: fadeUp 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.animate-fade-in {
  animation: fadeIn 1.2s ease-out forwards;
}

.animate-scale-in {
  animation: scaleIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Stagger delays for grouped elements */
.stagger-1 { animation-delay: 100ms; }
.stagger-2 { animation-delay: 200ms; }
.stagger-3 { animation-delay: 300ms; }
.stagger-4 { animation-delay: 400ms; }
.stagger-5 { animation-delay: 500ms; }
.stagger-6 { animation-delay: 600ms; }

/* Keyframes */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Accessibility - Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
  }

  .animate-fade-up,
  .animate-fade-in,
  .animate-scale-in {
    animation: none !important;
  }

  .stagger-1, .stagger-2, .stagger-3,
  .stagger-4, .stagger-5, .stagger-6 {
    animation-delay: 0ms !important;
  }
}

/* Mobile Responsive Overrides */
@media (max-width: 640px) {
  /* Reduce excessive horizontal padding on mobile */
  .px-16, .px-20, .px-24 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Reduce header font sizes on mobile */
  h1 {
    font-size: 1.875rem !important; /* 30px */
    line-height: 2.25rem !important;
  }

  h2 {
    font-size: 1.5rem !important; /* 24px */
    line-height: 2rem !important;
  }

  h3 {
    font-size: 1.25rem !important; /* 20px */
    line-height: 1.75rem !important;
  }

  h4 {
    font-size: 1.125rem !important; /* 18px */
    line-height: 1.75rem !important;
  }

  h5, h6 {
    font-size: 1rem !important; /* 16px */
    line-height: 1.5rem !important;
  }

  /* Reduce paragraph text size slightly on mobile */
  p {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.5rem !important;
  }

  /* Adjust specific text size classes */
  .text-xl {
    font-size: 1.125rem !important; /* 18px */
    line-height: 1.75rem !important;
  }

  .text-2xl {
    font-size: 1.25rem !important; /* 20px */
    line-height: 1.75rem !important;
  }

  .text-3xl {
    font-size: 1.5rem !important; /* 24px */
    line-height: 2rem !important;
  }

  .text-4xl {
    font-size: 1.875rem !important; /* 30px */
    line-height: 2.25rem !important;
  }

  .text-5xl {
    font-size: 2.25rem !important; /* 36px */
    line-height: 2.5rem !important;
  }

  .text-6xl {
    font-size: 2.5rem !important; /* 40px */
    line-height: 1 !important;
  }

  .text-7xl {
    font-size: 3rem !important; /* 48px */
    line-height: 1 !important;
  }

  /* Hero text specific styles for mobile */
  .hero-typewriter {
    font-size: 3.5rem !important; /* 56px */
    line-height: 1.1 !important;
  }

  .hero-subtitle {
    font-size: 2rem !important; /* 32px */
    line-height: 1.2 !important;
  }
}

/* Hero text default styles for larger screens */
@media (min-width: 641px) {
  .hero-typewriter {
    font-size: 4.5rem; /* 72px - text-7xl */
    line-height: 1;
  }

  .hero-subtitle {
    font-size: 3.75rem; /* 60px - text-6xl */
    line-height: 1;
  }
}