/* Home landing motion — aperture, scroll depth, bg drift */

:root {
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-duration: 2s;
  --motion-float-1-duration: 78s;
  --motion-float-2-duration: 96s;
  --motion-bg-img-duration: 20s;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration: 0.01ms;
    --motion-bg-img-duration: 0.01ms;
    --motion-float-1-duration: 0.01ms;
    --motion-float-2-duration: 0.01ms;
  }
}

/* Scroll runway + sticky viewport */
body.roots-home[data-motion='on'] .roots-home__main {
  min-height: auto;
  height: var(--motion-scroll-height, 280vh);
  overflow: visible;
}

body.roots-home[data-motion='on'] .roots-home__pin {
  position: sticky;
  top: 0;
  height: calc(var(--vh, 1dvh) * 100);
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: center;
  perspective: 1400px;
  perspective-origin: 50% 46%;
  transform-style: preserve-3d;
  clip-path: circle(var(--aperture-r, 3.5%) at var(--aperture-x, 50%) var(--aperture-y, 44%));
  transition: clip-path var(--motion-duration) var(--motion-ease);
  will-change: clip-path;
}

body.roots-home[data-motion='on'].is-aperture-open .roots-home__pin {
  clip-path: circle(150% at 50% 50%);
}

/* Floating depth layers */
body.roots-home[data-motion='on'] .roots-home__float {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  filter: blur(40px);
  will-change: transform;
}

body.roots-home[data-motion='on'] .roots-home__float--1 {
  width: 42vmin;
  height: 42vmin;
  top: 12%;
  inset-inline-start: -8%;
  background: radial-gradient(circle, rgba(248, 212, 191, 0.55) 0%, transparent 70%);
  -webkit-animation: home-float-1 var(--motion-float-1-duration) ease-in-out infinite alternate;
  animation: home-float-1 var(--motion-float-1-duration) ease-in-out infinite alternate;
}

body.roots-home[data-motion='on'] .roots-home__float--2 {
  width: 36vmin;
  height: 36vmin;
  bottom: 8%;
  inset-inline-end: -6%;
  background: radial-gradient(circle, rgba(168, 220, 222, 0.45) 0%, transparent 72%);
  -webkit-animation: home-float-2 var(--motion-float-2-duration) ease-in-out infinite alternate;
  animation: home-float-2 var(--motion-float-2-duration) ease-in-out infinite alternate;
}

@media (max-width: 47.99rem) {
  body.roots-home[data-motion='on'] .roots-home__float {
    -webkit-animation: none;
    animation: none;
    opacity: 0.14;
  }
}

@keyframes home-float-1 {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(6px, 12px, 0) scale(1.04);
  }
}

@keyframes home-float-2 {
  0% {
    transform: translate3d(0, 0, 0) scale(1.03);
  }
  100% {
    transform: translate3d(-8px, -10px, 0) scale(1);
  }
}

/* GPU-friendly drift — transform only, no layout thrash */
body.roots-home[data-motion='on'] .roots-home__bg {
  overflow: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

body.roots-home[data-motion='on'] .roots-home__bg-img {
  transform-origin: center 36%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: home-bg-img-float var(--motion-bg-img-duration) ease-in-out infinite;
  animation: home-bg-img-float var(--motion-bg-img-duration) ease-in-out infinite;
}

@-webkit-keyframes home-bg-img-float {
  0%,
  100% {
    -webkit-transform: scale(1.1) translate3d(0, 0, 0);
    transform: scale(1.1) translate3d(0, 0, 0);
  }
  50% {
    -webkit-transform: scale(1.1) translate3d(0, -2%, 0);
    transform: scale(1.1) translate3d(0, -2%, 0);
  }
}

@keyframes home-bg-img-float {
  0%,
  100% {
    -webkit-transform: scale(1.1) translate3d(0, 0, 0);
    transform: scale(1.1) translate3d(0, 0, 0);
  }
  50% {
    -webkit-transform: scale(1.1) translate3d(0, -2%, 0);
    transform: scale(1.1) translate3d(0, -2%, 0);
  }
}

@media (max-width: 47.99rem) {
  body.roots-home[data-motion='on'] .roots-home__bg-img {
    transform-origin: 52% 85%;
    -webkit-animation-name: home-bg-img-float-mobile;
    animation-name: home-bg-img-float-mobile;
  }
}

@-webkit-keyframes home-bg-img-float-mobile {
  0%,
  100% {
    -webkit-transform: scale(1.4) translate3d(0, 0, 0);
    transform: scale(1.4) translate3d(0, 0, 0);
  }
  50% {
    -webkit-transform: scale(1.4) translate3d(0, -2%, 0);
    transform: scale(1.4) translate3d(0, -2%, 0);
  }
}

@keyframes home-bg-img-float-mobile {
  0%,
  100% {
    -webkit-transform: scale(1.4) translate3d(0, 0, 0);
    transform: scale(1.4) translate3d(0, 0, 0);
  }
  50% {
    -webkit-transform: scale(1.4) translate3d(0, -2%, 0);
    transform: scale(1.4) translate3d(0, -2%, 0);
  }
}

body.roots-home[data-motion='on'] .roots-home__overlay {
  will-change: transform, opacity;
}

/* Depth layers */
body.roots-home[data-motion='on'] .roots-home__content {
  transform-style: preserve-3d;
}

body.roots-home[data-motion='on'] [data-depth-layer] {
  will-change: transform, opacity, filter;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

body.roots-home[data-motion='on'] .roots-home__brand {
  transform-origin: center center;
}

body.roots-home[data-motion='on'] .roots-home__logo,
body.roots-home[data-motion='on'] .roots-home__tagline {
  will-change: transform;
  transform-origin: center center;
}

/* Aperture load — focal logo, hide rest until open */
body.roots-home[data-motion='on']:not(.is-aperture-open) .roots-home__tagline,
body.roots-home[data-motion='on']:not(.is-aperture-open) .roots-home__actions,
body.roots-home[data-motion='on']:not(.is-aperture-open) .roots-home__social {
  opacity: 0;
  transform: scale(0.88) translateZ(-80px);
}

body.roots-home[data-motion='on']:not(.is-aperture-open) .roots-home__logo {
  transform: scale(1.14);
}

body.roots-home[data-motion='on']:not(.is-split-revealed) .roots-home__logo {
  transform: translate3d(0, 18px, 0) scale(1.14);
}

body.roots-home[data-motion='on']:not(.is-split-revealed) .roots-home__tagline {
  transform: translate3d(0, -26px, 0) scale(0.96);
  opacity: 0;
}

body.roots-home[data-motion='on'].is-aperture-open .roots-home__tagline {
  transition:
    transform 0.9s var(--motion-ease) 0.15s,
    opacity 0.7s var(--motion-ease) 0.12s;
}

/* Asymmetric split reveal */
body.roots-home[data-motion='on'] .roots-home__logo {
  transition: transform 1s var(--motion-ease);
}

body.roots-home[data-motion='on'] .roots-home__tagline {
  transition: transform 1s var(--motion-ease) 0.08s;
}

body.roots-home[data-motion='on'].is-split-revealed .roots-home__logo {
  transform: translate3d(0, var(--split-logo-y, 0), 0);
}

body.roots-home[data-motion='on'].is-split-revealed .roots-home__tagline {
  transform: translate3d(0, var(--split-tag-y, 0), 0);
}

/* Organic stagger — action buttons */
body.roots-home[data-motion='on'] .roots-home__btn {
  --stagger-i: 0;
  transition: transform 0.72s var(--motion-ease);
  will-change: transform;
}

body.roots-home[data-motion='on']:not(.is-stagger-ready) .roots-home__btn {
  opacity: 0;
  transform: translate3d(calc(var(--stagger-i) * 6px), 28px, -40px) scale(0.94);
  pointer-events: none;
}

body.roots-home[data-motion='on'].is-stagger-ready .roots-home__btn {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    transform 0.72s var(--motion-ease) calc(var(--stagger-i) * 0.11s),
    opacity 0.55s var(--motion-ease) calc(var(--stagger-i) * 0.11s);
  pointer-events: auto;
}

body.roots-home[data-motion='on'] .roots-home__btn:nth-child(1) { --stagger-i: 0; }
body.roots-home[data-motion='on'] .roots-home__btn:nth-child(2) { --stagger-i: 1; }
body.roots-home[data-motion='on'] .roots-home__btn:nth-child(3) { --stagger-i: 2; }
body.roots-home[data-motion='on'] .roots-home__btn:nth-child(4) { --stagger-i: 3; }

/* No mouse hover lift */
body.roots-home[data-motion='on'] .roots-home__btn:hover,
body.roots-home[data-motion='on'] .roots-home__btn:active {
  transform: translate3d(0, 0, 0) !important;
  filter: none !important;
}

body.roots-home[data-motion='on'] .roots-home__social-link:hover {
  transform: translate3d(0, var(--social-float-y, 0), 0) !important;
  filter: none !important;
}

/* Social chain stagger */
body.roots-home[data-motion='on'] .roots-home__social-link {
  --social-i: 0;
  will-change: transform, opacity;
}

body.roots-home[data-motion='on']:not(.is-social-ready) .roots-home__social-link {
  opacity: 0;
  transform: translate3d(0, 18px, -24px) scale(0.96);
}

body.roots-home[data-motion='on'].is-social-ready .roots-home__social-link {
  opacity: 1;
  transform: translate3d(0, var(--social-float-y, 0), 0);
  transition:
    transform 0.8s var(--motion-ease) calc(0.45s + var(--social-i) * 0.1s),
    opacity 0.6s var(--motion-ease) calc(0.45s + var(--social-i) * 0.1s);
}

body.roots-home[data-motion='on'] .roots-home__social-link:nth-child(1) { --social-i: 0; }
body.roots-home[data-motion='on'] .roots-home__social-link:nth-child(2) { --social-i: 1; }
body.roots-home[data-motion='on'] .roots-home__social-link:nth-child(3) { --social-i: 2; }

@media (prefers-reduced-motion: reduce) {
  body.roots-home[data-motion='on'] .roots-home__main {
    height: auto;
  }

  body.roots-home[data-motion='on'] .roots-home__pin {
    position: relative;
    height: auto;
    min-height: calc(var(--vh, 1dvh) * 100);
  }

  body.roots-home[data-motion='on'] .roots-home__bg-img,
  body.roots-home[data-motion='on'] .roots-home__float {
    animation: none !important;
  }

  body.roots-home[data-motion='on'] .roots-home__pin {
    clip-path: none;
  }

  body.roots-home[data-motion='on'] .roots-home__tagline,
  body.roots-home[data-motion='on'] .roots-home__actions,
  body.roots-home[data-motion='on'] .roots-home__social,
  body.roots-home[data-motion='on'] .roots-home__btn,
  body.roots-home[data-motion='on'] .roots-home__social-link {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}