@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .parallax-slow,
  .hero-visual {
    transform: none !important;
  }

  .hero-label,
  .hero h1,
  .hero-lead,
  .hero-cta,
  .hero-visual,
  .reveal,
  .reveal-stagger > *,
  .img-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  body.loaded main,
  body.loaded header,
  body.loaded footer {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  body:not(.loaded) main,
  body:not(.loaded) header,
  body:not(.loaded) footer {
    opacity: 1 !important;
  }

  #page-loader {
    transition: none !important;
  }

  #page-loader.done {
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

header {
  transition:
    background 0.55s var(--ease-soft),
    border-color 0.55s var(--ease-soft),
    box-shadow 0.55s var(--ease-soft),
    backdrop-filter 0.55s var(--ease-soft);
}

.brand {
  transition: opacity 0.4s var(--ease-soft), transform 0.45s var(--ease-soft), color 0.35s var(--ease-soft);
}

.brand:hover {
  opacity: 0.88;
  transform: translateY(-2px);
}

nav a {
  transition: color 0.38s var(--ease-soft), letter-spacing 0.38s var(--ease-soft);
}

nav a::after {
  transition: width 0.45s var(--ease-out), opacity 0.35s var(--ease-soft);
}

nav a:hover {
  color: var(--accent);
}

nav a:hover::after {
  width: 100%;
}

.nav-toggle {
  transition: transform 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft), border-color 0.35s var(--ease-soft),
    background 0.35s var(--ease-soft);
}

.nav-toggle:hover {
  transform: scale(1.04);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}

.nav-toggle span {
  transition: transform 0.4s var(--ease-out), opacity 0.35s var(--ease-soft);
}

@media (max-width: 880px) {
  #site-nav.open {
    animation: motion-drawer-in 0.42s var(--ease-out) forwards;
  }
}

@keyframes motion-drawer-in {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#page-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: linear-gradient(148deg, #e6eaef 0%, #f5f6f8 48%, #ebeff3 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.95s var(--ease-out), visibility 0.95s var(--ease-out);
}

#page-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(30, 61, 86, 0.07), transparent 62%);
  pointer-events: none;
}

#page-loader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-inner {
  text-align: center;
  position: relative;
  z-index: 1;
}

.loader-bar {
  width: 132px;
  height: 2px;
  background: rgba(12, 17, 24, 0.07);
  border-radius: 3px;
  overflow: hidden;
  margin: 1.15rem auto 0;
}

.loader-bar::after {
  content: "";
  display: block;
  height: 100%;
  width: 38%;
  background: linear-gradient(90deg, var(--accent), var(--accent-light), var(--accent-mid));
  border-radius: 3px;
  animation: motion-load-slide 1.15s var(--ease-soft) infinite;
}

@keyframes motion-load-slide {
  0% {
    transform: translateX(-120%);
    opacity: 0.65;
  }

  45% {
    opacity: 1;
  }

  100% {
    transform: translateX(320%);
    opacity: 0.65;
  }
}

.loader-logo {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.32em;
  animation: motion-loader-fade 1.4s var(--ease-soft) infinite alternate;
}

@keyframes motion-loader-fade {
  from {
    opacity: 0.72;
  }

  to {
    opacity: 1;
  }
}

body:not(.loaded) main,
body:not(.loaded) header,
body:not(.loaded) footer {
  opacity: 0;
}

body.loaded main,
body.loaded header,
body.loaded footer {
  animation: motion-page-in 1.05s var(--ease-out) forwards;
}

@keyframes motion-page-in {
  from {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(4px);
  }

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

.parallax-slow {
  transition: transform 0.12s linear;
}

.hero-label,
.hero h1,
.hero-lead,
.hero-cta {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(6px);
}

.hero-label {
  transform: translateY(18px);
  transition:
    opacity 1s var(--ease-out),
    transform 1s var(--ease-out),
    filter 1s var(--ease-out);
}

.hero h1 {
  transition:
    opacity 1.05s 0.06s var(--ease-out),
    transform 1.05s 0.06s var(--ease-out),
    filter 1.05s 0.06s var(--ease-out);
}

.hero-lead {
  transition:
    opacity 1.05s 0.14s var(--ease-out),
    transform 1.05s 0.14s var(--ease-out),
    filter 1.05s 0.14s var(--ease-out);
}

.hero-cta {
  transition:
    opacity 1.05s 0.24s var(--ease-out),
    transform 1.05s 0.24s var(--ease-out),
    filter 1.05s 0.24s var(--ease-out);
}

.hero-label.visible,
.hero h1.visible,
.hero-lead.visible,
.hero-cta.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.hero-visual {
  opacity: 0;
  transform: translateY(32px) scale(0.965);
  transition:
    opacity 1.15s 0.18s var(--ease-out),
    transform 1.15s 0.18s var(--ease-out),
    filter 1.15s 0.18s var(--ease-out);
  filter: blur(5px);
}

.hero-visual.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.btn {
  transition:
    transform 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out),
    background 0.45s var(--ease-soft),
    color 0.45s var(--ease-soft),
    border-color 0.45s var(--ease-soft);
}

.btn:active {
  transform: translateY(0) scale(0.99);
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 18px 48px rgba(21, 44, 64, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.btn-ghost:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.82);
}

.float-card {
  transition: transform 0.65s var(--ease-out), box-shadow 0.65s var(--ease-out), border-color 0.45s var(--ease-soft);
}

.float-card:hover {
  box-shadow: var(--shadow-hover), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.float-card.c2:hover {
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.reveal {
  opacity: 0;
  transform: translateY(32px) scale(0.985);
  filter: blur(5px);
  transition:
    opacity 0.95s var(--ease-out),
    transform 0.95s var(--ease-out),
    filter 0.95s var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.82s var(--ease-out), transform 0.82s var(--ease-out);
}

.reveal-stagger.visible > *:nth-child(1) {
  transition-delay: 0.04s;
}

.reveal-stagger.visible > *:nth-child(2) {
  transition-delay: 0.1s;
}

.reveal-stagger.visible > *:nth-child(3) {
  transition-delay: 0.16s;
}

.reveal-stagger.visible > *:nth-child(4) {
  transition-delay: 0.22s;
}

.reveal-stagger.visible > *:nth-child(5) {
  transition-delay: 0.28s;
}

.reveal-stagger.visible > *:nth-child(6) {
  transition-delay: 0.34s;
}

.reveal-stagger.visible > *:nth-child(7) {
  transition-delay: 0.4s;
}

.reveal-stagger.visible > *:nth-child(8) {
  transition-delay: 0.46s;
}

.reveal-stagger.visible > *:nth-child(9) {
  transition-delay: 0.52s;
}

.reveal-stagger.visible > *:nth-child(10) {
  transition-delay: 0.58s;
}

.reveal-stagger.visible > *:nth-child(11) {
  transition-delay: 0.64s;
}

.reveal-stagger.visible > *:nth-child(12) {
  transition-delay: 0.7s;
}

.reveal-stagger.visible > *:nth-child(13) {
  transition-delay: 0.76s;
}

.reveal-stagger.visible > *:nth-child(14) {
  transition-delay: 0.82s;
}

.reveal-stagger.visible > *:nth-child(15) {
  transition-delay: 0.88s;
}

.reveal-stagger.visible > *:nth-child(16) {
  transition-delay: 0.94s;
}

.reveal-stagger.visible > *:nth-child(17) {
  transition-delay: 1s;
}

.reveal-stagger.visible > *:nth-child(18) {
  transition-delay: 1.06s;
}

.reveal-stagger.visible > * {
  opacity: 1;
  transform: translateY(0);
}

.info-card {
  transition:
    transform 0.5s var(--ease-out),
    box-shadow 0.5s var(--ease-out),
    border-color 0.45s var(--ease-soft);
}

.info-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  border-color: rgba(21, 44, 64, 0.12);
}

.cat-card {
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), color 0.4s var(--ease-soft),
    border-color 0.4s var(--ease-soft);
}

.cat-card::before {
  transition: opacity 0.55s var(--ease-soft);
}

.cat-card:hover {
  transform: translateY(-4px) scale(1.012);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  color: var(--ink);
  border-color: rgba(21, 44, 64, 0.1);
}

.cat-card:hover::before {
  opacity: 1;
}

.about-block {
  transition: box-shadow 0.55s var(--ease-out), transform 0.55s var(--ease-out), border-color 0.45s var(--ease-soft);
}

.about-block:hover {
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transform: translateY(-3px);
  border-color: rgba(21, 44, 64, 0.1);
}

.value-chip {
  transition: transform 0.38s var(--ease-out), background 0.38s var(--ease-soft), box-shadow 0.38s var(--ease-soft),
    border-color 0.38s var(--ease-soft);
}

.value-chip:hover {
  transform: translateY(-2px);
  background: rgba(21, 44, 64, 0.09);
  box-shadow: var(--shadow-sm);
  border-color: rgba(21, 44, 64, 0.18);
}

.img-reveal {
  opacity: 0;
  transform: scale(1.04) translateY(8px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out);
  filter: blur(4px);
}

.img-reveal.is-loaded {
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: blur(0);
}

footer.reveal {
  transition-delay: 0.05s;
}

.company-strip {
  transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out);
}

.company-strip:hover {
  box-shadow: var(--shadow-hover);
}

.page-hero-banner {
  transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out);
}

.photo-tile {
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.4s var(--ease-soft);
}

.photo-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(21, 44, 64, 0.12);
}

.photo-tile img {
  transition: transform 0.7s var(--ease-out);
}

.photo-tile:hover img {
  transform: scale(1.04);
}

.about-visual-row figure,
.about-visual-stack figure,
.contact-visual-row figure {
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

.about-visual-row figure:hover,
.contact-visual-row figure:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}