/* Sticky rows that give way. Measured from Decimals' home "rows" section (teardown 10-02), rewritten as
   vanilla. Cards pin at the same top and stack; as the next card covers one, it lifts a few px, shrinks from
   its top edge, fades toward the page colour and (only near the end) softens. part.js writes the per-card
   values; this file is layout + the veil. Without JS it is a plain sticky stack. */
.giveway {
  --gw-top: 120px;                              /* where every row pins */
  --gw-gap: 48px;                               /* space between rows before they stack */
  --gw-min-h: clamp(420px, 33vw, 480px);        /* row height */
  --gw-veil: #ece8e1;                           /* covered rows fade toward this: use the page colour */
  display: flex;
  flex-direction: column;
  gap: var(--gw-gap);
}
.giveway > * {
  position: sticky;
  top: var(--gw-top);
  min-height: var(--gw-min-h);
  isolation: isolate;
  transform-origin: top center;   /* shrink pulls the sides and bottom in, the top edge stays put */
  will-change: transform;         /* keep it a layer: scale resamples a raster instead of re-laying glyphs */
}
/* Phones: a plain list (rows are taller than the screen there). This breakpoint is the only one: part.js
   runs wherever the rows are sticky. */
@media (max-width: 767px) {
  .giveway > * { position: relative; top: auto; min-height: 0; will-change: auto; }
}
/* the veil: part.js sets --gw-dim (0 .. data-gw-veil) */
.giveway > *::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  background: var(--gw-veil);
  opacity: var(--gw-dim, 0);
  pointer-events: none;
}

/* Optional: put .giveway-wash on the section around .giveway. A colour wash painted against the VIEWPORT
   (fixed attachment), so the colour stays put while the rows travel over it; feathered at both ends of the
   section so entering/leaving never hard-cuts it. Knobs go on the section: --gw-wash (mid-screen colour),
   --gw-glow (centre bloom), --gw-wash-fade (feather, 340px), --gw-veil (the page colour at both ends). */
.giveway-wash { position: relative; isolation: isolate; }
.giveway-wash::before {
  --w: var(--gw-wash, #f4c9be);
  --g: var(--gw-glow, rgb(217 120 110 / .1));
  --v: var(--gw-veil, #ece8e1);
  --f: var(--gw-wash-fade, 340px);
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 55% at 50% 52%, var(--g) 0%, color-mix(in srgb, var(--g) 40%, transparent) 45%, transparent 70%),
    linear-gradient(180deg,
      var(--v) 0%,
      color-mix(in srgb, var(--w) 16%, var(--v)) 18%,
      color-mix(in srgb, var(--w) 45%, var(--v)) 42%,
      color-mix(in srgb, var(--w) 42%, var(--v)) 64%,
      color-mix(in srgb, var(--w) 16%, var(--v)) 84%,
      var(--v) 100%);
  background-attachment: fixed, fixed;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--f), #000 calc(100% - var(--f)), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 var(--f), #000 calc(100% - var(--f)), transparent 100%);
}