/* Shared public motion layer. Keep login and admin visually static. */
:root {
  --motion-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --motion-fast: 180ms;
  --motion-medium: 520ms;
}

.js:not(.animations-ready) .reveal,
.js:not(.animations-ready) [data-animate] {
  opacity: 1;
  transform: none;
}

.js.animations-ready .reveal,
.js.animations-ready [data-animate] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity var(--motion-medium) var(--motion-ease),
    transform var(--motion-medium) var(--motion-ease);
  transition-delay: var(--animate-delay, 0ms);
}

.js.animations-ready [data-animate="fade-left"] {
  transform: translate3d(18px, 0, 0);
}

.js.animations-ready [data-animate="fade-right"] {
  transform: translate3d(-18px, 0, 0);
}

.js.animations-ready [data-animate="scale-in"] {
  transform: scale(0.98);
}

.js.animations-ready .reveal.is-visible,
.js.animations-ready [data-animate].is-visible,
.page-login .reveal,
.page-admin .reveal,
.page-login [data-animate],
.page-admin [data-animate] {
  opacity: 1;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .main-nav a {
    position: relative;
  }

  .main-nav a::after {
    position: absolute;
    right: 0;
    bottom: -7px;
    left: 0;
    height: 2px;
    background: var(--accent);
    content: "";
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--motion-fast) var(--motion-ease);
  }

  .main-nav a:hover::after,
  .main-nav a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .brand:hover .brand-mark,
  .brand:focus-visible .brand-mark {
    transform: scale(1.03);
  }

  .brand-mark {
    transition: transform var(--motion-fast) var(--motion-ease);
  }

  .service-card:hover,
  .niche-card:hover,
  .detail-card:hover,
  .package-card:hover {
    transform: translateY(-4px);
  }

  .portfolio-media video,
  .portfolio-media iframe,
  .portfolio-photo-card img {
    transition: transform 650ms var(--motion-ease);
  }

  .portfolio-video-card:hover .portfolio-media video,
  .portfolio-video-card:hover .portfolio-media iframe,
  .portfolio-photo-card:hover img {
    transform: scale(1.02);
  }
}

.button {
  transition:
    transform var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    color var(--motion-fast) ease;
}

.button:active {
  transform: scale(0.98);
}

.final-cta .button-primary {
  position: relative;
  overflow: hidden;
}

.final-cta .button-primary::after {
  position: absolute;
  inset: 0 auto 0 -45%;
  width: 35%;
  background: rgba(255, 255, 255, 0.22);
  content: "";
  transform: skewX(-18deg);
  transition: transform 650ms var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) {
  .final-cta .button-primary:hover::after,
  .final-cta .button-primary:focus-visible::after {
    transform: translateX(420%) skewX(-18deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js.animations-ready .reveal,
  .js.animations-ready [data-animate],
  .button,
  .brand-mark,
  .portfolio-media video,
  .portfolio-media iframe,
  .portfolio-photo-card img {
    transition: opacity 1ms linear;
    transform: none;
  }

  .final-cta .button-primary::after {
    display: none;
  }
}