/* ============================================================
   JW.VAULT v2 — atmosphere, depth and motion (layered on styles.css)
   ============================================================ */
:root {
  --a0: #ffc56b;                                   /* JW brand: gold -> pink -> violet */
  --grad: linear-gradient(120deg, #ffc56b, #ff5fa2 48%, #9b6bff);
  --glow: rgba(255,95,162,0.14);
}
html { scrollbar-color: #2a2a35 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #22222c; border-radius: 99px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #33333f; }
::selection { background: #ff5fa2; }
:focus-visible { outline: 2px solid #ff8fbf; outline-offset: 2px; }

/* living background: drifting colour fields + film grain */
.bg::before {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(38% 30% at 20% 18%, rgba(255,95,162,0.16), transparent 70%),
    radial-gradient(34% 28% at 82% 8%, rgba(155,107,255,0.20), transparent 70%),
    radial-gradient(30% 26% at 60% 70%, rgba(255,197,107,0.07), transparent 70%);
  filter: blur(20px);
  animation: aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(-4%, 3%, 0) rotate(8deg) scale(1.08); }
  100% { transform: translate3d(3%, -2%, 0) rotate(-6deg) scale(1.02); }
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.glow { width: 720px; height: 720px; background: radial-gradient(circle, rgba(255,95,162,0.10), rgba(155,107,255,0.06) 35%, transparent 65%); }

/* top bar: glass, gradient hairline, glowing active tab */
.top { background: rgba(6,6,9,0.62); backdrop-filter: blur(22px) saturate(1.6); border-bottom-color: transparent; }
.top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,95,162,0.35) 30%, rgba(155,107,255,0.35) 70%, transparent);
}
.brand-mark { background: var(--grad); box-shadow: 0 6px 22px -6px #ff5fa2, inset 0 1px 0 rgba(255,255,255,.4); }
.tabs { background: rgba(255,255,255,0.03); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.tab-ind { background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 6px 24px -4px rgba(255,95,162,.55), 0 0 30px -6px rgba(155,107,255,.6); }

/* page head: bigger presence, glowing title, gradient stats */
.page-head { padding-top: 44px; }
.ph-title {
  font-size: clamp(48px, 8vw, 104px); line-height: 0.88; padding-right: 0.08em;
  background: linear-gradient(180deg, #fff 30%, rgba(255,255,255,0.62));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 10px 40px rgba(255,95,162,0.18));
}
.ph-title em { background: var(--grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; animation: sheen 6s ease-in-out infinite; }
@keyframes sheen { 50% { background-position: 100% 0; } }
.eyebrow { color: #c9c9d6; }
.stat {
  position: relative; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)); border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px -26px rgba(255,95,162,.5);
}
.stat::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,95,162,.25) 45%, rgba(155,107,255,.15) 75%, rgba(255,255,255,.04));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.stat b { background: linear-gradient(180deg, #fff, #ffd9ea); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* cover reel (home): your packs drifting by */
.reel {
  position: relative; margin: 4px calc(-1 * clamp(14px, 3vw, 32px)) 26px; overflow: hidden; height: 136px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.reel-track { display: flex; gap: 12px; width: max-content; padding: 8px 0; animation: reel 60s linear infinite; }
.reel:hover .reel-track { animation-play-state: paused; }
@keyframes reel { to { transform: translateX(-50%); } }
.reel a {
  position: relative; flex: 0 0 auto; width: 120px; height: 120px; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.08); background: #000;
  transform: perspective(600px) rotateY(-8deg); transition: transform .5s var(--ease), box-shadow .5s var(--ease), filter .5s;
  filter: saturate(.85) brightness(.85);
}
.reel a img { width: 100%; height: 100%; object-fit: cover; }
.reel a:hover { transform: perspective(600px) rotateY(0) translateY(-4px) scale(1.06); filter: none; box-shadow: 0 18px 40px -16px rgba(255,95,162,.7); z-index: 1; }

/* toolbar + controls */
.toolbar { background: linear-gradient(180deg, rgba(5,5,7,0.9) 65%, rgba(5,5,7,0)); }
.search { background: rgba(16,16,23,.8); }
.search:focus-within { border-color: rgba(255,95,162,.45); box-shadow: 0 0 0 4px rgba(255,95,162,0.12); }
.seg { background: rgba(16,16,23,.8); }
.seg button.is-on, .chip.is-on { box-shadow: 0 6px 18px -8px rgba(255,95,162,.7); }
.chip { background: rgba(255,255,255,.02); }
.btn-grad { background: var(--grad); box-shadow: 0 10px 28px -12px rgba(255,95,162,.8); }
.btn-primary:hover { background: var(--grad); border-color: transparent; color: #000; box-shadow: 0 10px 28px -10px rgba(255,95,162,.8); }

/* cards: 3D tilt, gradient edge, light that follows the cursor */
.card {
  --rx: 0deg; --ry: 0deg; --ty: 0px;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--ty));
  background: linear-gradient(180deg, #111118, #0b0b10);
  transition: transform 0.5s var(--ease), border-color 0.3s, box-shadow 0.5s var(--ease);
}
.card.is-tilting { transition: transform 0.12s linear, border-color 0.3s, box-shadow 0.5s var(--ease); }
.card:hover {
  --ty: -6px; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--ty)); border-color: transparent;
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.95), 0 20px 50px -30px rgba(255,95,162,.55);
}
.card::before {
  content: ""; position: absolute; inset: 0; z-index: 6; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0;
  background: var(--grad); transition: opacity .4s var(--ease);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.card::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--cx, 50%) var(--cy, 0%), rgba(255,255,255,.10), transparent 45%);
}
.card:hover::before, .card:hover::after { opacity: 1; }
.card-title { letter-spacing: -0.02em; }
.pill-new { background: var(--grad); border-color: transparent; color: #000; box-shadow: 0 6px 16px -6px rgba(255,95,162,.8); }

/* footer: big gradient wordmark */
.foot { padding-top: 70px; overflow: hidden; }
.foot::before {
  content: "JW VAULT"; position: absolute; left: 50%; top: 4px; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font-family: var(--display); font-style: italic; font-weight: 900; font-size: clamp(48px, 11vw, 150px); letter-spacing: -0.05em; line-height: 1;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0)); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* scroll reveal for sections below the fold */
.v2-reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.v2-reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 640px) {
  .reel { height: 108px; } .reel a { width: 92px; height: 92px; border-radius: 13px; }
  .card { transform: none !important; }
  .foot { padding-top: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .bg::before, .reel-track, .ph-title em { animation: none !important; }
  .card { transform: none !important; }
  .v2-reveal { opacity: 1; transform: none; }
}