/* =============================================================================
   navhub.css — gifts.wtf ANIMATED NAV HUB + minimal home chrome.

   Founder brief: "i hate this top nav standard bs" — on the HOME screen the only
   nav is Link Wallet + Link Telegram; the ENTER splash opens "a really awesome
   nav PAGE where theres animated sections showing the different tabs." This file:

     1. #gwHub — a full-screen animated hub overlay (navhub.js mounts it). A grid
        of big animated tiles, one per destination (Gifts, Terminal, Auctions,
        Launchpad, NFTs, Username Shop, Anon Rentals, Stats, WTF?, Account). Each
        tile floats, cascades in on open, and lifts/tilts on hover. Clicking a
        tile routes the existing hash router (or cross-page link) and closes.
     2. Minimal home chrome — on body[data-tab='home'] the standard #tabbar and
        the shop-only topbar controls (search, view toggle, tutorial) are hidden;
        only the wallet chip + a new Link Telegram button + theme toggle remain.
     3. .gw-menu — a persistent brand "menu" button (bottom-right) that re-opens
        the hub from anywhere, so the hub IS the navigator (no standard tab bar).

   Purely additive + CSP-clean (self-hosted art, theme.css vars, GPU transforms).
   The marketplace + its hash router are untouched; the hub only sets location.hash
   or follows a real link. Themed for WTF (pink pastel) + Dark via theme tokens.
   ========================================================================== */

/* ---- HUB-LOCAL TOKENS — lean on theme.css brand vars, add a hub wash per theme.
   The wash is a soft branded field the tiles float over; kept low-contrast so the
   tiles (which carry the colour) always pop. --------------------------------- */
:root, :root[data-theme="wtf"]{
  --hub-bg1:#fff2f9; --hub-bg2:#ffe7f4; --hub-bg3:#f4ecff;
  --hub-ink:#2a2140; --hub-dim:#6b5f7e;
  --hub-tile:rgba(255,255,255,.86); --hub-tile-bd:rgba(224,57,43,.16);
  --hub-tile-sh:0 10px 30px rgba(42,33,64,.13);
  --hub-scrim:rgba(255,247,252,.72);
}
:root[data-theme="dark"]{
  --hub-bg1:#120c20; --hub-bg2:#0d0a18; --hub-bg3:#181026;
  --hub-ink:#f4eeff; --hub-dim:#a99bc4;
  --hub-tile:rgba(24,17,38,.82); --hub-tile-bd:rgba(240,73,59,.24);
  --hub-tile-sh:0 12px 34px rgba(0,0,0,.5);
  --hub-scrim:rgba(11,8,20,.66);
}

/* ---- THE OVERLAY — a full takeover above everything, own scroll. Enters with a
   soft fade+lift; leaves via .gwh-out. Background is a slow-breathing branded
   wash plus faint scared-cat belts top & bottom (a nod to the masthead). ------ */
#gwHub{
  position:fixed; inset:0; z-index:4000;
  overflow-y:auto; overflow-x:hidden;
  color:var(--hub-ink);
  background:
    radial-gradient(120% 80% at 15% 0%, var(--hub-bg1), transparent 60%),
    radial-gradient(120% 90% at 85% 100%, var(--hub-bg3), transparent 62%),
    linear-gradient(160deg, var(--hub-bg2), var(--hub-bg1));
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  animation:gwhFade .42s ease both;
  font-family:var(--font-ui, system-ui, sans-serif);
}
#gwHub.gwh-out{ animation:gwhFadeOut .34s ease forwards; }
@keyframes gwhFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes gwhFadeOut{ from{ opacity:1; } to{ opacity:0; } }

/* faint drifting cat belts — pure decoration, never catch a click */
#gwHub::before, #gwHub::after{
  content:""; position:fixed; left:0; right:0; height:120px;
  background:url(scaredcat-wall.webp) repeat-x center; background-size:520px auto;
  opacity:.10; pointer-events:none; z-index:0;
  animation:gwhBelt 60s linear infinite;
}
#gwHub::before{ top:0; }
#gwHub::after{ bottom:0; animation-direction:reverse; }
@keyframes gwhBelt{ from{ background-position-x:0; } to{ background-position-x:-520px; } }

.gwh-wrap{ position:relative; z-index:1; max-width:none; margin:0 auto; padding:26px clamp(16px,3vw,44px) 64px; }

/* ---- HUB HEADER — wordmark, a close (× → back to home), and quick wallet/tg. -- */
.gwh-top{ display:flex; align-items:center; gap:14px; margin:6px 2px 4px; }
.gwh-wm{ height:38px; width:auto; display:block; filter:drop-shadow(0 2px 5px rgba(42,33,64,.2)); }
:root[data-theme="dark"] .gwh-wm{ filter:drop-shadow(0 0 10px rgba(240,73,59,.34)); }
.gwh-top-sp{ flex:1 1 auto; }
.gwh-qbtn{
  font:inherit; font-weight:800; font-size:13px; cursor:pointer;
  padding:8px 14px; border-radius:999px; border:1px solid var(--hub-tile-bd);
  background:var(--hub-tile); color:var(--hub-ink);
  box-shadow:var(--hub-tile-sh); transition:transform .14s ease, box-shadow .14s ease;
}
.gwh-qbtn:hover{ transform:translateY(-2px); }
.gwh-qbtn.is-primary{ background:linear-gradient(180deg,#ff4f9e,#e0392b); color:#fff; border-color:transparent; }
.gwh-close{
  font:inherit; font-size:22px; line-height:1; cursor:pointer; color:var(--hub-ink);
  width:42px; height:42px; border-radius:50%; border:1px solid var(--hub-tile-bd);
  background:var(--hub-tile); box-shadow:var(--hub-tile-sh);
  display:flex; align-items:center; justify-content:center;
  transition:transform .16s ease, background .16s ease;
}
.gwh-close:hover{ transform:rotate(90deg) scale(1.06); }

.gwh-lede{ margin:16px 2px 20px; }
.gwh-lede h1{
  margin:0; font-family:var(--font-bubble, inherit); font-weight:900;
  font-size:clamp(26px,4.4vw,44px); letter-spacing:-.5px; line-height:1.02;
  color:var(--hub-ink); text-wrap:balance;
}
.gwh-lede h1 .gwh-accent{
  background:linear-gradient(92deg,#ff4f9e,#e0392b,#7b64e6);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.gwh-lede p{ margin:8px 0 0; color:var(--hub-dim); font-size:15px; max-width:60ch; }

/* ---- THE TILE GRID — responsive, tiles cascade in (JS sets --i for stagger). -- */
.gwh-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:18px; }

.gwh-tile{
  position:relative; overflow:hidden; cursor:pointer; text-align:left;
  border:1px solid var(--hub-tile-bd); border-radius:20px;
  background:var(--hub-tile); box-shadow:var(--hub-tile-sh);
  padding:16px; min-height:216px;
  display:flex; flex-direction:column; gap:6px;
  color:var(--hub-ink); font:inherit; text-decoration:none;
  transform:translate(0); transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, border-color .2s ease;
  animation:gwhTileIn .5s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:calc(var(--i,0) * 45ms + 120ms);
}
@keyframes gwhTileIn{ from{ opacity:0; transform:translateY(16px) scale(.98); } to{ opacity:1; transform:none; } }
.gwh-tile:hover{ transform:translateY(-5px); box-shadow:0 18px 42px rgba(42,33,64,.2); border-color:transparent; }
.gwh-tile:focus-visible{ outline:3px solid #ff4f9e; outline-offset:2px; }

/* per-tile accent — a soft colour bloom in the corner + a top hairline, driven by
   --a1/--a2 that navhub.js sets from each section's palette. */
.gwh-tile::before{
  content:""; position:absolute; right:-30%; top:-40%; width:80%; height:80%;
  background:radial-gradient(circle at 70% 30%, var(--a1,#ff4f9e), transparent 66%);
  opacity:.22; pointer-events:none; transition:opacity .2s ease, transform .3s ease;
}
.gwh-tile:hover::before{ opacity:.4; transform:scale(1.15); }
.gwh-tile::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--a1,#ff4f9e), var(--a2,#7b64e6));
  transform:scaleX(0); transform-origin:left; transition:transform .28s ease;
}
.gwh-tile:hover::after{ transform:scaleX(1); }

/* the animated glyph / art — floats gently; tilts on hover */
.gwh-ic{
  position:relative; z-index:1; font-size:34px; line-height:1;
  width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  border-radius:14px; background:linear-gradient(160deg, var(--a1,#ff4f9e), var(--a2,#7b64e6));
  color:#fff; box-shadow:0 6px 16px rgba(42,33,64,.22);
  animation:gwhFloat 4.5s ease-in-out infinite;
  transition:transform .25s ease;
}
.gwh-ic img{ width:38px; height:38px; object-fit:contain; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.gwh-tile:nth-child(2n) .gwh-ic{ animation-duration:5.3s; animation-delay:-1.2s; }
.gwh-tile:nth-child(3n) .gwh-ic{ animation-duration:6s; animation-delay:-.6s; }
.gwh-tile:hover .gwh-ic{ transform:rotate(-7deg) scale(1.08); }
@keyframes gwhFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }

/* full-bleed per-section art + legibility scrim (navhub.js adds .gwh-hasart once
   navtile-<key>.jpg loads). The tile's overflow:hidden + 20px radius clips the
   art; scale(1.06) pushes the art's black canvas corners fully outside the clip
   so no black corner ever shows. */
.gwh-art{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 40%; transform:scale(1.06);
}
.gwh-scrim{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  transition:opacity .25s ease;
  background:linear-gradient(180deg, rgba(8,4,16,.50) 0%, rgba(8,4,16,.12) 26%,
             rgba(8,4,16,.08) 50%, rgba(8,4,16,.88) 100%);
}
.gwh-tile.gwh-hasart .gwh-scrim{ opacity:1; }
.gwh-tile.gwh-hasart{ border-color:transparent; }
.gwh-tile.gwh-hasart::before{ opacity:0; }          /* drop the gradient bloom under art */
.gwh-tile.gwh-hasart .gwh-ic{ display:none; }        /* art carries the subject; hide the glyph chip */
/* has-art layout: title up in the clear UPPER-RIGHT zone (off the left subject),
   description a YELLOW band along the bottom, meta pinned bottom-left. */
.gwh-tile.gwh-hasart .gwh-name{
  position:absolute; top:15px; right:17px; left:36%; margin:0; z-index:2;
  text-align:right; color:#fff; font-size:clamp(19px,1.5vw,24px); line-height:1.04;
  text-shadow:0 2px 12px rgba(0,0,0,.75), 0 1px 2px rgba(0,0,0,.6);
}
.gwh-tile.gwh-hasart .gwh-desc{
  position:absolute; left:17px; right:17px; bottom:34px; margin:0; z-index:2;
  color:#FFE08A; font-weight:700; font-size:clamp(12px,.95vw,14px); line-height:1.3;
  text-shadow:0 1px 8px rgba(0,0,0,.8), 0 1px 2px rgba(0,0,0,.7);
}
.gwh-tile.gwh-hasart .gwh-meta{
  position:absolute; left:17px; bottom:13px; margin:0; z-index:2;
  color:rgba(255,255,255,.92); text-shadow:0 1px 6px rgba(0,0,0,.75);
}
.gwh-tile.gwh-hasart .gwh-meta .gwh-live{ color:#ffd2ca; }

.gwh-name{ position:relative; z-index:1; margin-top:8px; font-weight:900; font-size:18px; letter-spacing:-.2px; }
.gwh-desc{ position:relative; z-index:1; color:var(--hub-dim); font-size:12.5px; line-height:1.34; }
.gwh-meta{
  position:relative; z-index:1; margin-top:auto; padding-top:8px;
  font-size:11px; font-weight:800; letter-spacing:.3px; text-transform:uppercase;
  color:var(--hub-dim); min-height:14px;
}
.gwh-meta .gwh-live{ color:#e0392b; }
:root[data-theme="dark"] .gwh-meta .gwh-live{ color:#ff6f62; }

.gwh-foot{ margin:26px 2px 0; color:var(--hub-dim); font-size:12px; text-align:center; }
.gwh-foot a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }

/* ---- PERSISTENT MENU BUTTON — re-opens the hub from any view (the hub is the
   navigator). Bottom-right, brand pill, gently pulses so it's discoverable. ---- */
.gw-menu{
  position:fixed; right:18px; bottom:18px; z-index:1200;
  display:flex; align-items:center; gap:9px;
  font:inherit; font-weight:900; font-size:13px; cursor:pointer;
  padding:11px 17px 11px 14px; border-radius:999px; border:none;
  background:linear-gradient(180deg,#ff4f9e,#e0392b); color:#fff;
  box-shadow:0 8px 22px rgba(224,57,43,.4);
  transition:transform .16s ease, box-shadow .16s ease;
}
.gw-menu:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 12px 28px rgba(224,57,43,.5); }
.gw-menu:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
.gw-menu .gw-menu-bars{ display:flex; flex-direction:column; gap:3px; }
.gw-menu .gw-menu-bars i{ display:block; width:16px; height:2.4px; border-radius:2px; background:#fff; }
.gw-menu.gwh-hide{ opacity:0; pointer-events:none; transform:translateY(10px); }

/* ---- MINIMAL HOME CHROME — on the HOME view the standard tab bar and the
   shop-only topbar controls fall away; only wallet + Link Telegram (+ the tiny
   theme toggle) remain, per the founder brief. Every other view keeps its full
   chrome. Reversible: it is all scoped to body[data-tab='home']. -------------- */
body[data-tab='home'] #tabbar{ display:none; }
body[data-tab='home'] #searchwrap{ display:none; }
body[data-tab='home'] #viewtoggle{ display:none; }
body[data-tab='home'] #gwTutStart{ display:none; }
/* topbar collapses to a clean right-aligned row of just the account actions */
body[data-tab='home'] #topbar{ justify-content:flex-end; }
body[data-tab='home'] #topctl{ margin-left:0; }

/* Link Telegram button (added to #topctl in index.html) — brand pill, TG blue */
#linkTg{
  display:inline-flex; align-items:center; gap:7px;
  font:inherit; font-weight:800; font-size:13px; cursor:pointer;
  padding:8px 14px; border-radius:999px; border:1px solid rgba(39,159,217,.4);
  background:linear-gradient(180deg,#33b1e6,#2aa0e0); color:#fff;
  box-shadow:0 4px 12px rgba(42,160,224,.32);
  transition:transform .14s ease, box-shadow .14s ease;
}
#linkTg:hover{ transform:translateY(-2px); box-shadow:0 7px 16px rgba(42,160,224,.42); }
#linkTg .lt-ic{ font-size:14px; line-height:1; }

/* ---- MOTION / MOBILE ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  #gwHub, #gwHub.gwh-out, .gwh-tile{ animation:none !important; }
  #gwHub::before, #gwHub::after, .gwh-ic{ animation:none !important; }
  .gwh-tile{ opacity:1 !important; transform:none !important; }
}
@media (max-width:640px){
  .gwh-grid{ grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:13px; }
  .gwh-tile{ min-height:186px; padding:15px; border-radius:17px; }
  .gwh-tile.gwh-hasart .gwh-name{ left:32%; font-size:20px; }
  .gwh-lede h1{ font-size:clamp(23px,7vw,34px); }
  .gwh-wrap{ padding:20px 15px 54px; }
  .gw-menu{ right:13px; bottom:13px; }
  #gwHub::before, #gwHub::after{ height:80px; background-size:360px auto; }
}