/* ============================================
   animations.css - Animation Keyframes & Classes
   Premium Edition
   ============================================ */

/* ============================================
   PRIMARY ENTRANCE ANIMATIONS
   ============================================ */

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-1.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-left {
  from {
    opacity: 0;
    transform: translateX(-1.25rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-in-right {
  from {
    opacity: 0;
    transform: translateX(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-in-scale {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slide-in-bottom {
  from {
    opacity: 0;
    transform: translateY(2rem) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ============================================
   ATTENTION SEEKERS
   ============================================ */

@keyframes pulse-glow {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(15, 95, 89, 0.7);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(15, 95, 89, 0);
  }
}

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

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

@keyframes kenny-burns {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.1) translate(-1%, -1%); }
}

/* ============================================
   MICRO-INTERACTIONS
   ============================================ */

@keyframes premium-sheen {
  from {
    transform: translateX(-140%) rotate(18deg);
  }
  to {
    transform: translateX(140%) rotate(18deg);
  }
}

@keyframes icon-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

/* ============================================
   FLOATING ORBS
   ============================================ */

@keyframes float-orb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(10px, -15px) scale(1.05); }
  66% { transform: translate(-5px, 8px) scale(0.95); }
}

.service-card--export::after {
  animation: float-orb 12s ease-in-out infinite;
}

.service-card--shipping::after {
  animation: float-orb 14s ease-in-out infinite reverse;
}

/* ============================================
   REVEAL ANIMATION (Scroll-triggered)
   ============================================ */

/* Visible by default when JS is disabled, hidden+animated when JS available */
[data-reveal] {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Hidden state — transitions to visible via .is-visible class (JS only) */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 700ms var(--ease-smooth),
              transform 700ms var(--ease-smooth);
  will-change: opacity, transform;
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Directional variants (JS only) */
.js [data-reveal="left"] {
  transform: translateX(-1.25rem);
}
.js [data-reveal="left"].is-visible {
  transform: translateX(0);
}

.js [data-reveal="right"] {
  transform: translateX(1.25rem);
}
.js [data-reveal="right"].is-visible {
  transform: translateX(0);
}

.js [data-reveal="scale"] {
  transform: scale(0.92);
}
.js [data-reveal="scale"].is-visible {
  transform: scale(1);
}

/* 3D reveal variants (JS only) */
.js [data-reveal="3d-roll"] {
  opacity: 0;
  transform: perspective(1200px) rotateY(25deg) translateX(-3rem) scale(0.92);
}
.js [data-reveal="3d-roll"].is-visible {
  opacity: 1;
  transform: perspective(1200px) rotateY(0deg) translateX(0) scale(1);
}

html[dir="rtl"] .js [data-reveal="3d-roll"] {
  transform: perspective(1200px) rotateY(-25deg) translateX(3rem) scale(0.92);
}
html[dir="rtl"] .js [data-reveal="3d-roll"].is-visible {
  transform: perspective(1200px) rotateY(0deg) translateX(0) scale(1);
}

.js [data-reveal="rise-3d"] {
  opacity: 0;
  transform: perspective(800px) translateZ(-100px) translateY(3rem) rotateX(8deg);
}
.js [data-reveal="rise-3d"].is-visible {
  opacity: 1;
  transform: perspective(800px) translateZ(0) translateY(0) rotateX(0deg);
}

.js [data-reveal="title-3d"] {
  opacity: 0;
  transform: perspective(600px) translateZ(-80px) translateY(-1rem) rotateX(6deg);
  filter: blur(4px);
}
.js [data-reveal="title-3d"].is-visible {
  opacity: 1;
  transform: perspective(600px) translateZ(0) translateY(0) rotateX(0deg);
  filter: blur(0);
}

/* Staggered delays — only apply with JS, when .is-visible */
.js [data-reveal].is-visible[data-reveal-delay="100"] { transition-delay: 100ms; }
.js [data-reveal].is-visible[data-reveal-delay="200"] { transition-delay: 200ms; }
.js [data-reveal].is-visible[data-reveal-delay="300"] { transition-delay: 300ms; }
.js [data-reveal].is-visible[data-reveal-delay="400"] { transition-delay: 400ms; }
.js [data-reveal].is-visible[data-reveal-delay="500"] { transition-delay: 500ms; }

/* Grid-item staggered delays (JS only) */
.js .category-card[data-reveal]:nth-child(1).is-visible { transition-delay: 0ms; }
.js .category-card[data-reveal]:nth-child(2).is-visible { transition-delay: 100ms; }
.js .category-card[data-reveal]:nth-child(3).is-visible { transition-delay: 200ms; }
.js .category-card[data-reveal]:nth-child(4).is-visible { transition-delay: 300ms; }

.js .product-card[data-reveal]:nth-child(1).is-visible { transition-delay: 0ms; }
.js .product-card[data-reveal]:nth-child(2).is-visible { transition-delay: 50ms; }
.js .product-card[data-reveal]:nth-child(3).is-visible { transition-delay: 100ms; }
.js .product-card[data-reveal]:nth-child(4).is-visible { transition-delay: 150ms; }
.js .product-card[data-reveal]:nth-child(5).is-visible { transition-delay: 200ms; }
.js .product-card[data-reveal]:nth-child(6).is-visible { transition-delay: 250ms; }

.js .value-card[data-reveal]:nth-child(1).is-visible { transition-delay: 0ms; }
.js .value-card[data-reveal]:nth-child(2).is-visible { transition-delay: 100ms; }
.js .value-card[data-reveal]:nth-child(3).is-visible { transition-delay: 200ms; }

.js .service-card[data-reveal]:nth-child(1).is-visible { transition-delay: 0ms; }
.js .service-card[data-reveal]:nth-child(2).is-visible { transition-delay: 150ms; }

/* Floating 3D — only plays with JS, when .is-visible */
.js [data-float-3d] {
  animation: float-3d 6s var(--ease-smooth) infinite;
  animation-play-state: paused;
}

.js [data-float-3d].is-visible {
  animation-play-state: running;
}

.js [data-float-3d]:nth-child(2) { animation-delay: -2s; }
.js [data-float-3d]:nth-child(3) { animation-delay: -4s; }
.js [data-float-3d]:nth-child(4) { animation-delay: -1s; }

/* 3D pulse for featured items */
[data-pulse-3d] {
  animation: pulse-3d 4s var(--ease-smooth) infinite;
}

/* Reduced motion — show all content immediately */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .js [data-float-3d] {
    animation: none !important;
  }
}

/* ============================================
   HOVER UTILITIES
   ============================================ */

.hover-lift {
  transition: transform 260ms var(--ease-smooth);
}

.hover-lift:hover {
  transform: translateY(-4px);
}

.hover-glow {
  transition: box-shadow 260ms var(--ease-smooth);
}

.hover-glow:hover {
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.12);
}

.hover-scale {
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hover-scale:hover {
  transform: scale(1.02);
}

.hover-float {
  transition: transform 400ms var(--ease-smooth);
}

.hover-float:hover {
  transform: translateY(-6px);
}

/* ============================================
   LOADING ANIMATIONS
   ============================================ */

.loading-spinner {
  animation: spin 1s linear infinite;
}

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

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.loading-skeleton {
  animation: pulse 1.5s ease-in-out infinite;
  background: linear-gradient(
    90deg,
    var(--color-card) 25%,
    var(--color-line) 50%,
    var(--color-card) 75%
  );
  background-size: 200% 100%;
}

/* ============================================
   THEME TRANSITION
   ============================================ */

.theme-transition {
  transition: 
    background-color 300ms cubic-bezier(0.22, 1, 0.36, 1),
    color 300ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================
   GLOBAL PAGE REVEAL
   ============================================ */

@keyframes page-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(1.5rem) translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateZ(0);
  }
}

body > header,
body > footer {
  opacity: 0;
  animation: page-fade-in-up 700ms var(--ease-smooth) forwards;
}

body > header { animation-delay: 100ms; }
body > footer { animation-delay: 300ms; }

/* ============================================
   3D REVEAL ANIMATIONS
   ============================================ */

/* Card rolls in from 3D space */
@keyframes card-3d-roll-in {
  0% {
    opacity: 0;
    transform: perspective(1200px) rotateY(25deg) translateX(-3rem) scale(0.92);
  }
  60% {
    opacity: 1;
    transform: perspective(1200px) rotateY(-3deg) translateX(0.3rem) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: perspective(1200px) rotateY(0deg) translateX(0) scale(1);
  }
}

@keyframes card-3d-roll-in-rtl {
  0% {
    opacity: 0;
    transform: perspective(1200px) rotateY(-25deg) translateX(3rem) scale(0.92);
  }
  60% {
    opacity: 1;
    transform: perspective(1200px) rotateY(3deg) translateX(-0.3rem) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: perspective(1200px) rotateY(0deg) translateX(0) scale(1);
  }
}

/* Elements rise with 3D depth */
@keyframes rise-3d {
  0% {
    opacity: 0;
    transform: perspective(800px) translateZ(-100px) translateY(3rem) rotateX(8deg);
  }
  100% {
    opacity: 1;
    transform: perspective(800px) translateZ(0) translateY(0) rotateX(0deg);
  }
}

/* 3D float loop for cards */
@keyframes float-3d {
  0%, 100% {
    transform: perspective(1000px) translateZ(0) translateY(0) rotateX(0deg);
    box-shadow:
      0 1.5rem 3rem rgba(0,0,0,0.08),
      0 0.5rem 1rem rgba(0,0,0,0.04);
  }
  50% {
    transform: perspective(1000px) translateZ(20px) translateY(-8px) rotateX(1deg);
    box-shadow:
      0 2.5rem 5rem rgba(0,0,0,0.12),
      0 1rem 2rem rgba(0,0,0,0.06);
  }
}

/* 3D pulse — subtle depth breathing */
@keyframes pulse-3d {
  0%, 100% {
    transform: perspective(800px) translateZ(0) scale(1);
    filter: brightness(1);
  }
  50% {
    transform: perspective(800px) translateZ(15px) scale(1.02);
    filter: brightness(1.05);
  }
}

/* Depth layer scroll — moves at different speeds */
@keyframes layer-drift {
  0% { transform: translateZ(0) translateY(0); }
  100% { transform: translateZ(-40px) translateY(-2rem); }
}

/* 3D swoop in for section titles */
@keyframes title-3d-swoop {
  0% {
    opacity: 0;
    transform: perspective(600px) translateZ(-80px) translateY(-1rem) rotateX(6deg);
    filter: blur(4px);
  }
  60% {
    opacity: 1;
    transform: perspective(600px) translateZ(10px) translateY(0.2rem) rotateX(-1deg);
    filter: blur(0);
  }
  100% {
    transform: perspective(600px) translateZ(0) translateY(0) rotateX(0deg);
    filter: blur(0);
  }
}

/* ============================================
   [data-3d] Utility — apply 3D hover to any element
   ============================================ */
[data-3d] {
  transform-style: preserve-3d;
  transition: transform 200ms var(--ease-smooth);
  will-change: transform;
}

/* ============================================
   PARTICLE FLOAT
   ============================================ */
@keyframes particle-float {
  0%, 100% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translateY(-80px) translateX(20px) scale(1.3); opacity: 0.6; }
  90% { opacity: 1; }
  100% { transform: translateY(-140px) translateX(-10px) scale(0.5); opacity: 0; }
}

/* ============================================
   SHIMMER HEADING
   ============================================ */
@keyframes shimmer-text {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.shimmer-heading {
  background: linear-gradient(
    90deg,
    var(--color-ink) 0%,
    var(--color-ink) 40%,
    var(--color-primary-light) 50%,
    var(--color-ink) 60%,
    var(--color-ink) 100%
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer-text 4s ease-in-out infinite;
}

/* ============================================
   FLOATING SHAPES
   ============================================ */
@keyframes blob-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  25% { transform: translate(30px, -20px) rotate(5deg) scale(1.05); }
  50% { transform: translate(-15px, -35px) rotate(-3deg) scale(0.95); }
  75% { transform: translate(-25px, 10px) rotate(8deg) scale(1.02); }
}

.floating-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: blob-float 20s ease-in-out infinite;
  filter: blur(40px);
  opacity: 0.3;
}

/* ============================================
   CARD SHIMMER EDGE
   ============================================ */
@keyframes edge-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.card-edge-shimmer {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    transparent 30%,
    rgba(255,255,255,0.15) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: edge-shimmer 3s ease-in-out infinite;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ============================================
   TEXT REVEAL
   ============================================ */
@keyframes text-reveal {
  from {
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
  }
}

[data-reveal-text] {
  display: inline-block;
  animation: text-reveal 800ms var(--ease-smooth) both;
}

/* ============================================
   COUNT-UP ENTRANCE
   ============================================ */
@keyframes count-in {
  from { opacity: 0; transform: translateY(0.5rem) scale(0.8); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.stat-number {
  animation: count-in 600ms var(--ease-bounce) both;
}

/* ============================================
   SCROLL-PROGRESS BAR
   ============================================ */
@keyframes progress-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent), var(--color-primary));
  background-size: 200% 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  animation: progress-grow linear;
  animation-timeline: scroll();
  pointer-events: none;
}

/* ============================================
   IMAGE PARALLAX
   ============================================ */
@keyframes parallax-reveal {
  from { transform: scale(1.15); opacity: 0.6; }
  to { transform: scale(1); opacity: 1; }
}

.parallax-image {
  animation: parallax-reveal 1.2s var(--ease-smooth) both;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.animate-bounce-in {
  animation: bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.animate-fade-in-up {
  animation: fade-in-up 600ms var(--ease-smooth) both;
}

.animate-slide-in-bottom {
  animation: slide-in-bottom 600ms var(--ease-smooth) both;
}

.animate-float {
  animation: float 4s var(--ease-smooth) infinite;
}