/* ======================== REVEAL ANIMATIONS ======================== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ======================== STAGGERED ENTRANCE ======================== */
.values-grid .value-card.reveal,
.products-grid .product-card.reveal,
.about-grid .about-card.reveal,
.support-grid .support-card.reveal {
  transform: translateY(40px) scale(0.98);
}

.values-grid .value-card.reveal.visible,
.products-grid .product-card.reveal.visible,
.about-grid .about-card.reveal.visible,
.support-grid .support-card.reveal.visible {
  transform: translateY(0) scale(1);
}

/* ======================== HERO BADGE ENTRANCE ======================== */
.hero-badge {
  animation: slideDown 0.8s var(--ease) 0.2s both;
}

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

/* ======================== LOGO SPIN ON HOVER ======================== */
.logo:hover .logo-mark {
  transform: rotate(360deg);
  transition: transform 0.8s var(--ease-spring);
}

.logo-mark {
  transition: transform 0.8s var(--ease-spring);
}

/* ======================== FLOATING ELEMENTS ======================== */
.video-badge {
  animation: floatY 3s ease-in-out infinite;
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ======================== SHIMMER ON CARDS ======================== */
.value-card::after,
.product-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );
  transition: left 0.6s var(--ease);
  pointer-events: none;
}

.value-card:hover::after,
.product-card:hover::after {
  left: 100%;
}

/* ======================== GRADIENT TEXT ANIMATION ======================== */
.gradient-text {
  background-size: 200% auto;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ======================== PLAY BUTTON PULSE ======================== */
.play-btn::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  animation: pulseRing 2s ease-out infinite;
}

@keyframes pulseRing {
  0% {
    transform: scale(0.95);
    opacity: 1;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

/* ======================== PAGE TRANSITIONS ======================== */
.page {
  animation: pageEnter 0.6s var(--ease) both;
}

@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ======================== SCROLL BAR ======================== */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--purple-50);
}

::-webkit-scrollbar-thumb {
  background: var(--purple-400);
  border-radius: 10px;
  border: 2px solid var(--purple-50);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--purple-600);
}

/* ======================== SKELETON LOADER FOR FUTURE ======================== */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--purple-100) 25%,
    var(--purple-50) 50%,
    var(--purple-100) 75%
  );
  background-size: 200% 100%;
  animation: skeleton 1.5s ease-in-out infinite;
}

@keyframes skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ======================== TOAST ENTRANCE ======================== */
@keyframes toastSlide {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ======================== SUBTLE ROTATE ON ICONS ======================== */
.support-card:hover .support-icon {
  animation: wiggle 0.5s var(--ease-spring);
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}