/* Small entrance motion. Content stays readable if motion is reduced. */

.reveal {
  animation: rise 700ms ease both;
}

.reveal-delay {
  animation-delay: 120ms;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes logo-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* The hero glow wanders a few rem over twenty seconds. Slow enough that
   nobody watches it move, but the page never feels static. */
@keyframes glow-drift {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(6rem, 2.5rem) scale(1.08);
  }
}

@keyframes montage-float-a {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.55rem);
  }
}

@keyframes montage-float-b {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0.5rem);
  }
}

@keyframes montage-float-c {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.4rem);
  }
}

@keyframes montage-push {
  from {
    transform: scale(1.03);
  }
  to {
    transform: scale(1.1);
  }
}

@keyframes orbit-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes orbit-counter {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes stage-shine {
  0%,
  28% {
    background-position: 120% 0;
  }
  58%,
  100% {
    background-position: -40% 0;
  }
}

@keyframes live-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(254, 172, 23, 0.7);
  }
  70% {
    box-shadow: 0 0 0 0.45rem rgba(254, 172, 23, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(254, 172, 23, 0);
  }
}

@keyframes chip-drift-a {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0.2rem -0.45rem;
  }
}

@keyframes chip-drift-b {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: -0.15rem 0.4rem;
  }
}

@keyframes chip-drift-c {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0.25rem 0.3rem;
  }
}

/* Scroll reveal. main.js marks cards with data-reveal once it knows
   IntersectionObserver is available, so nothing is hidden without JS.
   Items stagger by --reveal-delay, set per card by the script. */
[data-reveal] {
  opacity: 0;
  translate: 0 14px;
  transition:
    opacity 650ms ease,
    translate 650ms cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-visible {
  opacity: 1;
  translate: 0 0;
}

.service-list a,
.work-card a,
.work-item a,
.archive-card a,
.insight-card a,
.post-card a,
.featured-post a {
  transition: color var(--transition);
}

.service-feature img,
.work-feature img,
.archive-card img,
.insight-card img,
.post-card img {
  transition: transform 500ms ease;
}

.archive-card a:hover img,
.insight-card a:hover img,
.post-card a:hover img,
.featured-post a:hover img {
  transform: scale(1.015);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .btn__spinner,
  .brief-panel.is-sent .form-success {
    animation: none;
  }

  .reveal,
  .reveal-delay,
  .logo-marquee__track {
    animation: none;
  }

  .service-feature img,
  .work-feature img,
  .archive-card img,
  .insight-card img,
  .device-pair__phone {
    transition: none;
  }

  .device-pair:has(> a):hover .device-pair__phone {
    transform: none;
  }

  [data-reveal] {
    opacity: 1;
    translate: none;
    transition: none;
  }

  .hero__reel {
    transform: none;
  }

  .hero-montage::before,
  .hero-montage__frame,
  .hero-montage__frame video,
  .hero-montage__frame img {
    animation: none;
  }

  .hero-montage__tile--lead:hover,
  .hero-montage__tile--lead:focus-visible,
  .hero-montage__tile--portrait:hover,
  .hero-montage__tile--portrait:focus-visible,
  .hero-montage__tile--inset:hover,
  .hero-montage__tile--inset:focus-visible,
  .hero-montage__tile--handset:hover,
  .hero-montage__tile--handset:focus-visible,
  .hero-montage__tile--peek:hover,
  .hero-montage__tile--peek:focus-visible,
  .hero-montage__tile--deck:hover,
  .hero-montage__tile--deck:focus-visible,
  .hero-montage--sites .hero-montage__tile--tablet.hero-montage__tile--lead:hover,
  .hero-montage--sites .hero-montage__tile--tablet.hero-montage__tile--lead:focus-visible {
    transform: none;
  }

  .hero-stage__orbit,
  .hero-stage__mark,
  .hero-stage__dust,
  .hero-stage__shine,
  .hero-stage__live,
  .hero-stage__chip,
  .hero-stage__sat {
    animation: none;
  }

  .hero-stage__slide {
    transition: none;
  }

  .hero-stage__screen {
    transform: none;
    transition: none;
  }
}