/* Blogger Course - Animations & Transitions */

/* Fade In Animations */
@keyframes bc-fadein1cu {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bc-fadeinleft1cv {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes bc-fadeinright1cw {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale Animations */
@keyframes bc-scaleup1cx {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Slide Animations */
@keyframes bc-slideup1cy {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Rotate Animations */
@keyframes bc-rotatein1cz {
  from {
    opacity: 0;
    transform: rotate(-5deg) scale(0.9);
  }
  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

/* Shimmer Effect */
@keyframes bc-shimmer1da {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* Pulse Animation */
@keyframes bc-pulse1db {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Bounce Animation */
@keyframes bc-bounce1dc {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Wave Animation */
@keyframes bc-wave1dd {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}

/* Animation Classes */
.bc-anim1de {
  animation: bc-fadein1cu var(--bc-a4) ease-out forwards;
  opacity: 0;
}

.bc-anim2df {
  animation: bc-fadeinleft1cv var(--bc-a4) ease-out forwards;
  opacity: 0;
}

.bc-anim3dg {
  animation: bc-fadeinright1cw var(--bc-a4) ease-out forwards;
  opacity: 0;
}

.bc-anim4dh {
  animation: bc-scaleup1cx var(--bc-a4) ease-out forwards;
  opacity: 0;
}

.bc-anim5di {
  animation: bc-rotatein1cz var(--bc-a4) ease-out forwards;
  opacity: 0;
}

/* Staggered Animation Delays */
.bc-delay1dj { animation-delay: 0.1s; }
.bc-delay2dk { animation-delay: 0.2s; }
.bc-delay3dl { animation-delay: 0.3s; }
.bc-delay4dm { animation-delay: 0.4s; }
.bc-delay5dn { animation-delay: 0.5s; }
.bc-delay6do { animation-delay: 0.6s; }
.bc-delay7dp { animation-delay: 0.7s; }
.bc-delay8dq { animation-delay: 0.8s; }

/* Scroll Reveal Classes */
.bc-reveal1dr {
  opacity: 0;
  transform: translateY(50px);
  transition: all var(--bc-a4) ease-out;
}

.bc-reveal1dr.bc-visible {
  opacity: 1;
  transform: translateY(0);
}

.bc-reveal2ds {
  opacity: 0;
  transform: translateX(-50px);
  transition: all var(--bc-a4) ease-out;
}

.bc-reveal2ds.bc-visible {
  opacity: 1;
  transform: translateX(0);
}

.bc-reveal3dt {
  opacity: 0;
  transform: scale(0.9);
  transition: all var(--bc-a4) ease-out;
}

.bc-reveal3dt.bc-visible {
  opacity: 1;
  transform: scale(1);
}

/* Hover Effects */
.bc-hover1du {
  transition: all var(--bc-a2) ease;
}

.bc-hover1du:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.bc-hover2dv {
  position: relative;
  overflow: hidden;
}

.bc-hover2dv::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.4),
    transparent
  );
  transition: left var(--bc-a4) ease;
}

.bc-hover2dv:hover::after {
  left: 100%;
}

.bc-hover3dw {
  transform-origin: center;
  transition: transform var(--bc-a2) ease;
}

.bc-hover3dw:hover {
  transform: scale(1.05);
}

/* Loading States */
.bc-loading1dx {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}

.bc-loading1dx::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid var(--bc-c9);
  border-top-color: var(--bc-c6);
  border-radius: 50%;
  animation: bc-spin1dy 0.8s linear infinite;
}

@keyframes bc-spin1dy {
  to { transform: rotate(360deg); }
}

/* Progress Bars */
.bc-progress1dz {
  height: 4px;
  background: var(--bc-c9);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.bc-progressbar1ea {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--bc-c6),
    var(--bc-c12)
  );
  transition: width var(--bc-a4) ease;
  position: relative;
}

.bc-progressbar1ea::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.3),
    transparent
  );
  animation: bc-shimmer1da 2s infinite;
}

/* Skeleton Loading */
.bc-skeleton1eb {
  background: linear-gradient(
    90deg,
    var(--bc-c9) 0%,
    var(--bc-c4) 50%,
    var(--bc-c9) 100%
  );
  background-size: 200% 100%;
  animation: bc-shimmer1da 1.5s infinite;
  border-radius: 4px;
}

/* Parallax Elements */
.bc-parallax1ec {
  transition: transform 0.05s ease-out;
  will-change: transform;
}

/* Smooth Scroll */
.bc-smoothscroll1ed {
  scroll-behavior: smooth;
}

/* Image Zoom */
.bc-zoomwrap1ee {
  overflow: hidden;
}

.bc-zoomimg1ef {
  transition: transform var(--bc-a5) ease;
}

.bc-zoomwrap1ee:hover .bc-zoomimg1ef {
  transform: scale(1.1);
}

/* Typewriter Effect */
@keyframes bc-typewriter1eg {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes bc-blink1eh {
  50% {
    border-color: transparent;
  }
}

.bc-typewriter1ei {
  display: inline-block;
  overflow: hidden;
  border-right: 2px solid var(--bc-c1);
  white-space: nowrap;
  animation:
    bc-typewriter1eg 3s steps(40) 1s forwards,
    bc-blink1eh 0.75s step-end infinite;
  width: 0;
}

/* Gradient Animation */
@keyframes bc-gradientshift1ej {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.bc-gradientanim1ek {
  background: linear-gradient(
    -45deg,
    rgba(212, 175, 55, 0.1),
    rgba(139, 69, 19, 0.1),
    rgba(44, 95, 45, 0.1),
    rgba(212, 175, 55, 0.1)
  );
  background-size: 400% 400%;
  animation: bc-gradientshift1ej 15s ease infinite;
}

/* Float Animation */
@keyframes bc-float1el {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.bc-float1em {
  animation: bc-float1el 6s ease-in-out infinite;
}

/* Flip Animation */
@keyframes bc-flip1en {
  from {
    transform: perspective(400px) rotateY(0);
  }
  to {
    transform: perspective(400px) rotateY(360deg);
  }
}

.bc-flip1eo:hover {
  animation: bc-flip1en 0.6s ease-in-out;
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .bc-parallax1ec {
    transform: none !important;
  }
  
  .bc-float1em {
    animation: none !important;
  }
}

/* Focus Visible */
.bc-focus1ep:focus-visible {
  outline: 3px solid var(--bc-c6);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Transition Utilities */
.bc-trans1eq {
  transition: all var(--bc-a2) ease;
}

.bc-trans2er {
  transition: all var(--bc-a3) ease;
}

.bc-trans3es {
  transition: all var(--bc-a4) ease;
}