/* ─────────────────────────────────────────────
   burcu — extras (2026-11-11)
   1 loader · 4 sound + cursor (2, 3 and 5 were removed 2026-11-12)
   Each block stands alone: delete a block (and its twin in extras.js) to undo it.
   ───────────────────────────────────────────── */

/* ══ 1. Opening loader ══ */
.loader { background: #0b0c0f; flex-direction: column; will-change: transform; }
.loader::after { display: none; }
.loader-brand { transition: transform .7s var(--ease-out), opacity .45s ease; }
.loader-brand span { font-size: clamp(72px, 17vw, 260px); }
.loader::before {            /* hairline that fills with the count */
  content: ''; position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(96px, 17vw, 250px);
  height: 1px; background: linear-gradient(90deg, #fff calc(var(--p, 0) * 100%), rgba(255,255,255,.16) 0);
}
.loader-count { font-size: clamp(64px, 13vw, 200px); line-height: .9; color: #fff; bottom: clamp(18px, 2.6vw, 36px); transition: transform .7s var(--ease-out), opacity .45s ease; }
.loader-count::after { content: '%'; font-size: .32em; vertical-align: top; margin-left: .12em; opacity: .5; letter-spacing: 0; }
.loader-tag { transition: opacity .4s ease; }
.loader.is-done {
  transform: translateY(-100%);
  border-radius: 0 0 50% 50% / 0 0 22vh 22vh;
  transition: transform 1.05s cubic-bezier(0.76, 0, 0.24, 1) .18s, border-radius 1.05s cubic-bezier(0.76, 0, 0.24, 1) .18s;
}
.loader.is-done .loader-brand { transform: translateY(-40px); opacity: 0; }
.loader.is-done .loader-count { transform: translateY(40px); opacity: 0; }
.loader.is-done .loader-tag { opacity: 0; }

/* ══ 4. Sound switch ══ */
.nav-tools { display: flex; align-items: center; gap: 8px; margin-right: clamp(6px, 1vw, 16px); }
.nt { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid color-mix(in oklab, currentColor 26%, transparent); background: none; color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; transition: border-color .3s ease, background .3s ease, color .3s ease, transform .2s ease; }
.nt:hover { border-color: currentColor; }
.nt:active { transform: scale(.94); }
.nt-bars { display: flex; align-items: center; gap: 2.5px; height: 14px; }
.nt-bars i { width: 2px; height: 3px; border-radius: 2px; background: currentColor; transition: height .3s ease; }
.nt-sound[aria-pressed="true"] .nt-bars i { animation: nt-eq .9s ease-in-out infinite alternate; }
.nt-sound[aria-pressed="true"] .nt-bars i:nth-child(2) { animation-delay: -.3s; }
.nt-sound[aria-pressed="true"] .nt-bars i:nth-child(3) { animation-delay: -.6s; }
.nt-sound[aria-pressed="true"] .nt-bars i:nth-child(4) { animation-delay: -.15s; }
@keyframes nt-eq { from { height: 3px; } to { height: 14px; } }
html.menu-open .nav-tools, html.menu-closing .nav-tools { opacity: 0; pointer-events: none; }
.nav-tools { transition: opacity .3s ease; }
@media (max-width: 720px) { .nt { width: 36px; height: 36px; } .nav-tools { gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .nt-sound[aria-pressed="true"] .nt-bars i { animation: none; height: 10px; } }

/* switches stay readable over the dark project hero */
html:not(.menu-open):not(.menu-closing) body.pj-dark .nav:not(.scrolled) .nt { color: #fff; }