/* Hardware-composited micro-interactions for the editorial home. */
@media (hover:hover) and (pointer:fine) {
  .stage { isolation:isolate; }
  .stage-image {
    transform:scale(1) translateZ(0);
    transform-origin:center center;
    transition:transform 1200ms cubic-bezier(.16,1,.3,1);
    will-change:transform;
  }
  .stage:hover .stage-image { transform:scale(1.04) translateZ(0); }

  .how-grid article {
    transform:translate3d(0,0,0);
    transition:transform 320ms cubic-bezier(.16,1,.3,1),box-shadow 320ms cubic-bezier(.16,1,.3,1);
    will-change:transform;
  }
  .how-grid article > span::after {
    content:'';
    position:absolute;
    z-index:4;
    top:0;
    left:50%;
    width:100%;
    height:2px;
    border-radius:2px;
    background:#218467;
    transform:translateX(-50%) scaleX(0);
    transform-origin:center;
    transition:transform 380ms cubic-bezier(.16,1,.3,1);
    will-change:transform;
    pointer-events:none;
  }
  .how-grid article:hover {
    transform:translate3d(0,-3px,0);
    box-shadow:inset 0 0 0 1px rgba(33,132,103,.22),0 12px 24px rgba(23,43,33,.08);
  }
  .how-grid article:hover > span::after { transform:translateX(-50%) scaleX(1); }
}

@media (prefers-reduced-motion:reduce) {
  .stage-image,.value-panel--number,.value-panel--number .number-phone,.number-phone-call,.number-phone-message,.how-grid article,.how-grid article > span::after { transition:none !important; will-change:auto !important; }
}@media (hover:hover) and (pointer:fine) {
  .benefit-card-destinations,.benefit-card-network,.benefit-card-plans,.benefit-card-support {
    transform:translate3d(0,0,0);
    transition:transform 320ms cubic-bezier(.16,1,.3,1),box-shadow 320ms cubic-bezier(.16,1,.3,1);
    will-change:transform;
  }
  .benefit-card-destinations > a::before,.benefit-card-network > a::before,.benefit-card-plans > a::before,.benefit-card-support > a::before {
    content:'';
    position:absolute;
    z-index:6;
    top:0;
    left:50%;
    width:100%;
    height:2px;
    border-radius:2px;
    background:#218467;
    transform:translateX(-50%) scaleX(0);
    transform-origin:center;
    transition:transform 380ms cubic-bezier(.16,1,.3,1);
    will-change:transform;
    pointer-events:none;
  }
  .benefit-card-destinations:hover,.benefit-card-network:hover,.benefit-card-plans:hover,.benefit-card-support:hover {
    transform:translate3d(0,-3px,0);
    box-shadow:inset 0 0 0 1px rgba(33,132,103,.22),0 12px 24px rgba(23,43,33,.08);
  }
  .benefit-card-destinations:hover > a::before,.benefit-card-network:hover > a::before,.benefit-card-plans:hover > a::before,.benefit-card-support:hover > a::before { transform:translateX(-50%) scaleX(1); }
}
/* Keep every Bento trace at the card edge, never at a nested action link. */
@media (hover:hover) and (pointer:fine) {
  .benefit-card-destinations > a::before,.benefit-card-network > a::before,.benefit-card-plans > a::before,.benefit-card-support > a::before { display:none !important; }
  .benefit-grid .card-hover-trace {
    position:absolute;
    z-index:7;
    top:0;
    left:50%;
    display:block;
    width:100%;
    height:2px;
    border-radius:2px;
    background:#218467;
    transform:translateX(-50%) scaleX(0);
    transform-origin:center;
    transition:transform 380ms cubic-bezier(.16,1,.3,1);
    will-change:transform;
    pointer-events:none;
  }
  .benefit-card-destinations:hover > .card-hover-trace,.benefit-card-network:hover > .card-hover-trace,.benefit-card-plans:hover > .card-hover-trace,.benefit-card-support:hover > .card-hover-trace { transform:translateX(-50%) scaleX(1); }
}

/* A quiet lift for the large travel card. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .benefit-grid .benefit-large { transform:translate3d(0,0,0); transition:transform 360ms cubic-bezier(.16,1,.3,1),box-shadow 360ms cubic-bezier(.16,1,.3,1); }
  .benefit-grid .benefit-large:hover,.benefit-grid .benefit-large:focus-within { transform:translate3d(0,-3px,0); box-shadow:inset 0 0 0 1px #cfe1d8,0 10px 22px rgba(23,43,33,.08) !important; }
}

/* Match the neighbouring cards' center-out top-edge trace. */
@media (hover:hover) and (pointer:fine) {
  .benefit-large:hover > .card-hover-trace,.benefit-large:focus-within > .card-hover-trace { transform:translateX(-50%) scaleX(1); }
}
@media (prefers-reduced-motion:reduce) {
  .benefit-large > .card-hover-trace { transition:none !important; will-change:auto !important; }
}

/* The card and its copy stay still while the artwork gently zooms. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  #numbers .value-panel--data::before,#numbers .value-panel--number .number-scene { transform:scale(1) translateZ(0); transform-origin:right center; transition:transform 1200ms cubic-bezier(.16,1,.3,1); }
  #numbers .value-panel--data:hover::before,#numbers .value-panel--number:hover .number-scene { transform:scale(1.04) translateZ(0); }
}