/* ─── TYPOGRAPHY ─── */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
}

/* ─── CUSTOM CURSOR ─── */
.cursor,
.cursor-ring{
  position:fixed;
  top:0;
  left:0;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  will-change:transform;
  transition:opacity .2s ease, visibility .2s ease;
}

.cursor.is-visible,
.cursor-ring.is-visible{
  opacity:1;
  visibility:visible;
}

.cursor{
  width:var(--cursor-dot-size);
  height:var(--cursor-dot-size);
  margin-left:calc(var(--cursor-dot-size) / -2);
  margin-top:calc(var(--cursor-dot-size) / -2);
  background:var(--cursor-dot);
  border-radius:50%;
  z-index:100001;
  box-shadow:0 0 14px var(--cursor-dot-glow);
  transition:
    width .25s cubic-bezier(.22,1,.36,1),
    height .25s cubic-bezier(.22,1,.36,1),
    margin .25s cubic-bezier(.22,1,.36,1),
    background .25s ease,
    box-shadow .25s ease,
    opacity .2s ease;
}

.cursor-ring{
  width:var(--cursor-ring-size);
  height:var(--cursor-ring-size);
  margin-left:calc(var(--cursor-ring-size) / -2);
  margin-top:calc(var(--cursor-ring-size) / -2);
  border:1.5px solid var(--cursor-ring-border);
  background:var(--cursor-ring-fill);
  border-radius:50%;
  z-index:100000;
  transition:
    width .3s cubic-bezier(.22,1,.36,1),
    height .3s cubic-bezier(.22,1,.36,1),
    margin .3s cubic-bezier(.22,1,.36,1),
    border-color .25s ease,
    background .25s ease,
    opacity .2s ease;
}

html.cursor-hover .cursor{
  width:4px;
  height:4px;
  margin-left:-2px;
  margin-top:-2px;
  background:var(--cyan);
  box-shadow:0 0 20px var(--cursor-dot-glow);
}

html.cursor-hover .cursor-ring{
  width:56px;
  height:56px;
  margin-left:-28px;
  margin-top:-28px;
  border-color:var(--cursor-ring-hover-border);
  background:var(--cursor-ring-hover-fill);
}

html.cursor-click .cursor{
  width:4px;
  height:4px;
  margin-left:-2px;
  margin-top:-2px;
}

html.cursor-click .cursor-ring{
  width:38px;
  height:38px;
  margin-left:-19px;
  margin-top:-19px;
}

@media (hover: none), (pointer: coarse){
  .cursor,
  .cursor-ring{
    display:none !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .cursor,
  .cursor-ring{
    display:none !important;
  }
}