/* Character roll on hover for plain text links (nav, language link, footer).
   Ported 2026-11-08 from sunnyvaleaeo.com (aeo-medspas ce3e4531, web/app/v2/components/roll-label.css).

   Mechanism: js/roll.js splits a text-only link, when it is hovered or keyboard-focused, into per-word clipping masks
   holding per-character spans (and puts it back after the roll). At rest the link is plain text. On hover
   the resting label rolls up out of its mask while an identical copy rolls up into its place from below, staggered left to
   right: 0.6 s, ease, 0.2 s of total spread. The second copy is a ::after fed by data-c, not a second text node, so the
   link's textContent stays one copy (crawlable anchor text, Ctrl+F, copy and paste).

   ONE gate. js/roll.js applies the same media query, so outside it there are no spans at all and nothing here applies:
   touch, reduced motion and no-hover devices see the links exactly as they were. */

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

  .roll {
    --roll-dur: 0.6s;
    --roll-ease: cubic-bezier(0.25, 0.1, 0.25, 1); /* the same curve as plain `ease` */
    --roll-stagger: 0.2s;                          /* total spread across the whole label */
    --roll-pad: 0.25em;                            /* clip slack so ascenders and descenders are not shaved */
  }

  /* Per-word clipping mask.
     - inline-block with overflow moves the baseline to the bottom margin edge; vertical-align: top pins it back, so a
       rolled link sits where the plain text did.
     - nowrap: every character is its own box, so the browser would otherwise break between characters. Words still wrap
       at the real spaces, which stay plain text between the masks.
     - The padding widens the clip box by --roll-pad above and below so glyphs that overshoot the line box (these links run
       line-height 1.25 to 1.5) are not clipped, and the equal negative margin hands that room back, so the link keeps its
       exact height. The same 0.1em sideways keeps a letter that overhangs its advance (the kerning correction in roll.js
       can trim an advance by a fraction of a pixel) from being shaved. */
  .roll-w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    white-space: nowrap;
    padding: var(--roll-pad) 0.1em;
    margin: calc(-1 * var(--roll-pad)) -0.1em;
  }

  /* The delay is set once and not overridden on hover, so hover-out replays the same left-to-right stagger.
     No will-change: the footer carries several hundred of these and pinning that many layers costs more than the roll
     is worth. */
  .roll-c {
    display: inline-block;
    position: relative;
    transition: transform var(--roll-dur) var(--roll-ease);
    transition-delay: calc(var(--roll-f, 0) * var(--roll-stagger));
  }

  /* Copy 2 sits one line plus the clip slack below its character, so it is outside the clip box at rest; the roll moves
     both by the same amount and it lands exactly where copy 1 was. It carries no colour of its own: it inherits the
     link's, so it follows the nav's light or ink tone (and the dark footer) by itself. */
  .roll-c::after {
    content: attr(data-c);
    position: absolute;
    left: 0;
    top: calc(100% + var(--roll-pad));
  }

  /* roll-on, not roll-link: js/roll.js adds it only after the split has been laid out, so the roll starts from rest
     instead of the spans being born already rolled (which would not transition). */
  a.roll-on:hover .roll-c,
  a.roll-on:focus-visible .roll-c {
    transform: translateY(calc(-100% - var(--roll-pad)));
  }

  /* Hover treatments that would race the roll are yielded to it, so the roll IS the hover. Each rule carries the
     .roll-link marker so it beats the site's own hover rules on specificity, never on stylesheet order. */

  /* Top nav: the ink underline that drew in on hover. The current page's underline is its marker, not a hover, so it
     stays. (The language link keeps its resting underline: that one is its affordance, not a hover effect.) */
  .nav__links a.roll-link:not([aria-current="page"]):hover::after { transform: scaleX(0); }

  /* Footer: the underline and, on the dark footer, the colour lift. The colour moves to the incoming copy, so it
     arrives in ivory along with the stagger instead of the whole word flipping at once. */
  .pfoot a.roll-link:hover,
  .footer a.roll-link:hover { text-decoration: none; }
  .footer a.roll-link:hover { color: var(--deep-2); }
  .footer a.roll-link .roll-c::after { color: var(--ivory); }
}