/* BNR83 (31.10.2026): hover of the home hero carousel and companion promo cards. Replaces banner-hover71.css.
   Fixes «empty frames»: (1) hero images were scaled inside unclipped slides, so neighbour slides spilled
   into the visible one (dark strips at the edges); (2) /tg/app ring was drawn on the square .car wrapper
   around a rounded card; (3) tiles were lifted inside an overflow:auto scroller and lost their top edge;
   (4) :focus-within drew a square outline around the whole carousel on tap.
   Motion uses only transform/opacity; layout never changes. No :has, no [class*=]. */
.wg-home-feature>.wg-metro-hero,
.wg-home-promos>.wg-hb-promo,
#homeRoot>.car,
#homeRoot .hs>.tile{
 transition:transform .28s cubic-bezier(.22,.61,.36,1),border-color .28s ease!important;
 transform-origin:50% 60%;
}
.wg-home-feature>.wg-metro-hero{isolation:isolate}
#homeRoot>.car{border-radius:13px}
/* glow ring: inside the card, faded with opacity only */
.wg-home-feature>.wg-metro-hero::after,
.wg-home-promos>.wg-hb-promo::after,
#homeRoot>.car .bn::after,
#homeRoot .hs>.tile::after{
 content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;
 box-shadow:inset 0 0 0 1px rgba(255,214,120,.55),inset 0 0 0 2px rgba(237,73,107,.35),inset 0 0 26px rgba(237,23,77,.30),inset 0 -18px 34px -18px rgba(233,185,73,.35);
 opacity:0;transition:opacity .28s cubic-bezier(.22,.61,.36,1);
}
.wg-home-feature>.wg-metro-hero .mdpub-slide>img,
.wg-home-promos>.wg-hb-promo>.wg-hb-art,
.wg-home-promos>.wg-hb-promo>.mdpub-snake,
#homeRoot>.car .bn>img,
#homeRoot .hs>.tile>img{
 transition:transform .32s cubic-bezier(.22,.61,.36,1)!important;
}
/* light sweep on the call-to-action */
.wg-metro-hero .mdpub-primary,
.wg-home-promos>.wg-hb-promo .wg-hb-cta{position:relative;overflow:hidden;isolation:isolate}
.wg-metro-hero .mdpub-primary::after,
.wg-home-promos>.wg-hb-promo .wg-hb-cta::after{
 content:"";position:absolute;top:-2px;bottom:-2px;left:0;width:60%;pointer-events:none;z-index:1;
 background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);
 transform:translate3d(-170%,0,0) skewX(-12deg);opacity:0;
}
@media(hover:hover) and (pointer:fine){
 .wg-home-feature>.wg-metro-hero .mdpub-slide{overflow:hidden;overflow:clip}
 .wg-home-feature>.wg-metro-hero,
 .wg-home-promos>.wg-hb-promo,
 #homeRoot>.car{will-change:transform}
 .wg-home-feature>.wg-metro-hero:hover,
 .wg-home-promos>.wg-hb-promo:hover,
 #homeRoot>.car:hover{border-color:#ed496b!important}
 /* tiles live in an overflow:auto row: no lift (it would be clipped), ring + zoom only */
 #homeRoot .hs>.tile:hover{transform:none!important;border-color:#ed496b!important}
 .wg-home-feature>.wg-metro-hero:hover::after,
 .wg-home-promos>.wg-hb-promo:hover::after,
 #homeRoot>.car:hover .bn::after,
 #homeRoot .hs>.tile:hover::after{opacity:1}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .wg-home-feature>.wg-metro-hero:hover,
 .wg-home-promos>.wg-hb-promo:hover,
 #homeRoot>.car:hover{transform:translate3d(0,-3px,0)!important}
 /* zoom + slight counter-shift (parallax), clipped by the card / slide */
 .wg-home-feature>.wg-metro-hero:hover .mdpub-slide.is-active>img,
 .wg-home-feature>.wg-metro-hero:not(.mdpub-swipe):hover .mdpub-slide>img,
 .wg-home-promos>.wg-hb-promo:hover>.wg-hb-art,
 #homeRoot>.car:hover .bn>img,
 #homeRoot .hs>.tile:hover>img{transform:translate3d(0,2px,0) scale(1.03)!important}
 .wg-home-promos>.wg-hb-promo:hover>.mdpub-snake{transform:translate3d(0,1px,0) scale(1.03)!important}
 .wg-metro-hero:hover .mdpub-slide.is-active .mdpub-primary::after,
 .wg-metro-hero:not(.mdpub-swipe):hover .mdpub-primary::after,
 .wg-metro-hero .mdpub-primary:hover::after,
 .wg-home-promos>.wg-hb-promo:hover .wg-hb-cta::after{
  opacity:1;transform:translate3d(270%,0,0) skewX(-12deg);
  transition:transform .75s cubic-bezier(.22,.61,.36,1) .08s,opacity .2s ease;
 }
}
/* keyboard focus on the real control, inside the card (no square frame around the carousel on tap) */
.wg-metro-hero .mdpub-copy :is(a,button):focus-visible,
.wg-metro-hero .mdpub-dots button:focus-visible{outline:2px solid #ffd27a!important;outline-offset:2px}
.wg-home-promos>.wg-hb-promo:focus-visible,
#homeRoot>.car .bn:focus-visible,
#homeRoot .hs>.tile:focus-visible{outline:2px solid #ffd27a!important;outline-offset:-3px}
.wg-home-feature>.wg-metro-hero:active,
.wg-home-promos>.wg-hb-promo:active,
#homeRoot .hs>.tile:active{
 transform:scale(.99)!important;
 border-color:#ed496b!important;
}
@media(prefers-reduced-motion:reduce){
 .wg-home-feature>.wg-metro-hero,
 .wg-home-promos>.wg-hb-promo,
 #homeRoot>.car,
 #homeRoot .hs>.tile,
 .wg-home-feature>.wg-metro-hero::after,
 .wg-home-promos>.wg-hb-promo::after,
 #homeRoot>.car .bn::after,
 #homeRoot .hs>.tile::after,
 .wg-home-feature>.wg-metro-hero .mdpub-slide>img,
 .wg-home-promos>.wg-hb-promo>.wg-hb-art,
 .wg-home-promos>.wg-hb-promo>.mdpub-snake,
 #homeRoot>.car .bn>img,
 #homeRoot .hs>.tile>img{transition:none!important;will-change:auto!important}
 .wg-home-feature>.wg-metro-hero:is(:hover,:active),
 .wg-home-promos>.wg-hb-promo:is(:hover,:active),
 #homeRoot>.car:is(:hover,:active),
 #homeRoot .hs>.tile:is(:hover,:active),
 .wg-home-feature>.wg-metro-hero:hover .mdpub-slide>img,
 .wg-home-promos>.wg-hb-promo:hover>.wg-hb-art,
 .wg-home-promos>.wg-hb-promo:hover>.mdpub-snake,
 #homeRoot>.car:hover .bn>img,
 #homeRoot .hs>.tile:hover>img{transform:none!important}
 .wg-metro-hero .mdpub-primary::after,
 .wg-home-promos>.wg-hb-promo .wg-hb-cta::after{display:none}
}