/* Phase 17–19 — site motion (vanilla, <32KB). Homepage + shared page accents. */

/* LCP: hero visual must paint even before motion.js marks reveals */
.home-hero__visual {
  opacity: 1;
  transform: none;
}

/* --- Reveal base --- */
[data-hs-reveal].hs-reveal-ready {
  opacity: 0;
  transform: translateY(1rem);
  transition:
    opacity 0.42s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 0.42s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  will-change: opacity, transform;
}

[data-hs-reveal].hs-reveal-ready.is-visible,
.hs-motion-off [data-hs-reveal],
.hs-motion-off [data-hs-reveal].hs-reveal-ready {
  opacity: 1;
  transform: none;
  will-change: auto;
}

[data-hs-reveal][data-hs-delay="1"].hs-reveal-ready { transition-delay: 0.06s; }
[data-hs-reveal][data-hs-delay="2"].hs-reveal-ready { transition-delay: 0.12s; }
[data-hs-reveal][data-hs-delay="3"].hs-reveal-ready { transition-delay: 0.18s; }
[data-hs-reveal][data-hs-delay="4"].hs-reveal-ready { transition-delay: 0.24s; }
[data-hs-reveal][data-hs-delay="5"].hs-reveal-ready { transition-delay: 0.3s; }

.hs-motion-off [data-hs-reveal].hs-reveal-ready {
  transition: none;
  transition-delay: 0s;
}

/* --- Hero entrance (load stagger) --- */
.home-hero [data-hs-reveal].hs-reveal-ready {
  transform: translateY(0.75rem);
}

.home-hero__visual[data-hs-reveal].hs-reveal-ready {
  transform: translateY(1.25rem) scale(0.98);
}

.home-hero__visual[data-hs-reveal].hs-reveal-ready.is-visible {
  transform: none;
}

/* --- Stagger children inside grids --- */
[data-hs-stagger] > .hs-reveal-ready {
  opacity: 0;
  transform: translateY(0.85rem);
  transition:
    opacity 0.4s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 0.4s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

[data-hs-stagger].is-visible > .hs-reveal-ready,
[data-hs-stagger].is-visible > [data-hs-reveal].hs-reveal-ready,
.hs-motion-off [data-hs-stagger] > .hs-reveal-ready {
  opacity: 1;
  transform: none;
}

[data-hs-stagger].is-visible > :nth-child(1).hs-reveal-ready { transition-delay: 0.04s; }
[data-hs-stagger].is-visible > :nth-child(2).hs-reveal-ready { transition-delay: 0.1s; }
[data-hs-stagger].is-visible > :nth-child(3).hs-reveal-ready { transition-delay: 0.16s; }
[data-hs-stagger].is-visible > :nth-child(4).hs-reveal-ready { transition-delay: 0.22s; }
[data-hs-stagger].is-visible > :nth-child(5).hs-reveal-ready { transition-delay: 0.28s; }
[data-hs-stagger].is-visible > :nth-child(6).hs-reveal-ready { transition-delay: 0.34s; }

/* Drop enter delays after reveal so hover/active stay snappy */
[data-hs-stagger] > .hs-reveal-ready.is-visible {
  transition-delay: 0s;
}

.hs-motion-off [data-hs-stagger] > .hs-reveal-ready {
  transition: none;
  transition-delay: 0s;
}

/* Mark stagger children without needing data-hs-reveal on each */
/* Stagger children get .hs-reveal-ready from motion.js */

/* --- Service Fit micro --- */
.home-fit__option {
  transition:
    transform 0.18s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color var(--transition, 0.2s ease),
    background-color var(--transition, 0.2s ease),
    box-shadow var(--transition, 0.2s ease);
}

.home-fit__option.is-pressing {
  transform: scale(0.97);
}

.home-fit__result:not([hidden]) {
  animation: hs-fit-in 0.38s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

.home-fit__result.is-refreshing {
  animation: none;
  opacity: 0;
  transform: translateY(0.5rem);
}

.home-fit__result.is-entering {
  animation: hs-fit-in 0.38s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

@keyframes hs-fit-in {
  from {
    opacity: 0;
    transform: translateY(0.65rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- Portfolio presence --- */
.portfolio-featured {
  transition:
    transform 0.28s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 0.28s ease;
}

.portfolio-featured:hover,
.portfolio-featured:focus-visible {
  transform: translateY(-3px);
}

.portfolio-featured .site-preview__shot,
.project-card .site-preview__shot {
  transition: opacity 0.35s ease, transform 0.4s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.portfolio-featured:hover .site-preview__shot,
.portfolio-featured:focus-visible .site-preview__shot,
.project-card:hover .site-preview__shot,
.project-card:focus-visible .site-preview__shot {
  transform: scale(1.02);
}

.project-card {
  transition:
    transform 0.28s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 0.28s ease;
}

.project-card:active {
  transform: translateY(0) scale(0.99);
}

/* --- Process sequential --- */
.process-steps[data-hs-stagger] > .process-step.hs-reveal-ready {
  opacity: 0;
  transform: translateY(0.75rem);
}

.process-steps[data-hs-stagger].is-visible > .process-step.hs-reveal-ready {
  opacity: 1;
  transform: none;
}

/* --- CTA / button press (sitewide on home chrome) --- */
.btn {
  transition:
    background-color var(--transition, 0.2s ease),
    border-color var(--transition, 0.2s ease),
    color var(--transition, 0.2s ease),
    transform 0.16s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow var(--transition, 0.2s ease);
}

.btn:active {
  transform: scale(0.97);
}

.btn--primary:active {
  transform: scale(0.97);
}

.top-bar__btn:active {
  transform: scale(0.97);
}

/* --- Soft hero visual drift (desktop only, capped) --- */
@media (min-width: 901px) {
  [data-hs-parallax]:not(.home-hero__visual) img {
    transition: transform 0.15s linear;
    will-change: transform;
  }
}

/* --- Phase 19: floating hero island --- */
.home-hero__visual {
  perspective: 900px;
}

.hs-island {
  position: relative;
  z-index: 1;
  will-change: transform;
  transform-style: preserve-3d;
}

.hs-island__bob {
  transform-origin: 50% 70%;
  animation: hs-island-float 5.5s ease-in-out infinite;
  filter: drop-shadow(var(--island-shadow));
}

.hs-island__bob img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes hs-island-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-0.8deg);
    filter: drop-shadow(var(--island-shadow));
  }
  50% {
    transform: translate3d(0, -18px, 0) rotate(1deg);
    filter: drop-shadow(var(--island-shadow-high));
  }
}

/* --- Phase 19: word rotate --- */
[data-hs-rotate].hs-rotate {
  display: inline-block;
  min-width: 8.5ch;
  text-align: center;
  vertical-align: baseline;
  transition:
    opacity 0.2s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 0.2s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

[data-hs-rotate].hs-rotate.is-swap {
  opacity: 0;
  transform: translateY(0.35em);
}

.home-hero__title [data-hs-rotate] {
  color: var(--color-primary);
}

/* --- Phase 19: pixel dust --- */
[data-hs-dust] {
  position: relative;
}

[data-hs-dust] > img,
[data-hs-dust] > .hs-island {
  position: relative;
  z-index: 1;
}

canvas.hs-dust {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}

/* --- Phase 19: marquee --- */
.hs-marquee .trusted__logos,
[data-hs-marquee] .trusted__logos,
.hs-marquee[data-hs-marquee-host] {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0;
  overflow: hidden;
  /* LTR strip so -50% loop is continuous on RTL pages */
  direction: ltr;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.hs-marquee__row {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  width: max-content;
  gap: 0;
  will-change: transform;
}

.hs-marquee__track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: clamp(2.75rem, 6vw, 4.5rem);
  min-width: max-content;
  /* Same as gap so the loop seam matches item spacing */
  padding-inline-end: clamp(2.75rem, 6vw, 4.5rem);
  box-sizing: content-box;
}

.hs-marquee .trusted__logo {
  flex-shrink: 0;
  white-space: nowrap;
  padding-inline: 0.15rem;
  direction: rtl;
}

.hs-marquee.is-ready .hs-marquee__row {
  animation: hs-marquee 40s linear infinite;
}

.hs-marquee:hover .hs-marquee__row,
.hs-marquee:focus-within .hs-marquee__row {
  animation-play-state: paused;
}

@keyframes hs-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 900px) {
  .hs-marquee .trusted__logos,
  [data-hs-marquee].hs-marquee .trusted__logos {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
  }

  .hs-marquee .trusted__logo {
    min-height: auto;
    padding: 0.25rem 0;
    background: transparent;
    border: none;
    border-radius: 0;
    opacity: 0.75;
    font-size: 1.125rem;
  }
}

/* --- Phase 19: clip reveal --- */
.hs-clip.hs-reveal-ready,
[data-hs-reveal].hs-clip.hs-reveal-ready,
.portfolio-featured.hs-clip.hs-reveal-ready {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path 0.55s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 0.55s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.hs-clip.hs-reveal-ready.is-visible,
.hs-motion-off .hs-clip {
  clip-path: inset(0 0 0 0);
}

.sd-case__media,
.blog-featured__media,
.article-hero__media,
.sd-hero__media {
  overflow: hidden;
}

.sd-case:hover .site-preview__shot,
.sd-case:focus-visible .site-preview__shot,
.article-proof__card:hover img,
.article-related__card:hover img {
  transform: scale(1.03);
  transition: transform 0.4s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.sd-hero__media img,
.article-hero__media img {
  transform-origin: center;
}

.sd-hero[data-hs-reveal].is-visible .sd-hero__media img,
.article-hero[data-hs-reveal].is-visible .article-hero__media img {
  animation: hs-media-in 0.55s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

@keyframes hs-media-in {
  from {
    transform: scale(1.04);
    clip-path: inset(8% 8% 8% 8%);
  }
  to {
    transform: none;
    clip-path: inset(0);
  }
}

/* --- Phase 19: magnetic CTA --- */
.hs-magnetic {
  will-change: transform;
  transition: transform 0.18s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

/* --- Filter / chip press --- */
.blog-filters__btn:active,
.proj-filters__btn:active,
.svc-filter:active,
.filter-chip:active {
  transform: scale(0.97);
}

/* --- Listing / about / 404 accents --- */
.nf-stage {
  animation: hs-404-in 0.55s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

.nf-actions .nf-btn--primary {
  animation: hs-bounce-in 0.55s 0.2s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

@keyframes hs-404-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hs-bounce-in {
  from {
    opacity: 0;
    transform: translateY(0.6rem);
  }
  70% {
    transform: translateY(-0.15rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 901px) {
  .about-hero__media[data-hs-parallax] img,
  .about-office[data-hs-parallax] img {
    transition: transform 0.15s linear;
    will-change: transform;
  }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  [data-hs-reveal].hs-reveal-ready,
  [data-hs-stagger] > .hs-reveal-ready,
  .process-steps[data-hs-stagger] > .process-step.hs-reveal-ready {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }

  .home-fit__option.is-pressing {
    transform: none;
  }

  .home-fit__result:not([hidden]),
  .home-fit__result.is-entering,
  .home-fit__result.is-refreshing {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .portfolio-featured:hover,
  .portfolio-featured:focus-visible,
  .project-card:hover,
  .project-card:active,
  .btn:active,
  .btn--primary:active,
  .top-bar__btn:active {
    transform: none;
  }

  .portfolio-featured:hover .site-preview__shot,
  .portfolio-featured:focus-visible .site-preview__shot,
  .project-card:hover .site-preview__shot,
  .project-card:focus-visible .site-preview__shot {
    transform: none;
  }

  .home-hero__visual[data-hs-parallax] img,
  .about-hero__media[data-hs-parallax] img,
  .about-office[data-hs-parallax] img {
    transform: none !important;
    transition: none;
    will-change: auto;
  }

  .hs-island {
    transform: none !important;
  }

  .hs-island__bob {
    animation: none;
    filter: none;
  }

  [data-hs-rotate].hs-rotate,
  [data-hs-rotate].hs-rotate.is-swap {
    opacity: 1;
    transform: none;
    transition: none;
  }

  canvas.hs-dust {
    display: none;
  }

  .hs-marquee.is-ready .hs-marquee__row {
    animation: none;
  }

  .hs-clip.hs-reveal-ready,
  .hs-clip.hs-reveal-ready.is-visible {
    clip-path: none;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hs-magnetic {
    transform: none !important;
  }

  .page-404__art,
  .page-404 .btn--primary,
  .nf-stage,
  .nf-actions .nf-btn--primary,
  .sd-hero[data-hs-reveal].is-visible .sd-hero__media img,
  .article-hero[data-hs-reveal].is-visible .article-hero__media img {
    animation: none;
  }

  .blog-filters__btn:active,
  .proj-filters__btn:active,
  .svc-filter:active,
  .filter-chip:active {
    transform: none;
  }
}