/* ==========================================================================
   components.css  |  buttons, bar, progress, cursor, music, sparkles
   Theme-neutral: uses --accent, --on-accent, --text only.
   Buttons are fully round and flat: a tone of the accent, or the accent
   itself. On hover a fill rises from the bottom.
   ========================================================================== */

/* Buttons --------------------------------------------------------------------- */
.btn {
  --fill: var(--accent);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3.25rem;
  padding: 0.75rem 1.9rem;
  border: 0;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--zari) 40%, var(--bg));     /* a soft gold tone: secondary, not disabled */
  color: var(--accent);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.35s var(--ease-soft), transform 0.2s var(--ease-expo);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fill);
  transform: translateY(101%);
  transition: transform 0.55s var(--ease-expo);
}
.btn svg { width: 1.15rem; height: 1.15rem; flex: none; }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { border-radius: var(--radius-full); }
.btn[disabled] { opacity: 0.6; cursor: default; }

.btn--solid {
  --fill: var(--text);
  background: var(--accent);
  color: var(--on-accent);
}
.btn--sm { min-height: 2.75rem; padding: 0.5rem 1.2rem; font-size: var(--step--1); }

@media (hover: hover) {
  .btn:hover { color: var(--on-accent); }
  .btn:hover::before { transform: none; }
  .btn--solid:hover { color: var(--bg); }
}

/* The bar: monogram, four places to go, one action ------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  padding: env(safe-area-inset-top) var(--gutter) 0;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  background: var(--wine-deep);
  color: #f4e3cb;
}
.nav__mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #f4e3cb;
  text-decoration: none;
}
.nav__links {
  display: flex;
  gap: clamp(0.1rem, 1.2vw, 1rem);
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}
.nav__links li[hidden] { display: none; }
.nav__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: 0.5rem;
  color: color-mix(in srgb, #f4e3cb 82%, transparent);
  font-size: var(--step-0);
  text-decoration: none;
  transition: color 0.25s var(--ease-soft);
}
.nav__links a:hover { color: #f4e3cb; }
.nav__links a[aria-current="true"] { color: var(--zari-hi); }
/* a filled dot marks the page you are on */
.nav__links a[aria-current="true"]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.15rem;
  width: 6px;
  height: 6px;
  translate: -50% 0;
  border-radius: 50%;
  background: var(--zari-hi);
}
.nav :focus-visible { outline-color: var(--zari-hi); }
.nav__action { flex: none; }
.nav__action[hidden] { display: none; }

/* Scroll progress: transform only, sits on top of the bar -------------------- */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: calc(var(--z-nav) + 1);
  pointer-events: none;
}
.progress__bar {
  display: block;
  height: 100%;
  background: var(--zari-hi);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* Cursor label: follows the pointer over things that open (cursor.js) ------ */
.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--z-cursor);
  width: 5.5rem;
  height: 5.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--zari-hi);
  color: var(--wine-deep);
  font-size: 1rem;
  font-weight: 500;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

/* Music toggle (only when enabled in config.js) ----------------------------- */
.music {
  position: fixed;
  right: clamp(0.75rem, 3vw, 1.5rem);
  bottom: clamp(0.75rem, 3vw, 1.5rem);
  z-index: var(--z-nav);
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--wine);
  color: var(--zari-hi);
  cursor: pointer;
  transition: transform 0.2s var(--ease-expo);
}
.music:active { transform: scale(0.94); }
.music[hidden] { display: none; }
.music:focus-visible { border-radius: var(--radius-full); outline-color: var(--zari); }
.music svg { width: 1.3rem; height: 1.3rem; }
.music [data-icon="off"] { display: none; }
.music[data-state="off"] [data-icon="on"] { display: none; }
.music[data-state="off"] [data-icon="off"] { display: block; }

/* Tap sparkles (touch-magic.js) ---------------------------------------------- */
.spark {
  position: fixed;
  z-index: 92;
  pointer-events: none;
  width: 10px;
  height: 10px;
  background: var(--zari);
  will-change: transform, opacity;
}
.spark--diamond { transform: rotate(45deg); }
.spark--star { clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }

/* Parts of a section arrive one after another (enter.js) ----------------------- */
.has-enter [data-enter] {
  opacity: 0;
  transform: translate3d(0, 1.75rem, 0);
  transition:
    opacity 0.9s var(--ease-soft) calc(var(--e, 0) * 90ms),
    transform 1s var(--ease-expo) calc(var(--e, 0) * 90ms);
}
.has-enter [data-enter].is-in { opacity: 1; transform: none; }