/* ============================================================
   OBRADOR — supper club por Will Peters
   Sistema visual: quase-preto quente, brasa, creme. Serifa
   editorial de alto contraste + mono industrial.
   ============================================================ */

:root {
  /* base tonal — quase-preto quente */
  --ink:        #0b0a09;
  --ink-2:      #131110;
  --ink-3:      #1c1916;
  --ink-line:   #2a2521;

  /* brasa → sangue (accent) */
  --ember:      #c81418;
  --ember-deep: #960c10;
  --ember-glow: #e8242c;

  /* texto */
  --cream:      #e8e2d8;
  --cream-dim:  #b8b0a4;
  --ash:        #6b6560;
  --ash-2:      #4a443f;

  --maxw: 1500px;
  --gut: clamp(20px, 5vw, 90px);

  --ff-display: "Bodoni Moda", Georgia, serif;
  --ff-body:    "Archivo", system-ui, sans-serif;
  --ff-mono:    "Space Mono", ui-monospace, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-2: cubic-bezier(0.65, 0, 0.35, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--ff-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--ember); color: var(--ink); }

img { display: block; max-width: 100%; }

/* film grain + vignette overlays on whole page */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9000;
  background:
    radial-gradient(120% 90% at 50% 8%, transparent 55%, rgba(0,0,0,0.55) 100%);
  mix-blend-mode: multiply;
}
.grain {
  position: fixed; inset: -50%;
  pointer-events: none; z-index: 9001;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.6s steps(2) infinite;
}
@keyframes grain {
  0%{transform:translate(0,0)} 50%{transform:translate(-2%,1%)} 100%{transform:translate(1%,-1%)}
}

/* ---------------- type primitives ---------------- */
.mono {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ash);
}
.tag {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.tag::before { content: "[ "; }
.tag::after  { content: " ]"; }

.display {
  font-family: var(--ff-display);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.01em;
}
.serif-it { font-family: var(--ff-display); font-style: italic; font-weight: 500; }

/* ---------------- layout ---------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
section { position: relative; }

.rule { height: 1px; background: var(--ink-line); width: 100%; }

/* section eyebrow */
.eyebrow {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}
.eyebrow .num { font-family: var(--ff-mono); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--ember); }
.eyebrow .line { flex: 1; height: 1px; background: var(--ink-line); }
.eyebrow .label { font-family: var(--ff-mono); font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cream-dim); }

/* ---------------- reveal animation ---------------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }

.clip-up { clip-path: inset(0 0 100% 0); opacity: 0; transition: clip-path 1.1s var(--ease), opacity 0.6s ease; }
.clip-up.in { clip-path: inset(0 0 0 0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .clip-up { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .grain { display: none; }
}

/* ---------------- image placeholder ---------------- */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(135deg, var(--ink-2) 0 11px, var(--ink-3) 11px 22px);
  border: 1px solid var(--ink-line);
  overflow: hidden;
  display: flex; align-items: flex-end;
}
.ph::after {
  content: attr(data-label);
  font-family: var(--ff-mono);
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ash);
  padding: 14px 16px;
}
.ph .corner {
  position: absolute; top: 12px; right: 14px;
  font-family: var(--ff-mono); font-size: 0.6rem; letter-spacing: 0.15em; color: var(--ash-2);
}