/* =========================================================
   Quantic · Base
   Reset, typography, layout helpers and global effects
   (drafting grid, custom cursor, page curtain).
   ========================================================= */

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color var(--t-slow) var(--ease), color var(--t-slow) var(--ease);
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--red); color: var(--on-red); }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
  border-radius: 2px;
}

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--red);
  color: var(--on-red);
  border-radius: var(--radius);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- Brand logo ----------
   One red PNG. On dark surfaces it is turned cream with a CSS filter. */
.logo-on-dark { filter: brightness(0) invert(1) sepia(0.06); }

/* ---------- Interactive drafting grid ---------- */
.grid-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

main, .site-footer { position: relative; z-index: 1; }

/* ---------- Custom cursor (desktop, fine pointer only) ---------- */
.cursor { display: none; }

@media (hover: hover) and (pointer: fine) {
  .has-cursor, .has-cursor a, .has-cursor button { cursor: none; }

  .cursor {
    display: block;
    position: fixed;
    top: 0; left: 0;
    z-index: 999;
    pointer-events: none;
  }
  .cursor__dot,
  .cursor__ring,
  .cursor__coords,
  .cursor__label {
    position: absolute;
    top: 0; left: 0;
    will-change: transform;
  }
  .cursor__dot {
    width: 6px; height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: var(--red);
  }
  .cursor__ring {
    width: 34px; height: 34px;
    margin: -17px 0 0 -17px;
    border: 1.5px solid var(--red);
    border-radius: 50%;
    transition: width var(--t-base) var(--ease), height var(--t-base) var(--ease),
                margin var(--t-base) var(--ease), background-color var(--t-base) var(--ease),
                opacity var(--t-base) var(--ease);
  }
  /* crosshair ticks */
  .cursor__ring::before,
  .cursor__ring::after {
    content: "";
    position: absolute;
    background: var(--red);
    transition: opacity var(--t-fast) var(--ease);
  }
  .cursor__ring::before { width: 1px; height: 10px; left: 50%; top: -16px; }
  .cursor__ring::after  { height: 1px; width: 10px; top: 50%; right: -16px; }

  .cursor__coords {
    font-size: 11px;
    font-weight: 500;
    color: var(--red);
    white-space: nowrap;
    margin: -30px 0 0 24px;
    font-variant-numeric: tabular-nums;
    transition: opacity var(--t-fast) var(--ease);
  }
  .cursor__label {
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--text);
    color: var(--bg);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    scale: 0.6;
    translate: -50% -50%;
    transition: opacity var(--t-base) var(--ease), scale var(--t-base) var(--ease);
  }

  /* hover over links / buttons */
  .cursor.is-link .cursor__ring {
    width: 56px; height: 56px; margin: -28px 0 0 -28px;
    background-color: rgba(225, 38, 44, 0.12);
  }
  .cursor.is-link .cursor__ring::before,
  .cursor.is-link .cursor__ring::after,
  .cursor.is-link .cursor__coords { opacity: 0; }

  /* hover over a project */
  .cursor.is-project .cursor__label { opacity: 1; scale: 1; }
  .cursor.is-project .cursor__ring,
  .cursor.is-project .cursor__dot,
  .cursor.is-project .cursor__coords { opacity: 0; }

  .cursor.is-down .cursor__ring { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
  .cursor.is-hidden { opacity: 0; }
}

/* ---------- Page curtain (transition between pages) ---------- */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: grid;
  place-items: center;
  background: var(--red-deep);
  transform: translateY(100%);
  visibility: hidden;
  pointer-events: none;
}
.curtain.is-covering,
.curtain.is-leaving { visibility: visible; }
.curtain__logo {
  width: 180px;
  filter: brightness(0) invert(1) sepia(0.06);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.curtain.is-covering { transition: transform 450ms var(--ease-in-out); transform: translateY(0); }
.curtain.is-covering .curtain__logo { opacity: 1; transition-delay: 300ms; }
.curtain.is-leaving { transition: transform 550ms var(--ease-in-out); transform: translateY(-100%); }

/* ---------- Reveal on scroll ----------
   [data-reveal] slides up once; children of [data-reveal-group] follow one after another.
   Only active when JS adds .js-reveal to <html> (so content never stays hidden without JS). */
.js-reveal [data-reveal],
.js-reveal [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  transition-delay: calc(var(--d, 0) * 80ms);
}
.js-reveal [data-reveal].is-in,
.js-reveal [data-reveal-group] > .is-in { opacity: 1; transform: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}