/* =========================================================
   MEDDICATE Website - animations.css
   Preloader / Hero / Background / Scroll / Hover Animations
========================================================= */

/* =========================
   Global Animation Variables
========================= */
:root {
  --anim-fast: 0.25s;
  --anim-normal: 0.45s;
  --anim-slow: 0.8s;
  --anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================
   Preloader Animations
========================= */
.preloader {
  transition:
    opacity 0.7s ease,
    visibility 0.7s ease;
}

body.is-loaded .preloader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__content {
  animation: preloaderCardIn 0.9s var(--anim-ease) both;
}

.preloader__content img {
  animation: logoFloat 2.4s ease-in-out infinite;
}

.preloader__pulse path {
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  animation: pulseDraw 1.55s ease-in-out infinite;
}

.preloader__text {
  animation: textFadePulse 1.8s ease-in-out infinite;
}

/* =========================
   Site Background Animations
========================= */
.site-bg__gradient {
  animation: gradientMove 14s ease-in-out infinite alternate;
}

.site-bg__grid {
  animation: gridDrift 24s linear infinite;
}

.site-bg__pulse-line {
  animation: pulseLineMove 7s ease-in-out infinite;
}

/* =========================
   Header Animations
========================= */
.header {
  transition:
    background 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.header.header--scrolled {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 40px rgba(17, 28, 36, 0.08);
}

.header__logo img {
  transition:
    transform var(--anim-normal) var(--anim-ease),
    filter var(--anim-normal) var(--anim-ease);
}

.header__logo:hover img {
  transform: translateY(-2px) scale(1.02);
}

.header__nav a,
.header__cta {
  will-change: transform;
}

.header__nav a:hover,
.header__cta:hover {
  transform: translateY(-2px);
}

.header__menu-btn span {
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.header__menu-btn.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.header__menu-btn.is-active span:nth-child(2) {
  opacity: 0;
}

.header__menu-btn.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* =========================
   Hero / Slider Animations
========================= */
.hero__slide {
  transition:
    opacity 0.75s ease,
    visibility 0.75s ease;
}

.hero__slide--active .section-label {
  animation: slideUpFade 0.75s var(--anim-ease) both;
}

.hero__slide--active h1,
.hero__slide--active .hero__title {
  animation: slideUpFade 0.85s var(--anim-ease) 0.08s both;
}

.hero__slide--active .hero__content p {
  animation: slideUpFade 0.85s var(--anim-ease) 0.18s both;
}

.hero__slide--active .hero__actions {
  animation: slideUpFade 0.85s var(--anim-ease) 0.28s both;
}

.hero__slide--active .hero__visual > img {
  animation:
    heroImageIn 1s var(--anim-ease) 0.15s both,
    heroImageFloat 6s ease-in-out 1.2s infinite;
}

.hero__floating-card {
  animation: floatingCard 4.5s ease-in-out infinite;
}

.hero__floating-card--one {
  animation-delay: 0.4s;
}

.hero__floating-card--two {
  animation-delay: 0.9s;
}

.hero__dot {
  transition:
    width 0.3s ease,
    background 0.3s ease,
    transform 0.3s ease;
}

.hero__dot:hover {
  transform: translateY(-2px);
}

/* =========================
   Scroll Reveal Animations
   Add .reveal to any element from HTML/JS
========================= */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 0.8s var(--anim-ease),
    transform 0.8s var(--anim-ease);
  will-change: opacity, transform;
}

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

.reveal-left {
  opacity: 0;
  transform: translateX(-38px);
  transition:
    opacity 0.8s var(--anim-ease),
    transform 0.8s var(--anim-ease);
}

.reveal-right {
  opacity: 0;
  transform: translateX(38px);
  transition:
    opacity 0.8s var(--anim-ease),
    transform 0.8s var(--anim-ease);
}

.reveal-left.reveal--visible,
.reveal-right.reveal--visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity 0.75s var(--anim-ease),
    transform 0.75s var(--anim-ease);
}

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

/* Delay helpers */
.delay-1 {
  transition-delay: 0.08s;
  animation-delay: 0.08s;
}

.delay-2 {
  transition-delay: 0.16s;
  animation-delay: 0.16s;
}

.delay-3 {
  transition-delay: 0.24s;
  animation-delay: 0.24s;
}

.delay-4 {
  transition-delay: 0.32s;
  animation-delay: 0.32s;
}

/* =========================
   Component Hover Animations
========================= */
.feature-card,
.product-card,
.category-card,
.service-item,
.stat-card,
.partner-card,
.certificate-card {
  will-change: transform;
}

.feature-card {
  transition:
    transform var(--anim-normal) var(--anim-ease),
    background var(--anim-normal) var(--anim-ease),
    box-shadow var(--anim-normal) var(--anim-ease);
}

.feature-card:hover {
  transform: translateY(-8px);
  background: linear-gradient(180deg, #ffffff, #f8fbfc);
  box-shadow: inset 0 -3px 0 var(--color-primary);
}

.feature-card img {
  transition:
    transform var(--anim-normal) var(--anim-ease),
    filter var(--anim-normal) var(--anim-ease);
}

.feature-card:hover img {
  transform: translateY(-4px) scale(1.08);
  filter: drop-shadow(0 10px 18px rgba(201, 0, 0, 0.22));
}

.product-card__content a,
.services-preview__content a,
.certificates__content a,
.section-action a,
.contact-cta__actions a {
  position: relative;
  overflow: hidden;
}

.product-card__content a::after,
.services-preview__content a::after,
.certificates__content a::after,
.section-action a::after,
.contact-cta__actions a::after,
.header__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 45%,
    transparent 60%
  );
  transform: translateX(-120%);
  transition: transform 0.65s ease;
}

.product-card__content a:hover::after,
.services-preview__content a:hover::after,
.certificates__content a:hover::after,
.section-action a:hover::after,
.contact-cta__actions a:hover::after,
.header__cta:hover::after {
  transform: translateX(120%);
}

.category-card::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 22px;
  z-index: 2;
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity var(--anim-normal) ease,
    transform var(--anim-normal) ease;
}

.category-card:hover::before {
  opacity: 1;
  transform: scale(1);
}

.stat-card {
  transition:
    transform var(--anim-normal) var(--anim-ease),
    box-shadow var(--anim-normal) var(--anim-ease);
}

.stat-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-medium);
}

.stat-card strong {
  transition: transform var(--anim-normal) var(--anim-ease);
}

.stat-card:hover strong {
  transform: scale(1.06);
}

/* =========================
   Image Animations
========================= */
.welcome__image img,
.certificate-card img,
.partner-card img {
  transition:
    transform var(--anim-normal) var(--anim-ease),
    filter var(--anim-normal) var(--anim-ease);
}

.welcome__image:hover img,
.certificate-card:hover img,
.partner-card:hover img {
  transform: scale(1.025);
  filter: saturate(1.06) contrast(1.04);
}

.welcome__image::before {
  animation: dotsFloat 5s ease-in-out infinite;
}

/* =========================
   Contact CTA Animation
========================= */
.contact-cta {
  position: relative;
  overflow: hidden;
}

.contact-cta::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(201, 0, 0, 0.2);
  filter: blur(60px);
  animation: redGlowFloat 7s ease-in-out infinite;
}

.contact-cta__container {
  position: relative;
  z-index: 2;
}

/* =========================
   Footer Animations
========================= */
.footer a {
  position: relative;
}

.footer a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: var(--color-primary);
  transition: width 0.25s ease;
}

.footer a:hover::after {
  width: 100%;
}

/* =========================
   Keyframes
========================= */
@keyframes preloaderCardIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes logoFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes pulseDraw {
  0% {
    stroke-dashoffset: 620;
    opacity: 0.4;
  }

  45% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  100% {
    stroke-dashoffset: -620;
    opacity: 0.4;
  }
}

@keyframes textFadePulse {
  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 1;
  }
}

@keyframes gradientMove {
  0% {
    transform: scale(1) translate(0, 0);
  }

  100% {
    transform: scale(1.08) translate(-18px, 14px);
  }
}

@keyframes gridDrift {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 108px 108px;
  }
}

@keyframes pulseLineMove {
  0%,
  100% {
    transform: translateX(-12%) translateY(0);
    opacity: 0.05;
  }

  50% {
    transform: translateX(12%) translateY(-18px);
    opacity: 0.12;
  }
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroImageIn {
  from {
    opacity: 0;
    transform: translateX(34px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes heroImageFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-14px);
  }
}

@keyframes floatingCard {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

@keyframes dotsFloat {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(10px, -12px);
  }
}

@keyframes redGlowFloat {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-30px, 28px) scale(1.12);
  }
}

/* =========================
   Reduced Motion Support
========================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .site-bg__grid,
  .site-bg__gradient,
  .site-bg__pulse-line {
    animation: none !important;
  }
}