/*
Author: Ferran Catalan
Author URI: https://www.ferrancatalan.com
Version: 5.0
*/

/* GENERAL */

:root{
  --bg:#050505;
  --line:#f3f3f3;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  width:100vw;
  height:100vh;
  overflow:hidden;

  background:radial-gradient(circle at top, #111 0%, #050505 60%);

  display:flex;
  justify-content:center;
  align-items:center;

  font-family:Inter,sans-serif;
}

/* ruido fino */

body::before{
  content:"";
  position:fixed;
  inset:0;

  opacity:.025;
  pointer-events:none;

  background-image:
    repeating-radial-gradient(circle at 0 0,#fff,#000 1px);
}

/* contenedor */

.scene{
  position:relative;
  width:520px;
  height:420px;

  display:flex;
  justify-content:center;
  align-items:center;
}

/* glow */

.glow{
  position:absolute;

  width:280px;
  height:280px;

  border-radius:50%;

  background:radial-gradient(
    circle,
    rgba(255,255,255,.08),
    transparent 70%
  );

  filter:blur(40px);

  transition:transform .15s linear;
}

/* svg */

svg{
  width:430px;
  overflow:visible;
  z-index:2;
}

/* líneas */

path{
  fill:none;

  stroke:var(--line);
  stroke-width:10;

  stroke-linejoin:round;
  stroke-linecap:round;

  transition:
    d .08s linear,
    stroke .4s ease;

  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.15))
    drop-shadow(0 0 20px rgba(255,255,255,.05));
}

/* texto */

.label{
  position:absolute;
  bottom:0;

  font-size:.78rem;
  letter-spacing:.45em;

  color:rgba(255,255,255,.35);

  text-transform:uppercase;
}

/* cursor aura */

.cursor{
  position:fixed;

  width:14px;
  height:14px;

  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;

  pointer-events:none;

  transform:translate(-50%, -50%);

  backdrop-filter:blur(2px);

  z-index:999;
}