/* ============================================================
   PICHON LABS — Luxury technology system
   Monochrome / deep black · Helvetica grotesque · whisper gold
   ============================================================ */

:root{
  /* surfaces */
  --black:#060606;
  --ink:#0a0a0b;
  --panel:#0d0d0f;
  --panel-2:#111113;
  --hair:rgba(255,255,255,.09);
  --hair-strong:rgba(255,255,255,.16);

  /* type colors */
  --white:#f4f2ec;
  --soft:#b7b4ad;
  --mute:rgba(244,242,236,.46);
  --faint:rgba(244,242,236,.26);

  /* whisper gold — accent only, never fills */
  --gold:#c8a256;
  --gold-bright:#e6cd96;
  --gold-deep:#9c7d3e;
  --gold-glow:rgba(200,162,86,.5);

  /* type */
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --gut:clamp(20px,5vw,84px);
  --maxw:1320px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--black);color:var(--white);
  font-family:var(--sans);font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  letter-spacing:-.006em;
  line-height:1.5;overflow-x:hidden;
}
body.intro-lock{overflow:hidden;height:100vh}
::selection{background:var(--gold);color:#0a0a0a}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
canvas{display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ---- type primitives ---- */
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.36em;text-transform:uppercase;color:var(--mute);
  display:inline-flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--gold);opacity:.85}
.eyebrow.no-tick::before{display:none}

.display{
  font-weight:600;line-height:.93;letter-spacing:-.043em;
  font-size:clamp(46px,8.6vw,156px);
}
h2.chapter{
  font-weight:600;line-height:.98;letter-spacing:-.035em;
  font-size:clamp(34px,5.4vw,84px);
}
h3{font-weight:600;letter-spacing:-.02em;line-height:1.05}
.lead{
  font-size:clamp(17px,1.55vw,21px);line-height:1.64;color:var(--soft);
  font-weight:400;max-width:46ch;text-wrap:pretty;
}
.gold{color:var(--gold-bright)}
.serif-i{font-style:italic}

.section{position:relative;padding:clamp(96px,15vh,200px) var(--gut)}
.wrap{max-width:var(--maxw);margin:0 auto;width:100%}

/* hairline index numerals */
.idx{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--gold);opacity:.9}

/* ---- buttons ---- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:12px;
  font-size:14px;font-weight:500;letter-spacing:.01em;
  padding:16px 26px;border-radius:2px;overflow:hidden;
  transition:transform .5s var(--ease-out),color .4s var(--ease);
  isolation:isolate;
}
.btn .ar{transition:transform .5s var(--ease-out)}
.btn:hover .ar{transform:translateX(4px)}
.btn-primary{background:var(--white);color:#0a0a0a}
.btn-primary::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,var(--gold-bright),var(--gold));
  transform:translateX(-101%);transition:transform .6s var(--ease-out);
}
.btn-primary:hover{color:#1a1306}
.btn-primary:hover::before{transform:translateX(0)}
.btn-ghost{color:var(--white);padding-left:0;padding-right:0}
.btn-ghost .line{
  position:relative;padding-bottom:4px;
}
.btn-ghost .line::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--hair-strong);transform:scaleX(1);transform-origin:right;
  transition:transform .5s var(--ease-out);
}
.btn-ghost:hover .line::after{background:var(--gold);transform-origin:left}

/* reveal system */
[data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal-d="1"]{transition-delay:.08s}
[data-reveal-d="2"]{transition-delay:.16s}
[data-reveal-d="3"]{transition-delay:.24s}
[data-reveal-d="4"]{transition-delay:.32s}
[data-reveal-d="5"]{transition-delay:.40s}

.line-mask{display:block;overflow:hidden}
.line-mask>span{display:block;transform:translateY(110%);
  transition:transform 1.1s var(--ease-out)}
.reveal-lines.in .line-mask>span{transform:none}
.reveal-lines.in .line-mask:nth-child(2)>span{transition-delay:.09s}
.reveal-lines.in .line-mask:nth-child(3)>span{transition-delay:.18s}
.reveal-lines.in .line-mask:nth-child(4)>span{transition-delay:.27s}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
  .line-mask>span{transform:none}
}