/* ==========================================================================
   KAIKUSE FITNESS — Elite Athletic Brand Animations & Vector Engine
   Standard: Picsil Sport / Rogue Fitness / Nike Lab / Gymshark
   ========================================================================== */

:root {
  --brand-volt: #FFB800;
  --brand-volt-bright: #FFFF01;
  --brand-gold-glow: rgba(255, 184, 0, 0.7);
  --brand-gold-subtle: rgba(255, 184, 0, 0.25);
  --brand-dark-base: #060709;
}

/* --------------------------------------------------------------------------
   1. BRAND OPENER / SPLASH PRELOADER
   -------------------------------------------------------------------------- */
.kaikuse-opener-curtain {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background-color: var(--brand-dark-base);
  background-image: 
    radial-gradient(circle at 50% 45%, rgba(255, 184, 0, 0.1) 0%, rgba(6, 7, 9, 0.98) 72%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
  will-change: opacity, transform, filter;
}

.kaikuse-opener-curtain.closing {
  opacity: 0;
  transform: scale(1.04);
  filter: blur(6px);
  pointer-events: none;
}

/* Opener Central Emblem Animation */
.opener-emblem-wrap {
  position: relative;
  width: 104px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 640px) {
  .opener-emblem-wrap {
    width: 120px;
    height: 120px;
  }
}

.opener-emblem-svg {
  width: 100%;
  height: 100%;
  animation: 
    openerFelineIgnition 1.3s cubic-bezier(0.16, 1, 0.3, 1) forwards,
    openerFelinePulse 2s ease-in-out 1.3s infinite;
  transform-origin: center center;
}

@keyframes openerFelineIgnition {
  0% {
    opacity: 0;
    transform: scale(0.6);
    filter: drop-shadow(0 0 0 rgba(255, 184, 0, 0));
  }
  45% {
    opacity: 1;
    transform: scale(1.1);
    filter: drop-shadow(0 0 40px var(--brand-volt)) drop-shadow(0 0 80px rgba(255, 184, 0, 0.6));
  }
  75% {
    transform: scale(0.97);
    filter: drop-shadow(0 0 25px var(--brand-volt));
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 0 22px var(--brand-volt));
  }
}

@keyframes openerFelinePulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 20px rgba(255, 184, 0, 0.7));
  }
  40% {
    transform: scale(1.045);
    filter: drop-shadow(0 0 35px var(--brand-volt)) drop-shadow(0 0 70px rgba(255, 184, 0, 0.5));
  }
  60% {
    transform: scale(1.01);
    filter: drop-shadow(0 0 24px var(--brand-volt));
  }
}

/* Opener Background Radar Wave */
.opener-radar-ring {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1px solid rgba(255, 184, 0, 0.5);
  animation: openerRadarPulse 2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  pointer-events: none;
}
.opener-radar-ring-2 {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1px solid rgba(255, 184, 0, 0.35);
  animation: openerRadarPulse 2s cubic-bezier(0.16, 1, 0.3, 1) 0.7s infinite;
  pointer-events: none;
}

@keyframes openerRadarPulse {
  0% {
    opacity: 0.85;
    transform: scale(0.6);
  }
  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}

/* Opener Wordmark Staggered Letter Wave */
.opener-wordmark-letter {
  display: inline-block;
  animation: openerLetterRise 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.opener-wordmark-letter:nth-child(1) { animation-delay: 0.15s; }
.opener-wordmark-letter:nth-child(2) { animation-delay: 0.20s; }
.opener-wordmark-letter:nth-child(3) { animation-delay: 0.25s; }
.opener-wordmark-letter:nth-child(4) { animation-delay: 0.30s; }
.opener-wordmark-letter:nth-child(5) { animation-delay: 0.35s; }
.opener-wordmark-letter:nth-child(6) { animation-delay: 0.40s; }
.opener-wordmark-letter:nth-child(7) { animation-delay: 0.45s; }

@keyframes openerLetterRise {
  0% {
    opacity: 0;
    transform: translateY(22px);
  }
  60% {
    opacity: 1;
    transform: translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Opener Tagline Reveal */
.opener-tagline {
  animation: openerTaglineFade 0.6s ease 0.45s both;
}

@keyframes openerTaglineFade {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 0.75;
    transform: translateY(0);
  }
}

/* Opener Golden Progress Bar */
.opener-progress-fill {
  animation: openerProgressCharge 3.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transform-origin: left center;
}

@keyframes openerProgressCharge {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   2. HEADER LOGO MICRO-ANIMATION
   -------------------------------------------------------------------------- */
.header-logo-group {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
}

.header-logo-svg {
  height: 2.25rem; /* 36px */
  width: auto;
  overflow: visible;
}
@media (min-width: 640px) {
  .header-logo-svg {
    height: 2.75rem; /* 44px */
  }
}

/* Header Emblem Micro-Strike */
.header-logo-group .header-emblem-path {
  fill: #000000;
  transform-origin: 134px 144px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), fill 0.3s ease, filter 0.3s ease;
  will-change: transform, fill, filter;
}

.header-logo-group:hover .header-emblem-path {
  fill: #FFB800;
  transform: scale(1.09) rotate(-2deg);
  filter: drop-shadow(0 2px 10px rgba(255, 184, 0, 0.55));
}

/* Header Letter Wave */
.header-logo-group .header-letter-path {
  fill: #000000;
  transform-origin: center bottom;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), fill 0.25s ease;
}

.header-logo-group:hover .header-letter-k1 { transform: translateY(-3px); transition-delay: 0.02s; }
.header-logo-group:hover .header-letter-a  { transform: translateY(-3px); transition-delay: 0.05s; }
.header-logo-group:hover .header-letter-i  { transform: translateY(-3px); transition-delay: 0.08s; }
.header-logo-group:hover .header-letter-k2 { transform: translateY(-3px); transition-delay: 0.11s; }
.header-logo-group:hover .header-letter-u  { transform: translateY(-3px); transition-delay: 0.14s; }
.header-logo-group:hover .header-letter-s  { transform: translateY(-3px); transition-delay: 0.17s; }
.header-logo-group:hover .header-letter-e  { transform: translateY(-3px); transition-delay: 0.20s; }
.header-logo-group:hover .header-letter-reg { transform: translateY(-3px); transition-delay: 0.23s; }

/* --------------------------------------------------------------------------
   3. FOOTER LOGO AMBIENT & INTERACTIVE ANIMATION
   -------------------------------------------------------------------------- */
.footer-logo-group {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
}

.footer-logo-svg {
  height: 2.25rem;
  width: auto;
  overflow: visible;
}

/* Footer Emblem Ambient Breathing */
.footer-logo-group .footer-emblem-path {
  fill: #FFFFFF;
  transform-origin: 134px 144px;
  animation: footerFelineBreathing 3.6s ease-in-out infinite;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), fill 0.3s ease, filter 0.3s ease;
  will-change: transform, fill, filter;
}

@keyframes footerFelineBreathing {
  0%, 100% {
    filter: drop-shadow(0 0 5px rgba(255, 184, 0, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 16px rgba(255, 184, 0, 0.65)) drop-shadow(0 0 30px rgba(255, 184, 0, 0.25));
  }
}

/* Footer Emblem Hover Ignition */
.footer-logo-group:hover .footer-emblem-path {
  animation: none;
  fill: #FFB800;
  transform: scale(1.1) rotate(-1.5deg);
  filter: drop-shadow(0 0 20px rgba(255, 184, 0, 0.9)) drop-shadow(0 0 40px rgba(255, 184, 0, 0.45));
}

/* Footer Wordmark Paths */
.footer-logo-group .footer-letter-path {
  fill: #FFFFFF;
  transform-origin: center bottom;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), fill 0.25s ease;
}

.footer-logo-group:hover .footer-letter-k1 { transform: translateY(-2.5px); transition-delay: 0.02s; }
.footer-logo-group:hover .footer-letter-a  { transform: translateY(-2.5px); transition-delay: 0.05s; }
.footer-logo-group:hover .footer-letter-i  { transform: translateY(-2.5px); transition-delay: 0.08s; }
.footer-logo-group:hover .footer-letter-k2 { transform: translateY(-2.5px); transition-delay: 0.11s; }
.footer-logo-group:hover .footer-letter-u  { transform: translateY(-2.5px); transition-delay: 0.14s; }
.footer-logo-group:hover .footer-letter-s  { transform: translateY(-2.5px); transition-delay: 0.17s; }
.footer-logo-group:hover .footer-letter-e  { transform: translateY(-2.5px); transition-delay: 0.20s; }
.footer-logo-group:hover .footer-letter-reg { transform: translateY(-2.5px); transition-delay: 0.23s; }