/* ============================================================
   HOLKAN JIU JITSU MEXICANO — base.css
   Design system: "Códice Moderno"
   ============================================================ */

:root {
  /* Palette — Holkan (from logo) */
  --obsidian:      #0a0806;   /* warm black */
  --obsidian-2:    #12100c;   /* raised surface */
  --obsidian-3:    #1b1712;   /* card / stone */
  --gold:          #c9a961;   /* stone gold — primary accent */
  --gold-light:    #e8d4a0;
  --gold-deep:     #8c7038;
  --jade:          #2d6a4f;   /* jade green — secondary */
  --earth:         #9b2226;   /* earth red — secondary */
  --bone:          #f5efe6;   /* bone white — text */
  --bone-dim:      #b8afa1;
  --muted:         #9a8f7e;

  /* MCTLN local palette (sister brand) */
  --mctln-jade:    #2d7a5f;
  --mctln-red:     #8b2020;

  /* Type */
  --f-title: "Cinzel", Georgia, serif;
  --f-body:  "Inter", system-ui, -apple-system, sans-serif;

  /* Layout */
  --wrap: 1120px;
  --gap: clamp(1.2rem, 4vw, 2.6rem);
  --radius: 4px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --nav-h: 68px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--f-body);
  color: var(--bone);
  background-color: var(--obsidian);
  /* subtle stone texture: layered radial specks + vignette */
  background-image:
    radial-gradient(circle at 18% 12%, rgba(201,169,97,.05), transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(45,106,79,.05), transparent 45%),
    radial-gradient(circle at 50% 120%, rgba(155,34,38,.04), transparent 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.035'/></svg>");
  background-attachment: fixed, fixed, fixed, scroll;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

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

::selection { background: var(--gold); color: var(--obsidian); }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px) scale(.985);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Greca separators (SVG traced on scroll) ---------- */
.greca-sep {
  padding: clamp(1.6rem, 5vw, 3rem) var(--gap);
  display: flex;
  justify-content: center;
}
.greca {
  width: min(100%, 660px);
  height: clamp(30px, 6vw, 46px);
  overflow: visible;
}
.greca path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.4;
  stroke-linecap: square;
  stroke-linejoin: miter;
  opacity: .55;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2s var(--ease);
}
.greca.is-drawn path { stroke-dashoffset: 0; }
.greca-sep--mctln .greca path { stroke: var(--mctln-jade); opacity: .7; }

/* ---------- Utilities ---------- */
.section__inner,
.nav__inner,
.footer__inner { max-width: var(--wrap); margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .greca path { stroke-dashoffset: 0; transition: none; }
}