/* ===== Keyframes ===== */

@keyframes hero-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-fade-in-scale {
  from {
    opacity: 0;
    transform: scale(0.8);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.08);
  }
  30% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.05);
  }
  60% {
    transform: scale(1);
  }
}

@keyframes heart-float {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translateY(-100vh) scale(1);
  }
}

/* ===== Hero Entrance ===== */

.hero-logo {
  opacity: 0;
  animation: hero-fade-in-scale 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

.hero-logo-heartbeat {
  animation: heartbeat 2.5s ease-in-out 1.5s infinite;
}

.hero-title {
  opacity: 0;
  animation: hero-fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

.hero-subtitle {
  opacity: 0;
  animation: hero-fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
}

.hero-cta {
  opacity: 0;
  animation: hero-fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) 1.1s forwards;
}

/* ===== Hero Background ===== */

.hero-bg-gradient {
  background: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(201, 169, 110, 0.12), transparent),
              radial-gradient(ellipse 60% 40% at 80% 50%, rgba(201, 169, 110, 0.06), transparent),
              radial-gradient(ellipse 60% 40% at 20% 80%, rgba(201, 169, 110, 0.04), transparent);
}

.hero-glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: pulse-glow 6s ease-in-out infinite;
  pointer-events: none;
  will-change: filter, transform;
}

/* ===== Gradient Text ===== */

.gradient-text {
  background: linear-gradient(
    135deg,
    #c9a96e 0%,
    #e2c97e 20%,
    #d4b87a 40%,
    #e2c97e 60%,
    #c9a96e 80%,
    #d4b87a 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 6s ease-in-out infinite;
}

/* Auto-switch gradient text for light mode */
html:not(.dark) .gradient-text {
  background-image: linear-gradient(135deg, #a08050 0%, #c9a96e 25%, #8a6f3e 50%, #c9a96e 75%, #a08050 100%);
}

/* Explicit light mode gradient text class (legacy) */
.gradient-text-light {
  background: linear-gradient(135deg, #171717 0%, #c9a96e 50%, #171717 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 6s ease-in-out infinite;
}

/* ===== Animated Border ===== */

.animated-border {
  position: relative;
}

.animated-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(201, 169, 110, 0.5), transparent 40%, transparent 60%, rgba(201, 169, 110, 0.3));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  transition: opacity 0.5s ease;
  opacity: 0.5;
}

:is(.dark) .animated-border::before {
  background: linear-gradient(135deg, rgba(201, 169, 110, 0.3), transparent 40%, transparent 60%, rgba(201, 169, 110, 0.15));
}

.animated-border:hover::before {
  opacity: 1;
  background: linear-gradient(135deg, rgba(201, 169, 110, 0.7), transparent 40%, transparent 60%, rgba(201, 169, 110, 0.5));
}

:is(.dark) .animated-border:hover::before {
  background: linear-gradient(135deg, rgba(201, 169, 110, 0.6), transparent 40%, transparent 60%, rgba(201, 169, 110, 0.4));
}

/* ===== Glow Effect ===== */

.glow-hover {
  transition: box-shadow 0.5s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glow-hover:hover {
  box-shadow: 0 0 20px rgba(201, 169, 110, 0.25), 0 0 50px rgba(201, 169, 110, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
  transform: translateY(-4px);
}

:is(.dark) .glow-hover:hover {
  box-shadow: 0 0 30px rgba(201, 169, 110, 0.1), 0 0 60px rgba(201, 169, 110, 0.05);
}

/* ===== Scroll Reveal ===== */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Showcase ===== */

@keyframes showcase-detail-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes showcase-image-enter {
  from {
    opacity: 0;
    transform: scale(1.03);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.showcase-detail-enter {
  animation: showcase-detail-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.showcase-detail-enter img {
  animation: showcase-image-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ===== Modal ===== */

@keyframes modal-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes modal-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-overlay {
  animation: modal-overlay-in 0.3s ease-out;
}

.modal-content {
  animation: modal-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== Team Info Fade ===== */

@keyframes team-info-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Team Card Glitter ===== */

@keyframes glitter-move {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 200% 200%;
  }
}

.team-card-glitter {
  position: relative;
}

/* Animated gold border glow */
.team-card-glitter::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(
    135deg,
    transparent 20%,
    rgba(201, 169, 110, 0.6) 30%,
    rgba(212, 184, 122, 1) 35%,
    transparent 45%,
    transparent 55%,
    rgba(201, 169, 110, 0.5) 65%,
    rgba(212, 184, 122, 0.9) 70%,
    transparent 80%
  );
  background-size: 200% 200%;
  animation: glitter-move 3s linear infinite;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  will-change: background-position;
}

/* ===== Notification Pulse ===== */

@keyframes pulse-urgent {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }
}

.pulse-urgent {
  animation: pulse-urgent 1.5s ease-in-out infinite;
}

/* ===== Section Divider ===== */

.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.4), transparent);
}

:is(.dark) .section-divider {
  background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.15), transparent);
}

/* ===== No-JS Fallback ===== */
/* When JS is disabled, ensure Reveal content is visible */
noscript ~ * [style*="opacity: 0"],
.no-js [style*="opacity: 0"] {
  opacity: 1 !important;
  transform: none !important;
}

/* ===== Reduced Motion ===== */

@media (prefers-reduced-motion: reduce) {
  .hero-logo,
  .hero-title,
  .hero-subtitle,
  .hero-cta {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .modal-overlay,
  .modal-content {
    animation: none !important;
  }

  .gradient-text,
  .gradient-text-light {
    animation: none !important;
  }

  .hero-glow-orb,
  .hero-logo-heartbeat {
    animation: none !important;
  }

  .showcase-detail-enter,
  .showcase-detail-enter img {
    animation: none !important;
  }

  .glow-hover:hover {
    transform: none;
  }

  .team-card-glitter::before {
    animation: none !important;
  }
}