/*
 * Zero Next One BASE NIIKAPPU
 * Approved motion implementation: Sec01-Sec03 v1.1.0
 *
 * JavaScript owns reveal timing. This stylesheet only provides masking,
 * composited depth transforms, and approved interaction responses.
 */

.page-top .c-motion-line-mask {
  display: block;
  overflow: hidden;
  max-width: 100%;
  padding-block: 0.08em;
  margin-block: -0.08em;
  line-height: inherit;
  vertical-align: bottom;
}

.page-top .c-motion-line-mask > [data-motion="heading-line"] {
  display: block;
  max-width: 100%;
  transform-origin: left bottom;
}

.page-top [data-motion-depth="true"] {
  --motion-scroll-x: 0px;
  --motion-scroll-y: 0px;
  --motion-pointer-x: 0px;
  --motion-pointer-y: 0px;
  --motion-depth-scale: 1;
  transform:
    translate3d(
      calc(var(--motion-scroll-x) + var(--motion-pointer-x)),
      calc(var(--motion-scroll-y) + var(--motion-pointer-y)),
      0
    )
    scale(var(--motion-depth-scale));
  transform-origin: center center;
  will-change: transform;
}

/* Sec01: restrained CTA lift and directional arrow response. */
.page-top .p-home-hero .c-button--hero-primary {
  transition:
    transform var(--motion-duration-fast) var(--motion-ease-hover),
    color 350ms var(--motion-ease-emerge),
    border-color 350ms var(--motion-ease-emerge),
    opacity 350ms var(--motion-ease-emerge);
}

.page-top .p-home-hero__cta-arrow {
  transition: transform var(--motion-duration-fast) var(--motion-ease-hover);
}

/* Sec02: the same interaction language at a lower intensity. */
.page-top .p-brand-message .c-button--brand {
  transition:
    transform var(--motion-duration-fast) var(--motion-ease-hover),
    color 350ms var(--motion-ease-emerge),
    border-color 350ms var(--motion-ease-emerge),
    background-color 350ms var(--motion-ease-emerge);
}

.page-top .p-brand-message .c-button--brand span[aria-hidden="true"] {
  transition: transform var(--motion-duration-fast) var(--motion-ease-hover);
}

/* Sec03: cards settle once, then only linked cards respond to interaction. */
.page-top .p-features-card {
  transition: transform 300ms var(--motion-ease-hover);
}

.page-top .p-features-card__link {
  transition:
    background-color 300ms var(--motion-ease-standard),
    border-color 300ms var(--motion-ease-standard);
}

.page-top .p-features-card__thumb-img {
  transition: transform 600ms var(--motion-ease-settle);
  transform-origin: center center;
}

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .page-top .p-home-hero .c-button--hero-primary:hover,
  .page-top .p-home-hero .c-button--hero-primary:focus-visible {
    transform: translateY(-2px);
  }

  .page-top .p-home-hero .c-button--hero-primary:hover .p-home-hero__cta-arrow,
  .page-top .p-home-hero .c-button--hero-primary:focus-visible .p-home-hero__cta-arrow {
    transform: translate(5px, -1px);
  }

  .page-top .p-brand-message .c-button--brand:hover,
  .page-top .p-brand-message .c-button--brand:focus-visible {
    transform: translateY(-2px);
  }

  .page-top .p-brand-message .c-button--brand:hover span[aria-hidden="true"],
  .page-top .p-brand-message .c-button--brand:focus-visible span[aria-hidden="true"] {
    transform: translate(5px, -1px);
  }

  .page-top .p-features-card:has(.p-features-card__link:hover),
  .page-top .p-features-card:has(.p-features-card__link:focus-visible) {
    transform: translateY(-3px);
  }

  .page-top .p-features-card__link:hover .p-features-card__thumb-img,
  .page-top .p-features-card__link:focus-visible .p-features-card__thumb-img {
    transform: scale(1.035);
  }

  .page-top .p-features-card__link:hover::after,
  .page-top .p-features-card__link:focus-visible::after {
    transform: translate(5px, -3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-top .c-motion-line-mask {
    overflow: visible;
  }

  .page-top [data-motion-depth="true"] {
    transform: none !important;
    will-change: auto;
  }

  .page-top .p-home-hero .c-button--hero-primary,
  .page-top .p-home-hero__cta-arrow,
  .page-top .p-brand-message .c-button--brand,
  .page-top .p-brand-message .c-button--brand span[aria-hidden="true"],
  .page-top .p-features-card,
  .page-top .p-features-card__link,
  .page-top .p-features-card__thumb-img {
    transition-duration: 0ms !important;
  }

  .page-top .p-home-hero .c-button--hero-primary:hover,
  .page-top .p-home-hero .c-button--hero-primary:focus-visible,
  .page-top .p-brand-message .c-button--brand:hover,
  .page-top .p-brand-message .c-button--brand:focus-visible,
  .page-top .p-features-card:has(.p-features-card__link:hover),
  .page-top .p-features-card:has(.p-features-card__link:focus-visible) {
    transform: none !important;
  }
}