/* ============================================================
   BLINKING SOCIAL BUTTONS — each at a different interval
   ============================================================ */
.social-btn.whatsapp  { animation: blinkWhatsApp 1.5s ease-in-out infinite; }
.social-btn.tiktok    { animation: blinkTikTok   2s   ease-in-out infinite; }
.social-btn.instagram { animation: blinkInstagram 2.5s ease-in-out infinite; }
.social-btn.x         { animation: blinkX        3s   ease-in-out infinite; }
.social-btn.telegram  { animation: blinkTelegram 3.5s ease-in-out infinite; }

@keyframes blinkWhatsApp {
  0%, 100% { background: #25D366; box-shadow: 0 0 0 rgba(37,211,102,0); }
  50%      { background: #128C7E; box-shadow: 0 0 25px rgba(37,211,102,0.9); }
}
@keyframes blinkTikTok {
  0%, 100% { background: #000000; box-shadow: 0 0 0 rgba(0,0,0,0); }
  50%      { background: #EE1D52; box-shadow: 0 0 25px rgba(238,29,82,0.9); }
}
@keyframes blinkInstagram {
  0%, 100% { background: #E1306C; box-shadow: 0 0 0 rgba(225,48,108,0); }
  50%      { background: #833AB4; box-shadow: 0 0 25px rgba(131,58,180,0.9); }
}
@keyframes blinkX {
  0%, 100% { background: #000000; box-shadow: 0 0 0 rgba(0,0,0,0); }
  50%      { background: #1DA1F2; box-shadow: 0 0 25px rgba(29,161,242,0.9); }
}
@keyframes blinkTelegram {
  0%, 100% { background: #229ED9; box-shadow: 0 0 0 rgba(34,158,217,0); }
  50%      { background: #0088cc; box-shadow: 0 0 25px rgba(34,158,217,0.9); }
}

/* ============================================================
   COLOR-CHANGING PICTURE FRAMES (6 unique gradients)
   ============================================================ */
.frame-1 { animation: frame1 6s ease infinite; }
.frame-2 { animation: frame2 6s ease infinite; }
.frame-3 { animation: frame3 6s ease infinite; }
.frame-4 { animation: frame4 6s ease infinite; }
.frame-5 { animation: frame5 6s ease infinite; }
.frame-6 { animation: frame6 6s ease infinite; }

@keyframes frame1 {
  0%, 100% { background: linear-gradient(135deg, #6366f1, #06b6d4); box-shadow: 0 10px 30px rgba(99,102,241,0.3); }
  50%      { background: linear-gradient(135deg, #06b6d4, #6366f1); box-shadow: 0 10px 30px rgba(6,182,212,0.3); }
}
@keyframes frame2 {
  0%, 100% { background: linear-gradient(135deg, #ec4899, #f97316); box-shadow: 0 10px 30px rgba(236,72,153,0.3); }
  50%      { background: linear-gradient(135deg, #f97316, #ec4899); box-shadow: 0 10px 30px rgba(249,115,22,0.3); }
}
@keyframes frame3 {
  0%, 100% { background: linear-gradient(135deg, #10b981, #84cc16); box-shadow: 0 10px 30px rgba(16,185,129,0.3); }
  50%      { background: linear-gradient(135deg, #84cc16, #10b981); box-shadow: 0 10px 30px rgba(132,204,22,0.3); }
}
@keyframes frame4 {
  0%, 100% { background: linear-gradient(135deg, #8b5cf6, #3b82f6); box-shadow: 0 10px 30px rgba(139,92,246,0.3); }
  50%      { background: linear-gradient(135deg, #3b82f6, #8b5cf6); box-shadow: 0 10px 30px rgba(59,130,246,0.3); }
}
@keyframes frame5 {
  0%, 100% { background: linear-gradient(135deg, #ef4444, #eab308); box-shadow: 0 10px 30px rgba(239,68,68,0.3); }
  50%      { background: linear-gradient(135deg, #eab308, #ef4444); box-shadow: 0 10px 30px rgba(234,179,8,0.3); }
}
@keyframes frame6 {
  0%, 100% { background: linear-gradient(135deg, #14b8a6, #a855f7); box-shadow: 0 10px 30px rgba(20,184,166,0.3); }
  50%      { background: linear-gradient(135deg, #a855f7, #14b8a6); box-shadow: 0 10px 30px rgba(168,85,247,0.3); }
}

/* ============================================================
   FLOATING PHONE (hero mockup)
   ============================================================ */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-20px); }
}
.phone { animation: float 6s ease-in-out infinite; }

/* ============================================================
   Respect users who prefer reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .phone,
  .frame-1, .frame-2, .frame-3,
  .frame-4, .frame-5, .frame-6,
  .social-btn.whatsapp, .social-btn.tiktok,
  .social-btn.instagram, .social-btn.x,
  .social-btn.telegram {
    animation: none !important;
  }
}

/* ============================================================
   DANCING LOGO — TheUltimateSociety flickers & moves
   ============================================================ */
.logo {
  animation: logoDance 3s ease-in-out infinite;
  display: inline-block;
  transform-origin: center;
}

@keyframes logoDance {
  /* Dance wiggle + scale pulse */
  0%   { transform: rotate(0deg)   scale(1)    translateY(0);    opacity: 1;    }
  10%  { transform: rotate(-3deg)  scale(1.05) translateY(-2px); opacity: 0.85; }
  20%  { transform: rotate(3deg)   scale(1.08) translateY(-4px); opacity: 1;    }
  30%  { transform: rotate(-2deg)  scale(1.02) translateY(0);    opacity: 0.7;  }
  40%  { transform: rotate(2deg)   scale(1.06) translateY(-3px); opacity: 1;    }
  50%  { transform: rotate(0deg)   scale(1.1)  translateY(-5px); opacity: 0.9;  }
  60%  { transform: rotate(-2deg)  scale(1.04) translateY(-2px); opacity: 1;    }
  70%  { transform: rotate(2deg)   scale(1.08) translateY(-4px); opacity: 0.75; }
  80%  { transform: rotate(-1deg)  scale(1.02) translateY(0);    opacity: 1;    }
  90%  { transform: rotate(1deg)   scale(1.06) translateY(-2px); opacity: 0.85; }
  100% { transform: rotate(0deg)   scale(1)    translateY(0);    opacity: 1;    }
}

/* Flickering color glow — hue shifts + text-shadow flash */
.logo {
  animation: logoDance 3s ease-in-out infinite,
             logoFlicker 1.2s ease-in-out infinite;
}

@keyframes logoFlicker {
  0%, 100% {
    filter: drop-shadow(0 0 4px rgba(99,102,241,0.6));
    opacity: 1;
  }
  25% {
    filter: drop-shadow(0 0 14px rgba(6,182,212,1));
    opacity: 0.7;
  }
  50% {
    filter: drop-shadow(0 0 18px rgba(236,72,153,0.9));
    opacity: 1;
  }
  75% {
    filter: drop-shadow(0 0 10px rgba(234,179,8,0.9));
    opacity: 0.8;
  }
}

/* ============================================================
   ONLY FOR: GET DATA BUNDLES, SMS AND MINUTES... 
   ============================================================ */

.blink-text {
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 1.05rem;
  animation: rgbBlinkFlicker 3s infinite;
}

@keyframes rgbBlinkFlicker {
  /* RED Phase */
  0%, 15% {
    color: #ff3333;
    text-shadow: 0 0 10px rgba(255, 51, 51, 0.8), 0 0 20px rgba(255, 51, 51, 0.5);
    opacity: 1;
  }
  /* Moderate Flicker */
  17% { opacity: 0.3; }
  19% { opacity: 1; }
  
  /* BLUE Phase */
  33%, 48% {
    color: #3388ff;
    text-shadow: 0 0 10px rgba(51, 136, 255, 0.8), 0 0 20px rgba(51, 136, 255, 0.5);
    opacity: 1;
  }
  /* Moderate Flicker */
  50% { opacity: 0.4; }
  52% { opacity: 1; }
  
  /* GREEN Phase */
  66%, 81% {
    color: #33ff77;
    text-shadow: 0 0 10px rgba(51, 255, 119, 0.8), 0 0 20px rgba(51, 255, 119, 0.5);
    opacity: 1;
  }
  /* Moderate Flicker */
  83% { opacity: 0.2; }
  85% { opacity: 1; }
  
  /* Return to Red */
  100% {
    color: #ff3333;
    text-shadow: 0 0 10px rgba(255, 51, 51, 0.8), 0 0 20px rgba(255, 51, 51, 0.5);
    opacity: 1;
  }
}