/* ============================================
   UTILITIES.CSS
   Tokens · Reset · Layout · Cursor · Reveals
   Transitions · Scroll · Labels
   ============================================ */

/* ── TOKENS ── */
:root {
--font: 'HelveticaNeue',
        'Helvetica Neue', Inter, Helvetica, Arial, sans-serif;

  --bg:         #F5F4F0;
  --fg:         #0F0F0D;
  --muted:      #8C8C87;
  --border:     #E0DFD9;
  --card:       #ECEAE4;
  --nav-bg:     rgba(245,244,240,0.9);

  --nav-h:      60px;
  --max-w:      1200px;
  --px:         clamp(20px, 5vw, 72px);
  --r-pill:     999px;
  --r-sm:       3px;

  --ease:        cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --fast:  0.18s;
  --mid:   0.42s;
  --slow:  0.75s;
}

[data-theme="dark"] {
  --bg:     #0F0F0D;
  --fg:     #F0EFEA;
  --muted:  #60605A;
  --border: #1D1D1A;
  --card:   #161613;
  --nav-bg: rgba(15,15,13,0.9);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
  overflow-x: hidden;
  transition: background var(--mid) var(--ease), color var(--mid) var(--ease);
}
a     { color: inherit; text-decoration: none; }
img   { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
ul    { list-style: none; }
input, textarea, select { font: inherit; }

/* ── LAYOUT ── */
.container   { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--px); }
.page-wrapper { padding-top: var(--nav-h); }

/* ── PAGE TRANSITION ── */
.page-cover {
  position: fixed; inset: 0;
  background: var(--fg);
  z-index: 1000;
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
}
.page-cover.enter { animation: cv-in  0.52s var(--ease) forwards; }
.page-cover.exit  { animation: cv-out 0.52s var(--ease) forwards; }
@keyframes cv-in  { to   { transform: scaleY(1); transform-origin: bottom; } }
@keyframes cv-out { from { transform: scaleY(1); transform-origin: top; }
                    to   { transform: scaleY(0); transform-origin: top; } }

/* ── SCROLL PROGRESS ── */
#scrollProgress {
  position: fixed; top: 0; left: 0; height: 1px;
  background: var(--muted); z-index: 200; width: 0;
}

/* ── CURSOR ── */
.cursor {
  position: fixed; width: 7px; height: 7px;
  border-radius: 50%; background: var(--fg);
  pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .28s var(--ease-spring), height .28s var(--ease-spring);
}
.cursor-ring {
  position: fixed; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid var(--fg);
  opacity: 0.3; pointer-events: none; z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width .35s var(--ease-spring), height .35s var(--ease-spring);
}
body.is-hovering .cursor      { width: 12px; height: 12px; }
body.is-hovering .cursor-ring { width: 48px; height: 48px; opacity: 0.12; }

/* ── REVEAL ANIMATIONS ── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--slow) var(--ease-out), transform var(--slow) var(--ease-out);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity var(--slow) var(--ease-out), transform var(--slow) var(--ease-out);
}
.reveal.visible, .reveal-scale.visible { opacity: 1; transform: none; }

.d-1 { transition-delay: .07s; }
.d-2 { transition-delay: .14s; }
.d-3 { transition-delay: .21s; }
.d-4 { transition-delay: .28s; }
.d-5 { transition-delay: .35s; }
.d-6 { transition-delay: .42s; }

/* ── LABEL ── */
.label { font-size: 0.75rem; color: var(--muted); font-weight: 400; letter-spacing: 0.01em; }