/* =============================================================================
   landing.css — gifts.wtf SUPER-ANIMATED landing layer.

   A motion-forward hero that market.js/index.html never has to know about:
   landing.js builds <section id="gwLanding"> and injects it as the FIRST child
   of #view-gifts, right before #hotnow. Because it lives INSIDE #view-gifts it
   hides for free when the shop switches to #view-collection / #view-nfts /
   #view-stats — this file never fights that.

   THEME-AWARE. Every colour is a theme.css var (--void/--panel/--raised/
   --hairline/--ink-*/--p300..--p700/--on-accent/--sweep), so all three modes
   (dark/light/hashtag) re-skin for free. No literal brand colours except inside
   rgba() glows keyed to the sky-blue that reads on every mode.

   CSP-CLEAN. Zero network: all art is pure CSS or the five same-origin PNGs
   (frag/plug/obey-pfp, hashtag-round, fragz-sign). No fonts, no CDNs, no data
   fetches. GPU-cheap: transform/opacity keyframes only.

   REDUCED MOTION. market.css §7 already nukes every animation/transition under
   prefers-reduced-motion; §MOTION below re-asserts it locally and forces every
   scroll-reveal element visible so nothing depends on a stopped animation.
   ========================================================================== */

#gwLanding{
  position:relative;
  display:block;
  overflow:hidden;               /* the marquee & ambient drift never cause page-x scroll */
  border-bottom:1px solid var(--hairline);
  /* full-bleed inside #view-gifts's own padding context */
  margin:0 0 4px;
  isolation:isolate;             /* keep our blend/glows off the shop below */
}

/* scroll-reveal primitive — JS adds .gw-in via IntersectionObserver ---------- */
.gw-reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.16,.8,.24,1),
             transform .7s cubic-bezier(.16,.8,.24,1);
  will-change:opacity,transform;
}
.gw-reveal.gw-in{ opacity:1; transform:none; }

/* =============================================================================
   1 · HERO — full-bleed looping VIDEO + THE WORDMARK PNG pixel-locked over it.

   /giftswtf-logo.png IS the bg-removed FIRST FRAME of /hero-bg2.* (both are
   exactly 16:9 — PNG 2400×1350, video 1440×810). Video and PNG live in the
   SAME full-bleed layer with identical object-fit:cover + object-position:
   center, so the PNG's letters sit exactly where the video's letters are —
   the crisp PNG reads as the sharp foreground of the moving text. The hero's
   min-height is capped at 89vw so the box never gets tall/narrow enough for
   cover to crop the wordmark off-screen (text spans 61% of the frame width).
   Rotor + CTA anchor to the hero's bottom edge, clear of the centred mark.
   ========================================================================== */
.gw-hero{
  position:relative;
  min-height:clamp(500px, min(84vh, 89vw), 860px);
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end;
  text-align:center;
  padding:clamp(48px,9vh,120px) 16px clamp(34px,6vh,72px);
  overflow:hidden;
  /* pastel base if the video never paints — matches the animated gradient loop */
  background:linear-gradient(120deg,#9EB4F2 0%,#B7ADF0 50%,#C9B7EF 100%);
}
/* screen-reader-only brand heading (the visual wordmark is the PNG layer).
   NB: named .gw-srlabel — NOT .gw-sr, which is the home-section scroll-reveal
   class landing.js tags onto .hs-head/.hs-card (a .gw-sr rule here would
   1×1-clip every revealed section head/card). */
.gw-srlabel{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* -- the video + wordmark layer + a SOFT light scrim -------------------------
   ONE full-bleed box holds all three, stacked video → scrim → PNG. Video and
   PNG share the exact same geometry (inset:0 + cover + center on two 16:9
   sources), so the PNG's glyphs land pixel-for-pixel on the video's frame-1
   glyphs; the scrim sits between them and never washes the crisp mark. */
.gw-hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden;
  background:linear-gradient(120deg,#9EB4F2 0%,#B7ADF0 50%,#C9B7EF 100%); }
.gw-hero-video{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  /* gentle grade to keep the pastel loop bright + on-brand */
  filter:saturate(1.05) brightness(1.02);
}
/* SOFT scrim: a whisper of white to lift the pink wordmark + a bottom fade so
   the sections below blend out of the hero cleanly. Light, not dark. */
.gw-hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 44%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 26%,
                    rgba(201,183,239,.28) 82%, rgba(201,183,239,.55) 100%);
}
/* legacy scanline hook — kept as a no-op so old markup never shows grime */
.gw-hero-scan{ display:none; }
@keyframes gw-hscan{ from{ transform:translateY(0);} to{ transform:translateY(3px);} }

/* THE WORDMARK PNG — the crisp foreground of the video's own moving text.
   Identical box + fit to the video (see layer note above), with a subtle
   idle float/breathe. Reduced motion freezes it dead on the video's frame. */
.gw-hero-logo{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  pointer-events:none;
  filter:drop-shadow(0 10px 24px rgba(224,57,43,.16));
  animation:gw-logo-idle 6.5s ease-in-out infinite;
  will-change:transform;
}
@keyframes gw-logo-idle{
  0%,100%{ transform:translateY(0) scale(1); }
  50%    { transform:translateY(-1.1%) scale(1.014); }
}

/* -- foreground stack -------------------------------------------------------- */
.gw-hero-fg{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  color:#2A2140;   /* deep plum ink — reads on the light pastel loop */
}
/* the subtle mouse parallax wrapper (JS sets --gw-rx/--gw-ry) */
.gw-tilt{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  transform:perspective(1000px)
            rotateX(var(--gw-ry,0deg))
            rotateY(var(--gw-rx,0deg));
  transform-style:preserve-3d;
  transition:transform .2s ease-out;
  will-change:transform;
}

/* smaller chrome "gifts." lockup that sits above the giant WTF */
.gw-lockup{ margin:0 0 -.06em; }
.gw-lockup-word{
  font-family:var(--font-ui, system-ui, sans-serif);
  font-weight:900; font-style:normal; letter-spacing:-.03em;
  font-size:clamp(26px, 6.6vw, 74px); line-height:.9;
  background:linear-gradient(180deg,
    #ffffff 0%, #e8f2fd 14%, #b9d2ee 34%, #7c9bbd 50%,
    #35516f 51%, #7ba3c8 62%, #d0e4fb 84%, #ffffff 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.6));
}

/* THE GIANT GLITCH WTF — three-channel RGB split (::before blue, ::after red)
   that sits mostly aligned and STABLE for readability, then fires short glitch
   bursts. A slow neon breathe on the core glyph keeps it alive without a
   constant seizure (professional-but-badass, not cheesy). */
.gw-wtf-huge{
  position:relative; margin:0;
  font-family:var(--font-ui, system-ui, sans-serif);
  font-weight:900; font-style:italic; letter-spacing:-.055em;
  font-size:clamp(96px, 30vw, 400px); line-height:.78;
  color:#fff;
  text-shadow:
    0 0 26px rgba(77,169,238,.85),
    0 0 64px rgba(77,169,238,.55),
    0 6px 0 rgba(3,10,20,.4);
  animation:gw-wtf-breathe 4.6s ease-in-out infinite, gw-wtf-jit 5.5s steps(1) infinite;
}
.gw-wtf-huge::before, .gw-wtf-huge::after{
  content:attr(data-t); position:absolute; left:0; top:0; width:100%;
  z-index:-1; pointer-events:none; mix-blend-mode:screen;
}
.gw-wtf-huge::before{ color:#4DA9EE; animation:gw-wtf-c1 4.2s steps(1) infinite; }
.gw-wtf-huge::after{  color:#F2545B; animation:gw-wtf-c2 3.6s steps(1) infinite; }
@keyframes gw-wtf-breathe{
  0%,100%{ text-shadow:0 0 26px rgba(77,169,238,.75), 0 0 64px rgba(77,169,238,.45), 0 6px 0 rgba(3,10,20,.4); }
  50%    { text-shadow:0 0 40px rgba(77,169,238,1),   0 0 96px rgba(77,169,238,.7),  0 6px 0 rgba(3,10,20,.4); }
}
/* the core glyph mostly still; a couple of 1-frame jolts per cycle */
@keyframes gw-wtf-jit{
  0%,90%,100%{ transform:translate(0,0) skewX(0); }
  91%{ transform:translate(-4px,2px) skewX(4deg); }
  94%{ transform:translate(5px,-2px) skewX(-5deg); }
  97%{ transform:translate(-2px,1px) skewX(2deg); }
}
/* blue channel: aligned/hidden most of the time, glitch burst near cycle end */
@keyframes gw-wtf-c1{
  0%,86%,100%{ transform:translate(-2px,0); clip-path:inset(0 0 0 0); opacity:.4; }
  88%{ transform:translate(-14px,-3px); clip-path:inset(12% 0 54% 0); opacity:.95; }
  91%{ transform:translate(11px,2px);   clip-path:inset(58% 0 8% 0);  opacity:.9; }
  94%{ transform:translate(-9px,3px);   clip-path:inset(34% 0 40% 0); opacity:.85; }
}
@keyframes gw-wtf-c2{
  0%,82%,100%{ transform:translate(2px,0); clip-path:inset(0 0 0 0); opacity:.4; }
  85%{ transform:translate(13px,3px);  clip-path:inset(22% 0 44% 0); opacity:.95; }
  89%{ transform:translate(-12px,-2px);clip-path:inset(64% 0 6% 0);  opacity:.9; }
  93%{ transform:translate(8px,2px);   clip-path:inset(6% 0 66% 0);  opacity:.85; }
}

/* -- rotating subtitle -------------------------------------------------------- */
.gw-rotor{
  position:relative; z-index:2;
  margin-top:clamp(14px,2.4vh,26px);
  height:1.5em;
  font-weight:800; letter-spacing:.02em;
  font-size:clamp(15px,2.6vw,26px);
  color:#2A2140;
  text-shadow:0 1px 0 rgba(255,255,255,.55), 0 2px 10px rgba(255,255,255,.35);
}
.gw-rotor b{ color:#C11E12; font-weight:900; }
.gw-rotor-word{ display:inline-block; }
.gw-rotor-word.gw-swap{ animation:gw-swap .55s cubic-bezier(.16,.8,.24,1); }
@keyframes gw-swap{
  0%  { opacity:0; transform:translateY(14px); filter:blur(6px); }
  100%{ opacity:1; transform:translateY(0);    filter:blur(0); }
}

/* -- Enter CTA chip ----------------------------------------------------------- */
.gw-cta{
  position:relative; z-index:2;
  margin-top:clamp(24px,4vh,44px);
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 30px; border-radius:999px;
  background:linear-gradient(180deg, var(--p500), var(--p400));
  color:var(--on-accent);
  font-weight:900; font-size:15px; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; border:1px solid rgba(255,255,255,.45);
  box-shadow:0 8px 30px rgba(224,57,43,.42), 0 0 0 4px rgba(247,168,216,.35);
  transition:transform .2s ease, box-shadow .3s ease;
  animation:gw-cta-pulse 2.6s ease-in-out infinite;
}
.gw-cta:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 12px 40px rgba(224,57,43,.6), 0 0 0 6px rgba(247,168,216,.5); }
.gw-cta:active{ transform:translateY(0) scale(.98); }
.gw-cta .gw-cta-arrow{ display:inline-block; animation:gw-nudge 1.5s ease-in-out infinite; }
@keyframes gw-cta-pulse{
  0%,100%{ box-shadow:0 8px 30px rgba(224,57,43,.34), 0 0 0 4px rgba(247,168,216,.30); }
  50%    { box-shadow:0 8px 40px rgba(224,57,43,.62), 0 0 0 7px rgba(247,168,216,.5); }
}
@keyframes gw-nudge{ 0%,100%{ transform:translateX(0);} 50%{ transform:translateX(4px);} }

/* =============================================================================
   2 · MONOCHROME RAINBOW BELTS — two counter-scrolling belts of one-colour
   gifts, filled by landing.js from /v1/market/monochrome. Rows arrive
   hue-ordered so each belt reads as a flowing RAINBOW; belt A scrolls left,
   belt B the opposite way. Seamless loop: each track holds its sequence TWICE
   and slides exactly -50%. Edge-to-edge (no side mask — the old fade was the
   founder's "left gap"); #gwLanding is already full-bleed (overflow:hidden), so
   the belts reach the viewport edges and never cause page-x scroll.
   ========================================================================== */
.gw-marquee{
  position:relative; z-index:1;
  padding:16px 0;
  background:linear-gradient(180deg, var(--panel), transparent);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  display:flex; flex-direction:column; gap:12px;
  overflow:hidden;                /* belts scroll INSIDE — never page-x scroll */
}
.gw-mq-row{ overflow:hidden; }    /* NO horizontal mask -> chips reach the edges */
.gw-mq-track{
  display:flex; gap:14px; width:max-content;
  will-change:transform;
}
/* calm, majestic drift (the belts are long now) — a & b differ so they never
   visually sync; opposite directions read as "a rainbow flowing both ways". */
.gw-mq-a{ animation:gw-mq-left 110s linear infinite; }
.gw-mq-b{ animation:gw-mq-right 132s linear infinite; }
.gw-marquee:hover .gw-mq-track{ animation-play-state:paused; }
@keyframes gw-mq-left{  from{ transform:translateX(0); }    to{ transform:translateX(-50%); } }
@keyframes gw-mq-right{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }

/* ONE gift chip in a belt — a rounded frame around the gift image, with the
   WTF pink/red ring. A hue-tinted tile sits behind the art (CSS var set by
   landing.js) so a slow/failed CDN load still shows the chip's colour, keeping
   the rainbow intact. Theme-reactive: darker tile + red ring on the dark canvas. */
.gw-gchip{
  flex:0 0 auto;
  width:80px; height:80px; border-radius:17px;
  position:relative; overflow:hidden;
  background:hsl(var(--gchip-h,320), 58%, 86%);
  border:2px solid var(--p300);
  box-shadow:0 3px 12px var(--shadow-card), 0 0 0 3px var(--tint-weak);
}
.gw-gchip img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:15px;
}
:root[data-theme="dark"] .gw-gchip{
  background:hsl(var(--gchip-h,320), 44%, 26%);
  border-color:var(--p400);
  box-shadow:0 3px 14px rgba(0,0,0,.5), 0 0 0 3px var(--tint-weak);
}
@media (max-width:719px){
  .gw-gchip{ width:62px; height:62px; border-radius:14px; }
  .gw-mq-track{ gap:11px; }
}

/* the chips — all pure CSS art except the .gw-chip-pfp photos ---------------- */
.gw-chip{
  flex:0 0 auto;
  width:76px; height:76px; border-radius:16px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--raised); border:1px solid var(--hairline);
  position:relative; overflow:hidden;
}
.gw-chip-pfp{ padding:0; border-color:var(--p400); }
.gw-chip-pfp img{ width:100%; height:100%; object-fit:cover; border-radius:15px; }

/* mini leather username tag */
.gw-tag{
  width:46px; height:32px; border-radius:7px; position:relative;
  background:linear-gradient(160deg, var(--p300), var(--p200));
  transform:rotate(-8deg);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 2px 6px rgba(0,0,0,.3);
  animation:gw-swing 3.4s ease-in-out infinite;
  transform-origin:12% -40%;
}
.gw-tag::before{ /* punch hole */
  content:""; position:absolute; top:5px; left:6px;
  width:6px; height:6px; border-radius:50%;
  background:var(--void); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}
.gw-tag::after{ /* the @ */
  content:"@"; position:absolute; right:7px; bottom:3px;
  font-weight:900; font-size:14px; color:var(--on-accent);
}
@keyframes gw-swing{ 0%,100%{ transform:rotate(-11deg);} 50%{ transform:rotate(-3deg);} }

/* mini flip-phone */
.gw-phone{
  width:26px; height:46px; border-radius:6px; position:relative;
  background:linear-gradient(160deg, var(--raised), var(--void));
  border:1px solid var(--hairline-2);
  animation:gw-phone-tilt 4s ease-in-out infinite;
}
.gw-phone::before{ /* screen */
  content:""; position:absolute; inset:4px 4px 12px;
  border-radius:3px; background:linear-gradient(160deg, var(--p400), var(--p200));
  opacity:.9;
}
.gw-phone::after{ /* button */
  content:""; position:absolute; left:50%; bottom:3px; transform:translateX(-50%);
  width:8px; height:3px; border-radius:2px; background:var(--ink-lo);
}
@keyframes gw-phone-tilt{ 0%,100%{ transform:rotate(-6deg);} 50%{ transform:rotate(6deg);} }

/* mini gift box */
.gw-box{
  width:40px; height:38px; position:relative;
  animation:gw-box-jig 2.8s ease-in-out infinite;
}
.gw-box .gw-box-b{ position:absolute; bottom:0; left:2px; right:2px; height:26px;
  border-radius:0 0 4px 4px; background:linear-gradient(180deg, var(--p300), var(--p200)); }
.gw-box .gw-box-l{ position:absolute; top:8px; left:0; right:0; height:9px;
  border-radius:3px; background:var(--p400); }
.gw-box::before{ /* vertical ribbon */
  content:""; position:absolute; top:0; bottom:0; left:50%; width:6px; transform:translateX(-50%);
  background:var(--on-accent); opacity:.85; z-index:2;
}
.gw-box::after{ /* bow */
  content:""; position:absolute; top:-3px; left:50%; transform:translateX(-50%);
  width:16px; height:10px; border-radius:50%;
  border:3px solid var(--on-accent); border-bottom:0; opacity:.85; z-index:2;
}
@keyframes gw-box-jig{ 0%,90%,100%{ transform:rotate(0) translateY(0);} 45%{ transform:rotate(-4deg) translateY(-3px);} 70%{ transform:rotate(3deg);} }

/* =============================================================================
   3 · PILLARS — GIFTS / USERNAMES / NUMBERS, each a link with hover motion.
   ========================================================================== */
.gw-pillars{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  padding:clamp(28px,5vh,56px) clamp(14px,3vw,40px);
  max-width:1180px; margin:0 auto;
}
.gw-pillar{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
  padding:26px 18px; border-radius:18px; text-decoration:none;
  background:linear-gradient(180deg, var(--panel), var(--raised));
  border:1px solid var(--hairline); color:var(--ink-hi);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  position:relative; overflow:hidden;
}
.gw-pillar:hover{ transform:translateY(-6px); border-color:var(--p400);
  box-shadow:0 16px 40px rgba(77,169,238,.28); }
.gw-pillar-viz{ height:96px; display:flex; align-items:center; justify-content:center; }
.gw-pillar-title{ font-weight:900; font-size:clamp(20px,3vw,30px); letter-spacing:-.01em;
  text-transform:uppercase; }
.gw-pillar-sub{ color:var(--ink-lo); font-size:13px; font-weight:600; }
.gw-pillar-go{ color:var(--p400); font-weight:800; font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; opacity:.85; }
.gw-pillar:hover .gw-pillar-go{ opacity:1; }

/* pillar viz: big gift box that opens on hover */
.gw-bigbox{ width:78px; height:74px; position:relative; }
.gw-bigbox .bb-base{ position:absolute; bottom:0; left:4px; right:4px; height:50px;
  border-radius:0 0 8px 8px; background:linear-gradient(180deg, var(--p300), var(--p200)); }
.gw-bigbox .bb-lid{ position:absolute; top:14px; left:0; right:0; height:18px;
  border-radius:6px; background:var(--p400); transform-origin:bottom center;
  transition:transform .4s cubic-bezier(.16,.8,.24,1); z-index:3; }
.gw-bigbox .bb-ribbon{ position:absolute; top:14px; bottom:0; left:50%; width:10px;
  transform:translateX(-50%); background:var(--on-accent); opacity:.85; z-index:2; }
.gw-bigbox .bb-bow{ position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:26px; height:16px; border:5px solid var(--on-accent); border-bottom:0;
  border-radius:50%; opacity:.85; z-index:4; transition:transform .4s ease; }
.gw-pillar:hover .gw-bigbox .bb-lid{ transform:translateY(-14px) rotate(-8deg); }
.gw-pillar:hover .gw-bigbox .bb-bow{ transform:translateX(-50%) translateY(-8px); }
.gw-bigbox{ animation:gw-box-jig 3.2s ease-in-out infinite; }

/* pillar viz: swinging leather tag */
.gw-bigtag{ width:78px; height:72px; position:relative; }
.gw-bigtag .bt-str{ position:absolute; top:0; left:50%; width:2px; height:16px;
  transform:translateX(-50%); background:var(--ink-lo); }
.gw-bigtag .bt-body{ position:absolute; top:14px; left:14px; width:50px; height:52px;
  border-radius:10px 10px 12px 12px;
  background:linear-gradient(160deg, var(--p300), var(--p200));
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18), 0 4px 10px rgba(0,0,0,.35);
  transform-origin:50% -14px; animation:gw-swing 3s ease-in-out infinite; }
.gw-bigtag .bt-body::before{ content:""; position:absolute; top:8px; left:50%;
  transform:translateX(-50%); width:9px; height:9px; border-radius:50%;
  background:var(--void); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25); }
.gw-bigtag .bt-body::after{ content:"@"; position:absolute; inset:0; top:9px;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:26px; color:var(--on-accent); }
.gw-pillar:hover .gw-bigtag .bt-body{ animation-duration:.9s; }

/* pillar viz: flipping phone */
.gw-bigphone{ width:52px; height:88px; perspective:400px; }
.gw-bigphone .bp-inner{ width:100%; height:100%; position:relative;
  transform-style:preserve-3d; transition:transform .6s cubic-bezier(.16,.8,.24,1);
  animation:gw-phone-flip 6s ease-in-out infinite; }
.gw-pillar:hover .gw-bigphone .bp-inner{ animation:none; transform:rotateY(180deg); }
.gw-bigphone .bp-face{ position:absolute; inset:0; border-radius:10px;
  backface-visibility:hidden; border:1px solid var(--hairline-2);
  background:linear-gradient(160deg, var(--raised), var(--void)); }
.gw-bigphone .bp-face.bp-front::before{ content:""; position:absolute; inset:5px 5px 16px;
  border-radius:5px; background:linear-gradient(160deg, var(--p400), var(--p200)); }
.gw-bigphone .bp-face.bp-front::after{ content:""; position:absolute; bottom:5px; left:50%;
  transform:translateX(-50%); width:14px; height:4px; border-radius:2px; background:var(--ink-lo); }
.gw-bigphone .bp-face.bp-back{ transform:rotateY(180deg);
  background:linear-gradient(160deg, var(--p300), var(--p200)); }
.gw-bigphone .bp-face.bp-back::before{ content:"+888"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:13px; color:var(--on-accent); letter-spacing:.02em; }
@keyframes gw-phone-flip{ 0%,40%{ transform:rotateY(0);} 55%,90%{ transform:rotateY(180deg);} 100%{ transform:rotateY(360deg);} }

/* =============================================================================
   4 · THE PLUGS — frag / plug / obey avatars gently orbiting in.
   ========================================================================== */
.gw-plugs{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:clamp(20px,5vw,64px);
  padding:clamp(24px,4vh,48px) 16px;
  border-top:1px solid var(--hairline);
}
.gw-plug{ display:flex; flex-direction:column; align-items:center; gap:8px;
  text-decoration:none; color:var(--ink-mid); }
.gw-plug-av{ width:clamp(64px,12vw,96px); height:clamp(64px,12vw,96px);
  border-radius:50%; overflow:hidden; border:2px solid var(--p400);
  box-shadow:0 8px 26px rgba(77,169,238,.3);
  animation:gw-orbit 7s ease-in-out infinite; }
.gw-plug:nth-child(2) .gw-plug-av{ animation-delay:-2.3s; }
.gw-plug:nth-child(3) .gw-plug-av{ animation-delay:-4.6s; }
.gw-plug-av img{ width:100%; height:100%; object-fit:cover; }
.gw-plug:hover .gw-plug-av{ border-color:var(--p500); box-shadow:0 12px 34px rgba(77,169,238,.55); }
.gw-plug-lbl{ font-weight:800; font-size:14px; color:var(--ink-hi); }
.gw-plug:hover .gw-plug-lbl{ color:var(--p400); }
@keyframes gw-orbit{ 0%,100%{ transform:translateY(0) rotate(-2deg);} 50%{ transform:translateY(-10px) rotate(2deg);} }

/* =============================================================================
   5 · OUTRO — a minimal line that leads the eye down into the shop.
   ========================================================================== */
.gw-outro{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:clamp(10px,2vh,20px) 16px clamp(20px,4vh,36px);
  text-decoration:none;
}
.gw-outro-t{ font-weight:900; font-size:clamp(15px,2.6vw,22px); color:var(--ink-mid);
  letter-spacing:.01em; }
.gw-outro-t b{ color:var(--p400); }
.gw-outro-chev{ font-size:22px; color:var(--p400); animation:gw-bounce 1.6s ease-in-out infinite; }

/* =============================================================================
   MOBILE — pillars stack, hero tightens.
   ========================================================================== */
@media (max-width:719px){
  .gw-pillars{ grid-template-columns:1fr; }
  /* HERO on phones: a shorter cinematic band. Height tracks the viewport width
     (64vw ≈ a 1.56:1 box) so the 16:9 cover crop stays mild and the wordmark —
     61% of the frame width — is ALWAYS fully on screen; rotor + CTA tuck into
     the space under the centred mark. */
  .gw-hero{ min-height:0; height:clamp(240px, 64vw, 470px); padding:10px 14px 14px; }
  .gw-rotor{ margin-top:0; font-size:14px; }
  .gw-cta{ margin-top:10px; padding:11px 22px; font-size:13px; }
}

/* =============================================================================
   MOTION — reduced-motion: freeze everything, force reveals visible, keep the
   parallax tilt flat. (market.css §7 also does the global *{animation:none},
   this makes the landing self-sufficient if loaded standalone.)
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  #gwLanding *{ animation:none !important; transition:none !important; }
  #gwLanding .gw-reveal{ opacity:1 !important; transform:none !important; }
  #gwLanding .gw-tilt{ transform:none !important; }
  /* freeze the wordmark PNG dead on the video's (also frozen) first frame —
     a perfect, still overlap. */
  .gw-hero-logo{ animation:none !important; transform:none !important; }
  .gw-hero-scan{ display:none !important; }
}

/* =============================================================================
   DARK THEME — the hero is a bright pastel VIDEO band with hardcoded pastel
   gradients + dark-plum text; on the dark canvas it must not read as a light
   slab. Dim the video, darken the fallback gradient + scrim, and flip the
   hero's dark text to light so the rotor/subtitle stay legible. The pink
   wordmark PNG (a separate layer) stays vivid. Scoped to dark only — the WTF
   pastel hero is untouched.
   ========================================================================== */
:root[data-theme="dark"] .gw-hero,
:root[data-theme="dark"] .gw-hero-bg{
  background:linear-gradient(120deg,#181231 0%,#231a3c 50%,#140f27 100%);
}
:root[data-theme="dark"] .gw-hero-video{ filter:saturate(1) brightness(.5) contrast(1.04); }
:root[data-theme="dark"] .gw-hero-scrim{
  background:
    radial-gradient(120% 90% at 50% 44%, rgba(18,10,38,.20) 0%, rgba(18,10,38,0) 60%),
    linear-gradient(180deg, rgba(11,9,18,.30) 0%, rgba(11,9,18,0) 26%,
                    rgba(11,9,18,.60) 84%, rgba(11,9,18,.92) 100%);
}
:root[data-theme="dark"] .gw-hero-fg{ color:#F6F1FA; }
:root[data-theme="dark"] .gw-rotor{ color:#F1EAFA; text-shadow:0 1px 4px rgba(0,0,0,.65); }
:root[data-theme="dark"] .gw-rotor b{ color:#FF6E60; }

/* =============================================================================
   BOTTOM-HALF LIFE — everything BELOW the belts (#homeShowcase, #giftsGoats,
   the outro cue + the footer) gets the same energy as the hero: ambient drift
   behind each section, count-up stats, playful idle faces, punchier hovers.

   ADDITIVE ONLY. market.css owns the base card/section layout, hover shadow,
   the continuous hsFloat/hsSweep and the .gw-sr scroll-reveal. This sheet loads
   AFTER market.css and layers extra motion ON TOP, built THROUGH the theme
   tokens so WTF + Dark re-skin for free. GPU-cheap (transform/opacity only),
   IntersectionObserver-gated, and every loop is frozen under reduced motion
   (block at the very end). No literal brand colours except inside rgba() glows
   keyed to the pink #F7A8D8 / red #E0392B / sky #4DA9EE that read on both modes.
   ========================================================================== */

/* -- sections become a clipped positioning context so the ambient field drifts
   BEHIND the content and can never spill into page-x scroll ---------------- */
#homeShowcase, #giftsGoats{ position:relative; overflow:hidden; }
#homeShowcase > .hs-head, #homeShowcase > .hs-grid,
#giftsGoats > .hs-head, #giftsGoats > .gg-faces, #giftsGoats > .hs-grid{
  position:relative; z-index:1;                 /* lift real content above .gw-amb */
}

/* -- AMBIENT MOTION FIELD — 3 slow-drifting blurred brand blobs + a faint
   twinkle layer at low opacity. Reads as life; never competes with the text. - */
.gw-amb{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  contain:layout paint;                         /* isolate paint; no layout cost */
}
.gw-amb i{
  position:absolute; display:block; border-radius:50%;
  filter:blur(42px); opacity:.5; will-change:transform;
}
.gw-amb i:nth-child(1){
  width:min(46vw,540px); height:min(46vw,540px); left:-8%; top:-14%;
  background:radial-gradient(circle at 50% 50%, rgba(247,168,216,.55), transparent 68%);
  animation:gwAmb1 30s ease-in-out infinite;
}
.gw-amb i:nth-child(2){
  width:min(40vw,470px); height:min(40vw,470px); right:-6%; top:6%;
  background:radial-gradient(circle at 50% 50%, rgba(77,169,238,.42), transparent 70%);
  animation:gwAmb2 38s ease-in-out infinite;
}
.gw-amb i:nth-child(3){
  width:min(38vw,440px); height:min(38vw,440px); left:26%; bottom:-20%;
  background:radial-gradient(circle at 50% 50%, rgba(224,57,43,.30), transparent 72%);
  animation:gwAmb3 34s ease-in-out infinite;
}
.gw-amb-gg i:nth-child(1){ animation-duration:33s; }
.gw-amb-gg i:nth-child(2){ animation-duration:29s; left:-4%; right:auto; top:auto; bottom:-16%; }
.gw-amb-gg i:nth-child(3){ animation-duration:41s; }
/* faint twinkle field — a static dot layer whose OPACITY breathes (cheap; the
   painted dots are cached in a layer and only alpha is composited) */
.gw-amb::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(2.4px 2.4px at 12% 30%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(2px 2px   at 34% 68%, rgba(247,168,216,.9), transparent 60%),
    radial-gradient(2.4px 2.4px at 58% 20%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(2px 2px   at 78% 56%, rgba(77,169,238,.9), transparent 60%),
    radial-gradient(2px 2px   at 88% 34%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(2px 2px   at 46% 84%, rgba(224,57,43,.7), transparent 60%);
  opacity:.5; animation:gwTwinkle 6s ease-in-out infinite;
}
@keyframes gwAmb1{ 0%,100%{ transform:translate3d(0,0,0) scale(1);} 50%{ transform:translate3d(7%,5%,0) scale(1.10);} }
@keyframes gwAmb2{ 0%,100%{ transform:translate3d(0,0,0) scale(1);} 50%{ transform:translate3d(-6%,7%,0) scale(1.08);} }
@keyframes gwAmb3{ 0%,100%{ transform:translate3d(0,0,0) scale(1);} 50%{ transform:translate3d(5%,-6%,0) scale(1.12);} }
@keyframes gwTwinkle{ 0%,100%{ opacity:.3; } 50%{ opacity:.68; } }
/* dark canvas: the blobs ARE the section's glow — let them read a touch stronger */
:root[data-theme="dark"] .gw-amb i{ opacity:.6; filter:blur(48px); }
:root[data-theme="dark"] .gw-amb::before{ opacity:.62; }

/* -- COUNT-UP STAT STRIP (lives in #homeShowcase .hs-head, reveals with it) - */
.hs-stats{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px clamp(18px,4vw,46px);
  margin:20px auto 0; max-width:560px;
}
.hs-stat{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.hs-stat-v{
  font-weight:900; font-size:clamp(22px,4.4vw,36px); line-height:1; letter-spacing:-.01em;
  color:var(--p400);                             /* fallback if text-clip unsupported */
  background:linear-gradient(180deg, var(--p300), var(--p400));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hs-stat-k{
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-lo);
}

/* -- FEATURE CARDS — punchier hover: release the idle float so the card lifts,
   flip the sheen + shadow to the pink->red brand, slide the arrow further.
   (market.css runs hsFloat on .hs-card; `animation:none` frees the transform
   channel so the lift shows, and the declared transition smooths it in.) --- */
#homeShowcase .hs-card:hover, #homeShowcase .hs-card:focus-visible,
#giftsGoats .hs-card:hover, #giftsGoats .hs-card:focus-visible{
  animation:none;
  transform:translateY(-8px) scale(1.02);
  border-color:var(--p400);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 24px 50px -22px rgba(224,57,43,.55),
    0 0 0 1px rgba(240,73,59,.28);
}
#homeShowcase .hs-card:hover .hs-glow, #homeShowcase .hs-card:focus-visible .hs-glow,
#giftsGoats .hs-card:hover .hs-glow, #giftsGoats .hs-card:focus-visible .hs-glow{
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(247,168,216,.42) 0%, rgba(224,57,43,.22) 42%, transparent 72%);
  animation-duration:3.4s;
}
#homeShowcase .hs-card:hover .hs-go, #homeShowcase .hs-card:focus-visible .hs-go,
#giftsGoats .hs-card:hover .hs-go, #giftsGoats .hs-card:focus-visible .hs-go{
  transform:translateX(6px);
}

/* -- GIFTS & GOATS FACES — gentle staggered idle bob/tilt on the avatar IMAGE
   (market.css keeps its hover lift on the .gg-face-av container; animating the
   inner <img> avoids any transform clash), plus a bouncier wiggle on hover. A
   baseline scale(1.06) keeps the square image covering its round clip through
   the tilt so no corner gap shows. ---------------------------------------- */
#giftsGoats .gg-face-av img{
  will-change:transform; animation:gwFaceBob 4.2s ease-in-out infinite;
}
#giftsGoats .gg-face:nth-child(1) .gg-face-av img{ animation-delay:-.2s; }
#giftsGoats .gg-face:nth-child(2) .gg-face-av img{ animation-delay:-1.1s; animation-duration:4.8s; }
#giftsGoats .gg-face:nth-child(3) .gg-face-av img{ animation-delay:-2.1s; animation-duration:3.8s; }
#giftsGoats .gg-face:nth-child(4) .gg-face-av img{ animation-delay:-3.0s; animation-duration:5.2s; }
@keyframes gwFaceBob{
  0%,100%{ transform:translateY(0)    rotate(0deg)  scale(1.06); }
  25%    { transform:translateY(-3px) rotate(-3deg) scale(1.06); }
  50%    { transform:translateY(0)    rotate(0deg)  scale(1.06); }
  75%    { transform:translateY(-2px) rotate(3deg)  scale(1.06); }
}
#giftsGoats .gg-face:hover .gg-face-av img,
#giftsGoats .gg-face:focus-visible .gg-face-av img{
  animation:gwFaceWiggle .5s ease-in-out infinite;
}
@keyframes gwFaceWiggle{
  0%,100%{ transform:rotate(-6deg) scale(1.08); }
  50%    { transform:rotate(6deg)  scale(1.08); }
}

/* -- OUTRO CUE — "the whole market below v": define the (previously MISSING)
   bounce keyframe the chevron already referenced, and add a soft brand glow +
   hover so the cue actively invites the scroll into the shop. --------------- */
@keyframes gw-bounce{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(7px);} }
.gw-outro{ transition:transform .25s ease; }
.gw-outro:hover{ transform:translateY(3px); }
.gw-outro-t{ transition:color .25s ease; }
.gw-outro:hover .gw-outro-t{ color:var(--p400); }
.gw-outro:hover .gw-outro-t b{ color:var(--p500); }
.gw-outro-chev{ animation:gw-bounce 1.5s ease-in-out infinite;
  text-shadow:0 4px 14px rgba(224,57,43,.4); }

/* -- FOOTER — a faint brand sheen sweeps the top edge; the bar rises in on
   reveal (landing.js adds .gw-foot / .gw-foot-in). index.html-only (this sheet
   is not linked on the sibling storefronts), so no other page is touched. --- */
.it-foot{ position:relative; overflow:hidden; }
.it-foot::before{
  content:""; position:absolute; left:0; top:0; height:2px; width:46%;
  background:linear-gradient(90deg, transparent, var(--p300), var(--p400), transparent);
  opacity:.75; pointer-events:none; will-change:transform;
  animation:gwFootSheen 7s linear infinite;
}
@keyframes gwFootSheen{ 0%{ transform:translateX(-100%);} 100%{ transform:translateX(320%);} }
.it-foot.gw-foot{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.16,.8,.24,1), transform .7s cubic-bezier(.16,.8,.24,1);
}
.it-foot.gw-foot.gw-foot-in{ opacity:1; transform:none; }

/* -- MOBILE — keep the ambient calm and the stats tidy on small screens ---- */
@media (max-width:719px){
  .gw-amb i{ filter:blur(34px); }
  .hs-stats{ gap:8px clamp(14px,6vw,30px); margin-top:16px; }
}

/* =============================================================================
   REDUCED MOTION — freeze every bottom-half loop + resolve reveals instantly.
   The ambient blobs stay as a faint STATIC wash (no motion, still not a dead
   slab); counters are finalised by landing.js (it never runs the count-up).
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .gw-amb i, .gw-amb::before,
  #giftsGoats .gg-face-av img,
  .it-foot::before, .gw-outro-chev{ animation:none !important; }
  .gw-amb i{ opacity:.4 !important; }
  #giftsGoats .gg-face-av img{ transform:scale(1.06) !important; }
  .it-foot.gw-foot{ opacity:1 !important; transform:none !important; }
  .it-foot::before{ display:none !important; }
}

/* =============================================================================
   CATCH A FLYING GIFT -> 25% OFF  (landing.js wireCatchGame).

   #gwCatchLayer is a full-viewport, POINTER-EVENTS:NONE overlay so it can never
   block a click on the real UI; only the flying gift + the reduced-motion chip
   opt back INTO pointer events. Theme-reactive via the shared tokens, with a
   dark override where the pastel glow would wash out. Reduced motion: no fly
   (landing.js mounts the static chip instead) and every loop here is frozen.
   ========================================================================== */
#gwCatchLayer{
  position:fixed; inset:0; z-index:60; overflow:hidden;
  pointer-events:none;                 /* NEVER trap the page */
}

/* the flying gift: X travel on the host, Y arc + spin on the inner wrapper. */
.gw-catch-gift{
  position:fixed; left:0; top:var(--gw-cy,30vh);
  width:60px; height:60px; margin:-30px 0 0 -30px;
  pointer-events:auto; cursor:pointer;
  will-change:transform; -webkit-tap-highlight-color:transparent;
  animation:gwCatchX var(--gw-dur,3600ms) linear both;
}
.gw-catch-gift.rev{ animation-direction:reverse; }
.gw-catch-inner{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  animation:gwCatchYUp var(--gw-dur,3600ms) ease-in-out both;
  will-change:transform;
}
.gw-catch-gift.down .gw-catch-inner{ animation-name:gwCatchYDown; }

.gw-catch-img{
  width:52px; height:52px; border-radius:14px; object-fit:cover; display:block;
  background:var(--raised,#fff);
  box-shadow:0 6px 18px rgba(224,57,43,.30), 0 0 0 2px var(--on-accent,#fff),
             0 0 22px rgba(247,168,216,.75);
  animation:gwCatchBob 1.1s ease-in-out infinite;
}
/* the telegraphing sparkle trail streaming off the back of the gift. */
.gw-catch-trail{
  position:absolute; top:50%; left:50%; width:70px; height:26px;
  transform:translate(-92%,-50%);
  background:
    radial-gradient(6px 6px at 90% 50%, rgba(247,168,216,.95), transparent 70%),
    radial-gradient(4px 4px at 60% 30%, rgba(255,255,255,.9), transparent 70%),
    radial-gradient(4px 4px at 55% 78%, rgba(77,169,238,.85), transparent 70%),
    radial-gradient(3px 3px at 24% 45%, rgba(247,168,216,.8), transparent 70%);
  filter:blur(.3px); opacity:.9; pointer-events:none;
  animation:gwCatchTrail .7s ease-in-out infinite;
}
.gw-catch-gift.rev .gw-catch-trail{ transform:translate(-8%,-50%) scaleX(-1); }

/* CAUGHT — freeze (landing.js kills the fly anims), pop the gift, ring burst. */
.gw-catch-gift.caught .gw-catch-img{ animation:gwCatchPop .5s cubic-bezier(.2,1.5,.4,1) both; }
.gw-catch-gift.caught .gw-catch-trail{ display:none; }
.gw-catch-burst{
  position:absolute; top:50%; left:50%; width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50%; pointer-events:none;
  box-shadow:0 0 0 3px rgba(247,168,216,.9);
  animation:gwCatchBurst .6s ease-out both;
}
.gw-catch-burst::before,.gw-catch-burst::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 2px rgba(77,169,238,.8);
  animation:gwCatchBurst .6s .08s ease-out both;
}
.gw-catch-burst::after{ box-shadow:0 0 0 2px rgba(255,255,255,.85); animation-delay:.16s; }

@keyframes gwCatchX{ from{ transform:translateX(-16vw); } to{ transform:translateX(116vw); } }
@keyframes gwCatchYUp{
  0%{ transform:translateY(6vh) rotate(-10deg); }
  50%{ transform:translateY(-16vh) rotate(8deg); }
  100%{ transform:translateY(4vh) rotate(16deg); }
}
@keyframes gwCatchYDown{
  0%{ transform:translateY(-6vh) rotate(10deg); }
  50%{ transform:translateY(16vh) rotate(-8deg); }
  100%{ transform:translateY(-4vh) rotate(-16deg); }
}
@keyframes gwCatchBob{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.12); } }
@keyframes gwCatchTrail{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
@keyframes gwCatchPop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.5); } 100%{ transform:scale(0); opacity:0; } }
@keyframes gwCatchBurst{ 0%{ transform:scale(.4); opacity:1; } 100%{ transform:scale(5.5); opacity:0; } }

/* REDUCED-MOTION static chip (pointer-events opt-in). */
.gw-catch-chip{
  position:fixed; right:14px; bottom:16px; z-index:61; pointer-events:auto;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:999px; cursor:pointer;
  color:var(--on-accent,#fff);
  background:linear-gradient(135deg,var(--p300,#F06AAE),var(--p400,#E0392B));
  box-shadow:0 6px 18px rgba(224,57,43,.34); border:1px solid rgba(255,255,255,.35);
  font:600 12.5px/1 var(--font-ui); letter-spacing:.2px;
}
.gw-catch-chip[disabled]{ opacity:.5; cursor:default; }
.gw-catch-chip .gw-catch-chip-ic{ font-size:15px; }
.gw-catch-chip b{ font-weight:800; }

/* REVEAL modal — appended to <body>, above everything, own click surface. */
.gwr-back{
  position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(20,14,32,.55); backdrop-filter:blur(4px);
  pointer-events:auto; animation:gwrFade .18s ease both;
}
.gwr-card{
  position:relative; width:min(92vw,380px); text-align:center;
  padding:26px 22px 22px; border-radius:20px;
  background:var(--panel,#FCFAFF); color:var(--ink-hi,#2A2140);
  border:1px solid var(--hairline,rgba(42,33,64,.14));
  box-shadow:0 24px 64px rgba(20,14,32,.4), 0 0 0 1px rgba(255,255,255,.5) inset;
  animation:gwrPop .28s cubic-bezier(.2,1.3,.35,1) both;
}
.gwr-card.ok{ box-shadow:0 24px 64px rgba(224,57,43,.32), 0 0 44px rgba(247,168,216,.5); }
.gwr-x{
  position:absolute; top:8px; right:10px; width:30px; height:30px; border-radius:8px;
  font-size:20px; line-height:1; color:var(--ink-lo,#7B7299); background:none;
}
.gwr-x:hover{ background:var(--hover,#F3EDFC); color:var(--ink-hi,#2A2140); }
.gwr-spark{ font-size:44px; line-height:1; animation:gwrSpark 1.4s ease-in-out infinite; }
.gwr-title{ margin-top:8px; font:800 22px/1.1 var(--font-ui); color:var(--ink-hi,#2A2140); }
.gwr-deal{ margin-top:10px; font:600 15px/1.4 var(--font-ui); color:var(--ink-mid,#4A4166); }
.gwr-deal b{ color:var(--p400,#E0392B); font-weight:800; }
.gwr-exp{ margin-top:8px; font:450 12.5px/1.5 var(--font-ui); color:var(--ink-lo,#7B7299); }
.gwr-cta{
  margin-top:16px; width:100%; padding:12px 16px; border-radius:12px;
  color:var(--on-accent,#fff); font:700 14px/1 var(--font-ui); cursor:pointer;
  background:linear-gradient(135deg,var(--p300,#F06AAE),var(--p400,#E0392B));
  box-shadow:0 8px 20px rgba(224,57,43,.32);
}
.gwr-cta:hover{ filter:brightness(1.05); }
.gwr-arcade{
  margin-top:8px; width:100%; min-height:42px; padding:10px 14px; border-radius:12px;
  border:1px solid var(--hairline); background:var(--raised); color:var(--ink-hi);
  font:750 13px/1 var(--font-ui);
}
.gwr-arcade:hover{ border-color:var(--p300); }
@keyframes gwrFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes gwrPop{ 0%{ transform:translateY(10px) scale(.94); opacity:0; } 100%{ transform:none; opacity:1; } }
@keyframes gwrSpark{ 0%,100%{ transform:scale(1) rotate(-4deg); } 50%{ transform:scale(1.12) rotate(4deg); } }

/* dark theme: brighten glass + ink so the pastel scheme doesn't wash out. */
:root[data-theme="dark"] .gwr-card{
  background:#171226; color:#F6F1FA; border-color:rgba(255,255,255,.12);
  box-shadow:0 24px 64px rgba(0,0,0,.6), 0 0 44px rgba(224,57,43,.28);
}
:root[data-theme="dark"] .gwr-title{ color:#F6F1FA; }
:root[data-theme="dark"] .gwr-deal{ color:#E8E0F5; }
:root[data-theme="dark"] .gwr-deal b{ color:#FF6E60; }
:root[data-theme="dark"] .gwr-exp{ color:#B7ADCF; }
:root[data-theme="dark"] .gw-catch-img{
  box-shadow:0 6px 18px rgba(0,0,0,.5), 0 0 0 2px rgba(255,255,255,.85),
             0 0 22px rgba(255,110,96,.6);
}

@media (prefers-reduced-motion:reduce){
  .gw-catch-gift, .gw-catch-inner, .gw-catch-img, .gw-catch-trail,
  .gwr-spark{ animation:none !important; }
  .gw-catch-trail{ display:none !important; }
}

/* =============================================================================
   LOWER-HALF SLABS (landing.js buildLowerHTML) — the "WTF underneath the art":
   (A) a big wall of real gift art, (B) the cross-chain Bored-Ape⇄Plush-Pepe
   holder-overlap flex, (C) pay-in-memes. Theme-aware via vars; reduced-motion
   guard sits at the very end of this file so it always wins.
   ========================================================================== */
.gw-slab{
  position:relative; text-align:center;
  padding:clamp(46px,8vw,104px) clamp(16px,4vw,40px);
  border-bottom:1px solid var(--hairline);
  overflow:hidden;
}
.gw-slab-head{ max-width:920px; margin:0 auto clamp(24px,4vw,44px); }
.gw-kick{
  display:inline-block; margin-bottom:14px; padding:6px 14px; border-radius:999px;
  font:900 11px/1 var(--font-ui, system-ui, sans-serif);
  letter-spacing:.22em; text-transform:uppercase; color:var(--p400,#E0392B);
  background:color-mix(in srgb, var(--p400,#E0392B) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--p400,#E0392B) 34%, transparent);
}
.gw-kick-x{ color:#4DA9EE; background:rgba(77,169,238,.12); border-color:rgba(77,169,238,.42); }
.gw-kick-m{ color:#8B5CF6; background:rgba(139,92,246,.14); border-color:rgba(139,92,246,.44); }
.gw-h2{
  margin:0; font-family:var(--font-ui, system-ui, sans-serif); font-weight:900; font-style:italic;
  letter-spacing:-.035em; line-height:.94; text-wrap:balance;
  font-size:clamp(30px,7vw,68px); color:var(--ink-hi,#2A2140);
}
.gw-lead{
  margin:16px auto 0; max-width:62ch;
  font:600 clamp(14px,2.2vw,19px)/1.5 var(--font-ui, system-ui, sans-serif);
  color:var(--ink-mid,#4A4166);
}
.gw-lead b{ color:var(--ink-hi,#2A2140); font-weight:800; }
.gw-hot, .gw-mm-glow{
  background:linear-gradient(92deg,#E0392B,#F06AAE 55%,#F2A65A);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 2px 14px rgba(224,57,43,.28));
}

/* A · BIG ART WALL ---------------------------------------------------------- */
.gw-wall-grid{
  max-width:1180px; margin:0 auto; display:grid; gap:clamp(10px,1.6vw,18px);
  grid-template-columns:repeat(auto-fill, minmax(clamp(96px,14vw,168px),1fr));
}
.gw-wt{
  position:relative; margin:0; aspect-ratio:1/1; border-radius:16px; overflow:hidden;
  background:hsl(calc(var(--wt-h,0) * 1deg) 58% 80%);
  border:1px solid var(--hairline); box-shadow:0 6px 18px rgba(20,14,32,.14);
  transition:transform .28s cubic-bezier(.2,.8,.24,1), box-shadow .28s ease;
}
.gw-wt:nth-child(3n){ transform:rotate(-1.4deg); }
.gw-wt:nth-child(4n){ transform:rotate(1.6deg); }
.gw-wt:nth-child(7n){ transform:rotate(-.8deg); }
.gw-wt img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gw-wt figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:16px 8px 6px;
  font:800 10.5px/1.2 var(--font-ui, system-ui, sans-serif); color:#fff; text-align:left;
  background:linear-gradient(180deg, transparent, rgba(10,6,18,.82));
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:0; transform:translateY(6px); transition:opacity .2s ease, transform .2s ease;
}
.gw-wt:hover{ transform:scale(1.06) rotate(0deg); box-shadow:0 16px 40px rgba(20,14,32,.34); z-index:2; }
.gw-wt:hover figcaption{ opacity:1; transform:none; }

/* B · CROSS-CHAIN FLEX ------------------------------------------------------ */
.gw-xchain{ background:radial-gradient(92% 74% at 50% 0%, rgba(77,169,238,.10), transparent 60%); }
.gw-eth-t{ color:#8B5CF6; }
.gw-ton-t{ color:#4DA9EE; }
.gw-x-stage{
  max-width:900px; margin:0 auto;
  display:flex; align-items:center; justify-content:center; gap:clamp(6px,2vw,26px);
}
.gw-x-card{ margin:0; flex:1 1 0; max-width:300px; display:flex; flex-direction:column; gap:12px; }
.gw-x-art{
  position:relative; aspect-ratio:1/1; border-radius:22px; overflow:hidden;
  border:3px solid #fff; box-shadow:0 18px 44px rgba(20,14,32,.3);
}
.gw-x-eth .gw-x-art{ box-shadow:0 18px 44px rgba(139,92,246,.42); }
.gw-x-ton .gw-x-art{ box-shadow:0 18px 44px rgba(77,169,238,.42); }
.gw-x-art img, .gw-ape{ display:block; width:100%; height:100%; object-fit:cover; }
.gw-x-cap{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 4px; }
.gw-x-nm{ font:900 clamp(14px,2vw,18px)/1 var(--font-ui, system-ui, sans-serif); color:var(--ink-hi,#2A2140); letter-spacing:-.01em; }
.gw-x-chain{ padding:4px 10px; border-radius:999px; font:900 10px/1 var(--font-ui, system-ui, sans-serif); letter-spacing:.1em; color:#fff; }
.gw-x-chain.eth{ background:linear-gradient(180deg,#8B5CF6,#6D28D9); }
.gw-x-chain.ton{ background:linear-gradient(180deg,#4DA9EE,#2F7FBF); }
.gw-x-link{ flex:0 0 auto; width:clamp(88px,15vw,150px); display:flex; flex-direction:column; align-items:center; gap:4px; }
.gw-venn{ width:100%; height:auto; overflow:visible; }
.gw-venn circle{ fill:none; stroke-width:3.5; }
.gw-venn .v-a{ stroke:#8B5CF6; animation:gwVenn 3.4s ease-in-out infinite; }
.gw-venn .v-b{ stroke:#4DA9EE; animation:gwVenn 3.4s ease-in-out .4s infinite; }
.gw-venn .v-core{ fill:#F06AAE; stroke:none; transform-origin:100px 70px; animation:gwCore 2s ease-in-out infinite; filter:drop-shadow(0 0 8px rgba(240,106,174,.85)); }
@keyframes gwVenn{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
@keyframes gwCore{ 0%,100%{ transform:scale(.82); } 50%{ transform:scale(1.18); } }
.gw-x-linklbl{ font:900 10px/1.05 var(--font-ui, system-ui, sans-serif); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mid,#4A4166); }
.gw-x-cta{
  display:inline-flex; align-items:center; gap:8px; margin-top:clamp(26px,4vw,40px);
  padding:13px 26px; border-radius:999px; background:linear-gradient(180deg,#4DA9EE,#2F7FBF);
  color:#fff; font:900 13px/1 var(--font-ui, system-ui, sans-serif); letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; box-shadow:0 10px 30px rgba(77,169,238,.44);
  transition:transform .2s ease, box-shadow .3s ease;
}
.gw-x-cta:hover{ transform:translateY(-2px); box-shadow:0 14px 40px rgba(77,169,238,.6); }
.gw-x-foot{ margin-top:14px; font:700 12px/1.4 var(--font-ui, system-ui, sans-serif); color:var(--ink-lo,#7B7299); }
.gw-x-foot b{ color:#4DA9EE; }

/* C · PAY IN MEMES ---------------------------------------------------------- */
.gw-memes{ background:radial-gradient(92% 74% at 50% 100%, rgba(139,92,246,.10), transparent 60%); }
.gw-coins{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(10px,1.6vw,16px); margin-top:6px; }
.gw-coin{
  display:inline-flex; align-items:center; gap:9px; padding:11px 18px 11px 12px; border-radius:999px;
  font:900 15px/1 var(--font-ui, system-ui, sans-serif); color:var(--ink-hi,#2A2140);
  background:var(--raised,#fff); border:1px solid var(--hairline);
  box-shadow:0 6px 16px rgba(20,14,32,.12); transition:transform .2s ease, box-shadow .3s ease;
}
.gw-coin:hover{ transform:translateY(-3px) rotate(-1.5deg); box-shadow:0 12px 26px rgba(20,14,32,.2); }
.gw-coin img, .gw-coin-g{
  width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font:900 15px/1 var(--font-ui, system-ui, sans-serif); color:#fff; object-fit:cover; flex:0 0 auto;
}
.gw-coin.c-py img{ box-shadow:0 0 0 2px #F06AAE; background:#fff; }
.gw-coin.c-gr .gw-coin-g{ background:linear-gradient(135deg,#22C55E,#15803D); }
.gw-coin.c-gs .gw-coin-g{ background:linear-gradient(135deg,#4DA9EE,#2F7FBF); }
.gw-coin.c-gm .gw-coin-g{ background:linear-gradient(135deg,#8B5CF6,#6D28D9); }
.gw-mm-badge{
  display:inline-block; margin-top:clamp(22px,3.5vw,34px); padding:12px 22px; border-radius:14px;
  font:900 14px/1 var(--font-ui, system-ui, sans-serif); letter-spacing:.02em; color:#fff;
  background:linear-gradient(135deg,#E0392B,#F06AAE); box-shadow:0 10px 28px rgba(224,57,43,.4);
  animation:gwBadge 2.6s ease-in-out infinite;
}
@keyframes gwBadge{ 0%,100%{ transform:translateY(0) rotate(-1deg);} 50%{ transform:translateY(-4px) rotate(1deg);} }

/* dark theme: keep headings/cards crisp where literals would otherwise wash out */
:root[data-theme="dark"] .gw-h2, :root[data-theme="dark"] .gw-x-nm{ color:#F6F1FA; }
:root[data-theme="dark"] .gw-x-art{ border-color:#241A38; }
:root[data-theme="dark"] .gw-coin{ background:#1B1530; color:#F6F1FA; border-color:rgba(255,255,255,.1); }

/* mobile: stack the cross-chain cards, keep the overlap diagram between them */
@media (max-width:640px){
  .gw-x-stage{ flex-direction:column; }
  .gw-x-card{ width:100%; max-width:min(78vw,300px); }
  .gw-x-link{ width:clamp(80px,34vw,120px); }
}

/* reduced motion — MUST stay last so it wins over the animations above */
@media (prefers-reduced-motion:reduce){
  .gw-venn .v-a, .gw-venn .v-b, .gw-venn .v-core, .gw-mm-badge{ animation:none !important; }
  .gw-wt, .gw-coin, .gw-x-cta, .gw-wt figcaption{ transition:none !important; }
}

/* =============================================================================
   CROSS-CHAIN HOLDER-MAP COMPARE modal (landing.js openXCompare) — BAYC ⇄ Plush
   Pepe by holder distribution, from /v1/xchain/compare. Theme-aware.
   ========================================================================== */
.gwx-back{ position:fixed; inset:0; z-index:2200; display:flex; align-items:center; justify-content:center;
  padding:18px; background:rgba(10,6,18,.62); backdrop-filter:blur(5px); animation:gwxFade .18s ease both; }
.gwx-card{ position:relative; width:min(96vw,720px); max-height:90vh; overflow:auto; padding:22px 22px 18px;
  border-radius:22px; background:var(--panel,#FCFAFF); color:var(--ink-hi,#2A2140);
  border:1px solid var(--hairline,rgba(42,33,64,.14)); box-shadow:0 30px 80px rgba(10,6,18,.5);
  animation:gwxPop .26s cubic-bezier(.2,1.2,.35,1) both; }
.gwx-x{ position:absolute; top:12px; right:14px; width:32px; height:32px; border:none; background:none; cursor:pointer;
  font-size:24px; line-height:1; color:var(--ink-lo,#7B7299); }
.gwx-x:hover{ color:var(--ink-hi,#2A2140); }
.gwx-h{ font:900 22px/1.1 var(--font-ui, system-ui, sans-serif); letter-spacing:-.02em; }
.gwx-sub{ margin-top:6px; font:600 13.5px/1.5 var(--font-ui, system-ui, sans-serif); color:var(--ink-mid,#4A4166); max-width:60ch; }
.gwx-load{ padding:40px 0; text-align:center; color:var(--ink-mid,#4A4166); font-weight:700; }
.gwx-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
@media (max-width:560px){ .gwx-grid{ grid-template-columns:1fr; } }
.gwx-side{ padding:14px; border-radius:16px; background:var(--well, rgba(128,128,128,.06)); border:1px solid var(--hairline,rgba(42,33,64,.12)); }
.gwx-art{ width:100%; height:150px; object-fit:cover; border-radius:12px; display:block; background:rgba(128,128,128,.12); }
.gwx-cardhd{ display:flex; align-items:center; gap:8px; margin:10px 0 12px; }
.gwx-name{ font:900 16px/1.15 var(--font-ui, system-ui, sans-serif); color:var(--ink-hi,#2A2140); }
.gwx-chip{ margin-left:auto; padding:3px 9px; border-radius:999px; font:900 10px/1 var(--font-ui, system-ui, sans-serif); letter-spacing:.08em; color:#fff; }
.gwx-chip-eth{ background:linear-gradient(180deg,#8B5CF6,#6D28D9); } .gwx-chip-ton{ background:linear-gradient(180deg,#4DA9EE,#2F7FBF); }
.gwx-bar{ margin:9px 0; }
.gwx-bar-top{ display:flex; justify-content:space-between; font:800 11.5px/1 var(--font-ui, system-ui, sans-serif); color:var(--ink-mid,#4A4166); margin-bottom:5px; }
.gwx-bar-v{ color:var(--ink-hi,#2A2140); font-weight:900; }
.gwx-bar-track{ height:9px; border-radius:999px; background:rgba(128,128,128,.16); overflow:hidden; }
.gwx-bar-fill{ height:100%; border-radius:999px; width:0; transition:width .6s cubic-bezier(.2,.8,.24,1); }
.gwx-eth .gwx-bar-fill{ background:linear-gradient(90deg,#8B5CF6,#a78bfa); }
.gwx-ton .gwx-bar-fill{ background:linear-gradient(90deg,#4DA9EE,#7cc4f5); }
.gwx-stat{ display:flex; justify-content:space-between; padding:7px 0; border-top:1px solid var(--hairline,rgba(42,33,64,.1)); font:700 12.5px/1 var(--font-ui, system-ui, sans-serif); }
.gwx-stat-k{ color:var(--ink-lo,#7B7299); } .gwx-stat-v{ color:var(--ink-hi,#2A2140); font-weight:900; text-transform:capitalize; }
.gwx-verdict{ margin-top:16px; padding:14px 16px; border-radius:14px; text-align:center; font:800 15px/1.4 var(--font-ui, system-ui, sans-serif);
  color:#fff; background:linear-gradient(135deg,#E0392B,#F06AAE); }
.gwx-foot{ margin-top:14px; text-align:center; font:700 12px/1 var(--font-ui, system-ui, sans-serif); color:#4DA9EE; }
:root[data-theme="dark"] .gwx-card{ background:#171226; color:#F6F1FA; border-color:rgba(255,255,255,.12); }
:root[data-theme="dark"] .gwx-h,:root[data-theme="dark"] .gwx-name,:root[data-theme="dark"] .gwx-bar-v,:root[data-theme="dark"] .gwx-stat-v{ color:#F6F1FA; }
@keyframes gwxFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes gwxPop{ 0%{ transform:translateY(10px) scale(.97); opacity:0; } 100%{ transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce){ .gwx-back,.gwx-card{ animation:none !important; } .gwx-bar-fill{ transition:none !important; } }