/* ============================================
   ANIMATIONS ATHLETICA CLUB — FULL VERSION
   ============================================ */

/* ---- Keyframes ---- */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(50px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeDown {
  from { opacity:0; transform:translateY(-30px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes slideLeft {
  from { opacity:0; transform:translateX(-70px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes slideRight {
  from { opacity:0; transform:translateX(70px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes scaleUp {
  from { opacity:0; transform:scale(0.75); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(0.9); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes growBar {
  from { width:0; }
  to   { width:50px; }
}
@keyframes growBarFull {
  from { width:0; }
  to   { width:100%; }
}
@keyframes rotateDot {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}
@keyframes waPulse {
  0%   { box-shadow:0 0 0 0 rgba(37,211,102,0.6); }
  70%  { box-shadow:0 0 0 14px rgba(37,211,102,0); }
  100% { box-shadow:0 0 0 0 rgba(37,211,102,0); }
}
@keyframes navSlide {
  from { transform:translateY(-100%); opacity:0; }
  to   { transform:translateY(0); opacity:1; }
}
@keyframes shimmer {
  0%   { background-position:-200% 0; }
  100% { background-position:200% 0; }
}
@keyframes borderPulse {
  0%,100% { border-color:rgba(192,57,43,0.2); }
  50%      { border-color:rgba(192,57,43,0.7); }
}
@keyframes float {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-8px); }
}
@keyframes textReveal {
  from { clip-path:inset(0 100% 0 0); }
  to   { clip-path:inset(0 0% 0 0); }
}
@keyframes lineGrow {
  from { transform:scaleX(0); transform-origin:left; }
  to   { transform:scaleX(1); transform-origin:left; }
}

/* ---- Scroll Reveal Base ---- */
.reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-down {
  transition: opacity 0.8s cubic-bezier(.4,0,.2,1), transform 0.8s cubic-bezier(.4,0,.2,1);
}
.reveal       { opacity:0; transform:translateY(40px); }
.reveal-left  { opacity:0; transform:translateX(-60px); }
.reveal-right { opacity:0; transform:translateX(60px); }
.reveal-scale { opacity:0; transform:scale(0.85); }
.reveal-down  { opacity:0; transform:translateY(-30px); }

.reveal.visible, .reveal-left.visible, .reveal-right.visible,
.reveal-scale.visible, .reveal-down.visible {
  opacity:1; transform:none;
}

/* Stagger delays */
.delay-1 { transition-delay:0.1s !important; }
.delay-2 { transition-delay:0.2s !important; }
.delay-3 { transition-delay:0.3s !important; }
.delay-4 { transition-delay:0.4s !important; }
.delay-5 { transition-delay:0.5s !important; }
.delay-6 { transition-delay:0.6s !important; }
.delay-7 { transition-delay:0.7s !important; }
.delay-8 { transition-delay:0.8s !important; }

/* ---- NAV ---- */
nav { animation:navSlide 0.6s cubic-bezier(.4,0,.2,1) forwards; }
.nav-links a {
  position:relative;
  transition:color 0.3s;
}
.nav-links a::after {
  content:'';
  position:absolute;
  bottom:-2px; left:50%;
  width:0; height:1.5px;
  background:var(--red);
  transition:width 0.3s ease, left 0.3s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after { width:100%; left:0; }

/* ---- HERO ANIMATIONS ---- */
.hero-logo-anim    { animation:scaleUp 0.9s cubic-bezier(.4,0,.2,1) 0.1s both; }
.hero-eyebrow-anim { animation:fadeUp 0.6s ease 0.4s both; }
.hero-title-anim   { animation:fadeUp 0.7s cubic-bezier(.4,0,.2,1) 0.6s both; }
.hero-divider-anim { animation:growBarFull 0.5s ease 0.9s both; width:40px; }
.hero-tagline-anim { animation:fadeUp 0.6s ease 1.0s both; }
.hero-cta-anim     { animation:fadeUp 0.6s ease 1.2s both; }
.hero-social-anim  { animation:fadeUp 0.6s ease 1.4s both; }
.hero-scroll-anim  { animation:fadeIn 1s ease 1.6s both; }

/* Hero BG subtle zoom */
.hero-bg { animation:scaleUp 1.2s ease both; transform-origin:center; }

/* ---- HERO LINES animated ---- */
.hero-lines::before {
  animation:fadeIn 2s ease 0.5s both;
}
.hero-lines::after {
  animation:fadeIn 2s ease 0.8s both;
}

/* ---- PAGE HERO (activites, planning etc) ---- */
.page-hero .label  { animation:fadeUp 0.5s ease 0.2s both; }
.page-hero h1      { animation:fadeUp 0.7s cubic-bezier(.4,0,.2,1) 0.4s both; }
.page-hero p       { animation:fadeUp 0.5s ease 0.6s both; }
.page-hero .bar    { animation:growBar 0.6s ease 0.8s both; width:0; }

/* ---- SECTION BARS ---- */
.section-bar {
  overflow:hidden;
  width:0;
  transition:width 0.7s ease;
}
.section-bar.visible { width:50px; }

/* ---- STATS ---- */
.stat-num {
  display:inline-block;
  transition:transform 0.3s ease;
}
.stat-num:hover { transform:scale(1.1); color:#fff; }
.stats-row > div {
  opacity:0; transform:translateY(30px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.stats-row > div.visible { opacity:1; transform:none; }

/* ---- CONCEPT SECTION ---- */
.concept-text strong {
  background:linear-gradient(90deg, #C0392B, #E74C3C, #C0392B);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shimmer 3s linear infinite;
}
.concept-img-main { overflow:hidden; }
.concept-img-main img {
  transition:transform 0.8s ease, filter 0.8s ease;
}
.concept-img-main:hover img { transform:scale(1.04); filter:brightness(0.9); }
.concept-img-small { overflow:hidden; }
.concept-img-small img {
  transition:transform 0.8s ease;
}
.concept-img-small:hover img { transform:scale(1.06); }

/* ---- HOME ACT GRID ---- */
.home-act-card {
  transition:transform 0.4s ease !important;
}
.home-act-card:hover { transform:scale(1.02) !important; }
.home-act-info {
  transition:transform 0.4s ease, opacity 0.4s ease;
}
.home-act-card:hover .home-act-info { transform:translateY(-6px); }

/* ---- WHY CARDS ---- */
.why-card {
  transition:border-color 0.3s, transform 0.4s cubic-bezier(.4,0,.2,1), box-shadow 0.4s ease !important;
}
.why-card:hover {
  transform:translateY(-8px) !important;
  box-shadow:0 16px 40px rgba(192,57,43,0.18) !important;
}
.why-icon {
  transition:background 0.3s, transform 0.3s ease;
}
.why-card:hover .why-icon {
  background:rgba(192,57,43,0.15);
  transform:scale(1.15) rotate(-5deg);
}
.why-icon svg {
  transition:stroke 0.3s;
}
.why-card:hover .why-icon svg { stroke:var(--red-bright); }

/* ---- ACTIVITY CARDS ---- */
.act-card {
  transition:transform 0.4s ease, box-shadow 0.4s ease !important;
}
.act-card:hover {
  transform:scale(1.02) !important;
  box-shadow:0 20px 50px rgba(0,0,0,0.5) !important;
  z-index:2;
}

/* ---- PRICE CARDS ---- */
.price-card {
  transition:border-color 0.3s, transform 0.4s cubic-bezier(.4,0,.2,1), box-shadow 0.4s ease !important;
}
.price-card:hover {
  transform:translateY(-8px) !important;
  box-shadow:0 16px 40px rgba(192,57,43,0.15) !important;
}
.price-card.featured {
  animation:borderPulse 3s ease infinite;
}
.price-feats li {
  transition:color 0.2s, padding-left 0.2s;
}
.price-feats li:hover { color:rgba(255,255,255,0.9); padding-left:1.8rem; }

/* ---- CTA SECTION ---- */
.cta-bg {
  transition:transform 8s ease;
}
.cta-section:hover .cta-bg { transform:scale(1.04); }

/* ---- BUTTONS ---- */
.btn-primary {
  position:relative; overflow:hidden;
  transition:background 0.25s, transform 0.2s, box-shadow 0.3s !important;
}
.btn-primary::before {
  content:'';
  position:absolute;
  top:50%; left:50%;
  width:0; height:0;
  background:rgba(255,255,255,0.12);
  border-radius:50%;
  transform:translate(-50%,-50%);
  transition:width 0.5s ease, height 0.5s ease;
}
.btn-primary:hover::before { width:300px; height:300px; }
.btn-primary:hover {
  transform:translateY(-3px) !important;
  box-shadow:0 8px 25px rgba(192,57,43,0.4) !important;
}
.btn-primary:active { transform:translateY(0) !important; }

.btn-ghost {
  transition:border-color 0.25s, color 0.25s, transform 0.2s, background 0.25s !important;
}
.btn-ghost:hover {
  transform:translateY(-3px) !important;
  background:rgba(192,57,43,0.08) !important;
}

/* ---- SI-BTN (social icons hero) ---- */
.si-btn {
  transition:border-color 0.25s, background 0.25s, transform 0.3s ease !important;
}
.si-btn:hover {
  transform:translateY(-5px) scale(1.1) !important;
  border-color:rgba(255,255,255,0.8) !important;
  background:rgba(255,255,255,0.12) !important;
}

/* ---- FOOTER ---- */
.f-icon {
  transition:border-color 0.25s, transform 0.3s ease, background 0.25s !important;
}
.f-icon:hover {
  transform:translateY(-5px) scale(1.1) !important;
  background:rgba(192,57,43,0.15) !important;
}
.footer-logo {
  transition:transform 0.4s ease;
}
.footer-logo:hover { transform:scale(1.1) rotate(5deg); }

/* ---- FLOATING WA ---- */
.wa-float {
  animation:waPulse 2.5s infinite;
  transition:transform 0.3s ease !important;
}
.wa-float:hover {
  transform:scale(1.15) !important;
  animation:none;
}

/* ---- PLANNING TABLE ROWS ---- */
.plan-table tbody tr {
  transition:background 0.2s;
}
.plan-table tbody tr:hover { background:rgba(192,57,43,0.08) !important; }
.cls {
  transition:transform 0.2s, opacity 0.2s;
}
.cls:hover { transform:scale(1.05); opacity:0.9; }

/* ---- LOGO NAV FLOAT ---- */
.nav-logo img {
  transition:transform 0.4s ease;
}
.nav-logo:hover img { transform:rotate(10deg) scale(1.1); }

/* ---- KIDS TABLE ---- */
.kids-box > div {
  transition:transform 0.3s ease, background 0.3s;
}
.kids-box > div:hover {
  transform:scale(1.04);
  background:rgba(192,57,43,0.1);
}

/* ---- CONTACT LINES ---- */
.c-line {
  transition:transform 0.3s, color 0.3s;
}
.c-line:hover { transform:translateX(6px); color:rgba(255,255,255,0.95) !important; }
.c-icon {
  transition:fill 0.3s, transform 0.3s;
}
.c-line:hover .c-icon { transform:scale(1.2); fill:var(--red-bright); }

/* ---- SCROLL HINT ---- */
@keyframes bounce {
  0%,100% { transform:translateY(0); opacity:0.3; }
  50%      { transform:translateY(8px); opacity:0.9; }
}
.scroll-hint { animation:bounce 1.8s ease infinite; }

/* ---- NAV BURGER ---- */
.nav-burger span {
  transition:transform 0.3s, opacity 0.3s, background 0.3s;
}
.nav-burger:hover span { background:var(--red); }