/* Motion only. All colour and layout now lives in index.html's stylesheet —
   this file used to also override the header and hero to full cobalt, which is
   what made the page read as a wall of blue. Every rule here degrades to a
   static, fully visible page without JS and under reduced-motion. */

/* Small raster marshmallows drifting behind the hero. They now fall across a
   light ground, so they carry a soft shadow to stay visible on paper. */
.marshmallow-fall{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;user-select:none}
.falling-marshmallow{
  position:absolute;top:-110px;left:var(--x);
  width:calc(var(--size) * 3);height:calc(var(--size) * 3);
  object-fit:contain;opacity:0;
  filter:drop-shadow(0 2px 4px rgba(23,26,32,.16));
  animation:marshmallow-fall var(--duration) linear var(--delay) infinite;
  will-change:transform,opacity;
}
@keyframes marshmallow-fall{
  0%{transform:translate3d(0,-20px,0) rotate(0deg);opacity:0}
  8%{opacity:var(--opacity)}
  85%{opacity:var(--opacity)}
  100%{transform:translate3d(var(--sway),900px,0) rotate(var(--spin));opacity:0}
}

/* Shop section: the same drifting marshmallows as the hero, at about half
   the opacity and twice the duration, and only in the gutters either side of
   the 760px checkout column. The section is much taller than the hero, hence
   its own keyframe with a longer fall. */
.shop-fall{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;user-select:none}
.shop-fall .falling-marshmallow{animation-name:shop-marshmallow-fall;
  /* ⚠️ Opacity alone cannot make these whiter — measured, the photo's own
     shading dominates, so raising it only makes the shape GREYER against the
     #f5f5f0 paper (min 237→204 from op .15→.80, max stuck at ~245, i.e. the
     paper's own value). brightness(1.12) lifts the body to a true 255 while
     leaving ~226 in the edges for form; the opacity then controls how much of
     that reads. Re-measure if the paper tone changes. */
  filter:brightness(1.12) drop-shadow(0 3px 7px rgba(23,26,32,.16))}
@keyframes shop-marshmallow-fall{
  0%{transform:translate3d(0,-20px,0) rotate(0deg);opacity:0}
  6%{opacity:var(--opacity)}
  90%{opacity:var(--opacity)}
  100%{transform:translate3d(var(--sway),2100px,0) rotate(var(--spin));opacity:0}
}
/* ⚠️ 1240px, not 1000. The column is capped at 760 inside 4% padding, so a
   narrower viewport leaves a gutter too thin for the widest marshmallow and
   they start falling across the cards — measured 5 overlapping at 1001px. */
@media(max-width:1240px){.shop-fall{display:none}}

/* Section reveals */
.motion-ready .scroll-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.65,.3,1);transition-delay:var(--reveal-delay,0ms)}
.motion-ready .scroll-reveal.is-visible{opacity:1;transform:translateY(0)}

@media(max-width:800px){
  .falling-marshmallow:nth-child(n+7){display:none}
  @keyframes marshmallow-fall{
    0%{transform:translate3d(0,-20px,0) rotate(0deg);opacity:0}
    8%{opacity:var(--opacity)}
    85%{opacity:var(--opacity)}
    100%{transform:translate3d(var(--sway),1200px,0) rotate(var(--spin));opacity:0}
  }
}

@media(prefers-reduced-motion:reduce){
  .marshmallow-fall{display:none}
  .shop-fall{display:none}
  .motion-ready .scroll-reveal{opacity:1;transform:none;transition:none}
}