/* ── Whalemetry · главная-хаб ───────────────────────────────────────────
   Разделы плитками: hover-анимация арта + переход на страницу. */
:root {
  --bg: #0a0d13; --surface: #14181f; --surface-2: #1b2029; --border: #262c38;
  --text: #e7e9ee; --muted: #8b909c;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(1100px 700px at 50% -10%, #16335e 0%, #0c1c34 40%, #070b14 100%); }

.hub { max-width: 1120px; margin: 0 auto; padding: 46px 24px 70px; }
.hub-head { text-align: center; margin-bottom: 34px; animation: rise .6s ease both; }
.hub-brand { font-size: 30px; font-weight: 800; letter-spacing: .5px; display: inline-flex; align-items: center; gap: 8px; }
.brand-mark { display: inline-flex; align-items: center; }
.brand-mark .logo-img { display: none; height: 40px; width: auto; }
.brand-mark.has-img .logo-img { display: inline-block; }
.brand-mark.has-img .logo { display: none; }
.hub-sub { color: var(--muted); font-size: 14px; margin-top: 6px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }

/* ── Плитка ────────────────────────────────────────────────────────── */
.tile {
  position: relative; display: block; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; padding: 0 0 16px;
  opacity: 0; transform: translateY(16px);
  animation: tile-in .55s cubic-bezier(.2,.8,.3,1) forwards;
  transition: transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s, border-color .28s;
}
@keyframes tile-in { to { opacity: 1; transform: none; } }
.tile:hover { transform: translateY(-8px); border-color: color-mix(in srgb, var(--acc) 60%, var(--border));
  box-shadow: 0 18px 40px rgba(0,0,0,.42), 0 0 0 1px color-mix(in srgb, var(--acc) 40%, transparent); }

/* арт-панель с градиентом и «бликом» */
.tile-art { position: relative; height: 132px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(120% 130% at 50% 0%, color-mix(in srgb, var(--acc) 26%, transparent), transparent 60%), var(--surface-2); }
.tile-art::after { content: ""; position: absolute; top: 0; left: -60%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent); transform: skewX(-18deg);
  transition: left .6s ease; }
.tile:hover .tile-art::after { left: 130%; }
.art { width: 70%; height: auto; display: block; }

.tile-meta { padding: 14px 16px 0; }
.tile-meta h3 { margin: 0 0 4px; font-size: 17px; }
.tile-meta p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.4; }
.tile-go { display: inline-block; margin: 10px 16px 0; font-size: 13px; font-weight: 600;
  color: var(--acc); opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s; }
.tile:hover .tile-go { opacity: 1; transform: none; }

.back-whale { display: inline-block; margin-top: 30px; color: var(--muted); text-decoration: none; font-size: 13px; }
.back-whale:hover { color: var(--text); }

/* ── Hover-анимации артов ──────────────────────────────────────────── */
.art .c-g { fill: #2ecc8f; stroke: #2ecc8f; }
.art .c-r { fill: #ff5a6a; stroke: #ff5a6a; }
.art-candles rect, .art-candles line { transform-box: fill-box; transform-origin: bottom; transition: transform .35s ease; }
.tile:hover .art-candles rect:nth-child(4) { transform: scaleY(1.25); }
.tile:hover .art-candles rect:nth-child(8) { transform: scaleY(1.3); }
.tile:hover .art-candles rect:nth-child(2) { transform: scaleY(1.12); }

.coin { fill: color-mix(in srgb, var(--acc) 70%, #6b4e12); stroke: var(--acc); stroke-width: 1.5; transition: transform .4s ease; transform-box: fill-box; transform-origin: center; }
.coin.c1 { fill: var(--acc); } .coin-sym { fill: #3a2a06; font: 700 16px sans-serif; }
.tile:hover .coin.c1 { transform: translateY(-6px); } .tile:hover .coin.c2 { transform: translateY(-2px); }

.art-line .ln { stroke: var(--acc); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 240; stroke-dashoffset: 0; transition: stroke-dashoffset .7s ease; }
.art-line .dot { fill: var(--acc); }
.tile:hover .art-line .ln { stroke-dashoffset: 240; animation: draw .8s ease forwards; }
@keyframes draw { from { stroke-dashoffset: 240; } to { stroke-dashoffset: 0; } }

.art-bank .bk { fill: var(--acc); } .art-bank .col { transition: transform .35s ease; transform-box: fill-box; transform-origin: bottom; }
.tile:hover .art-bank .col { transform: scaleY(1.08); }

.art-news .paper { fill: #eef3f8; } .art-news .hl { fill: var(--acc); } .art-news .lines rect { fill: #9fb1c4; }
.art-news { transition: transform .4s ease; } .tile:hover .art-news { transform: translateY(-3px) rotate(-2deg); }

.art-wallet .dev { fill: var(--surface); stroke: var(--acc); stroke-width: 2; }
.art-wallet .scr { fill: var(--acc); opacity: .25; transition: opacity .35s; } .art-wallet .btn { fill: var(--acc); }
.tile:hover .art-wallet .scr { opacity: .85; }

.art-learn .cap { fill: var(--acc); } .art-learn .base { stroke: var(--acc); stroke-width: 3; } .art-learn .tassel { stroke: var(--acc); fill: var(--acc); stroke-width: 2; }
.art-learn { transition: transform .4s ease; transform-box: fill-box; transform-origin: center; } .tile:hover .art-learn { transform: translateY(-4px); }

.art-target .ring { fill: none; stroke: var(--acc); stroke-width: 3; opacity: .8; } .art-target .bull { fill: var(--acc); transition: transform .4s ease; transform-box: fill-box; transform-origin: center; }
.tile:hover .art-target .bull { transform: scale(1.8); }
.tile:hover .art-target .r1 { animation: pulse 1s ease infinite; }
@keyframes pulse { 50% { opacity: .35; } }

.art-user .usr { fill: var(--acc); } .art-user .body { stroke: var(--acc); stroke-width: 9; stroke-linecap: round; }
.tile:hover .art-user { filter: drop-shadow(0 0 6px var(--acc)); }

.art-archive .ar { fill: var(--acc); transition: transform .35s ease; }
.art-archive .a1 { opacity: .55; } .art-archive .a2 { opacity: .8; } .art-archive .a3 { opacity: 1; }
.tile:hover .art-archive .a1 { transform: translateX(-8px); }
.tile:hover .art-archive .a3 { transform: translateX(8px); }

.art-heat .ht { transition: transform .3s ease, opacity .3s ease; }
.art-heat .ht.g { fill: #2ecc8f; } .art-heat .ht.r { fill: #ff5a6a; }
.tile:hover .art-heat .ht { transform: scale(.9); }
.tile:hover .art-heat .ht:nth-child(odd) { transform: scale(1.06); }

/* ── Переход на страницу ───────────────────────────────────────────── */
.tile.go { transform: scale(1.06); box-shadow: 0 0 0 2px var(--acc), 0 24px 60px rgba(0,0,0,.5); }
.leave-overlay { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--leave-acc, #4d7cff) 50%, #060b16), #03060d 75%);
  transition: opacity .6s ease; }
body.leaving .leave-overlay { opacity: 1; }
body.leaving .hub { transition: transform .6s ease, opacity .6s ease; transform: scale(.96); opacity: .25; }

@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }