/* THUNDER HONEY V3 light layer. C (the metal sheen) is ON by default across the site since 30 Sep 2026 (light.js);
   ?light=a or ?light=b switches to another variant, ?light=off turns it off. The choice is kept for the visit (sessionStorage), so internal links keep it.

   A  POINTER LIGHT: a soft warm-white to silver lamp that follows the pointer over paper, white and stone sections,
      plus a faint navy shadow on cards and under the pouch that leans away from the light.
   B  AMBIENT SILVER FIELD: slow drifting silver, warm-white and a whisper of navy light behind light sections
      (large soft shapes on 22-40 s loops) that lean gently toward the pointer.
   C  METAL SHEEN: a specular band that travels across glass cards, buttons and big headings with the pointer,
      plus A at half strength.

   Layering, so nothing ever covers text, modals, the cookie banner or the grain:
   * the section light (.lt-host) sits above the section's own ground and under its photos, cards and text: the veil
     and the ambient field under the section's own light field, the lamp over it;
   * card shadows (.lt-cs) and the sheen on glass and buttons (.lt-sp) are z-index:-1 inside their card, so they sit
     under the card's text; the heading sheen (.lt-hs) is a lighter copy of the heading's own words, masked to a band,
     that never drops the words below 7:1 contrast on paper;
   * transforms and opacity only; light.js runs one requestAnimationFrame loop that sleeps when idle or hidden.
   Nothing here applies without an html.lt class, and removing that class switches everything off. */

html:not(.lt) :is(.lt-host,.lt-cs,.lt-sp,.lt-hs,.lt-tt,.lt-pl){display:none!important}

:root{--lt-a:0;--lt-L:1600px}
html.lt-a{--lt-a:1}
html.lt-c{--lt-a:.5}

/* helpers light.js adds only where they are safe (it checks first) */
html.lt .lt-pos{position:relative}
html.lt .lt-iso{isolation:isolate}
/* the fallback for a section that cannot become a stacking context: its ground moves onto the light layer (light.js copies it) */
html.lt .lt-sec{background:transparent!important}

/* ---------- the section light layer ---------- */
.lt-host{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict}
/* where the section keeps all of its content in positioned wrappers, the light takes two layers: the veil and the
   ambient field first in the section (under the section's own designed light field, so its warmth survives), the lamp
   straight after that field (over it, still under every photo, card and word) */
.lt-host.lt-host--under,.lt-host.lt-host--over{z-index:0}
.lt-host>*{position:absolute;left:0;top:0;pointer-events:none}

/* A: a warm veil that the lamp lifts where it falls. The veil is one colour on every light ground, so two light sections
   meet without a seam; on stone it barely shows, on paper and white it gives the lamp something to lift. It is kept
   light (about 4 levels on paper) so paper still reads as paper and never drifts towards stone or grey. */
.lt-veil{width:100%;height:100%;background:rgba(236,234,227,.30);opacity:0;transition:opacity 1.4s cubic-bezier(.22,1,.36,1)}
.lt-host--white .lt-veil{background:rgba(236,234,227,.18)}
.lt-lamp{width:var(--lt-L);height:var(--lt-L);opacity:0;transition:opacity 1.4s cubic-bezier(.22,1,.36,1);
  /* a gaussian-like falloff with no edge: warm white at the centre, a cool silver white on the shoulder, nothing at the rim */
  background:radial-gradient(closest-side,
    rgba(255,254,250,.96) 0%,rgba(255,254,251,.9) 10%,rgba(255,254,252,.78) 20%,rgba(252,252,252,.62) 30%,
    rgba(248,249,251,.45) 40%,rgba(245,246,249,.30) 50%,rgba(243,244,247,.18) 60%,rgba(242,243,246,.09) 70%,
    rgba(242,243,246,.035) 80%,rgba(242,243,246,.01) 90%,rgba(242,243,246,0) 100%)}
.lt-host.is-lit .lt-veil,.lt-host.is-lit .lt-lamp{opacity:var(--lt-a)}
.lt-in>.lt-host .lt-lamp,.lt-in>.lt-host .lt-field{will-change:transform}

/* B: the ambient field follows the viewport (light.js), so the shapes run on across two light sections without a seam */
.lt-field{width:100%;height:100vh;height:100lvh;opacity:0;transition:opacity 1.8s cubic-bezier(.22,1,.36,1)}
.lt-host.is-lit .lt-field{opacity:1}
.lt-blob{position:absolute;display:block;border-radius:50%;animation:lt-d1 28s ease-in-out infinite alternate}
:not(.lt-in)>.lt-host .lt-blob{animation-play-state:paused}
.lt-blob--1{left:-16%;top:-22%;width:78vmax;height:60vmax;animation-name:lt-d1;animation-duration:31s;
  background:radial-gradient(closest-side,rgba(222,222,224,.42),rgba(223,223,225,.36) 28%,rgba(225,225,227,.21) 56%,rgba(227,227,228,.07) 80%,rgba(227,227,228,0))}
.lt-blob--2{right:-18%;top:4%;width:66vmax;height:56vmax;animation-name:lt-d2;animation-duration:24s;
  background:radial-gradient(closest-side,rgba(255,254,250,1),rgba(255,254,251,.86) 30%,rgba(255,255,253,.44) 58%,rgba(255,255,255,.12) 80%,rgba(255,255,255,0))}
.lt-blob--3{left:18%;top:46%;width:74vmax;height:50vmax;animation-name:lt-d3;animation-duration:38s;
  background:radial-gradient(closest-side,rgba(10,42,78,.05),rgba(10,42,78,.04) 30%,rgba(10,42,78,.021) 58%,rgba(10,42,78,.007) 80%,rgba(10,42,78,0))}
.lt-blob--4{right:2%;top:58%;width:50vmax;height:44vmax;animation-name:lt-d4;animation-duration:27s;
  background:radial-gradient(closest-side,rgba(223,222,222,.38),rgba(224,223,223,.30) 30%,rgba(226,225,225,.15) 60%,rgba(227,227,227,0))}
@keyframes lt-d1{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(9vw,6vh,0) scale(1.08)}100%{transform:translate3d(16vw,-3vh,0) scale(.96)}}
@keyframes lt-d2{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-12vw,10vh,0) scale(.92)}100%{transform:translate3d(-6vw,22vh,0) scale(1.06)}}
@keyframes lt-d3{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(14vw,-10vh,0) scale(1.1)}100%{transform:translate3d(-8vw,-18vh,0) scale(.95)}}
@keyframes lt-d4{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-16vw,-8vh,0) scale(1.12)}100%{transform:translate3d(-26vw,4vh,0) scale(.94)}}

/* ---------- A: card shadows that lean away from the light ----------
   Two navy shadows cast to either side; light.js crossfades them by where the pointer is, so only opacity changes. */
.lt-cs{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0}
.lt-cs--l{box-shadow:-22px 30px 56px -22px rgba(7,30,58,.30),-6px 10px 20px -12px rgba(7,30,58,.12)}
.lt-cs--r{box-shadow:22px 30px 56px -22px rgba(7,30,58,.30),6px 10px 20px -12px rgba(7,30,58,.12)}
.lt-in .lt-cs{will-change:opacity}

/* A: the pouch's floor shadow slides away from the light */
.lt-tt{position:absolute;z-index:0;pointer-events:none;border-radius:50%;opacity:0;
  left:calc(var(--tt-fx,0px) + var(--tt-fw,100%) * .17);width:calc(var(--tt-fw,100%) * .66);
  top:calc(var(--tt-fy,0px) + var(--tt-fh,100%) * .87);height:calc(var(--tt-fh,100%) * .12);
  background:radial-gradient(closest-side,rgba(7,30,58,.30),rgba(7,30,58,.12) 55%,rgba(7,30,58,0));
  transition:opacity 1.2s cubic-bezier(.22,1,.36,1)}
.lt-tt.is-lit{opacity:var(--lt-a)}

/* ---------- C: metal sheen ---------- */
/* on glass and buttons: a clip that follows the card's radius, with one soft specular band inside it */
.lt-sp{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none}
.lt-sp__b{position:absolute;left:0;top:0;height:100%;width:var(--lt-bw,160px);opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,var(--lt-sh,rgba(255,255,255,0)) 26%,var(--lt-spec,rgba(255,255,255,.7)) 50%,var(--lt-sh,rgba(255,255,255,0)) 74%,rgba(255,255,255,0) 100%)}
/* Light glass is already near white, so a white band alone would not read: brushed aluminium shows a bright core between
   two soft silver shoulders. Dark glass and navy buttons take a quiet white core; white buttons a silver one. */
.lt-sp--light{--lt-spec:rgba(255,255,255,.95);--lt-sh:rgba(190,196,205,.30)}
.lt-sp--dark{--lt-spec:rgba(255,255,255,.22);--lt-sh:rgba(255,255,255,.04)}
.lt-sp--navybtn{--lt-spec:rgba(255,255,255,.17);--lt-sh:rgba(255,255,255,.03)}
.lt-sp--whitebtn{--lt-spec:rgba(255,255,255,1);--lt-sh:rgba(190,196,205,.34)}

/* on big headings: a steel copy of the words, masked to a band. The band moves one way and the words move back the
   same distance, so the band travels while the letters stay exactly on top of the originals. */
.lt-hs{position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;opacity:0;-webkit-user-select:none;user-select:none;
  color:#425268!important;-webkit-text-fill-color:#425268!important;text-shadow:none!important;
  -webkit-mask-image:linear-gradient(100deg,transparent 0%,rgba(0,0,0,.25) 22%,#000 50%,rgba(0,0,0,.25) 78%,transparent 100%);
  mask-image:linear-gradient(100deg,transparent 0%,rgba(0,0,0,.25) 22%,#000 50%,rgba(0,0,0,.25) 78%,transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0;
  -webkit-mask-size:var(--lt-bw,200px) 100%;mask-size:var(--lt-bw,200px) 100%}
.lt-hs__in{display:block}
.lt-in .lt-sp__b,.lt-in .lt-hs,.lt-in .lt-hs__in{will-change:transform,opacity}
.lt-hs,.lt-hs *{animation:none!important;transition:none!important}
.lt-hs *{color:inherit!important;-webkit-text-fill-color:inherit!important;text-shadow:none!important}
.lt-hs__in *{opacity:1!important;transform:none!important;filter:none!important}

/* the pouch catches the light (A and C), laid on the drawn frame of the turntable (motion.js sets --tt-f*) and blended
   over its canvas with overlay: it lifts the foil about three times more than the navy print and leaves paper-white
   where it is, so the light lands on the pouch and not on the page, and the wordmark keeps its contrast. */
.lt-pl{position:absolute;pointer-events:none;overflow:hidden;
  left:var(--tt-fx,0px);top:var(--tt-fy,0px);width:var(--tt-fw,100%);height:var(--tt-fh,100%)}
.lt-pl>*{position:absolute;left:0;top:0;display:block;opacity:0;z-index:2}
/* A: a broad glow on the side that faces the lamp */
.lt-pl__g{width:100%;height:100%;mix-blend-mode:overlay;
  background:radial-gradient(44% 50% at 50% 42%,rgba(255,255,255,.34),rgba(255,255,255,.19) 45%,rgba(255,255,255,.05) 78%,rgba(255,255,255,0))}
/* C: a narrow specular band that runs over the foil like light over brushed aluminium (overlay again: the turntable
   is its own group, so a blend that needs a black ground would show black around the pouch; white does not) */
.lt-pl__s{top:-6%;height:112%;width:24%;margin-left:-12%;mix-blend-mode:overlay;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.12) 24%,rgba(255,255,255,.42) 40%,rgba(255,255,255,.66) 50%,rgba(255,255,255,.42) 60%,rgba(255,255,255,.12) 76%,rgba(255,255,255,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 72%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 72%,transparent 100%)}
.lt-in .lt-pl>*{will-change:transform,opacity}

@media (prefers-reduced-motion:reduce){
  .lt-host,.lt-cs,.lt-sp,.lt-hs,.lt-tt,.lt-pl{display:none!important}
}
@media print{
  .lt-host,.lt-cs,.lt-sp,.lt-hs,.lt-tt,.lt-pl{display:none!important}
  html.lt .lt-sec{background:revert!important}
}