/*
 * South Downs motion layer
 * Adds polish without changing layout, typography, colours, or section order.
 */

:root {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-duration: 720ms;
}

html {
  scroll-behavior: smooth;
}

body {
  animation: sd-page-in 420ms ease-out both;
}

@keyframes sd-page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Elements only become staged after JavaScript confirms motion is available. */
.motion-enabled .motion-target {
  opacity: 0;
  translate: 0 24px;
  filter: blur(2px);
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    translate var(--motion-duration) var(--motion-ease),
    scale var(--motion-duration) var(--motion-ease),
    filter 520ms ease,
    box-shadow 300ms ease;
  transition-delay: var(--motion-delay, 0ms);
  will-change: opacity, translate, filter;
}

.motion-enabled .motion-target.motion-from-left { translate: -32px 0; }
.motion-enabled .motion-target.motion-from-right { translate: 32px 0; }
.motion-enabled .motion-target.motion-from-top { translate: 0 -20px; }
.motion-enabled .motion-target.motion-scale { scale: 0.975; }

.motion-enabled .motion-target.motion-in {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  filter: blur(0);
  will-change: auto;
}

/* Above-the-fold entrance details. */
.motion-enabled .header .top-bar {
  animation: sd-header-down 520ms var(--motion-ease) both;
}

.motion-enabled .header .navbar {
  animation: sd-header-down 620ms 80ms var(--motion-ease) both;
}

@keyframes sd-header-down {
  from { opacity: 0; translate: 0 -14px; }
  to { opacity: 1; translate: 0 0; }
}

.header .navbar {
  transition: box-shadow 280ms ease, background-color 280ms ease;
}

.header.header--scrolled .navbar {
  box-shadow: 0 10px 28px rgba(0, 63, 110, 0.12);
}

/* Slow photographic movement keeps the hero alive without disturbing its layout. */
.motion-enabled .hero-slide.active {
  animation: sd-hero-drift 8s ease-out both;
}

@keyframes sd-hero-drift {
  from { transform: scale(1); }
  to { transform: scale(1.035); }
}

/* Reusable interaction polish. */
.motion-enabled .motion-lift.motion-in:hover {
  translate: 0 -6px;
}

.motion-enabled .motion-media-frame {
  overflow: hidden;
}

.motion-enabled .motion-media-frame img {
  transition: transform 700ms var(--motion-ease), filter 500ms ease;
}

.motion-enabled .motion-media-frame:hover img {
  transform: scale(1.025);
  filter: saturate(1.03) contrast(1.015);
}

.cta-button,
.btn-primary,
.btn-secondary,
.btn-cta,
.btn-founder,
.qf-btn,
.btn-clean {
  transition:
    translate 240ms var(--motion-ease),
    transform 240ms var(--motion-ease),
    box-shadow 240ms ease,
    background-color 240ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .cta-button:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-cta:hover,
  .btn-founder:hover,
  .qf-btn:hover,
  .btn-clean:hover {
    translate: 0 -3px;
  }

  .social-links a:hover,
  .footer-social a:hover {
    animation: sd-icon-pop 420ms var(--motion-ease);
  }

  .reason:hover .icon-circle,
  .approach-item:hover .approach-icon,
  .qi-card:hover .qi-card-icon,
  .terms-grid li:hover .term-icon {
    animation: sd-icon-pop 420ms var(--motion-ease);
  }
}

@keyframes sd-icon-pop {
  0%, 100% { scale: 1; }
  45% { scale: 1.12; }
}

/* Keyboard users get a clear, brand-consistent focus treatment. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(2, 164, 223, 0.42);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  :root { --motion-duration: 580ms; }

  .motion-enabled .motion-target,
  .motion-enabled .motion-target.motion-from-left,
  .motion-enabled .motion-target.motion-from-right {
    translate: 0 18px;
    filter: none;
  }

  .motion-enabled .motion-target.motion-in {
    translate: 0 0;
  }

  .motion-enabled .hero-slide.active {
    animation-duration: 6.5s;
  }
}

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

  body,
  .motion-enabled .header .top-bar,
  .motion-enabled .header .navbar,
  .motion-enabled .hero-slide.active,
  .motion-enabled .motion-target,
  .motion-enabled .motion-target.motion-from-left,
  .motion-enabled .motion-target.motion-from-right,
  .motion-enabled .motion-target.motion-from-top,
  .motion-enabled .motion-target.motion-scale,
  .motion-enabled .motion-target.motion-in {
    animation: none !important;
    opacity: 1 !important;
    translate: none !important;
    scale: 1 !important;
    filter: none !important;
    transition: none !important;
  }
}