/* TENMO art direction motion layer */
@media (prefers-reduced-motion: no-preference) {
  html.tenmo-motion .hero-bg img {
    transform: scale(1.045) translate3d(0, var(--hero-image-shift, 0px), 0);
    transform-origin: 62% 50%;
    will-change: transform;
  }

  html.tenmo-motion .hero-section::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 22px 22px auto auto;
    width: clamp(90px, 12vw, 170px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(141, 120, 77, .72));
    transform: scaleX(0);
    transform-origin: right;
    animation: tenmo-line-in 1.1s .45s cubic-bezier(.2, .75, .25, 1) forwards;
    pointer-events: none;
  }

  html.tenmo-motion .hero-content .kicker,
  html.tenmo-motion .hero-content h1,
  html.tenmo-motion .hero-content > p:not(.kicker),
  html.tenmo-motion .hero-content .button {
    opacity: 0;
    transform: translateY(22px);
    animation: tenmo-hero-in .78s cubic-bezier(.16, 1, .3, 1) forwards;
  }

  html.tenmo-motion .hero-content h1 { animation-delay: .08s; }
  html.tenmo-motion .hero-content > p:not(.kicker) { animation-delay: .18s; }
  html.tenmo-motion .hero-content .button { animation-delay: .28s; }

  html.tenmo-motion .price-seal {
    opacity: 0;
    transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) + var(--seal-shift, 0px) + 18px), 0) scale(.94);
    animation: tenmo-seal-in .85s .38s cubic-bezier(.16, 1, .3, 1) forwards;
  }

  html.tenmo-motion .price-seal.is-visible {
    transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) + var(--seal-shift, 0px)), 0);
  }

  html.tenmo-motion [data-reveal]:not(.site-header):not(.hero-content):not(.price-seal):not(.industry-strip) {
    opacity: 0;
    transform: translateY(30px);
    transition:
      opacity .78s cubic-bezier(.2, .75, .25, 1) var(--reveal-delay, 0ms),
      transform .78s cubic-bezier(.2, .75, .25, 1) var(--reveal-delay, 0ms);
  }

  html.tenmo-motion [data-reveal].is-visible:not(.site-header):not(.hero-content):not(.price-seal):not(.industry-strip) {
    opacity: 1;
    transform: none;
  }

  html.tenmo-motion .industry-strip {
    opacity: 0;
    transform: translateY(16px);
    animation: tenmo-band-in .7s .55s cubic-bezier(.2, .75, .25, 1) forwards;
  }

  html.tenmo-motion .problem-photo,
  html.tenmo-motion .device-mock {
    transform: scale(1.035);
    transition: transform 1.1s cubic-bezier(.2, .75, .25, 1), background-position 1s ease;
  }

  html.tenmo-motion .problem-card.is-visible .problem-photo,
  html.tenmo-motion .plan-layout.is-visible .device-mock {
    transform: scale(1);
  }

  html.tenmo-motion .design-preview {
    background-repeat: no-repeat;
    background-size: cover;
    transition: filter .8s ease, background-position .8s ease;
  }

  html.tenmo-motion .design-option:hover .design-preview { filter: saturate(1.04) contrast(1.02); }

  html.tenmo-motion .design-option.is-visible .design-copy > * {
    animation: tenmo-copy-in .7s cubic-bezier(.2, .75, .25, 1) both;
  }

  html.tenmo-motion .design-option.is-visible .design-copy > :nth-child(2) { animation-delay: .06s; }
  html.tenmo-motion .design-option.is-visible .design-copy > :nth-child(3) { animation-delay: .11s; }
  html.tenmo-motion .design-option.is-visible .design-copy > :nth-child(4) { animation-delay: .16s; }
  html.tenmo-motion .design-option.is-visible .design-copy > :nth-child(5) { animation-delay: .21s; }
  html.tenmo-motion .design-option.is-visible .design-copy > :nth-child(6) { animation-delay: .26s; }
  html.tenmo-motion .design-option.is-visible .design-copy > :nth-child(7) { animation-delay: .31s; }

  @keyframes tenmo-hero-in {
    to { opacity: 1; transform: none; }
  }

  @keyframes tenmo-seal-in {
    to {
      opacity: 1;
      transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) + var(--seal-shift, 0px)), 0) scale(1);
    }
  }

  @keyframes tenmo-band-in {
    to { opacity: 1; transform: none; }
  }

  @keyframes tenmo-line-in {
    to { transform: scaleX(1); }
  }

  @keyframes tenmo-copy-in {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  html.tenmo-motion .hero-bg img { transform: scale(1.025) translate3d(0, var(--hero-image-shift, 0px), 0); }
  html.tenmo-motion .hero-section::after { inset: auto 18px 18px auto; width: 72px; }
  html.tenmo-motion [data-reveal]:not(.site-header):not(.hero-content):not(.price-seal):not(.industry-strip) { transform: translateY(20px); }
  html.tenmo-motion .design-preview,
  html.tenmo-motion .design-option:hover .design-preview { background-size: cover; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg img,
  .price-seal,
  [data-reveal],
  .problem-photo,
  .device-mock,
  .design-preview { animation: none !important; transform: none !important; transition: none !important; }
}