/* ═══════════════════════════════════════════════════════════════════════
   URI GINCEL — MOCK 3 · core
   shared resets, type system, orbs canvas, side-toggle nav, smooth scroll
   ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; }
::selection { background: var(--sel-bg, #c9a366); color: var(--sel-fg, #0c0807); }

/* fonts loaded inline in each html */

/* ── ORBS canvas — fixed, behind content ───────────────────────────── */
#orbs {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -1;
  opacity: 0.85;
}

/* ── ONE PILL — every nav element shares this base ─────────────── */
.mx-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--accent, var(--rule));
  background: rgba(0, 0, 0, 0.45);
  color: var(--text);
  font: 600 11px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
  cursor: default;
}
a.mx-pill { cursor: pointer; }
a.mx-pill:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* ── SIDE INDICATOR (top left) ─ uses the pill base ─────────────── */
.side-tag {
  position: fixed;
  top: 22px;
  left: 26px;
  z-index: 60;
}
.side-tag .st-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  animation: stPulse 2.4s ease-in-out infinite;
}
@keyframes stPulse { 50% { opacity: 0.4; } }

/* ── SIDE NAV (top right) ─ container only, items use .mx-pill ──── */
.side-nav {
  position: fixed;
  top: 22px;
  right: 26px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── SECTION SPACING — generous, editorial ─────────────────────────── */
section {
  padding: clamp(80px, 14vh, 160px) clamp(20px, 6vw, 80px);
  position: relative;
}
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

/* ── SECTION MARK — small "I." or "01" + label ─────────────────────── */
.mark {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: clamp(32px, 6vh, 80px);
  font: 600 10px var(--mono);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mute);
}
.mark .mk-num {
  color: var(--accent);
  font: italic 700 28px/1 var(--display);
  letter-spacing: 0;
}
.mark .mk-line {
  flex: 1;
  height: 1px;
  background: var(--rule);
  max-width: 200px;
}

/* ── BIG TYPE — used for hero + section titles ─────────────────────── */
.h-display {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: var(--text);
}

/* ── REVEAL ON SCROLL ─────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1100ms cubic-bezier(.2, 1, .3, 1),
              transform 1100ms cubic-bezier(.2, 1, .3, 1);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ── FOOTER — slim, just the flip ──────────────────────────────────── */
.foot {
  padding: 80px clamp(20px, 6vw, 80px);
  border-top: 1px solid var(--rule);
}
.foot-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  font: 500 11px var(--mono);
  letter-spacing: 0.2em;
  color: var(--mute);
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}
.foot-flip {
  font: italic 400 24px var(--display);
  color: var(--accent);
  letter-spacing: -0.01em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  transition: opacity 0.25s ease;
}
.foot-flip:hover { opacity: 0.7; }
.foot-flip--inline {
  display: block;
  width: max-content;
  margin: 3.6rem auto 0;
  text-align: center;
}
@media (max-width: 700px) {
  .foot-flip--inline { font-size: 22px; margin-top: 3.2rem; }
}

/* compact label swap — full descriptive text becomes single-letter on phones */
.lbl-mini { display: none; }

/* mobile spacing */
@media (max-width: 700px) {
  .side-nav { top: 12px; right: 12px; gap: 5px; }
  .side-tag { top: 12px; left: 12px; }
  .mx-pill { height: 26px; padding: 0 8px; font-size: 9.5px; gap: 5px; letter-spacing: 0.18em; }
  .lbl-full { display: none; }
  .lbl-mini { display: inline; letter-spacing: 0.32em; font-weight: 700; }
  .side-tag .lbl-mini { color: var(--accent); }
  .side-nav .sn-flip .lbl-mini { color: var(--accent); }
}

/* ─── PHONE-ONLY: pulsing flip pill + tap spark ─── */
@media (hover: none) and (pointer: coarse) {
  .side-nav .sn-flip {
    animation: pillBreath 3.6s ease-in-out infinite;
  }
  @keyframes pillBreath {
    0%, 100% { box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
    50%      { box-shadow: 0 0 14px var(--accent, rgba(255,255,255,0.4)); }
  }
  /* radial tap-spark element shared by all pages */
  #tap-spark {
    position: fixed; pointer-events: none; z-index: 80;
    width: 4px; height: 4px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.85) 0%, var(--accent, rgba(255,255,255,0.5)) 30%, transparent 70%);
    opacity: 0; transform: translate(-50%, -50%) scale(1);
    mix-blend-mode: screen;
  }
  #tap-spark.fire {
    animation: tapSparkAnim 700ms cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
  }
  @keyframes tapSparkAnim {
    0%   { opacity: 0.95; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0;    transform: translate(-50%, -50%) scale(120); }
  }
}