/* ============================================================
   MIKE ZOOKA — mikezooka.com (v2)
   Premium single-page artist site. Electric cyan on matte black.
   Editorial big-type direction. Vanilla, fast.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Space+Grotesk:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* surfaces */
  --void:    #050505;
  --panel:   #101012;
  --panel-2: #17171A;
  --line:    rgba(245, 242, 234, 0.10);
  --line-2:  rgba(245, 242, 234, 0.18);

  /* electric accent (Tweaks can change this live) */
  --uv:      #00D9FF;
  --uv-deep: #0093B8;
  --uv-lite: #7FEBFF;
  --uv-dim:  rgba(0, 217, 255, 0.14);
  --uv-glow: rgba(0, 217, 255, 0.36);

  /* text */
  --strobe:  #F5F2EA;
  --smoke:   #A7A7A7;
  --dim:     #7A7A7A;
  --ink:     #04161B;

  /* type (Tweaks can swap the pairing) */
  --f-display: 'Anton', 'Arial Narrow', sans-serif;
  --f-body:    'Space Grotesk', system-ui, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, monospace;
  --fw-display: 400;
  --disp-scale: 1;

  /* layout */
  --wrap: 1280px;
  --gut:  32px;
  --sec:  clamp(96px, 13vw, 168px);

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  /* blade cut */
  --cut: 14px;
  --cut-sm: 9px;
}

* , *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--void);
  color: var(--strobe);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }

h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: var(--fw-display); text-transform: uppercase; line-height: 0.88; letter-spacing: 0.005em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg, canvas, iframe { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

::selection { background: var(--uv); color: var(--ink); }
:focus-visible { outline: 2px solid var(--uv); outline-offset: 3px; }

/* grain + scanline atmosphere */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9;
  pointer-events: none; opacity: 0.5; mix-blend-mode: overlay;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.022) 0 1px, transparent 1px 3px);
}

.mz-tnum { font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }

/* blade cuts */
.cut    { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.cut-sm { clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, var(--cut-sm) 100%, 0 calc(100% - var(--cut-sm))); }

/* eyebrow / labels */
.eyebrow {
  font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--uv); display: inline-flex; align-items: center; gap: 14px; margin: 0 0 22px;
}
.eyebrow::after { content: ""; height: 1px; width: 64px; background: linear-gradient(90deg, var(--uv), transparent); }
.section-title { font-size: calc(clamp(2.6rem, 7vw, 5.4rem) * var(--disp-scale)); }
.section-title .ghost { display: block; color: transparent; -webkit-text-stroke: 1px var(--line-2); }
.muted { color: var(--smoke); }

/* ===== buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; padding: 17px 34px; position: relative;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s;
  -webkit-tap-highlight-color: transparent;
}
.btn-solid { background: linear-gradient(135deg, var(--uv-lite), var(--uv) 45%, var(--uv-deep)); color: var(--ink); font-weight: 500; }
.btn-solid:hover { box-shadow: 0 0 46px var(--uv-glow); transform: translateY(-2px); }
.btn-solid:active { transform: translateY(0); }
.btn-ghost { border: 1px solid var(--line-2); color: var(--strobe); }
.btn-ghost:hover { border-color: var(--uv); color: var(--uv-lite); box-shadow: 0 0 28px color-mix(in srgb, var(--uv) 18%, transparent); }
.btn-ghost:active { transform: translateY(1px); }
.btn-lg { padding: 20px 42px; font-size: 13px; }

/* ===== reveal on scroll ===== */
.rv { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .1s; }
.rv-d2 { transition-delay: .2s; }
.rv-d3 { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}