/* V03-K7 Home "What we do" cards (Material Excellence, Refined Processing, Global Logistics): the Sustainability card
   interaction, on hover only. Source of the feel being reproduced (r049 lab, /sustainability/):
     - psg/corrections.js R21-09 + its inline CSS: .psg-sust-card:hover .sust-ring { transform: scale(1.04);
       filter: drop-shadow(0 0 16px rgba(184,130,70,.45)) } with the ring's transition 220ms; glyph sheen
       background-position 0 -> 100% with transition .6s
     - r027/sust-light.js + its inline CSS: [data-lumen].is-lit .psg-lumen, a cursor-following light between the card's
       own background and its content (bronze 220px core + navy 480px body, screen blend), opacity .55s and position
       .42s cubic-bezier(.2,.7,.2,1); the ring's specular arc swells on entry (psg-lumen-swell .9s: 0 -> 1 -> .7)
   The Home icons are raster PNGs (no ring, no gradient glyph), so the ring's scale + bronze glow go on the icon itself
   (drop-shadow follows the PNG's alpha) and the specular/sheen becomes a light band masked to the icon's own shape.
   At rest nothing here applies: the cards keep their current look exactly (no ring, halo, border or colour change) and
   there is no sweep on reveal (owner, 10 Nov). No element is added to the page (the phone row layout keys on
   :first-child): the card light is the card's free ::after and the sheen the icon widget's ::after, both declared only
   for devices that hover. Mouse hover only; keyboard :focus-within (the Arabic logistics card holds a glossary link)
   gives the same state; touch: nothing; reduced motion: the glow alone, no scale, no movement. Transforms, filters and
   opacity only: no layout shift. Direction-neutral (the light follows the pointer), so RTL needs nothing extra. */
@property --psg-hx{syntax:"<length-percentage>";inherits:true;initial-value:50%}
@property --psg-hy{syntax:"<length-percentage>";inherits:true;initial-value:22%}
@property --psg-hs{syntax:"<percentage>";inherits:true;initial-value:0%}
@keyframes psg-hv-swell{0%{opacity:0}35%{opacity:1}100%{opacity:.7}}

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  [data-psg-hover]::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;mix-blend-mode:screen;
    background:radial-gradient(220px circle at var(--psg-hx) var(--psg-hy),rgba(222,182,128,.22),rgba(214,176,126,0) 62%),radial-gradient(480px circle at var(--psg-hx) var(--psg-hy),rgba(28,64,108,.32),rgba(16,40,70,.1) 45%,rgba(10,28,46,0) 70%);
    transition:opacity .55s cubic-bezier(.2,.7,.2,1),--psg-hx .42s cubic-bezier(.2,.7,.2,1),--psg-hy .42s cubic-bezier(.2,.7,.2,1)}
  [data-psg-hover]:is(.psg-hv-lit,:focus-within)::after{opacity:1}
  [data-psg-hover] .elementor-widget-image::after{content:"";position:absolute;left:var(--psg-hv-l,0);top:var(--psg-hv-t,0);width:var(--psg-hv-w,0);height:var(--psg-hv-h,0);
    z-index:1;pointer-events:none;opacity:0;mix-blend-mode:screen;
    background:linear-gradient(20deg,rgba(255,240,214,0) 30%,rgba(255,240,214,.55) 50%,rgba(255,240,214,0) 70%) var(--psg-hs) 0/200% 200% no-repeat;
    -webkit-mask:var(--psg-hv-mask,none) center/contain no-repeat;mask:var(--psg-hv-mask,none) center/contain no-repeat;
    transition:opacity .5s cubic-bezier(.2,.7,.2,1),--psg-hs .6s}
  [data-psg-hover].psg-hv-lit .elementor-widget-image::after{opacity:.7;animation:psg-hv-swell .9s cubic-bezier(.2,.7,.2,1) both}
  [data-psg-hover] .elementor-widget-image{transition:transform 220ms,filter 220ms}
  [data-psg-hover]:is(:hover,:focus-within) .elementor-widget-image{transform:scale(1.04);filter:drop-shadow(0 0 16px rgba(184,130,70,.45))}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){
  [data-psg-hover]:is(:hover,:focus-within) .elementor-widget-image{filter:drop-shadow(0 0 16px rgba(184,130,70,.45))}
}