/* ═══════════════════════════════════════════════════════════
   BASE.CSS — Urmik Makani Portfolio
   Single source of truth for: reset, tokens, fonts, cursor,
   keyframes, scroll-reveal. Loaded by every page.
═══════════════════════════════════════════════════════════ */

/* ── Custom Font ── */
@font-face {
  font-family: 'Northwell';
  src: url('../assets/northwell-alt.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  cursor: none !important;
}
html  { scroll-behavior: smooth; overflow-x: hidden; } /* iOS Safari needs it on html too */
body  {
  background: #F6F5F2;
  color: #0B0C0F;
  font-family: 'Barlow Condensed', sans-serif;
  overflow-x: hidden;
}
::selection { background: rgba(232,79,0,.15); }

/* ── Design Tokens ── */
:root {
  --o:      #D4500A;   /* saffron-orange (slightly deeper, less neon) */
  --o2:     #E8651C;   /* orange mid */
  --b:      #0D2137;   /* deep navy */
  --b2:     #4FC3F7;   /* sky metallic accent */
  --b3:     #1A3A5C;   /* mid navy for fills */
  --cream:  #F6F5F2;
  --cream2: #EFECEA;
  --ink:    #0B0C0F;
  --muted:  #636B7A;
  --bdr:    rgba(11,12,15,.09);
  --gap:    10px;
  --dark:   #06111E;   /* deep navy-black for dark sections */
}

/* ── Custom Cursor ── */
#cur-dot {
  position: fixed;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--o);
  pointer-events: none;
  z-index: 99999; /* above all overlays */
  transform: translate(-50%,-50%);
}
#cur-ring {
  position: fixed;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(232,79,0,.45);
  pointer-events: none;
  z-index: 99998; /* above all overlays */
  transform: translate(-50%,-50%);
  transition: left .12s, top .12s;
}
/* ── iOS / touch: restore native cursor, hide custom cursor elements ── */
@media (hover: none) {
  #cur-dot, #cur-ring { display: none !important; }
  *, *::before, *::after { cursor: auto !important; }
}

/* ── Keyframes ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: none; }
}

/* ── Scroll Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s cubic-bezier(.22,1,.36,1),
              transform .55s cubic-bezier(.22,1,.36,1);
}
.reveal.visible { opacity: 1; transform: none; }
.d1 { transition-delay: .07s; }
.d2 { transition-delay: .14s; }
.d3 { transition-delay: .21s; }
.d4 { transition-delay: .28s; }

/* ── Section Divider ── */
.divider {
  height: 1px;
  background: var(--bdr);
  margin: 0 5vw;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s cubic-bezier(.22,1,.36,1);
}
.divider.visible { transform: scaleX(1); }