/*
 Theme Name: ChuckiesDiviBaby
 Template: Divi
*/
/* ================================================================
   DIVI 5 — CSS ANIMATION LIBRARY
   Version 1.0
   
   INSTALL: Paste this entire file into
   Divi 5 → Theme Builder → Custom CSS → Save Changes
   
   USE: Assign a class name to any element via
   Element Settings → Advanced → Attributes → class
   
   PERFORMANCE NOTES:
   - All animations use transform and/or opacity only
   - These are GPU-accelerated and do not trigger layout reflow
   - Classes cost nothing until assigned to an element
   - Limit looping animations to ~4 visible on screen at once
   - Hover effects are completely free at idle
   ================================================================ */


/* ================================================================
   KEYFRAMES
   Defines the motion for each animation.
   These do nothing on their own — they are called by classes below.
   ================================================================ */

/* Gentle up/down float */
@keyframes gentle-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

/* Slow dreamy vertical drift (softer than bounce) */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* Scale in/out pulse */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}

/* Side to side shake */
@keyframes wiggle {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-4px); }
  40%       { transform: translateX(4px); }
  60%       { transform: translateX(-3px); }
  80%       { transform: translateX(3px); }
}

/* Quick sharp horizontal shake (urgency) */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15%       { transform: translateX(-6px); }
  30%       { transform: translateX(6px); }
  45%       { transform: translateX(-5px); }
  60%       { transform: translateX(5px); }
  75%       { transform: translateX(-3px); }
  90%       { transform: translateX(3px); }
}

/* Pulsing glow (uses filter for GPU acceleration) */
@keyframes glow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(255,255,255,0.2)); }
  50%       { filter: drop-shadow(0 0 10px rgba(255,255,255,0.7)); }
}

/* Full continuous rotation */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Slow opacity in/out (breathe) */
@keyframes breathe {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* Irregular flicker (candle/neon effect) */
@keyframes flicker {
  0%, 100% { opacity: 1; }
  10%       { opacity: 0.85; }
  20%       { opacity: 1; }
  35%       { opacity: 0.7; }
  45%       { opacity: 1; }
  60%       { opacity: 0.9; }
  75%       { opacity: 0.6; }
  85%       { opacity: 1; }
}

/* Gentle clockwise/counterclockwise tilt (rock) */
@keyframes rock {
  0%, 100% { transform: rotate(0deg); }
  25%       { transform: rotate(5deg); }
  75%       { transform: rotate(-5deg); }
}


/* ================================================================
   ATTENTION — Looping animations that draw the eye
   ================================================================ */

/* Gentle up/down float — good for buttons, icons, CTAs */
.bounce-attention {
  animation: gentle-bounce 1.8s ease-in-out infinite alternate;
  display: inline-block; /* Required for inline elements like text links */
}

/* Very slow dreamy vertical drift — good for hero elements */
.float-attention {
  animation: float 3s ease-in-out infinite alternate;
  display: inline-block;
}

/* Subtle scale in/out — good for badges, prices, key info */
.pulse-attention {
  animation: pulse 2s ease-in-out infinite alternate;
  display: inline-block;
}

/* Side to side shake — good for icons, form fields needing attention */
.wiggle-attention {
  animation: wiggle 1.5s ease-in-out infinite;
  display: inline-block;
}

/* Quick sharp shake — good for notification bells, urgent CTAs */
/* Tip: combine with animation-delay to make it fire periodically */
.shake-attention {
  animation: shake 0.6s ease-in-out infinite;
  animation-delay: 2s; /* ← Increase delay to reduce how often it fires */
  display: inline-block;
}

/* Pulsing glow — good for buttons, icons on dark backgrounds */
/* Tip: Adjust the rgba colour to match your brand colour */
.glow-attention {
  animation: glow 2s ease-in-out infinite alternate;
  display: inline-block;
}


/* ================================================================
   DECORATIVE — Ambient continuous effects
   ================================================================ */

/* Full continuous rotation — good for icons, spinners, badges */
/* Tip: Change 8s to 4s for faster spin, 20s for very slow */
.slow-spin {
  animation: spin 8s linear infinite;
  display: inline-block;
}

/* Slow opacity fade in/out — good for overlays, ambient elements */
.breathe {
  animation: breathe 4s ease-in-out infinite;
}

/* Candle/neon flicker — good for decorative icons, background elements */
.flicker {
  animation: flicker 2.5s ease-in-out infinite;
}

/* Gentle clockwise/counterclockwise tilt — good for icons, characters */
.rock {
  animation: rock 2s ease-in-out infinite;
  display: inline-block;
}


/* ================================================================
   HOVER — Triggered only on hover, zero cost at idle
   ================================================================ */

/* Scales up slightly on hover — good for cards, images, buttons */
.pop-hover {
  transition: transform 0.2s ease;
  display: inline-block;
}
.pop-hover:hover {
  transform: scale(1.08);
}

/* Rises with a subtle shadow — good for cards, panels */
.lift-hover {
  transition: transform 0.25s ease, filter 0.25s ease;
  display: inline-block;
}
.lift-hover:hover {
  transform: translateY(-4px);
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.2));
}

/* Spins once on hover — good for social icons, feature icons */
.spin-hover {
  transition: transform 0.4s ease;
  display: inline-block;
}
.spin-hover:hover {
  transform: rotate(360deg);
}


/* ================================================================
   UTILITY — Control helpers
   ================================================================ */

/* Pause any animation on hover */
/* Add alongside another class e.g. class="bounce-attention pause-on-hover" */
.pause-on-hover:hover {
  animation-play-state: paused;
}

/* Slow down any animation */
.anim-slow   { animation-duration: 3s !important; }

/* Speed up any animation */
.anim-fast   { animation-duration: 0.8s !important; }

/* Add a delay before animation starts (stagger multiple elements) */
.anim-delay-1 { animation-delay: 0.3s; }
.anim-delay-2 { animation-delay: 0.6s; }
.anim-delay-3 { animation-delay: 0.9s; }
.anim-delay-4 { animation-delay: 1.2s; }


/* ================================================================
   PHASE VARIANTS — Prevent multiple elements from syncing
   
   Combine with any looping animation class to give each element
   a different rate and starting point in its cycle.
   
   Without these, two elements with the same class will move
   in perfect unison — which looks unnatural and draws less
   attention than independent motion.
   
   HOW IT WORKS:
   - animation-duration offset means they cycle at different rates
     so they gradually drift apart and never lock back in sync
   - Negative animation-delay drops each element into a different
     point in its cycle immediately on page load (no waiting)
   
   USAGE:
   Element 1 — class="bounce-attention"           (default phase)
   Element 2 — class="bounce-attention anim-phase-b"
   Element 3 — class="bounce-attention anim-phase-c"
   Element 4 — class="bounce-attention anim-phase-d"
   
   Works with any looping class: bounce, float, pulse, breathe, etc.
   ================================================================ */

.anim-phase-b {
  animation-duration: 2.1s !important;   /* Different rate prevents re-syncing */
  animation-delay: -0.7s !important;     /* Already mid-cycle on page load */
}

.anim-phase-c {
  animation-duration: 2.4s !important;
  animation-delay: -1.3s !important;
}

.anim-phase-d {
  animation-duration: 1.6s !important;
  animation-delay: -0.4s !important;
}


/* ================================================================
   ACCESSIBILITY
   Disables all animations for users who have
   Reduce Motion turned on in their OS settings.
   Recommended to always keep this block.
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  .bounce-attention,
  .float-attention,
  .pulse-attention,
  .wiggle-attention,
  .shake-attention,
  .glow-attention,
  .slow-spin,
  .breathe,
  .flicker,
  .rock,
  .pop-hover,
  .lift-hover,
  .spin-hover {
    animation: none;
    transition: none;
  }
}