/* ==========================================================================
   Geedlee motion layer
   Adds scroll motion + micro-interactions only. Nothing here changes how the
   page looks when it is still: every rule is scoped to .glm-on (set by
   glmotion.js) so no-JS and reduced-motion users get the original page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. REVEAL ON ENTER  (fade + rise 10-20px, with optional stagger)
   -------------------------------------------------------------------------- */
.glm-on .glm-r{
  opacity:0;
  transform:translate3d(0,16px,0);
  transition:opacity .62s cubic-bezier(.22,.7,.28,1),
             transform .62s cubic-bezier(.22,.7,.28,1);
  transition-delay:var(--glm-d,0ms);
  will-change:opacity,transform;
}
.glm-on .glm-r.glm-in{opacity:1;transform:none;}

/* headings rise a touch less so copy never feels like it jumps */
.glm-on .glm-r-sm{transform:translate3d(0,10px,0);}

/* once revealed, drop will-change so we are not holding layers forever */
.glm-on .glm-r.glm-done{will-change:auto;}

/* --------------------------------------------------------------------------
   2. PARALLAX  (transform driven from JS, capped at 10-40px)
   -------------------------------------------------------------------------- */
.glm-on .glm-px{
  transform:translate3d(0,var(--glm-y,0px),0);
  will-change:transform;
}
/* decorative shapes may also drift sideways + rotate a hair */
.glm-on .glm-px-rot{
  transform:translate3d(var(--glm-x,0px),var(--glm-y,0px),0) rotate(var(--glm-rot,0deg));
  will-change:transform;
}

/* --------------------------------------------------------------------------
   3. AMBIENT DRIFT  (sparkles, dots, botanicals, heroes)
   Slow, small, offset by --glm-o so nothing moves in lockstep.
   -------------------------------------------------------------------------- */
@keyframes glmFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg);}
  50%    {transform:translate3d(0,-7px,0) rotate(var(--glm-tilt,3deg));}
}
@keyframes glmDrift{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg);}
  33%    {transform:translate3d(2px,-5px,0) rotate(var(--glm-tilt,2deg));}
  66%    {transform:translate3d(-2px,-9px,0) rotate(calc(var(--glm-tilt,2deg) * -1));}
}
@keyframes glmSway{           /* botanicals: a soft breeze, pivot from the base */
  0%,100%{transform:rotate(-1.2deg);}
  50%    {transform:rotate(1.2deg);}
}
@keyframes glmBob{            /* heroes: independent, very slow */
  0%,100%{transform:translate3d(0,0,0);}
  50%    {transform:translate3d(0,-6px,0);}
}

.glm-on .glm-float{animation:glmFloat var(--glm-dur,7s) ease-in-out infinite;animation-delay:var(--glm-o,0s);}
.glm-on .glm-drift{animation:glmDrift var(--glm-dur,11s) ease-in-out infinite;animation-delay:var(--glm-o,0s);}
.glm-on .glm-sway {animation:glmSway  var(--glm-dur,9s)  ease-in-out infinite;animation-delay:var(--glm-o,0s);transform-origin:50% 100%;}
.glm-on .glm-bob  {animation:glmBob   var(--glm-dur,8s)  ease-in-out infinite;animation-delay:var(--glm-o,0s);}

/* --------------------------------------------------------------------------
   4. MICRO-INTERACTIONS
   Buttons already carry the site's 3D lift, so they are left alone here.
   -------------------------------------------------------------------------- */
/* cards: very slight lift + softer, wider shadow */
.glm-on .glm-lift{transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;}
.glm-on .glm-lift:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(24,36,77,.14);}

/* round icons: a whisper of scale */
.glm-on .glm-pop{transition:transform .26s cubic-bezier(.2,.8,.2,1);}
.glm-on .glm-lift:hover .glm-pop,
.glm-on .glm-pop:hover{transform:scale(1.04);}

/* heroes peek a few px further when their card is hovered */
.glm-on .nh-hc .art img{transition:transform .38s cubic-bezier(.2,.8,.2,1);}
.glm-on .nh-hc:hover .art img{transform:translateY(-6px) scale(1.03);}

/* need cards: photo eases in slightly, never a hard zoom */
.glm-on .nh-need-c .ph img{transition:transform .5s cubic-bezier(.2,.8,.2,1);}
.glm-on .nh-need-c:hover .ph img{transform:scale(1.035);}

/* shop cards: the child leans in a touch */
.glm-on .nh-sc .pic.cutout>img{transition:transform .42s cubic-bezier(.2,.8,.2,1);}
.glm-on .nh-sc:hover .pic.cutout>img{transform:translateY(-5px);}

/* --------------------------------------------------------------------------
   5. RESPECT THE USER
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .glm-on .glm-r{opacity:1 !important;transform:none !important;transition:none !important;}
  .glm-on .glm-float,.glm-on .glm-drift,.glm-on .glm-sway,.glm-on .glm-bob{animation:none !important;}
  .glm-on .glm-px,.glm-on .glm-px-rot{transform:none !important;}
  .glm-on .glm-lift,.glm-on .glm-pop,
  .glm-on .nh-hc .art img,.glm-on .nh-need-c .ph img,.glm-on .nh-sc .pic.cutout>img{transition:none !important;}
  .glm-on .glm-lift:hover{transform:none;}
}

/* On small screens keep parallax off: it costs the most and reads the least. */
@media(max-width:820px){
  .glm-on .glm-px,.glm-on .glm-px-rot{transform:none;}
}