/* ═══════════════════════════════════════════════════════════
   WYMEDRX — animations.css
   All keyframes, transitions, scroll reveals, micro-interactions
═══════════════════════════════════════════════════════════ */

/* ─── KEYFRAMES ─── */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-18px) rotate(1.5deg); }
  66%       { transform: translateY(-8px) rotate(-1deg); }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-22px); }
}
@keyframes orbPulse {
  0%, 100% { transform: scale(1); opacity: 0.18; }
  50%       { transform: scale(1.12); opacity: 0.28; }
}
@keyframes orbPulse2 {
  0%, 100% { transform: scale(1.1); opacity: 0.12; }
  50%       { transform: scale(0.92); opacity: 0.22; }
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.85); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes scrollWheel {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(10px); opacity: 0; }
}
@keyframes cardStack {
  0%   { transform: rotate(-6deg) translateX(-30px); opacity: 0; }
  100% { transform: rotate(-6deg) translateX(0); opacity: 1; }
}
@keyframes cardStackMid {
  0%   { transform: rotate(2deg) translateX(30px); opacity: 0; }
  100% { transform: rotate(2deg) translateX(0); opacity: 1; }
}
@keyframes cardStackFront {
  0%   { transform: translateY(30px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes badgeFloat1 {
  0%, 100% { transform: translate(0, 0) rotate(-3deg); }
  50%       { transform: translate(4px, -10px) rotate(-3deg); }
}
@keyframes badgeFloat2 {
  0%, 100% { transform: translate(0, 0) rotate(4deg); }
  50%       { transform: translate(-4px, -14px) rotate(4deg); }
}
@keyframes hbadgeFloat1 {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%       { transform: translateY(-8px) rotate(-4deg); }
}
@keyframes hbadgeFloat2 {
  0%, 100% { transform: translateY(0) rotate(3deg); }
  50%       { transform: translateY(-12px) rotate(3deg); }
}
@keyframes dotBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}
@keyframes navSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes progressBar {
  from { width: 0; }
  to   { width: var(--scroll-progress, 0%); }
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.93) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes modalOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.95); }
}
@keyframes overlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(8px); }
}
@keyframes heroWordReveal {
  from { opacity: 0; transform: translateY(28px) skewY(3deg); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: translateY(0) skewY(0); clip-path: inset(0 0 0% 0); }
}
@keyframes meshMove {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(30px, -20px) scale(1.05); }
  66%  { transform: translate(-20px, 10px) scale(0.97); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes gridPan {
  from { background-position: 0 0; }
  to   { background-position: 40px 40px; }
}
@keyframes ringExpand {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}
@keyframes counterUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes specCardHover {
  from { transform: translateY(0) scale(1); box-shadow: 0 4px 24px rgba(12,36,97,0.06); }
  to   { transform: translateY(-8px) scale(1.01); box-shadow: 0 24px 60px rgba(12,36,97,0.16); }
}
@keyframes productCardHover {
  from { transform: translateY(0); box-shadow: 0 2px 16px rgba(12,36,97,0.05); }
  to   { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(12,36,97,0.14); }
}
@keyframes ribbonSlide {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes noiseDrift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, -2%); }
  50%  { transform: translate(2%, 2%); }
  75%  { transform: translate(-1%, 2%); }
  100% { transform: translate(0, 0); }
}

/* ─── SCROLL REVEAL ─── */

[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

[data-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-stagger].revealed > *:nth-child(1)  { transition-delay: 0.04s; }
[data-stagger].revealed > *:nth-child(2)  { transition-delay: 0.10s; }
[data-stagger].revealed > *:nth-child(3)  { transition-delay: 0.16s; }
[data-stagger].revealed > *:nth-child(4)  { transition-delay: 0.22s; }
[data-stagger].revealed > *:nth-child(5)  { transition-delay: 0.28s; }
[data-stagger].revealed > *:nth-child(6)  { transition-delay: 0.34s; }
[data-stagger].revealed > *:nth-child(7)  { transition-delay: 0.40s; }
[data-stagger].revealed > *:nth-child(8)  { transition-delay: 0.46s; }
[data-stagger].revealed > * {
  opacity: 1;
  transform: translateY(0);
}

/* ─── HERO WORD REVEAL ─── */
.reveal-word {
  display: inline-block;
  opacity: 0;
  animation: heroWordReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-play-state: paused;
}
.reveal-word.play { animation-play-state: running; }
.reveal-word:nth-child(1) { animation-delay: 0.1s; }
.reveal-word:nth-child(2) { animation-delay: 0.3s; }
.reveal-word:nth-child(3) { animation-delay: 0.55s; }

/* ─── FLOATING ELEMENTS ─── */
.hero-orb-1 { animation: orbPulse  8s ease-in-out infinite; }
.hero-orb-2 { animation: orbPulse2 10s ease-in-out infinite; }
.hero-orb-3 { animation: orbPulse  12s ease-in-out infinite 2s; }

.hcard.hcard-back  { animation: cardStack      0.8s 0.4s cubic-bezier(0.16,1,0.3,1) both; }
.hcard.hcard-mid   { animation: cardStackMid   0.8s 0.6s cubic-bezier(0.16,1,0.3,1) both; }
.hcard.hcard-front { animation: cardStackFront 0.8s 0.8s cubic-bezier(0.16,1,0.3,1) both; }

.hcard.hcard-back  { animation-name: cardStack, float; animation-duration: 0.8s, 7s; animation-delay: 0.4s, 1.2s; animation-fill-mode: both, none; animation-iteration-count: 1, infinite; animation-timing-function: cubic-bezier(0.16,1,0.3,1), ease-in-out; }
.hcard.hcard-mid   { animation-name: cardStackMid, floatSlow; animation-duration: 0.8s, 9s; animation-delay: 0.6s, 1.4s; animation-fill-mode: both, none; animation-iteration-count: 1, infinite; animation-timing-function: cubic-bezier(0.16,1,0.3,1), ease-in-out; }
.hcard.hcard-front { animation-name: cardStackFront, float; animation-duration: 0.8s, 6s; animation-delay: 0.8s, 1.6s; animation-fill-mode: both, none; animation-iteration-count: 1, infinite; animation-timing-function: cubic-bezier(0.16,1,0.3,1), ease-in-out; }

.hbadge-1 { animation: hbadgeFloat1 5.5s ease-in-out infinite; }
.hbadge-2 { animation: hbadgeFloat2 7s ease-in-out infinite; }

.about-float-1 { animation: badgeFloat1 5s ease-in-out infinite; }
.about-float-2 { animation: badgeFloat2 7s ease-in-out infinite; }

/* Scroll mouse indicator */
.scroll-wheel { animation: scrollWheel 1.6s ease-out infinite; }

/* Eyebrow dot */
.eyebrow-dot { animation: dotBlink 2s ease-in-out infinite; }

/* Nav */
#mainNav { animation: navSlideDown 0.6s 0.1s cubic-bezier(0.16,1,0.3,1) both; }

/* Modal */
.modal-overlay.open      { animation: overlayIn 0.25s ease forwards; }
.modal-overlay.open .modal-box { animation: modalIn 0.35s cubic-bezier(0.16,1,0.3,1) forwards; }
.modal-overlay.closing   { animation: overlayIn 0.2s ease reverse forwards; }
.modal-overlay.closing .modal-box { animation: modalOut 0.2s ease forwards; }

/* Toast */
.toast.show    { animation: toastIn  0.3s cubic-bezier(0.16,1,0.3,1) forwards; }
.toast.dismiss { animation: toastOut 0.25s ease forwards; }

/* Mission ribbon */
.ribbon-inner { animation: ribbonSlide 0.6s 0.8s cubic-bezier(0.16,1,0.3,1) both; }

/* Noise overlay drift */
.noise-overlay { animation: noiseDrift 60s linear infinite; }

/* ─── HOVER TRANSITIONS ─── */
.btn {
  transition: background-color 0.22s, color 0.22s, transform 0.18s, box-shadow 0.22s, border-color 0.22s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.product-card {
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.35s ease,
              border-color 0.2s;
}
.product-card:hover { transform: translateY(-7px) scale(1.01); }

.spec-card {
  transition: opacity 0.25s ease,
              box-shadow 0.3s ease,
              transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.spec-card:hover { opacity: 0.88; }

.why-card {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.3s ease,
              background-color 0.25s;
}
.why-card:hover { transform: translateY(-5px); }

.mini-card {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s, border-color 0.2s;
}
.mini-card:hover { transform: translateY(-4px); }

.nav-link {
  transition: color 0.2s, background-color 0.2s, transform 0.2s;
}
.nav-link:hover { transform: translateY(-1px); }

.spec-card-arrow {
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.spec-card:hover .spec-card-arrow { transform: translate(5px, -5px); }

.filter-tab {
  transition: background-color 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.filter-tab:hover { transform: translateY(-1px); }

.footer-social-btn, .fsoc-btn {
  transition: background-color 0.2s, color 0.2s, transform 0.2s;
}
.footer-social-btn:hover, .fsoc-btn:hover { transform: translateY(-3px) scale(1.1); }

.footer-col ul li a {
  transition: color 0.18s, transform 0.18s;
  display: inline-block;
}
.footer-col ul li a:hover { transform: translateX(5px); }

/* Value card hover */
.value-card {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s, background 0.25s;
}
.value-card:hover { transform: translateY(-6px); }

/* About feature hover */
.about-feat {
  transition: transform 0.25s, background-color 0.2s;
}
.about-feat:hover { transform: translateY(-2px); }

/* Form inputs */
.form-group input,
.form-group textarea,
.form-group select {
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* range cluster */
.range-cluster {
  transition: opacity 0.4s;
}

/* Spec block items */
.spec-block-item {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s, border-color 0.2s;
}
.spec-block-item:hover { transform: translateY(-4px); }

/* Contact info items */
.cinfo-item {
  transition: transform 0.25s;
}
.cinfo-item:hover { transform: translateX(4px); }