/* ═══════════════════════════════════════════════════════════
   IMMERSIVE LAYER — next-level ambiance, motion & game feel.
   Loaded LAST so its upgrades win the cascade. Pure additive:
   no feature logic, no layout changes — only atmosphere,
   micro-interaction and community-feel polish.
   Driven by src/user/utils/immersive.js (window.CBImmersive).
   Respects prefers-reduced-motion at the bottom.
   ═══════════════════════════════════════════════════════════ */

/* ── 1 · Living ambient scene (behind everything) ─────────── */
#imm-scene {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
  background:
    radial-gradient(1100px 700px at 82% -10%, oklch(0.68 0.28 295 / 0.16), transparent 62%),
    radial-gradient(900px 640px  at -12% 28%, oklch(0.82 0.18 200 / 0.10), transparent 60%),
    radial-gradient(1000px 800px at 55% 118%, oklch(0.88 0.24 135 / 0.07), transparent 58%),
    var(--bg);
}
.imm-blob {
  position: absolute; border-radius: 50%;
  opacity: 0.55; will-change: transform;
  transform: translateZ(0);
}
.imm-blob--v {
  width: 62vmax; height: 62vmax; top: -28vmax; right: -18vmax;
  background: radial-gradient(circle at 50% 50%, oklch(0.68 0.28 295 / 0.20), transparent 66%);
  animation: imm-drift-a 26s ease-in-out infinite alternate;
}
.imm-blob--c {
  width: 54vmax; height: 54vmax; bottom: -24vmax; left: -16vmax;
  background: radial-gradient(circle at 50% 50%, oklch(0.82 0.18 200 / 0.15), transparent 64%);
  animation: imm-drift-b 32s ease-in-out infinite alternate;
}
.imm-blob--l {
  width: 44vmax; height: 44vmax; top: 42%; left: 58%;
  background: radial-gradient(circle at 50% 50%, oklch(0.88 0.24 135 / 0.09), transparent 62%);
  animation: imm-drift-c 38s ease-in-out infinite alternate;
}
@keyframes imm-drift-a { to { transform: translate(-9vmax, 7vmax)  scale(1.14); } }
@keyframes imm-drift-b { to { transform: translate(8vmax, -6vmax)  scale(1.10); } }
@keyframes imm-drift-c { to { transform: translate(-7vmax, -9vmax) scale(0.92); } }

#imm-stars { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Film grain — kills banding on the big soft gradients */
#imm-scene::after {
  content: ''; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.035; mix-blend-mode: overlay;
}

/* ── 2 · Cinematic page transitions (View Transitions API) ── */
@keyframes imm-vt-out { to   { opacity: 0; transform: translateY(-14px) scale(0.992); filter: blur(6px); } }
@keyframes imm-vt-in  { from { opacity: 0; transform: translateY(20px)  scale(0.996); filter: blur(8px); } }
::view-transition-old(root) { animation: imm-vt-out 0.26s var(--smooth) both; }
::view-transition-new(root) { animation: imm-vt-in  0.42s var(--snappy) both; }

/* ── 3 · Scroll progress (element injected by immersive.js) ─ */
#scroll-progress {
  box-shadow: 0 0 12px var(--violet-glow);
  transition: transform 80ms linear;
}

/* ── 4 · Card presence: spotlight, gradient edge, depth ───── */
.imm-card {
  position: relative;
  transition:
    transform .3s var(--spring),
    box-shadow .35s var(--smooth),
    border-color .3s ease;
}
/* pointer-tracking spotlight (vars fed by immersive.js) */
.imm-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 1;
  opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(
    340px circle at var(--imm-mx, 50%) var(--imm-my, 50%),
    oklch(0.75 0.20 290 / 0.10), transparent 62%);
}
.imm-card:hover::after { opacity: 1; }
/* animated gradient hairline on hover */
.imm-card:hover {
  border-color: oklch(0.55 0.14 290 / 0.65);
  box-shadow:
    0 18px 44px oklch(0 0 0 / 0.45),
    0 0 0 1px oklch(0.68 0.28 295 / 0.14),
    0 0 34px oklch(0.68 0.28 295 / 0.10);
}
/* subtle 3-D tilt on the showcase cards only */
.imm-tilt:hover {
  transform:
    perspective(1000px)
    rotateX(var(--imm-rx, 0deg)) rotateY(var(--imm-ry, 0deg))
    translateY(-5px);
}

/* ── 5 · Scroll-reveal choreography ───────────────────────── */
.imm-reveal {
  opacity: 0.001;
  transform: translateY(26px) scale(0.985);
  transition:
    opacity .7s ease calc(var(--imm-stagger, 0) * 70ms),
    transform .8s var(--spring) calc(var(--imm-stagger, 0) * 70ms);
}
.imm-reveal.imm-in { opacity: 1; transform: none; }

/* ── 6 · Buttons: sheen sweep + springy press ─────────────── */
.btn, .btn-o, .btn-v, .feed-compose-post, .quest-go, .quest-claim-btn {
  position: relative; overflow: hidden;
}
.btn::before, .btn-v::before, .feed-compose-post::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -80%; width: 55%;
  background: linear-gradient(105deg, transparent, oklch(1 0 0 / 0.22), transparent);
  transform: skewX(-20deg); transition: left .6s var(--smooth);
  pointer-events: none;
}
.btn:hover::before, .btn-v:hover::before, .feed-compose-post:hover::before { left: 130%; }
.btn:active, .btn-o:active, .btn-v:active { transform: scale(0.96); }

/* global click pulse (spawned at pointer by immersive.js) */
.imm-pulse {
  position: fixed; z-index: var(--z-cursor); pointer-events: none;
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid oklch(0.75 0.22 290 / 0.85);
  transform: translate(-50%, -50%);
  animation: imm-pulse .5s var(--smooth) forwards;
}
@keyframes imm-pulse {
  from { opacity: 0.9; scale: 0.4; }
  to   { opacity: 0;   scale: 4.2; }
}

/* ── 7 · Community feel: avatars, likes, chat, presence ───── */
.feed-avatar {
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 4px oklch(0.68 0.28 295 / 0.75);
  animation: imm-ring 5s ease-in-out infinite;
}
@keyframes imm-ring {
  0%, 100% { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px oklch(0.68 0.28 295 / 0.75); }
  50%      { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px oklch(0.82 0.18 200 / 0.75); }
}
.feed-act { transition: transform .25s var(--spring), color .2s ease; }
.feed-act:hover { transform: translateY(-2px) scale(1.08); }
.feed-act:active { transform: scale(0.9); }
.feed-act.liked { animation: imm-like-pop .45s var(--spring); }
@keyframes imm-like-pop {
  0% { transform: scale(1); } 40% { transform: scale(1.45) rotate(-8deg); }
  70% { transform: scale(0.92); } 100% { transform: scale(1); }
}
.feed-media img { transition: transform 1.2s var(--smooth); }
.feed-card:hover .feed-media img { transform: scale(1.035); }
.feed-comment-row { transition: background .2s ease, transform .2s ease; border-radius: 10px; }
.feed-comment-row:hover { background: oklch(1 0 0 / 0.035); transform: translateX(3px); }
.chat-bubble { transition: transform .2s var(--spring); }
.chat-bubble:hover { transform: scale(1.015); }
.chat-row { transition: transform .25s var(--spring), background .2s ease; }
.chat-row:hover { transform: translateX(4px); }

/* live-presence dot pulse (unread, status, hero badges) */
.feed-unread-badge, .chat-hero__badge-dot, .f-status-dot, .ar-pulse-dot {
  animation: imm-presence 2.2s ease-in-out infinite;
}
@keyframes imm-presence {
  0%, 100% { box-shadow: 0 0 0 0 oklch(0.88 0.24 135 / 0.45); }
  55%      { box-shadow: 0 0 0 7px oklch(0.88 0.24 135 / 0); }
}

/* ── 8 · Gameplay juice: XP, coins, quests ────────────────── */
.pstat-bar-fill, .feed-funding-bar, .ar-progress-fill {
  background-size: 200% 100% !important;
  animation: imm-bar-flow 3.2s linear infinite;
}
@keyframes imm-bar-flow { to { background-position: -200% 0; } }
.quest-pill { transition: transform .3s var(--spring), box-shadow .3s ease; }
.quest-pill:hover { transform: translateY(-4px) scale(1.02); }
.quest-card-icon { transition: transform .35s var(--spring); }
.quest-pill:hover .quest-card-icon { transform: scale(1.18) rotate(-6deg); }
.quest-done-chip { animation: imm-stamp .5s var(--spring) both; }
@keyframes imm-stamp {
  from { transform: scale(1.6) rotate(8deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.chip { transition: transform .25s var(--spring), box-shadow .25s ease, border-color .2s ease; }
.chip:hover { transform: translateY(-2px); box-shadow: 0 6px 18px oklch(0 0 0 / 0.35); }

/* ── 9 · Empty states float, loaders breathe ──────────────── */
.feed-empty-art, .chat-empty__ico, .chat-empty-thread__ava {
  animation: float-y 5s ease-in-out infinite;
}
.feed-loading, .chat-loading { animation: glow-pulse 1.8s ease-in-out infinite; }

/* ── 10 · Media & 3D chips shimmer for discoverability ────── */
.feed-3d-chip, .ar-live-badge {
  background-image: linear-gradient(105deg,
    transparent 35%, oklch(1 0 0 / 0.18) 50%, transparent 65%);
  background-size: 240% 100%;
  animation: shimmer 3.6s ease-in-out infinite;
}

/* ── 11 · Coarse pointers: drop hover-only heavy effects ──── */
@media (hover: none), (pointer: coarse) {
  .imm-card::after { display: none; }
  .imm-tilt:hover { transform: none; }
  .imm-blob--l { display: none; }
}

/* ── 12 · Reduced motion: stillness, instantly readable ───── */
@media (prefers-reduced-motion: reduce) {
  .imm-blob, #imm-scene::after { animation: none !important; }
  #imm-stars { display: none; }
  .imm-reveal { opacity: 1; transform: none; transition: none; }
  .imm-card, .imm-tilt:hover { transform: none; }
  .imm-pulse { display: none; }
  .feed-avatar, .pstat-bar-fill, .feed-funding-bar, .ar-progress-fill,
  .feed-3d-chip, .ar-live-badge, .feed-unread-badge, .chat-hero__badge-dot,
  .f-status-dot, .ar-pulse-dot { animation: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   V2 — BOLD PASS. Always-visible neon identity (not hover-
   gated): gradient display titles, glowing card frames, hot
   primary buttons, charged nav, synthwave horizon. Pure CSS
   on existing markup — features and layout untouched.
   ═══════════════════════════════════════════════════════════ */

/* ── B1 · Display titles: animated tri-color gradient ─────── */
.pg-title, .quest-hero__title, .builds-hero__title,
.sites-hero__title, .chat-hero__title, .feed-title {
  background: linear-gradient(100deg,
    oklch(0.80 0.22 295), oklch(0.85 0.16 200) 38%,
    oklch(0.90 0.20 135) 72%, oklch(0.80 0.22 295));
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradient-pan 7s ease-in-out infinite;
  filter: drop-shadow(0 0 22px oklch(0.68 0.28 295 / 0.35));
}
.eyebrow { color: var(--cyan); text-shadow: 0 0 14px oklch(0.82 0.18 200 / 0.5); }

/* ── B2 · Cards: always-on neon frame + breathing glow ────── */
.imm-card {
  border-color: oklch(0.50 0.14 290 / 0.55) !important;
  animation: imm-card-breathe 6s ease-in-out infinite;
}
@keyframes imm-card-breathe {
  0%, 100% {
    box-shadow:
      0 10px 32px oklch(0 0 0 / 0.45),
      0 0 0 1px oklch(0.68 0.28 295 / 0.22),
      0 0 28px oklch(0.68 0.28 295 / 0.14);
  }
  50% {
    box-shadow:
      0 10px 32px oklch(0 0 0 / 0.45),
      0 0 0 1px oklch(0.82 0.18 200 / 0.26),
      0 0 34px oklch(0.82 0.18 200 / 0.16);
  }
}
.imm-card:hover {
  animation-play-state: paused;
  border-color: oklch(0.66 0.22 290 / 0.9) !important;
  box-shadow:
    0 22px 54px oklch(0 0 0 / 0.55),
    0 0 0 1px oklch(0.68 0.28 295 / 0.45),
    0 0 52px oklch(0.68 0.28 295 / 0.28);
}

/* feed media gets a lit inner frame */
.feed-media {
  position: relative;
}
.feed-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow:
    inset 0 0 0 1px oklch(0.70 0.20 290 / 0.35),
    inset 0 -60px 80px -50px oklch(0.68 0.28 295 / 0.28);
}

/* ── B3 · Primary buttons: charged gradient + glow ────────── */
.btn-v, .feed-compose-post, .nav-cta, .quest-claim-btn, .chat-send {
  background-image: linear-gradient(115deg,
    oklch(0.60 0.26 300), oklch(0.62 0.24 265) 45%, oklch(0.66 0.20 220)) !important;
  background-size: 220% 100% !important;
  border: 1px solid oklch(0.72 0.22 285 / 0.7) !important;
  box-shadow:
    0 4px 18px oklch(0.62 0.26 290 / 0.45),
    inset 0 1px 0 oklch(1 0 0 / 0.25);
  animation: gradient-pan 5s ease-in-out infinite;
  color: #fff !important;
  text-shadow: 0 1px 2px oklch(0 0 0 / 0.3);
}
.btn-v:hover, .feed-compose-post:hover, .nav-cta:hover, .chat-send:hover {
  box-shadow:
    0 6px 30px oklch(0.62 0.26 290 / 0.65),
    inset 0 1px 0 oklch(1 0 0 / 0.3);
  transform: translateY(-2px);
}

/* ── B4 · Nav: charged brand, hot active pill, hairline ───── */
.glass-navbar { position: relative; }
.glass-navbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg,
    transparent, oklch(0.68 0.28 295 / 0.65) 30%,
    oklch(0.82 0.18 200 / 0.65) 55%, oklch(0.88 0.24 135 / 0.5) 75%, transparent);
  pointer-events: none;
}
.nav-brand-text {
  background: linear-gradient(95deg, oklch(0.85 0.10 290), oklch(0.85 0.16 200));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.nav-tab.act {
  box-shadow:
    0 0 0 1px oklch(0.68 0.28 295 / 0.5),
    0 0 22px oklch(0.68 0.28 295 / 0.35),
    inset 0 0 12px oklch(0.68 0.28 295 / 0.18);
}
.nav-hud {
  box-shadow: 0 0 0 1px oklch(0.80 0.20 68 / 0.4), 0 0 18px oklch(0.80 0.20 68 / 0.25);
  border-radius: 999px;
}

/* ── B5 · Synthwave horizon + cinematic vignette ──────────── */
#imm-scene { box-shadow: inset 0 0 38vmax oklch(0 0 0 / 0.5); }
.imm-blob--v { opacity: 0.8; }
.imm-blob--c { opacity: 0.75; }
.imm-blob--l { opacity: 0.7; }
#imm-grid {
  position: absolute; left: -20%; right: -20%; bottom: 0; height: 34vh;
  transform: perspective(420px) rotateX(62deg);
  transform-origin: 50% 100%;
  background-image:
    linear-gradient(oklch(0.68 0.28 295 / 0.22) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.68 0.28 295 / 0.22) 1px, transparent 1px);
  background-size: 44px 44px;
  animation: imm-grid-run 2.6s linear infinite;
  -webkit-mask-image: linear-gradient(to top, oklch(0 0 0 / 0.85), transparent 78%);
  mask-image: linear-gradient(to top, oklch(0 0 0 / 0.85), transparent 78%);
}
@keyframes imm-grid-run { to { background-position: 0 44px, 0 0; } }

/* ── B6 · Community & HUD heat ────────────────────────────── */
.feed-avatar {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px oklch(0.68 0.28 295), 0 0 16px oklch(0.68 0.28 295 / 0.5);
}
.chip, .quest-done-chip, .feed-3d-chip {
  border-color: oklch(0.60 0.16 290 / 0.6);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, oklch(0.55 0.20 295), oklch(0.55 0.14 220));
  border: 2px solid var(--bg);
}

/* ── B7 · Bold pass: reduced-motion & mobile guards ───────── */
@media (hover: none), (pointer: coarse) {
  #imm-grid { height: 22vh; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-title, .quest-hero__title, .builds-hero__title,
  .sites-hero__title, .chat-hero__title, .feed-title,
  .btn-v, .feed-compose-post, .nav-cta, .quest-claim-btn, .chat-send,
  .imm-card, #imm-grid { animation: none !important; }
}