/* ==========================================================================
   Powersense motion layer 2 (psmo): logo intro, "light switching on" text reveal,
   product-specific hover light demos. Standalone; loaded last. Transform/opacity only
   (plus one-shot filters on short text), no layout changes, no font changes.
   ========================================================================== */

/* ---------- 1. LOGO: one soft light sweep on load, idle, tiny hover glow ---------- */
.nav .logo{isolation:isolate}
/* travelling warm glow (re-uses the existing halo pseudo-element; ends exactly in its resting state) */
html .nav .logo::before{
  animation:psLogoGlow 2.6s cubic-bezier(.45,.05,.25,1) .45s 1 backwards!important;
  transition:filter .5s ease;will-change:auto}
@keyframes psLogoGlow{
  0%{opacity:0;transform:translate(-12px,-50%) scale(.8)}
  12%{opacity:.75}
  60%{opacity:.75;transform:translate(calc(var(--lw,200px)*.78),-50%) scale(1.1)}
  74%{opacity:0;transform:translate(calc(var(--lw,200px)*.9),-50%) scale(.9)}
  82%{opacity:0;transform:translate(0,-50%) scale(1)}
  100%{opacity:1;transform:translate(0,-50%) scale(1)}}
/* the sweep itself: a narrow warm highlight, masked to the real logo glyphs */
.nav .logo::after{content:"";position:absolute;left:0;top:0;z-index:2;pointer-events:none;
  width:var(--lw,200px);height:calc(var(--lw,200px)*.1031);
  -webkit-mask:url(/img/logo-white.svg) 0 0/100% 100% no-repeat;mask:url(/img/logo-white.svg) 0 0/100% 100% no-repeat;
  background:linear-gradient(104deg,transparent 0,transparent 38%,rgba(255,226,170,.55) 46%,rgba(255,196,110,.98) 50%,rgba(255,226,170,.55) 54%,transparent 62%,transparent 100%);
  background-size:320% 100%;background-position:100% 0;opacity:0;
  animation:psLogoSweep 1.55s cubic-bezier(.5,.05,.25,1) .7s 1 both}
@keyframes psLogoSweep{0%{opacity:0;background-position:100% 0}8%{opacity:1}90%{opacity:1}100%{opacity:0;background-position:0 0}}
/* glyphs rise out of a dim state while the light passes */
html .nav .logo img.lw{animation:psLogoOn 1.5s ease-out .45s 1 backwards!important;transition:opacity .4s,filter .5s ease}
@keyframes psLogoOn{
  0%{opacity:.32}
  55%{opacity:1}
  100%{opacity:1}}
/* no ghost #2: the old drop-shadow(gold) on the white glyph image drew a blurred, text-shaped yellow 'POWERSENSE' halo behind the logo (during the rise and on hover/click). Round ::before halo + masked sweep stay; the glyph image itself never gets a filter. */
html .nav .logo img.lw{filter:none!important}
/* no ghost: style.css's legacy `.nav .logo img{animation:flk}` also hit the hidden dark-variant img.lc, flashing a yellow/sepia dark 'POWERSENSE' under the white logo during the intro; keep .lc inert (its resting opacity:0 is untouched) */
html .nav .logo img.lc{animation:none!important}
@media (hover:hover){
  .nav .logo:hover::before{filter:brightness(1.7)}
}
@media (prefers-reduced-motion:reduce){
  .nav .logo::after{display:none}
  html .nav .logo::before,html .nav .logo img.lw{animation:none!important}
}

/* ---------- 2. TEXT: "light switching on" reveal (replaces the identical slide-up) ---------- */
/* motion.js still splits words (.wsplit .wd>span) and adds .win when in view; only the visual changes */
html .wsplit .wd{overflow:visible}
html .wsplit .wd>span{transform:none;opacity:0;transition:none;will-change:auto;
  --lt-d:.95s;--lt-s:55ms;--lt-b:4px;--lt-y:.16em;--lt-g:.5;--lt-gr:.42em}
html .wsplit.win .wd>span{
  animation:psLitA var(--lt-d) cubic-bezier(.22,.7,.2,1) calc(min(var(--i),16)*var(--lt-s)) both}
html .wsplit[data-lt=b] .wd>span{--lt-d:1.15s;--lt-s:40ms;--lt-b:2px;--lt-y:0em;--lt-g:.7;--lt-gr:.55em}
html .wsplit[data-lt=c] .wd>span{--lt-d:1.05s;--lt-s:70ms;--lt-b:1.5px;--lt-y:.05em;--lt-g:.35}
html .wsplit[data-lt=d] .wd>span{--lt-d:1.4s;--lt-s:80ms;--lt-b:6px;--lt-y:.24em;--lt-g:.3;--lt-gr:.7em}
html .wsplit.win[data-lt=b] .wd>span{animation-name:psLitB}
html .wsplit.win[data-lt=c] .wd>span{animation-name:psLitC;animation-timing-function:linear}
html .wsplit.win[data-lt=d] .wd>span{animation-name:psLitD}
/* glow colour follows the surface: warm on dark, restrained on light */
html .wsplit:not(.lt-dark) .wd>span{--lt-g:.18}
html .wsplit:not(.lt-dark)[data-lt=b] .wd>span{--lt-g:.26}
@keyframes psLitA{
  0%{opacity:0;transform:translateY(var(--lt-y));filter:blur(var(--lt-b)) drop-shadow(0 0 0 rgba(255,206,130,0))}
  48%{opacity:.9;filter:blur(0) drop-shadow(0 0 var(--lt-gr) rgba(255,206,130,var(--lt-g)))}
  100%{opacity:1;transform:none;filter:none}}
@keyframes psLitB{
  0%{opacity:0;filter:blur(var(--lt-b)) drop-shadow(0 0 0 rgba(255,214,150,0))}
  30%{opacity:.55;filter:blur(1px) drop-shadow(0 0 var(--lt-gr) rgba(255,214,150,var(--lt-g)))}
  60%{opacity:1;filter:blur(0) drop-shadow(0 0 calc(var(--lt-gr)*1.2) rgba(255,214,150,var(--lt-g)))}
  100%{opacity:1;filter:none}}
@keyframes psLitC{
  0%{opacity:0;transform:translateY(var(--lt-y))}
  14%{opacity:.62}
  22%{opacity:.12}
  36%{opacity:.86}
  46%{opacity:.5;filter:drop-shadow(0 0 var(--lt-gr) rgba(255,230,190,var(--lt-g)))}
  62%{opacity:1}
  100%{opacity:1;transform:none;filter:none}}
@keyframes psLitD{
  0%{opacity:0;transform:translateY(var(--lt-y));filter:blur(var(--lt-b))}
  60%{opacity:.8;filter:blur(0) drop-shadow(0 0 var(--lt-gr) rgba(255,206,130,var(--lt-g)))}
  100%{opacity:1;transform:none;filter:none}}
/* eyebrows and lead paragraphs that belong to a split heading: one gentle luminance rise, after the heading */
html.psmo .lt-sub{opacity:0;transform:translateY(7px);filter:brightness(.7)}
html.psmo .lt-sub.lt-in{opacity:1;transform:none;filter:none;
  transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--lt-sd,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--lt-sd,0s),filter .9s ease var(--lt-sd,0s)}
@media (max-width:640px){
  html .wsplit .wd>span{--lt-s:34ms}
  html .wsplit[data-lt=b] .wd>span{--lt-s:28ms}
  html .wsplit[data-lt=c] .wd>span{--lt-s:44ms}
  html .wsplit[data-lt=d] .wd>span{--lt-s:50ms}
}
@media (prefers-reduced-motion:reduce){
  html .wsplit .wd>span{opacity:1!important;animation:none!important;filter:none!important;transform:none!important}
  html.psmo .lt-sub{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
}

/* ---------- 3. PRODUCT CARDS / CATEGORY TILES: short product-specific light demo ---------- */
/* overlay is created lazily by psmo.js inside the card image area; existing lit/flick/hot/click effects are untouched */
.lhd{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;opacity:0;visibility:hidden;
  mix-blend-mode:screen;container-type:size;transition:opacity .5s ease,visibility 0s linear .5s;contain:strict}
.lhd.run{visibility:visible}
.lhd.on{opacity:1;transition:opacity .35s ease,visibility 0s}
.lhd i{position:absolute;display:block;pointer-events:none;backface-visibility:hidden}
.lhd:not(.run) i,.lhd:not(.run) i:before,.lhd:not(.run) i:after{animation-play-state:paused!important}
.lhd.run i{will-change:transform,opacity}
/* -- floodlight: beam cone opens -- */
.lhd-flood .fb{left:-5%;width:110%;top:40%;height:62%;transform-origin:50% 0;
  clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,rgba(255,243,214,.8),rgba(255,222,160,.34) 50%,rgba(255,214,150,0));
  animation:psBeam 1.15s cubic-bezier(.2,.75,.2,1) both}
.lhd-flood .fc{left:20%;width:60%;top:40%;height:62%;transform-origin:50% 0;
  clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,rgba(255,255,240,.85),rgba(255,236,190,.28) 60%,rgba(255,214,150,0));
  animation:psBeam 1.15s cubic-bezier(.2,.75,.2,1) .12s both}
.lhd-flood .fg{left:8%;width:84%;top:80%;height:30%;
  background:radial-gradient(closest-side,rgba(255,236,190,.65),rgba(255,214,150,.18) 60%,transparent);
  transform-origin:50% 50%;animation:psPool 1.1s cubic-bezier(.2,.7,.2,1) .5s both}
.lhd-flood .fl{left:36%;width:28%;top:28%;height:26%;
  background:radial-gradient(closest-side,rgba(255,250,235,.9),rgba(255,226,170,.25) 55%,transparent);
  animation:psGlowIn .7s ease-out both,psBreath 2.4s ease-in-out .8s infinite}
@keyframes psBeam{0%{opacity:0;transform:scale(.12,.3)}40%{opacity:1}100%{opacity:1;transform:scale(1,1)}}
@keyframes psPool{0%{opacity:0;transform:scale(.3,.5)}100%{opacity:1;transform:scale(1,1)}}
@keyframes psGlowIn{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:scale(1)}}
@keyframes psBreath{0%,100%{opacity:1}50%{opacity:.72}}
/* -- street light: pool of light falls on a road -- */
.lhd-street .sk{left:0;width:100%;top:66%;height:34%;
  background:linear-gradient(180deg,rgba(6,12,24,0),rgba(70,80,100,.42) 28%,rgba(40,48,66,.62));
  clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);animation:psGlowIn .5s ease-out both}
.lhd-street .sd{left:49.2%;width:1.6%;top:70%;height:30%;
  background:repeating-linear-gradient(180deg,rgba(255,244,214,.5) 0 12%,transparent 12% 26%);
  transform-origin:50% 100%;transform:perspective(60px) scaleX(1);opacity:.7;animation:psRoad 1.6s linear infinite}
.lhd-street .sc2{left:22%;width:56%;top:34%;height:56%;transform-origin:50% 0;
  clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,rgba(255,238,200,.62),rgba(255,222,160,.26) 60%,rgba(255,214,150,.08));
  animation:psDrop 1s cubic-bezier(.2,.75,.2,1) .05s both}
.lhd-street .sp{left:14%;width:72%;top:78%;height:20%;
  background:radial-gradient(closest-side,rgba(255,240,205,.92),rgba(255,222,160,.34) 55%,transparent);
  animation:psPool 1.1s cubic-bezier(.2,.7,.2,1) .55s both,psBreath 2.6s ease-in-out 1.7s infinite}
.lhd-street .sl{left:44%;width:12%;top:30%;height:12%;
  background:radial-gradient(closest-side,rgba(255,252,238,.95),rgba(255,226,170,.28) 60%,transparent);
  animation:psGlowIn .5s ease-out both}
@keyframes psDrop{0%{opacity:0;transform:scaleY(.1)}50%{opacity:1}100%{opacity:1;transform:scaleY(1)}}
@keyframes psRoad{from{background-position:0 0}to{background-position:0 100%}}
/* -- waterproof: droplets glinting in the light -- */
.lhd-wet .wc{left:20%;width:60%;top:34%;height:66%;transform-origin:50% 0;
  clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,rgba(225,242,255,.46),rgba(190,225,255,.12) 70%,transparent);
  animation:psDrop .8s ease-out both}
.lhd-wet .dp{top:0;width:4px;height:9px;margin-left:-2px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;
  background:linear-gradient(180deg,rgba(235,247,255,.2),rgba(235,247,255,.95));
  opacity:0;animation:psFall var(--t,1.5s) cubic-bezier(.45,0,.9,.6) var(--d,0s) infinite}
.lhd-wet .dp:before,.lhd-wet .dp:after{content:"";position:absolute;left:50%;top:70%;width:20px;height:1.6px;margin-left:-10px;
  background:linear-gradient(90deg,transparent,#fff,transparent);opacity:0;transform:scale(0);
  animation:psGlint var(--t,1.5s) linear var(--d,0s) infinite}
.lhd-wet .dp:after{width:1.6px;height:20px;left:50%;top:70%;margin-left:-.8px;margin-top:-9px;
  background:linear-gradient(180deg,transparent,#fff,transparent)}
.lhd-wet .dp:before{margin-top:-.75px}
.lhd-wet .rg{height:7%;border-radius:50%;border:1px solid rgba(210,236,255,.55);opacity:0;
  animation:psRing var(--t,1.5s) ease-out var(--d,0s) infinite}
@keyframes psFall{0%{opacity:0;transform:translateY(-8cqh)}12%{opacity:1}78%{opacity:1;transform:translateY(86cqh)}86%,100%{opacity:0;transform:translateY(90cqh)}}
@keyframes psGlint{0%,32%{opacity:0;transform:scale(0) rotate(0)}44%{opacity:1;transform:scale(1) rotate(20deg)}58%{opacity:0;transform:scale(.4) rotate(40deg)}100%{opacity:0}}
@keyframes psRing{0%,74%{opacity:0;transform:scale(.2,.2)}80%{opacity:.8}100%{opacity:0;transform:scale(1.6,1.1)}}
/* -- industrial / high bay: wide beam downward -- */
.lhd-highbay .hb{left:-8%;width:116%;top:30%;height:72%;transform-origin:50% 0;
  clip-path:polygon(34% 0,66% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,rgba(236,246,255,.74),rgba(210,230,255,.32) 55%,rgba(200,222,255,.08));
  animation:psDrop 1s cubic-bezier(.2,.75,.2,1) both}
.lhd-highbay .hr{left:0;width:100%;top:30%;height:72%;transform-origin:50% 0;
  background:
   linear-gradient(100deg,transparent 40%,rgba(255,255,255,.16) 46%,transparent 52%) 0 0/100% 100% no-repeat,
   linear-gradient(80deg,transparent 48%,rgba(255,255,255,.12) 54%,transparent 60%) 0 0/100% 100% no-repeat;
  clip-path:polygon(34% 0,66% 0,100% 100%,0 100%);animation:psGlowIn 1.2s ease-out .3s both,psSway 5s ease-in-out 1.5s infinite alternate}
.lhd-highbay .hf{left:-4%;width:108%;top:86%;height:16%;
  background:radial-gradient(closest-side,rgba(232,244,255,.82),rgba(205,226,255,.24) 60%,transparent);
  animation:psPool 1.1s cubic-bezier(.2,.7,.2,1) .5s both}
.lhd-highbay .hl{left:34%;width:32%;top:20%;height:20%;
  background:radial-gradient(closest-side,rgba(246,251,255,.95),rgba(220,236,255,.3) 55%,transparent);animation:psGlowIn .6s ease-out both}
@keyframes psSway{from{transform:translateX(-2%)}to{transform:translateX(2%)}}
/* -- grow: warm red/blue spectrum glow, plants rise in it -- */
.lhd-grow .gl,.lhd-grow .gb{top:18%;width:64%;height:78%;border-radius:50%}
.lhd-grow .gl{left:-14%;background:radial-gradient(closest-side,rgba(255,52,96,.62),rgba(255,52,96,.2) 55%,transparent);
  animation:psGlowIn 1s ease-out both,psDriftL 4.2s ease-in-out 1s infinite alternate}
.lhd-grow .gb{right:-14%;background:radial-gradient(closest-side,rgba(66,112,255,.64),rgba(66,112,255,.2) 55%,transparent);
  animation:psGlowIn 1s ease-out .12s both,psDriftR 4.2s ease-in-out 1s infinite alternate}
.lhd-grow .gw{left:22%;width:56%;top:28%;height:60%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,196,120,.52),rgba(255,170,100,.16) 60%,transparent);
  animation:psGlowIn 1.2s ease-out .25s both,psBreath 3s ease-in-out 1.4s infinite}
.lhd-grow .bl{bottom:0;width:3%;height:30%;transform-origin:50% 100%;border-radius:60% 60% 0 0/100% 100% 0 0;
  background:linear-gradient(0deg,rgba(40,190,110,.82),rgba(168,255,190,.95));
  animation:psGrowUp 1.3s cubic-bezier(.2,.8,.2,1) var(--d,0s) both,psSwayB 3s ease-in-out calc(var(--d,0s) + 1.3s) infinite alternate}
@keyframes psGrowUp{0%{opacity:0;transform:scaleY(.1)}30%{opacity:1}100%{opacity:1;transform:scaleY(1)}}
@keyframes psSwayB{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes psDriftL{from{transform:translateX(-3%)}to{transform:translateX(10%)}}
@keyframes psDriftR{from{transform:translateX(3%)}to{transform:translateX(-10%)}}
/* -- indoor: soft downlight -- */
.lhd-indoor .dc{left:10%;width:80%;top:32%;height:68%;transform-origin:50% 0;
  clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent);mask-image:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent);
  background:linear-gradient(180deg,rgba(255,232,190,.62),rgba(255,226,180,.24) 60%,rgba(255,220,170,.06));
  animation:psSoft 1.5s ease-out both}
.lhd-indoor .dp2{left:18%;width:64%;top:82%;height:18%;
  background:radial-gradient(closest-side,rgba(255,236,200,.85),rgba(255,224,176,.25) 62%,transparent);
  animation:psSoft 1.8s ease-out .3s both}
.lhd-indoor .dh{left:30%;width:40%;top:22%;height:20%;
  background:radial-gradient(closest-side,rgba(255,246,228,.9),rgba(255,230,190,.25) 60%,transparent);animation:psSoft 1.1s ease-out both}
.lhd-indoor[data-v=spot] .dc{left:24%;width:52%;clip-path:polygon(42% 0,58% 0,100% 100%,0 100%)}
.lhd-indoor[data-v=spot] .dp2{left:28%;width:44%}
.lhd-indoor[data-v=wide] .dc{left:2%;width:96%;top:26%;height:74%;clip-path:polygon(6% 0,94% 0,100% 100%,0 100%)}
.lhd-indoor[data-v=wide] .dh{left:12%;width:76%;top:20%;height:12%;border-radius:40%}
.lhd-indoor[data-v=wide] .dp2{left:6%;width:88%}
@keyframes psSoft{0%{opacity:0;transform:scale(.92,.8)}100%{opacity:1;transform:scale(1,1)}}
/* tiles carry a full simulation canvas: keep the demo lighter and clear of its data chips */
.ltile .lhd.on{opacity:.55}
.ltile .lhd-grow .bl{display:none}
.ltile .lhd-flood .fg,.ltile .lhd-street .sp,.ltile .lhd-highbay .hf{display:none}
/* reduced motion: static end state on hover only, no movement */
@media (prefers-reduced-motion:reduce){
  .lhd i,.lhd i:before,.lhd i:after{animation:none!important}
  .lhd-wet .dp,.lhd-wet .rg{display:none}
  .lhd{transition:opacity .01ms}
}


/* ==========================================================================
   MOBILE BLACK-SCREEN FIX (v8): never leave the page hidden, never let hundreds of
   decorative layers pile up on phones.
   1) --lt-s was written in px on <=640px: `calc(min(var(--i),16)*34px)` is not a time, so the whole
      `animation` shorthand became invalid at computed-value time -> every split heading stayed at opacity:0
      on phones (fixed above: ms).
   2) pure-CSS failsafes: the intro (body opacity:0) and the language-switch hide (body visibility:hidden)
      always clear on their own even if JS stalls / is killed / page is restored from bfcache.
   3) lighting page = whole catalogue (43k px, 365 infinite animations, 130 drop-shadow filtered images):
      on phones, skip rendering of off-screen catalogue sections and pause their animations.
   ========================================================================== */
@keyframes psFailShow{to{opacity:1;visibility:visible}}
html.intro body{animation:psFailShow .01s linear 1.9s forwards}
html.ldg body{animation:psFailShow .01s linear 2.2s forwards}
@media (prefers-reduced-motion:reduce){
  html.intro body,html.intro main{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
  html.ldg body{visibility:visible!important;animation:none!important}
  html.psmo .lt-sub{opacity:1!important}
}
html.ps-offscr-ready .ps-off,html.ps-offscr-ready .ps-off *,html.ps-offscr-ready .ps-off *::before,html.ps-offscr-ready .ps-off *::after{animation-play-state:paused!important}
@media (max-width:820px),(hover:none) and (pointer:coarse){
  .acp img,.sc .scimg img,.flick img{animation:none!important;will-change:auto!important}
  main>section.lcat,main>section.spsol{content-visibility:auto;contain-intrinsic-size:auto 4500px}
  html.ps-nocv main>section.lcat,html.ps-nocv main>section.spsol{content-visibility:visible}
}

/* ---------- v8b: product hero (.phero.aph) on phones ----------
   .phero has height:62-72vh + overflow:hidden + align-items:flex-end; on phones the astro-hp product hero stacks the product
   image (260px) above the text (400px) = taller than the hero, so the content was pushed UP and clipped under the fixed header
   (top of the product image hidden). Let the hero grow with its content and clear the header + safe area. */
@media (max-width:900px){
  .phero.aph{height:auto!important;min-height:0!important;padding-top:calc(96px + env(safe-area-inset-top,0px))!important;padding-bottom:36px!important;align-items:flex-start!important}
  .phero.aph .aphw{gap:20px}
}

/* v9: reveals fail-safe — if psmo.js never ran (html.psmo absent) split headings are fully visible */
html:not(.psmo) .wsplit .wd>span{opacity:1!important;animation:none!important;filter:none!important;transform:none!important}

/* v9: every inner-page hero (.phero) must clear the fixed header on phones: height grows with content, top padding = header + safe area */
@media (max-width:900px){
  .phero:not(.hero),.phero.tall{height:auto!important;padding-top:calc(96px + env(safe-area-inset-top,0px))!important;padding-bottom:36px!important}
  .phero.aph{min-height:0!important}
}