/* =====================================================================
   Image hover frame (all pages): zoom + white line frame.
   js/hover-frame.js adds  .hf-host  to each image's box and puts
   <span class="hf"> inside it.
     square images -> the white square draws itself in (top/bottom, then sides)
     arch images   -> a white arch line in the same shape fades/settles in
   Not used on the video slider, page banners, logos, icons, flip cards,
   or images that already have their own frame (.fullpic).
   ===================================================================== */
.hf{position:absolute;inset:14px;z-index:3;pointer-events:none}
.hf::before,.hf::after{content:"";position:absolute;inset:0;border:0 solid #fff;transition:transform .7s cubic-bezier(.65,0,.15,1),opacity .45s ease}

/* square: lines grow from the middle */
.hf.sq::before{border-top-width:2px;border-bottom-width:2px;transform:scaleX(0)}
.hf.sq::after{border-left-width:2px;border-right-width:2px;transform:scaleY(0);transition-delay:.12s}
.hf-host:hover>.hf.sq::before,.hf-host:focus-visible>.hf.sq::before{transform:scaleX(1)}
.hf-host:hover>.hf.sq::after,.hf-host:focus-visible>.hf.sq::after{transform:scaleY(1)}

/* arch (and other rounded shapes): one line following the shape */
.hf.arch::before{border-width:2px;border-radius:inherit;opacity:0;transform:scale(1.06)}
.hf.arch::after{display:none}
.hf-host:hover>.hf.arch::before,.hf-host:focus-visible>.hf.arch::before{opacity:1;transform:scale(1)}

/* zoom + slight darkening so the white line stands out */
.hf-host.hf-host:hover img{transform:scale(1.06);filter:brightness(.86) saturate(1.08)}
img.hf-anim{transition:transform .8s cubic-bezier(.65,0,.15,1),filter .5s ease}

@media (hover:none){.hf{display:none}}
@media (prefers-reduced-motion:reduce){.hf::before,.hf::after,img.hf-anim{transition:none}}