/* ==========================================================================
   Pierre × augen.pro-inspired campaign theme (pi- prefix).
   Standalone by design, own namespace. Identity: a still bust figure,
   never named in copy, carried by the image. Local fonts only: Satoshi
   subs for PP Neue Montreal, weights kept light via colour/size rather
   than boldness. Palette matches the augen.pro measurement: off-black /
   off-white / grey ramps + one shared blue, no warm colour anywhere.
   ========================================================================== */

@font-face { font-family: 'Satoshi'; src: url('assets/fonts/satoshi-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('assets/fonts/satoshi-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --off-black: #0f1012; --grey-dark: #1d1e20; --off-white: #f2f2f4;
  --grey-light: #efefef; --white: #fdfdfd; --blue: #0071e3;
  --muted-on-light: rgba(15, 16, 18, .4); --muted-on-dark: rgba(242, 242, 244, .4);
  --hairline-on-light: rgba(15, 16, 18, .1); --hairline-on-dark: rgba(242, 242, 244, .1);
  --nav-fill-light: rgba(0, 0, 0, .05); --nav-fill-dark: hsla(0, 0%, 100%, .1);
  --warrior-core: #1a1412;
  --sans: 'Satoshi', system-ui, sans-serif;
  --ease-p1: cubic-bezier(.25, .46, .45, .94);
  --ease-p2: cubic-bezier(.22, .61, .36, 1);
  --ease-p3: cubic-bezier(.16, .84, .44, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-hover: cubic-bezier(.16, 1, .3, 1);
  --gutter: 5.128vw;
}

* { box-sizing: border-box; }
html { font-size: 62.5%; scroll-behavior: auto; }
body {
  margin: 0; background: var(--grey-light); color: var(--off-black);
  font-family: var(--sans); font-weight: 400; font-size: 1.6rem; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

h1, h2, h3 { font-weight: 300; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
sup { font-size: 0.6em; }

.pi-wrap { padding-inline: var(--gutter); }
.pi-grid { display: grid; grid-template-columns: 20.5% 20.6% 41% 1fr; column-gap: 0; }
.pi-label-col { grid-column: 2; }
.pi-main-col { grid-column: 3; }
.pi-note-col { grid-column: 4; align-self: start; }

html.js { scrollbar-width: none; -ms-overflow-style: none; }
html.js::-webkit-scrollbar { width: 0; height: 0; display: none; }

[data-theme="light"] { background: var(--grey-light); color: var(--off-black); }
[data-theme="dark"] { background: var(--off-black); color: var(--off-white); }
[data-theme="blue"] { background: var(--blue); color: var(--off-white); }

.pi-hr { display: block; height: .5px; background: var(--hairline-on-dark); margin: 0; transform-origin: left; }
:is(header, section)[data-theme="light"] .pi-hr { background: var(--hairline-on-light); }

.pi-eyebrow { display: block; font-size: 1.4rem; letter-spacing: -0.01em; color: var(--muted-on-dark); }
:is(header, section)[data-theme="light"] .pi-eyebrow, :is(header, section)[data-theme="light"] .pi-muted { color: var(--muted-on-light); }
.pi-eyebrow--dim { color: inherit; opacity: .9; }
.pi-muted { color: var(--muted-on-dark); }
.pi-blue { color: var(--blue); }

/* ---- Reveal contract: data-reveal="words|lines|rise|fade|row", data-line.
   reveal.js splits words/lines and toggles one .is-in class per element;
   every transition below is pure CSS cascading from that single class. ---- */
html.js [data-reveal="words"] .pi-w {
  display: inline-block; filter: blur(10px); opacity: 0;
  transition: filter 1300ms var(--ease-p2), opacity 1300ms var(--ease-p2);
  transition-delay: calc(var(--i, 0) * 100ms);
}
html.js [data-reveal="words"].is-in .pi-w { filter: blur(0); opacity: 1; }

html.js [data-reveal="lines"] .pi-line {
  display: block; transform: translateY(50px); opacity: 0;
  transition: transform 900ms var(--ease-expo), opacity 900ms var(--ease-expo);
  transition-delay: calc(var(--i, 0) * 90ms);
}
html.js [data-reveal="lines"].is-in .pi-line { transform: none; opacity: 1; }

html.js [data-reveal="rise"] {
  transform: translateY(40px); opacity: 0;
  transition: transform 900ms var(--ease-expo), opacity 900ms var(--ease-expo);
}
html.js [data-reveal="rise"].is-in { transform: none; opacity: 1; }

html.js [data-reveal="fade"] { opacity: 0; transition: opacity 1200ms var(--ease-p2); }
html.js [data-reveal="fade"].is-in { opacity: 1; }

html.js [data-reveal="row"] { opacity: 0; transition: opacity 900ms var(--ease-p2); }
html.js [data-reveal="row"].is-in { opacity: 1; }
html.js [data-reveal="row"] [data-row-title] {
  transform: translateY(40px); opacity: 0;
  transition: transform 900ms var(--ease-expo), opacity 900ms var(--ease-expo);
}
html.js [data-reveal="row"].is-in [data-row-title] { transform: none; opacity: 1; }

html.js [data-line] { transform: scaleX(0); transform-origin: left; transition: transform 1000ms var(--ease-expo); }
html.js [data-line].is-in, html.js [data-reveal="row"].is-in [data-line] { transform: scaleX(1); }
html.js [data-reveal="row"] [data-line] { transition-duration: 900ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-reveal], html.js [data-reveal] .pi-w, html.js [data-reveal] .pi-line,
  html.js [data-reveal] [data-row-title], html.js [data-line] {
    opacity: 1; filter: none; transform: none; transition: none;
  }
}