/* Custom Animations for Chake chake Portal
-------------------------------------------------- */

/* Fade in animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-30px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(30px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Bounce animations */
@keyframes bounce {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}

/* Pulse animation */
@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

/* Circular Economy Animation */
@keyframes circular-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Flow Animation for Circular Economy */
@keyframes flow-cycle {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* Gentle Float Animation */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* Shimmer Effect */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* 3D Flip Effect */
@keyframes flip {
  0% {
    transform: perspective(400px) rotateY(0);
  }
  100% {
    transform: perspective(400px) rotateY(180deg);
  }
}

/* Slide-in from bottom */
@keyframes slideInBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Pop Effect */
@keyframes pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Ripple Effect */
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* Glow Effect */
@keyframes glow {
  0% {
    box-shadow: 0 0 5px rgba(32, 201, 151, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(32, 201, 151, 0.8);
  }
  100% {
    box-shadow: 0 0 5px rgba(32, 201, 151, 0.5);
  }
}

/* Morph Effect */
@keyframes morph {
  0% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
  100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
}

/* Dash animation for SVG paths */
@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Wave animation for flowing elements */
@keyframes wave {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(10px);
  }
}

/* Typewriter effect */
@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blinkCursor {
  from, to { border-color: transparent; }
  50% { border-color: #198754; }
}

/* Reveal text effect */
@keyframes revealText {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* Color pulse for highlighting */
@keyframes colorPulse {
  0%, 100% { color: inherit; }
  50% { color: #198754; }
}

/* Background gradient flow */
@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Animation classes */
.animate-fade-in {
  animation: fadeIn 0.8s ease forwards;
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease forwards;
}

.animate-fade-in-left {
  animation: fadeInLeft 0.8s ease forwards;
}

.animate-fade-in-right {
  animation: fadeInRight 0.8s ease forwards;
}

.animate-bounce {
  animation: bounce 1s ease;
}

.animate-pulse {
  animation: pulse 1.5s infinite;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-circular {
  animation: circular-rotate 10s linear infinite;
}

.animate-flow {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: flow-cycle 8s linear forwards;
}

.animate-shimmer {
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

.animate-pop {
  animation: pop 0.5s ease;
}

.animate-slide-in-bottom {
  animation: slideInBottom 0.6s ease-out forwards;
}

.animate-flip {
  animation: flip 0.8s ease-in-out;
  backface-visibility: visible;
}

.animate-glow {
  animation: glow 2s ease-in-out infinite;
}

.animate-morph {
  animation: morph 8s ease-in-out infinite;
}

.animate-dash {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 2s linear forwards;
}

.animate-wave {
  animation: wave 3s ease-in-out infinite;
}

.animate-typewriter {
  overflow: hidden;
  border-right: 3px solid;
  white-space: nowrap;
  margin: 0 auto;
  animation: 
    typewriter 3.5s steps(40, end),
    blinkCursor 0.75s step-end infinite;
}

.animate-reveal-text {
  animation: revealText 1s ease forwards;
}

.animate-color-pulse {
  animation: colorPulse 2s infinite;
}

.animate-gradient-flow {
  background: linear-gradient(270deg, #198754, #20c997, #0dcaf0);
  background-size: 600% 600%;
  animation: gradientFlow 8s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }
.delay-900 { animation-delay: 900ms; }
.delay-1000 { animation-delay: 1000ms; }

/* Card Hover Effects */
.card-hover-effect {
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
  z-index: 1;
}

.card-hover-effect:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
  z-index: 2;
}

.card-hover-effect::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(25, 135, 84, 0.1) 0%, rgba(32, 201, 151, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.card-hover-effect:hover::before {
  opacity: 1;
}

.card-3d {
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.card-3d:hover {
  transform: rotateY(5deg) rotateX(5deg);
  box-shadow: -10px 10px 20px rgba(0,0,0,0.1);
}

.card-glossy {
  position: relative;
  overflow: hidden;
}

.card-glossy::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to bottom right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.1) 25%,
    rgba(255,255,255,0.4) 50%,
    rgba(255,255,255,0.1) 75%,
    rgba(255,255,255,0) 100%
  );
  transform: rotate(30deg);
  transition: transform 0.7s ease-in-out;
}

.card-glossy:hover::after {
  transform: rotate(30deg) translate(25%, 25%);
}

/* Header animations */
.page-header.active {
  animation: fadeIn 1s ease;
}

.page-header.active::before {
  animation: circular-rotate 20s linear infinite;
}

/* Section transitions */
.section-transition {
  opacity: 1;
  transform: translateY(30px);
  transition: opacity 2.9s ease, transform 1.9s ease;
}

.section-transition.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Button hover effects */
.btn-hover-effect {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  z-index: 1;
}

.btn-hover-effect:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s ease;
  z-index: -1;
}

.btn-hover-effect:hover:after {
  transform: scaleX(1);
  transform-origin: left;
}

.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform 0.5s, opacity 0.8s;
}

.btn-ripple:active:after {
  transform: scale(0, 0);
  opacity: 0.3;
  transition: 0s;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

/* Image hover effects */
.img-hover-zoom {
  overflow: hidden;
  position: relative;
}

.img-hover-zoom img {
  transition: transform 0.5s ease;
}

.img-hover-zoom:hover img {
  transform: scale(1.1);
}

.img-tilt {
  transition: transform 0.3s ease;
}

.img-tilt:hover {
  transform: perspective(1000px) rotateX(5deg) rotateY(5deg);
}

/* Form control effects */
.form-control, .form-select {
  transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
  border-color: #198754;
}

.form-control.loading {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23aaa' d='M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='1s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
}

.form-control.error {
  border-color: #dc3545;
  animation: shake 0.5s linear;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loading-spinner {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #198754;
  animation: spin 1s ease-in-out infinite;
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.7);
  animation: float 2s ease-in-out infinite;
}

.scroll-indicator:hover {
  color: rgba(255, 255, 255, 1);
  cursor: pointer;
}

/* Parallax effects */
.parallax-section {
  position: relative;
  overflow: hidden;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 400px;
  z-index: 1;
}

.parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  transform: translateZ(0);
  z-index: -1;
}

/* Card grid animations */
.card-grid-item {
  opacity: 1;
  transform: translateY(20px);
  transition: opacity 2.9s ease, transform 1.9s ease;
}

.card-grid-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animations */
.stagger-item {
  opacity: 1;
  transform: translateY(20px);
  transition: opacity 2.9s ease, transform 1.9s ease;
}

.stagger-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Content block animations */
.content-block {
  transition: all 0.3s ease;
  transform: translateZ(0);
  will-change: transform, box-shadow;
}

.content-block.visible {
  animation: fadeInUp 0.6s ease forwards;
}

.content-block:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  transform: scale(0.85) translateY(-1rem) translateX(0.15rem);
  color: #198754;
}

@keyframes notify {
  0% { 
    opacity: 0;
    transform: translateY(-20px);
  }
  10% { 
    opacity: 1;
    transform: translateY(0);
  }
  90% { opacity: 1; }
  100% { 
    opacity: 0;
    transform: translateY(-20px);
  }
}

.badge-animated {
  position: relative;
  animation: pop 0.3s ease;
  transform-origin: center;
}

.progress-bar-animated {
  position: relative;
  overflow: hidden;
}

.progress-bar-animated::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.3) 50%,
    rgba(255,255,255,0) 100%
  );
  animation: shimmer 1.5s infinite;
}

/* Dashboard elements */
.dashboard-stat {
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
}

.dashboard-stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.dashboard-stat-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
  background: rgba(25, 135, 84, 0.8);
  transition: all 0.3s ease;
  opacity: 0.8;
}

.dashboard-stat:hover .dashboard-stat-icon {
  transform: scale(1.1) rotate(10deg);
  opacity: 1;
}

/* Gallery effects */
.gallery-item {
  position: relative;
  overflow: hidden;
  opacity: 1;
  transform: scale(0.95);
  transition: all 2.9s ease;
}

.gallery-item.visible {
  opacity: 1;
  transform: scale(1);
}

/* Loading indicators */
.empty-icon {
  animation: pulse 2s infinite;
}

.img-loading {
  position: relative;
  overflow: hidden;
}

.img-loading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.5s infinite;
}

img.loading {
  opacity: 0;
  transition: opacity 0.3s ease;
}

img.loaded {
  opacity: 1;
}

/* Header wave animation */
.wave-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.wave-bg svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 50px;
  transform: rotateY(180deg);
}

.wave-bg .shape-fill {
  fill: #FFFFFF;
}

/* Text gradient effects */
.text-gradient {
  background: linear-gradient(to right, #198754, #20c997);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.text-gradient-blue {
  background: linear-gradient(to right, #0d6efd, #0dcaf0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Form field focus effect */
.input-focused {
  position: relative;
}

.input-focused::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #198754;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.input-focused.active::after {
  transform: scaleX(1);
}

/* Enhanced buttons */
.btn-gradient {
  background: linear-gradient(135deg, #198754 0%, #20c997 100%);
  border: none;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.btn-gradient::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #20c997 0%, #198754 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.btn-gradient:hover::before {
  opacity: 1;
}

/* Glowing shadow effect */
.shadow-glow {
  box-shadow: 0 5px 15px rgba(25, 135, 84, 0.2);
  transition: box-shadow 0.3s ease;
}

.shadow-glow:hover {
  box-shadow: 0 8px 25px rgba(25, 135, 84, 0.4);
}

/* Add more custom effects here as needed */

/* Custom Animations for Page Builder Components
-------------------------------------------------- */

/* Basic Fade In Animation */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.8s ease forwards;
}

/* Fade In with Direction Animations */
@keyframes fadeInUp {
    from { 
        opacity: 0;
        transform: translateY(30px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes fadeInDown {
    from { 
        opacity: 0;
        transform: translateY(-30px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-down {
    animation: fadeInDown 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes fadeInLeft {
    from { 
        opacity: 0;
        transform: translateX(-30px);
    }
    to { 
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in-left {
    animation: fadeInLeft 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes fadeInRight {
    from { 
        opacity: 0;
        transform: translateX(30px);
    }
    to { 
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in-right {
    animation: fadeInRight 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Zoom Animations */
@keyframes zoomIn {
    from { 
        opacity: 0;
        transform: scale(0.8);
    }
    to { 
        opacity: 1;
        transform: scale(1);
    }
}

.zoom-in {
    animation: zoomIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Bounce Animation */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

.bounce {
    animation: bounce 1.5s ease infinite;
}

/* Pulse Animation */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
}

.pulse {
    animation: pulse 2s infinite;
}

/* Shake Animation */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

.shake {
    animation: shake 0.8s cubic-bezier(.36,.07,.19,.97) both;
}

/* Flash Animation */
@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0.5;
    }
}

.flash {
    animation: flash 1s;
}

/* Hover Effect Transitions */
.transition-all {
    transition: all 0.3s ease;
}

.transform-on-hover {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

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

.zoom-on-hover {
    transition: transform 0.5s ease;
}

.zoom-on-hover:hover {
    transform: scale(1.05);
}

/* Ripple Effect for Buttons */
.ripple {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Button hover effect */
.btn-hover-effect {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s ease;
}

.btn-hover-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0.2), rgba(255,255,255,0));
    transition: all 0.4s ease;
    z-index: -1;
}

.btn-hover-effect:hover::before {
    left: 100%;
}

.btn-hover-effect:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

/* Card hover effects */
.card-hover {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: perspective(1000px) rotateY(0deg);
}

.card-hover:hover {
    transform: translateY(-10px) perspective(1000px) rotateY(2deg);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* Animation Delays */
.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}

.delay-400 {
    animation-delay: 0.4s;
}

.delay-500 {
    animation-delay: 0.5s;
}

/* Animation for text gradient */
.text-gradient {
    background: linear-gradient(90deg, #198754, #20c997);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* Input focus animation */
.input-focused {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

/* Special section animation for section reveal */
.content-section {
    opacity: 1;
    transform: translateY(30px);
    transition: opacity 2.9s ease, transform 1.9s ease;
}

.content-section.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Animation for image overlays */
.overlay-content {
    background: rgba(0, 0, 0, 0.5);
    opacity: 1;
    transition: all 2.9s ease;
}

.card-overlay-container:hover .overlay-content {
    opacity: 1;
}

/* Special animation for masonry grid items */
.masonry-item {
    opacity: 1;
    transform: translateY(30px);
    transition: opacity 2.9s ease, transform 1.9s ease;
}

.masonry-item.revealed {
    opacity: 1;
    transform: translateY(0);
}