/* premium-motion : hover FX pack  (premium-motion 2.0, Phase 5)
   "Mouse-over" micro-delights. Most are pure CSS; .md-dir needs hover.js.
   All gated to @media(hover:hover) so touch devices are unaffected.
     .md-dir (+ .md-dir-fill child) — fill enters from the edge the cursor crosses
     .md-hzoom (+ .md-hcap child)   — image zooms, caption slides up on hover
     .md-link                       — animated underline sweep on a link
     .md-shine                      — glossy light sweep across a button/card
     .md-glow                       — soft brand glow on hover
     .md-swap (.a + .b children)    — old text slides up, new slides in
   ============================================================ */
@media (hover:hover){

  /* direction-aware fill */
  .md-dir{ position:relative; overflow:hidden; isolation:isolate; }
  .md-dir > *{ position:relative; z-index:1; }
  .md-dir-fill{ position:absolute; inset:0; z-index:0; background:var(--red,#C8102E);
    transform: translate(var(--dx,0), var(--dy,101%)); transition: transform .32s cubic-bezier(.22,.61,.2,1); }

  /* image hover-zoom + caption */
  .md-hzoom{ position:relative; overflow:hidden; }
  .md-hzoom img,.md-hzoom .bg{ transition: transform .55s cubic-bezier(.22,.61,.2,1); will-change:transform; }
  .md-hzoom:hover img,.md-hzoom:hover .bg{ transform: scale(1.08); }
  .md-hcap{ position:absolute; left:0; right:0; bottom:0; padding:16px; color:#fff;
    background:linear-gradient(transparent, rgba(17,24,35,.85)); transform: translateY(30%); opacity:0;
    transition: transform .4s cubic-bezier(.22,.61,.2,1), opacity .4s; }
  .md-hzoom:hover .md-hcap{ transform: translateY(0); opacity:1; }

  /* animated underline sweep */
  .md-link{ background-image: linear-gradient(currentColor, currentColor);
    background-repeat:no-repeat; background-position: left 100%; background-size: 0% 2px;
    transition: background-size .3s cubic-bezier(.22,.61,.2,1); text-decoration:none; padding-bottom:1px; }
  .md-link:hover{ background-size: 100% 2px; }

  /* glossy shine sweep */
  .md-shine{ position:relative; overflow:hidden; }
  .md-shine::after{ content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
    transform: translateX(-130%); transition: transform .6s cubic-bezier(.22,.61,.2,1); }
  .md-shine:hover::after{ transform: translateX(130%); }

  /* brand glow */
  .md-glow{ transition: box-shadow .3s, transform .3s; }
  .md-glow:hover{ box-shadow: 0 0 0 4px rgba(200,16,46,.14), 0 12px 34px rgba(200,16,46,.22); }

  /* text swap */
  .md-swap{ position:relative; display:inline-grid; overflow:hidden; line-height:1.15; }
  .md-swap .a,.md-swap .b{ grid-area:1/1; transition: transform .32s cubic-bezier(.22,.61,.2,1); }
  .md-swap .b{ transform: translateY(110%); }
  .md-swap:hover .a{ transform: translateY(-110%); }
  .md-swap:hover .b{ transform: translateY(0); }
}