/* =========================================================
   ONEETSAKO — ANIMATIONS
   animations.css
   ========================================================= */


/* =========================================================
   GLOBAL SMOOTH TRANSITIONS
   ---------------------------------------------------------
   Do NOT apply transform transitions globally.
   Hero/parallax elements are controlled by JavaScript.
   ========================================================= */

button,
a,
.card,
.zoom-hover img,
.fade-in {
  transition:
    background-color 0.4s ease,
    color 0.4s ease,
    border-color 0.4s ease,
    opacity 0.4s ease;
}


/* =========================================================
   FADE IN ON SCROLL
   ---------------------------------------------------------
   JavaScript can toggle .active
   ========================================================= */

.fade-in {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
}

.fade-in.active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


/* =========================================================
   FLOAT / BREATH EFFECT
   ========================================================= */

.float {
  animation:
    etsakoFloat
    6s
    ease-in-out
    infinite;
}

@keyframes etsakoFloat {

  0% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -10px, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }

}


/* =========================================================
   SOFT GLOW PULSE
   ========================================================= */

.glow {
  animation:
    etsakoGlowPulse
    3s
    ease-in-out
    infinite;
}

@keyframes etsakoGlowPulse {

  0% {
    text-shadow:
      0 0 10px
      rgba(214, 180, 107, 0.2);
  }

  50% {
    text-shadow:
      0 0 25px
      rgba(214, 180, 107, 0.6);
  }

  100% {
    text-shadow:
      0 0 10px
      rgba(214, 180, 107, 0.2);
  }

}


/* =========================================================
   CARD HOVER LIFT
   ========================================================= */

.card {
  will-change: transform;
}

.card:hover {
  transform:
    translate3d(0, -8px, 0)
    scale(1.02);
}


/* =========================================================
   PARALLAX SUPPORT
   ---------------------------------------------------------
   JavaScript controls the actual movement.
   ========================================================= */

.parallax {
  will-change: transform;
  transform: translate3d(0, 0, 0);
}


/* =========================================================
   MIST DRIFT
   ---------------------------------------------------------
   Use this only on mist elements that are NOT being
   controlled by parallax.js at the same time.
   ========================================================= */

.mist-drift {
  animation:
    etsakoMistDrift
    18s
    ease-in-out
    infinite;
}

@keyframes etsakoMistDrift {

  0% {
    transform:
      translate3d(-10px, 0, 0);
  }

  50% {
    transform:
      translate3d(10px, -15px, 0);
  }

  100% {
    transform:
      translate3d(-10px, 0, 0);
  }

}


/* =========================================================
   BUTTON PRESS FEEL
   ========================================================= */

button:active {
  transform:
    scale(0.96);
}


/* =========================================================
   IMAGE SOFT ZOOM
   ========================================================= */

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

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


/* =========================================================
   PAGE LOAD INTRO
   ========================================================= */

body {
  animation:
    etsakoPageLoad
    1.2s
    ease-out;
}

@keyframes etsakoPageLoad {

  from {
    opacity: 0;
    filter: blur(10px);
  }

  to {
    opacity: 1;
    filter: blur(0);
  }

}


/* =========================================================
   ACCESSIBILITY
   ---------------------------------------------------------
   Respect users who request reduced motion.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

}