/* =============================================================================
   header.css — gifts.wtf CHAOTIC BRANDED MASTHEAD "PRINT".

   Loaded LAST (after market.css) so it owns the top-of-page look:
     1. .gw-brandbar  — the hero band behind the GIFTS.WTF wordmark gets a dense,
        tossed STICKER-BOMB allover print (a tiled inline-SVG <pattern> of gift
        boxes, hearts, sparkles, stars, bows, gems, squiggles, dots + "WTF" tags),
        the whole point of a GIFT marketplace masthead. The wordmark stays the
        crisp hero on a soft knock-out halo so it never fights the busy field.
     2. #topbar / #tabbar — the sticky bar gets a LIGHTER branded treatment: a
        faint pink wash + a bold pink-red-lavender edge strip, so "the whole
        header" reads branded, never a plain white slab — search/nav/buttons keep
        their own opaque surfaces and stay fully legible.

   HOW THE PRINT IS BUILT (all CSP-clean, same-origin, zero network):
     · Motifs are inline-SVG geometry in <defs>; a single <pattern> tiles ~22
       tossed instances (varied rotate/scale/colour). One <rect> paints it.
     · Colour is applied on the <use>/<text> hosts via classes → the geometry
       INHERITS fill/stroke through <use>, so every motif recolours from CSS
       vars. Those vars map to the theme.css brand tokens, so the print recolours
       correctly in BOTH themes (pink/red/lavender/blue on WTF pastel; the same
       motifs glowing on the DARK void).
     · Performance: one rasterised pattern, a single GPU transform for the slow
       drift. Drift is disabled under prefers-reduced-motion and on mobile.

   NEVER-BREAK: purely additive. .gw-brandbar keeps its layout + the pom mascot
   (the print layer is its own overflow-clipped sibling, so the pom's overhang is
   untouched). The bar's interactive controls all sit above the wash on their own
   opaque backgrounds.
   ========================================================================== */

/* ---- PRINT PALETTE — mapped to theme.css brand tokens where they exist, plus a
   lavender + a pastel-blue (no token for those) tuned per theme. The halo is the
   soft knock-out behind the wordmark; --print-op dials the whole field back a
   touch on WTF so the logo dominates, full on DARK so the motifs glow. -------- */
:root, :root[data-theme="wtf"]{
  /* deeper than the pastel page-bg ON PURPOSE — the pale token pink/lav/blue washed
     out into the gradient (only red survived), so the print gets saturated stickers
     that actually read on WTF. DARK keeps its bright-on-void block below, untouched. */
  --print-pink: #EA57A3;
  --print-red:  var(--p400);   /* #E0392B */
  --print-hot:  #F0479E;
  --print-lav:  #7B64E6;       /* deeper purple (was pale #B7ADF0) */
  --print-blue: #5674E4;       /* deeper periwinkle (was pale #8FA6EE) */
  --print-halo: rgba(252,250,255,.92);
  --print-op:   .95;
}
:root[data-theme="dark"]{
  --print-pink: #F7A8D8;
  --print-red:  #F0493B;
  --print-hot:  #F582C0;
  --print-lav:  #A99BF0;
  --print-blue: #8AA0F2;
  --print-halo: rgba(19,14,32,.88);
  --print-op:   1;
}

/* ---- THE STICKER-BOMB LAYER — an overflow-clipped sibling pinned over the
   brandbar. pointer-events:none so it never steals a click; the oversized svg
   bleeds motifs off every edge and drifts slowly sideways. -------------------- */
/* the band clips HORIZONTAL bleed (the wordmark halo + any print overrun) so the
   masthead can never push page-x scroll; overflow-y stays visible (initial) so
   the pom mascot keeps its bottom overhang untouched. Verified pom-safe. */
.gw-brandbar{ overflow-x:clip; }
.gw-print{
  position:absolute; inset:0; overflow:hidden;
  z-index:0; pointer-events:none;
  opacity:var(--print-op);
  -webkit-mask-image:-webkit-radial-gradient(white,white); /* clip on old WebKit */
  /* SCARED CAT WALL — a dense pile of scared-cat gift stickers (self-hosted
     seamless webp tile, ~124KB) drifting sideways behind the wordmark. Replaces
     the old SVG sticker-bomb; hundreds of cats read from ONE image. */
  background:url(scaredcat-wall.webp) repeat-x center;
  background-size:1120px auto;   /* 1120px = one seamless tile => the loop distance */
  animation:gwCatDrift 70s linear infinite;
  will-change:background-position;
}
@keyframes gwCatDrift{ from{ background-position-x:0; } to{ background-position-x:-1120px; } }
.gw-print-svg{ display:none; }  /* superseded by the Scared Cat wall on .gw-print */

/* motif colouring — fill/stroke set on the <use>/<text> host; the referenced
   geometry (no fill/stroke of its own) inherits it, so one class recolours a
   whole motif and it re-themes for free. */
.gw-print-svg .mo-pink{ fill:var(--print-pink); }
.gw-print-svg .mo-red { fill:var(--print-red);  }
.gw-print-svg .mo-hot { fill:var(--print-hot);  }
.gw-print-svg .mo-lav { fill:var(--print-lav);  }
.gw-print-svg .mo-blue{ fill:var(--print-blue); }
.gw-print-svg .ln-red { fill:none; stroke:var(--print-red);  stroke-width:6; stroke-linecap:round; stroke-linejoin:round; }
.gw-print-svg .ln-pink{ fill:none; stroke:var(--print-pink); stroke-width:6; stroke-linecap:round; stroke-linejoin:round; }
.gw-print-svg .ln-lav { fill:none; stroke:var(--print-lav);  stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
.gw-print-svg .tx { font-family:var(--font-bubble); font-weight:900; font-size:30px; letter-spacing:.5px; }
.gw-print-svg .tx2{ font-family:var(--font-bubble); font-weight:900; font-size:34px; }

/* ---- THE WORDMARK STAYS THE HERO — lift it above the print and float a soft
   knock-out halo behind the glyphs so it pops off the busy field, plus a shadow
   for separation (a red glow on DARK). -------------------------------------- */
.gw-wordmark{ position:relative; z-index:1; }
.gw-wordmark::before{
  content:""; position:absolute; z-index:-1; left:50%; top:50%;
  width:146%; height:275%; transform:translate(-50%,-50%);
  background:radial-gradient(60% 56% at 50% 50%,
             var(--print-halo) 0%, var(--print-halo) 54%, transparent 80%);
  filter:blur(9px); pointer-events:none;
}
.gw-wm-crop img{ filter:drop-shadow(0 3px 5px rgba(42,33,64,.22)); }
:root[data-theme="dark"] .gw-wm-crop img{
  filter:drop-shadow(0 0 11px rgba(240,73,59,.38)) drop-shadow(0 2px 5px rgba(0,0,0,.55));
}
/* $PYONYA credit — it now sits over the DENSE Scared-Cat wall, so a hair of
   text-shadow no longer keeps it legible. Give it a small frosted SCRIM (a soft
   translucent pill) plus a stronger shadow so it reads cleanly against the busy
   field in both themes. The pill is on the text link only; the pom mascot is a
   separate sibling, so its bottom overhang (translateY below) is untouched. */
.gw-pyonya{
  text-shadow:0 1px 2px rgba(0,0,0,.3);
  background:rgba(255,255,255,.92);
  border:1px solid rgba(224,57,43,.35);
  box-shadow:0 2px 7px rgba(42,33,64,.22);
  padding:3px 11px;
  border-radius:999px;
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
}
:root[data-theme="dark"] .gw-pyonya{
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  background:rgba(11,8,20,.9);
  border-color:rgba(240,73,59,.42);
  box-shadow:0 2px 9px rgba(0,0,0,.55);
}
/* founder nudge: lift the $PYONYA pom ~3% (market.css base was translateY(16%)) */
.gw-brandbar .gw-pom{ transform:translateY(13%); }
.gw-pyonya:hover .gw-pom{ transform:translateY(9%) rotate(-3deg); }
/* founder: $PYONYA sat vertically-centered (too low) and the pom overlapped/clipped
   it. Pin it to the TOP-RIGHT corner, above the pom, and widen its right clearance
   so the bottom-right pom can never cover it. */
.gw-brandbar .gw-pyonya{ margin-right:120px; position:relative; top:14px; z-index:6; }

/* ---- THE STICKY BAR — branded, not a white slab. ONE clean colored edge for
   the whole header: previously BOTH #topbar and #tabbar painted a bottom gradient
   strip, so two strips stacked a few px apart with mismatched right-edge colours
   (a bright-red topbar edge over the tabbar's purple one) read as a doubled,
   misaligned seam. Fix: #topbar drops its strip and reads as one unit with the
   tabbar below it (faint pink wash + panel, no divider between them); the SINGLE
   crisp divider is the tabbar's bottom edge — full-width, so it can't misalign.
   Controls keep their own opaque surfaces and stay fully legible. */
#topbar{
  background:
    linear-gradient(180deg, rgba(247,168,216,.14), rgba(247,168,216,.04)),
    var(--panel);
  border-bottom-color:transparent;   /* topbar + tabbar are one header unit now */
}
#tabbar{
  background:
    linear-gradient(90deg, var(--print-pink), var(--print-hot), var(--print-blue), var(--print-pink)) bottom left / 100% 3px no-repeat,
    linear-gradient(180deg, rgba(247,168,216,.07), transparent),
    var(--panel);
  border-bottom-color:transparent;   /* the 3px gradient strip is the sole divider */
}

/* ---- MOTION / MOBILE — calm the drift for reduced-motion; on phones freeze it,
   fade the field a touch and scale the motifs up so density reads lighter, and
   widen the halo for the now-centred full-width wordmark. No horizontal overflow:
   the print layer is overflow:hidden and the bar strips are pure background. --- */
@media (prefers-reduced-motion:reduce){
  .gw-print{ animation:none !important; }
}
@media (max-width:640px){
  .gw-print{ opacity:.86; background-size:820px auto; }
  @keyframes gwCatDrift{ from{ background-position-x:0; } to{ background-position-x:-820px; } }
  /* the wordmark goes full-width + centred on mobile, so a >100% halo would
     bleed past the viewport — keep it within the glyph box (the band's
     overflow-x:clip is the backstop for browsers that ignore this). */
  .gw-wordmark::before{ width:100%; height:205%; }
  .gw-brandbar .gw-pom{ transform:translateY(13%); }
  .gw-brandbar .gw-pyonya{ margin-right:0; align-self:auto; }
}