/* ==========================================================================
   ETC Labs — Gen 1 · The world: one coherent background environment + cursor tracker
   Layers (all fixed, all cheap):
     .world-base   dark gradient
     .light        two large soft lights that drift (transform only) and change tone
     .world-grid   faint grid, masked
     .world-flow   canvas with a few flowing lines (desktop only, paused when hidden)
     .world-cursor radial light that follows the pointer (transform only)
     .world-noise  static noise (no animation)
   ========================================================================== */
.world { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: strict; }
.world > * { position: absolute; }
.world-base { inset: 0; background: radial-gradient(120% 80% at 50% -10%, #12111e 0%, var(--bg) 55%), var(--bg); }
.light { width: 70vmax; height: 70vmax; border-radius: 50%; opacity: 0.55; will-change: transform; transition: opacity 1.4s var(--ease); }
.light.a { top: -30vmax; left: -20vmax; background: radial-gradient(circle, rgba(var(--tone-rgb), 0.28) 0%, rgba(var(--tone-rgb), 0.08) 35%, transparent 62%); animation: drift-a var(--t-world) ease-in-out infinite alternate; }
.light.b { bottom: -35vmax; right: -25vmax; background: radial-gradient(circle, rgba(var(--cyan-rgb), 0.16) 0%, rgba(var(--blue-rgb), 0.06) 40%, transparent 65%); animation: drift-b calc(var(--t-world) * 1.3) ease-in-out infinite alternate; }
.light.c { top: 30vh; left: 40vw; width: 50vmax; height: 50vmax; opacity: 0.35; background: radial-gradient(circle, rgba(var(--magenta-rgb), 0.12) 0%, transparent 60%); animation: drift-c calc(var(--t-world) * 1.7) ease-in-out infinite alternate; }
@keyframes drift-a { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(12vw, 8vh, 0); } }
@keyframes drift-b { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-10vw, -10vh, 0); } }
@keyframes drift-c { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-14vw, 10vh, 0) scale(1.15); } }
.world-grid { inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 80% 70% at 50% 20%, #000 10%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 20%, #000 10%, transparent 75%); }
.world-flow { inset: 0; width: 100%; height: 100%; opacity: 0.7; }
.world-cursor { top: 0; left: 0; width: 44vmax; height: 44vmax; margin: -22vmax 0 0 -22vmax; border-radius: 50%; background: radial-gradient(circle, rgba(var(--tone-rgb), 0.12) 0%, rgba(var(--cyan-rgb), 0.04) 35%, transparent 62%); will-change: transform; opacity: 0; transition: opacity 0.6s; }
.world.has-pointer .world-cursor { opacity: 1; }
.world-noise { inset: 0; opacity: 0.035; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.world-vignette { inset: 0; background: radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.45) 100%); }

/* Tone: sections tell the world which energy is nearby; body picks it up */
body[data-tone="cyan"] { --tone-rgb: var(--cyan-rgb); }
body[data-tone="blue"] { --tone-rgb: var(--blue-rgb); }
body[data-tone="violet"] { --tone-rgb: var(--violet-rgb); }
body[data-tone="magenta"] { --tone-rgb: var(--magenta-rgb); }
body[data-tone="green"] { --tone-rgb: var(--green-rgb); }

/* Reduced complexity on small screens / coarse pointers */
@media (max-width: 767px), (pointer: coarse) {
  .light.c, .world-cursor, .world-flow { display: none; }
  .light { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) { .light { animation: none !important; } .world-flow { display: none; } }

/* ---------- Cursor tracker (fine pointers only; native cursor stays) ---------- */
.cursor { position: fixed; top: 0; left: 0; z-index: 1400; pointer-events: none; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; border: 1.5px solid rgba(var(--cyan-rgb), 0.7); opacity: 0; transform: translate3d(-100px, -100px, 0) scale(1); transition: opacity 0.3s, width 0.25s var(--ease), height 0.25s var(--ease), margin 0.25s var(--ease), border-color 0.25s, background 0.25s; will-change: transform; }
.cursor.on { opacity: 1; }
.cursor.hover { width: 44px; height: 44px; margin: -22px 0 0 -22px; border-color: rgba(var(--magenta-rgb), 0.8); background: rgba(var(--magenta-rgb), 0.08); }
.cursor.label { width: auto; height: 32px; margin: 18px 0 0 18px; border-radius: var(--r-pill); padding: 0 12px; display: inline-flex; align-items: center; font: 600 0.72rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: rgba(12, 12, 20, 0.85); border-color: rgba(var(--cyan-rgb), 0.5); backdrop-filter: blur(6px); white-space: nowrap; }
.cursor.press { transform: scale(0.85); }
@media (pointer: coarse), (max-width: 767px) { .cursor { display: none; } }