/* Twin Pay motion layer · v1 · 29 September 2026
   Presentation only. Original phone positions, screenshots, payment/contact logic
   and brand artwork are untouched. Animations activate only when JS is running. */

/* Small interactive feedback; no movement until a pointer is capable of hovering. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .store-badge--official {
    transition: translate .24s ease, filter .24s ease, box-shadow .24s ease;
  }
  .store-badge--official:hover {
    translate: 0 -3px;
    filter: brightness(1.055);
    box-shadow: 0 12px 22px rgba(23,35,51,.13);
  }
  .feature-card .feature-icon, .benefit-grid .feature-icon {
    transition: transform .32s cubic-bezier(.2,.8,.2,1);
    transform-origin:center;
  }
  .feature-card:hover .feature-icon, .benefit-grid article:hover .feature-icon {
    transform: translateY(-2px) rotate(-5deg) scale(1.07);
  }
  .button > span[aria-hidden="true"], .text-link > span[aria-hidden="true"] {
    display:inline-block;
    transition:translate .22s ease;
  }
  .button:hover > span[aria-hidden="true"], .text-link:hover > span[aria-hidden="true"] {
    translate: 3px 0;
  }
  .app-screen-card .app-screen-visual img {
    transition: translate .35s cubic-bezier(.2,.8,.2,1);
  }
  .app-screen-card:hover .app-screen-visual img {translate:0 -6px;}
}

@media (prefers-reduced-motion:no-preference) {
  /* The main hero remains visible without JavaScript; these run only when ready. */
  html.twin-motion-ready .hero-home .hero-copy > .eyebrow,
  html.twin-motion-ready .hero-home .hero-copy > h1,
  html.twin-motion-ready .hero-home .hero-copy > .hero-lead,
  html.twin-motion-ready .hero-home .hero-copy > .hero-badges,
  html.twin-motion-ready .hero-home .hero-copy > .store-buttons,
  html.twin-motion-ready .hero-home .hero-copy > .hero-detail-link {
    animation: twin-hero-enter .7s cubic-bezier(.2,.8,.2,1) both;
  }
  html.twin-motion-ready .hero-home .hero-copy > .eyebrow {animation-delay:.06s;}
  html.twin-motion-ready .hero-home .hero-copy > h1 {animation-delay:.14s;}
  html.twin-motion-ready .hero-home .hero-copy > .hero-lead {animation-delay:.22s;}
  html.twin-motion-ready .hero-home .hero-copy > .hero-badges {animation-delay:.3s;}
  html.twin-motion-ready .hero-home .hero-copy > .store-buttons {animation-delay:.37s;}
  html.twin-motion-ready .hero-home .hero-copy > .hero-detail-link {animation-delay:.43s;}

  /* Independent translate/scale properties preserve each phone's existing
     transform (including its rotation and precise position at every breakpoint). */
  html.twin-motion-ready .hero-home .phone {
    will-change:translate;
    animation: twin-phone-appear .85s cubic-bezier(.2,.8,.2,1) both,
               twin-phone-float 7.8s ease-in-out 1.35s infinite;
  }
  html.twin-motion-ready .hero-home .phone-left {
    animation-delay:.32s,1.24s;
    --twin-float:-6px;
  }
  html.twin-motion-ready .hero-home .phone-right {
    animation-delay:.49s,1.41s;
    --twin-float:6px;
    animation-duration:.85s,8.6s;
  }
  html.twin-motion-ready .hero-home .phone-centre {
    animation-delay:.65s,1.57s;
    --twin-float:-8px;
    animation-duration:.85s,7.2s;
  }

  /* Original dotted artwork — gentle branded movement, never a new logo. */
  html.twin-motion-ready .dot-art-hero {
    animation:twin-dots-breathe 16s ease-in-out infinite alternate;
    will-change:translate;
  }
  html.twin-motion-ready .dot-art-business {
    animation:twin-dots-breathe 18s ease-in-out -5s infinite alternate;
  }
  html.twin-motion-ready .page-hero::after {
    animation:twin-corner-drift 17s ease-in-out infinite alternate;
  }

  /* Scroll reveal: class is applied only after IntersectionObserver is ready. */
  .twin-reveal {
    opacity:0;
    translate:0 23px;
    transition:opacity .65s cubic-bezier(.2,.8,.2,1),
               translate .65s cubic-bezier(.2,.8,.2,1);
    transition-delay:var(--twin-reveal-delay,0ms);
  }
  .twin-reveal.twin-in-view {opacity:1;translate:0 0;}

  /* Simple connection between the three steps, visible only in desktop layout. */
  .steps-grid.twin-steps-active .step-card {position:relative;}
  .steps-grid.twin-steps-active .step-card:not(:last-child)::after {
    content:"";
    position:absolute;
    left:calc(100% + 2px);
    top:111px;
    z-index:3;
    height:2px;
    width:calc(24px - 4px);
    border-radius:2px;
    background:linear-gradient(90deg,#0A9969,#08739A);
    transform-origin:left center;
    animation:twin-connector .55s ease both;
  }
  .steps-grid.twin-steps-active .step-card:nth-child(2)::after {animation-delay:.38s;}
  .steps-grid.twin-steps-active .step-card .step-number {
    animation:twin-step-pop .45s cubic-bezier(.2,.8,.2,1) both;
  }
  .steps-grid.twin-steps-active .step-card:nth-child(2) .step-number {animation-delay:.22s;}
  .steps-grid.twin-steps-active .step-card:nth-child(3) .step-number {animation-delay:.45s;}
}
@keyframes twin-hero-enter {
  from {opacity:0;translate:0 18px;}
  to {opacity:1;translate:0 0;}
}
@keyframes twin-phone-appear {
  from {opacity:0;scale:.945;}
  to {opacity:1;scale:1;}
}
@keyframes twin-phone-float {
  0%,100% {translate:0 0;}
  50% {translate:0 var(--twin-float,-6px);}
}
@keyframes twin-dots-breathe {
  0% {translate:0 0;opacity:.61;}
  50% {translate:-6px 6px;opacity:.76;}
  100% {translate:5px -8px;opacity:.64;}
}
@keyframes twin-corner-drift {
  from {translate:0 0;}
  to {translate:-9px 8px;}
}
@keyframes twin-connector {
  from {opacity:0;scale:0 1;}
  to {opacity:1;scale:1 1;}
}
@keyframes twin-step-pop {
  from {scale:.85;opacity:.6;}
  to {scale:1;opacity:1;}
}
@media (max-width:950px) {
  /* Subtle movement on touch devices; no expensive infinite animation of phones. */
  html.twin-motion-ready .hero-home .phone {animation-name:twin-phone-appear;will-change:auto;}
}
@media (max-width:650px) {
  .steps-grid.twin-steps-active .step-card:not(:last-child)::after {display:none;}
  .twin-reveal {translate:0 13px;}
}
@media (prefers-reduced-motion:reduce) {
  .twin-reveal {opacity:1!important;translate:none!important;transition:none!important;}
  html.twin-motion-ready .hero-home .phone,
  html.twin-motion-ready .dot-art-hero,
  html.twin-motion-ready .dot-art-business,
  html.twin-motion-ready .page-hero::after {animation:none!important;will-change:auto!important;}
  .steps-grid.twin-steps-active .step-card:not(:last-child)::after {display:none!important;}
}