@font-face {
    font-family: 'Open Sauce Sans';
    src: url('../assets/fonts/OpenSauceSans-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sauce Sans';
    src: url('../assets/fonts/OpenSauceSans-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sauce Sans';
    src: url('../assets/fonts/OpenSauceSans-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sauce Sans';
    src: url('../assets/fonts/OpenSauceSans-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sauce One';
    src: url('../assets/fonts/OpenSauceOne-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* --- Hero Animations --- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.delay-100 { animation-delay: 0.1s; }
.delay-300 { animation-delay: 0.3s; }
.delay-500 { animation-delay: 0.5s; }

/* --- Ticker Animation --- */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}

/* --- Scroll Reveal (More than a gym section) --- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* --- Image Cross-fade Loop --- */
@keyframes crossFade {
  0%, 100% { opacity: 0; }
  12.5%, 25% { opacity: 1; }
  37.5% { opacity: 0; }
}

.animate-cross-fade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: crossFade 16s infinite;
}

.fade-1 { animation-delay: 0s; }
.fade-2 { animation-delay: 4s; }
.fade-3 { animation-delay: 8s; }
.fade-4 { animation-delay: 12s; }

/* --- Punch Button Transition --- */
.btn-punch-transition {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

/* Update these in styles.css */
.discipline-card {
    max-height: 220px;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s ease;
    overflow: visible;
}

.group:hover.discipline-card {
    max-height: 600px; /* Deep overlap */
    z-index: 50 !important;
    transform: translateY(-8px);
}

.photo-container {
    opacity: 0;
    margin-top: 0;
    /* Immediate fade-out when de-hovering */
    transition: opacity 0.2s ease; 
}

.group:hover .photo-container {
    opacity: 1;
    margin-top: 2rem;
    /* Smooth fade-in when hovering */
    transition: opacity 0.4s ease 0.1s; 
}