/* One motion language, one owner per surface. Independent translate leaves
   the existing artwork rotations and scroll transforms intact. */
.material-page [data-motion-hover] {
  --motion-lift-x:-3px;
  --motion-lift-y:-4px;
  transition:translate 260ms cubic-bezier(.2,.7,.25,1),box-shadow 260ms ease,background-color 200ms ease,color 200ms ease;
}
/* Card and backing are one layer, independent of entrance transforms on
   adjacent cards. An outgoing card stays above resting neighbours. */
.material-page [data-motion-hover="card"] { position:relative; z-index:0; }
.material-page [data-motion-hover="card"][data-motion-layer="settling"] { z-index:1; }
.material-page [data-motion-hover="art"] {
  --motion-lift-x:0px;
  --motion-lift-y:-6px;
  transition:translate 320ms cubic-bezier(.2,.7,.25,1),scale 320ms cubic-bezier(.2,.7,.25,1);
}
.material-page [data-motion-hover="control"] { --motion-lift-x:-1px; --motion-lift-y:-2px; }
.material-page [data-motion-hover="link"] { --motion-lift-x:3px; --motion-lift-y:0px; }
.material-page [data-motion-hover="surface"] { --motion-lift-x:0px; --motion-lift-y:-3px; }
.material-page .podcast-list > a[data-motion-hover] { padding-left:0; }
.material-page .role-option span[data-motion-hover] { display:flex; }

@media (hover:hover) and (pointer:fine) {
  .material-page [data-motion-hover]:not(:disabled):not([aria-disabled="true"]):hover {
    translate:var(--motion-lift-x) var(--motion-lift-y);
  }
  .material-page [data-motion-hover="card"]:hover {
    z-index:2;
    box-shadow:8px 9px 0 var(--site-coral);
  }
  .material-page [data-motion-hover="art"]:hover { scale:1.012; }
  .material-page [data-motion-hover="control"]:not(:disabled):hover {
    box-shadow:3px 4px 0 var(--site-coral);
  }
  .material-page .booking-tabs button:not(:disabled):hover {
    box-shadow:inset 0 -4px 0 var(--site-coral);
  }
}
/* Focus gives the same lifted edge without turning informational cards into
   unnecessary tab stops or suggesting that they are links. */
.material-page [data-motion-hover]:has(:focus-visible),
.material-page [data-motion-hover]:focus-visible {
  translate:var(--motion-lift-x) var(--motion-lift-y);
}
.material-page [data-motion-hover="card"]:has(:focus-visible),
.material-page [data-motion-hover="card"]:focus-visible { z-index:2; box-shadow:8px 9px 0 var(--site-coral); }
.material-page .role-option:has(input:focus-visible) span { translate:-1px -2px; }
.material-page [data-motion-hover="control"]:not(:disabled):active { translate:1px 2px; box-shadow:1px 1px 0 var(--site-coral); }
.material-page :is(.salary-stepper button,.method-stage-arrow,.client-deck-controls button,.team-deck-actions button)[data-motion-hover]:active { transform:none; }
.material-page .role-option:has(input:disabled) span { translate:none; box-shadow:none; }
.material-page .booking-tabs button { transition:box-shadow 200ms ease,background-color 200ms ease,color 200ms ease; }
.material-page .booking-tabs button:focus-visible { box-shadow:inset 0 -4px 0 var(--site-coral); }

/* Older local hover rules must not leave a raised card after a touch. */
@media (hover:none) {
  .material-page .client-list .client-row:hover { transform:none; box-shadow:5px 5px 0 #707070; }
  .material-page .podcast-list > a[data-motion-hover]:hover { padding-left:0; background:transparent; }
}
@media (prefers-reduced-motion:reduce) {
  .material-page [data-motion-hover],
  .material-page .booking-tabs button { transition:none!important; }
  .material-page [data-motion-hover],
  .material-page [data-motion-reveal],
  .material-page .role-option span { translate:none!important; scale:none!important; }
}