/* ===================================================================
   CHEESEHUB // FRAMER AREWNO EXACT ANIMATION & BLUE-BLACK THEME SYSTEM
   Extracted from: https://chocolate-tournaments-329558.framer.app/
   Quintic Spring: cubic-bezier(0.16, 1, 0.3, 1)
   Colors: Deep Obsidian (#06080d) & Tactical Cobalt / Arctic Blue (#00f0ff, #2563eb)
   =================================================================== */

:root {
  --framer-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --framer-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --framer-duration: 0.58s;
  
  --framer-bg: #05070a;
  --framer-card-bg: #090c12;
  --framer-card-border: rgba(255, 255, 255, 0.05);
  --framer-card-border-hover: rgba(255, 255, 255, 0.15);
  --framer-blue: #1e40af;
  --framer-text-primary: #ffffff;
  --framer-text-muted: #94a3b8;
}

/* -------------------------------------------------------------
   1. SIGNATURE FRAMER ENTRANCE ANIMATIONS (3D FOLD & BLUR REVEAL)
   ------------------------------------------------------------- */
@keyframes framerFoldIn {
  0% {
    opacity: 0;
    transform: translateY(32px) scale(0.96) perspective(1000px) rotateX(-8deg);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) perspective(1000px) rotateX(0deg);
    filter: blur(0px);
  }
}

@keyframes framerFadeUp {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.framer-appear {
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  filter: blur(6px);
  transition: opacity 0.8s var(--framer-ease), transform 0.8s var(--framer-ease), filter 0.8s var(--framer-ease);
  will-change: opacity, transform, filter;
}

.framer-appear.framer-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0px);
}

/* Stagger Delays */
.delay-100 { transition-delay: 0.1s !important; }
.delay-200 { transition-delay: 0.22s !important; }
.delay-300 { transition-delay: 0.38s !important; }
.delay-400 { transition-delay: 0.54s !important; }
.delay-500 { transition-delay: 0.7s !important; }

/* -------------------------------------------------------------
   2. FLOATING CARDS IDLE BOUNCE (AREWNO HERO WIDGETS)
   ------------------------------------------------------------- */
@keyframes framerFloatA {
  0%, 100% {
    transform: translateY(0px) rotate(-0.5deg);
  }
  50% {
    transform: translateY(-8px) rotate(-1deg);
  }
}

@keyframes framerFloatB {
  0%, 100% {
    transform: translateY(0px) rotate(0.5deg);
  }
  50% {
    transform: translateY(8px) rotate(1deg);
  }
}

.framer-float-left {
  animation: framerFloatA 5.5s ease-in-out infinite;
}

.framer-float-right {
  animation: framerFloatB 6.2s ease-in-out infinite;
}

/* -------------------------------------------------------------
   3. FRAMER PILL NAVBAR & BUTTONS (SPRING MICRO-INTERACTIONS)
   ------------------------------------------------------------- */
.framer-nav-pill {
  background: #090c12;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transition: all 0.4s var(--framer-ease);
}

.framer-btn-primary {
  background: #2563eb;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s var(--framer-ease);
}

.framer-btn-primary:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.3);
}

.framer-btn-primary:active {
  transform: translateY(0px);
}

.framer-btn-secondary {
  background: #0a0d14;
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s var(--framer-ease);
}

.framer-btn-secondary:hover {
  background: #0f141f;
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  transform: translateY(-1px);
}

/* -------------------------------------------------------------
   4. DARK BLUE BENTO CARD (MATTE FINISH, NO GLOW)
   ------------------------------------------------------------- */
.framer-bento-card {
  background: #090c12;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: all 0.3s var(--framer-ease);
  position: relative;
  overflow: hidden;
}

.framer-bento-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

/* -------------------------------------------------------------
   5. SEAMLESS INFINITE MARQUEE (AREWNO STYLE)
   ------------------------------------------------------------- */
@keyframes framerMarquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

@keyframes framerMarqueeReverse {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

.framer-marquee-track {
  display: flex;
  width: max-content;
  animation: framerMarquee 35s linear infinite;
  will-change: transform;
}

.framer-marquee-track-reverse {
  display: flex;
  width: max-content;
  animation: framerMarqueeReverse 35s linear infinite;
  will-change: transform;
}

.framer-marquee-container:hover .framer-marquee-track,
.framer-marquee-container:hover .framer-marquee-track-reverse {
  animation-play-state: paused;
}

/* -------------------------------------------------------------
   6. CRISP TYPOGRAPHY
   ------------------------------------------------------------- */
.text-accent-gradient {
  color: #38bdf8;
}