/* ==========================================================
   PLACEBOES HERO ANIMATIONS
========================================================== */

/* ==========================================================
   HERO BUTTON
========================================================== */

.placeboes-hero-button {
  animation: placeboesHeroTextIn 650ms ease-out 460ms both;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease;
}

.placeboes-hero-button:hover, .placeboes-hero-button:focus-visible {
  transform: translateY(-3px);
  background-color: #1b7097;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(21, 96, 130, 0.24);
  outline: none;
}

.placeboes-hero-button:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(21, 96, 130, 0.18);
}

/* Button arrow */

.placeboes-hero-button i {
  display: inline-block;
  transition: transform 180ms ease;
}

.placeboes-hero-button:hover i, .placeboes-hero-button:focus-visible i {
  transform: translateX(4px);
}

/* ==========================================================
   HERO IMAGE
========================================================== */

.placeboes-hero-image {
  animation: placeboesHeroImageIn 700ms ease-out both;
  transition: transform 300ms ease, filter 300ms ease;
}

.placeboes-hero-image:hover {
  transform: translateY(-3px) scale(1.015);
  filter: drop-shadow(0 8px 14px rgba(21, 96, 130, 0.12));
}

/* ==========================================================
   HERO TEXT
========================================================== */

.placeboes-hero-heading {
  animation: placeboesHeroTextIn 650ms ease-out 180ms both;
}

.placeboes-hero-copy {
  animation: placeboesHeroTextIn 650ms ease-out 320ms both;
}

/* ==========================================================
   HERO BACKGROUND DRIFT
========================================================== */

.placeboes-hero-section {
  position: relative;
  overflow: hidden;
  background-position: center center;
  animation: placeboesHeroBackgroundDrift 18s ease-in-out infinite alternate;
}

/* ==========================================================
   KEYFRAMES
========================================================== */

@keyframes placeboesHeroImageIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

@keyframes placeboesHeroBackgroundDrift {
  from {
    background-position: 49% 50%;
  }
  to {
    background-position: 51% 50%;
  }
}

/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {
  .placeboes-hero-section, .placeboes-hero-image, .placeboes-hero-heading, .placeboes-hero-copy, .placeboes-hero-button {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .placeboes-hero-image, .placeboes-hero-button, .placeboes-hero-button i {
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .placeboes-hero-image:hover, .placeboes-hero-button:hover, .placeboes-hero-button:focus-visible, .placeboes-hero-button:hover i, .placeboes-hero-button:focus-visible i {
    transform: none !important;
    filter: none !important;
  }
}