/* ============================================================
   NICHEN — SOTAM · scroll-scrubbed film (plant → factory)
   three.js particle title + anime.js reveals
   ============================================================ */
:root{
  --ink:#0b0f0a; --olive:#1b2616; --sage:#8b9578;
  --cream:#f1ebdd; --cream-dim:#b9b3a4;
  --gold:#d8b24a; --gold-lite:#ecc766; --gold-deep:#a07d24;
  --hair:rgba(216,178,74,0.22); --hair-soft:rgba(241,235,221,0.10);
  --serif:"Fraunces",Georgia,serif; --sans:"Manrope",system-ui,sans-serif;
  --ease:cubic-bezier(.16,.84,.32,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--ink);color:var(--cream);font-family:var(--sans);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;}
::selection{background:var(--gold);color:var(--ink);}
a{color:inherit;text-decoration:none;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- fixed film stage ---------- */
.stage{position:fixed;inset:0;z-index:1;overflow:hidden;background:#050703;}
.film{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;height:100%;object-fit:cover;object-position:center 46%;}
.stage__vignette{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,7,4,.72) 0%,rgba(5,7,4,.15) 26%,transparent 42%,transparent 58%,rgba(5,7,4,.15) 74%,rgba(5,7,4,.72) 100%),
    linear-gradient(180deg,rgba(5,7,4,.5) 0%,transparent 22%,transparent 62%,rgba(5,7,4,.72) 100%),
    radial-gradient(ellipse 80% 70% at 50% 46%,transparent 46%,rgba(4,6,3,.4) 86%,rgba(4,6,3,.85) 100%);}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---------- three.js title canvas ---------- */
.gl{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease);}
.gl.is-on{opacity:1;}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:100;background:var(--ink);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:26px;color:var(--gold);
  transition:opacity .9s var(--ease),visibility .9s;}
.loader.is-done{opacity:0;visibility:hidden;}
.loader__logo{width:min(300px,66vw);height:auto;animation:breathe 3s ease-in-out infinite;}
@keyframes breathe{50%{transform:translateY(-6px);}}
.loader__bar{width:180px;height:2px;background:var(--hair-soft);overflow:hidden;}
.loader__bar span{display:block;height:100%;width:0;background:var(--gold);box-shadow:0 0 12px var(--gold);}
.loader__label{font-size:.72rem;letter-spacing:.42em;color:var(--cream-dim);padding-left:.42em;}

/* ---------- chrome ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;padding:16px clamp(20px,4vw,54px) 30px;
  background:linear-gradient(180deg,rgba(6,9,5,.94) 0%,rgba(6,9,5,.72) 45%,rgba(6,9,5,.32) 78%,transparent 100%);}
.brand{display:flex;align-items:center;gap:11px;}
.brand__logo{height:60px;width:auto;display:block;filter:drop-shadow(0 2px 10px rgba(0,0,0,.6));}
.topnav{display:flex;gap:30px;}
.topnav a{font-size:.82rem;letter-spacing:.04em;color:var(--cream-dim);transition:color .3s;}
.topnav a:hover{color:var(--cream);}
.topbar__cta{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;padding:9px 18px;
  border:1px solid var(--hair);border-radius:100px;color:var(--gold-lite);transition:.3s var(--ease);white-space:nowrap;}
.topbar__cta:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);}

.oilgauge{position:fixed;left:clamp(20px,4vw,54px);bottom:40px;z-index:20;display:flex;
  align-items:center;gap:16px;writing-mode:vertical-rl;}
.oilgauge__track{position:relative;height:150px;width:2px;background:var(--hair-soft);
  border-radius:2px;overflow:hidden;writing-mode:horizontal-tb;}
.oilgauge__fill{position:absolute;left:0;bottom:0;width:100%;height:0%;
  background:linear-gradient(to top,var(--gold-deep),var(--gold-lite));box-shadow:0 0 10px var(--gold);}
.oilgauge__chapter{font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--cream-dim);transform:rotate(180deg);}

/* ---------- panels ---------- */
.panel{position:relative;z-index:5;min-height:118vh;display:flex;align-items:center;
  padding:120px clamp(20px,6vw,110px);pointer-events:none;}
.panel--hero{min-height:100vh;}
.panel a,.panel button{pointer-events:auto;}
.panel--right{justify-content:flex-end;}
.panel--left{justify-content:flex-start;}
.panel--center,.panel--products,.panel--footer{justify-content:center;}

.eyebrow{font-size:.74rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin-bottom:22px;display:flex;align-items:center;gap:12px;}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);opacity:.6;}
.panel--center .eyebrow{justify-content:center;}

.display{font-family:var(--serif);font-weight:300;font-size:clamp(2.7rem,7.4vw,6.4rem);
  line-height:.96;letter-spacing:-.02em;color:var(--cream);text-shadow:0 4px 40px rgba(0,0,0,.6);}
.display em{font-style:italic;font-weight:400;color:var(--gold-lite);}
.display--md{font-size:clamp(2.4rem,5.5vw,4.6rem);}
.display__sub{display:block;}
.h2{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,4vw,3.4rem);line-height:1.04;
  letter-spacing:-.015em;margin-bottom:22px;color:var(--cream);text-shadow:0 4px 30px rgba(0,0,0,.6);}
.h2 em{font-style:italic;color:var(--gold-lite);}
.lede{max-width:34ch;font-size:clamp(1rem,1.3vw,1.18rem);color:var(--cream-dim);margin-top:30px;}
.body{max-width:46ch;color:var(--cream-dim);font-size:1.02rem;}
.body strong{color:var(--cream);font-weight:600;}
.body--center{margin:22px auto 0;text-align:center;}
.link{display:inline-block;margin-top:26px;font-size:.9rem;color:var(--gold-lite);
  border-bottom:1px solid var(--hair);padding-bottom:3px;transition:.3s var(--ease);}
.link:hover{color:var(--cream);border-color:var(--gold);}

.hero{max-width:660px;}

/* ---------- centered sparkle hero ---------- */
.panel--hero{justify-content:center;text-align:center;}
.hero--center{max-width:920px;width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:center;}
.hero--center .eyebrow{justify-content:center;}
.hero--center .hero__scroll{justify-content:center;}
.hero__word{width:min(780px,90vw);height:clamp(96px,17vh,196px);margin:10px 0 6px;}
.hero__word .sr-only{}
.hero__tag{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,3.3vw,2.8rem);
  line-height:1.12;letter-spacing:-.01em;color:var(--cream);max-width:22ch;}
.hero__tag em{font-style:italic;color:var(--gold-lite);}
.lede--center{margin-left:auto;margin-right:auto;text-align:center;max-width:50ch;}

.hero__scroll{margin-top:52px;display:flex;align-items:center;gap:14px;font-size:.76rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sage);}
.hero__scrollline{width:46px;height:1px;background:var(--sage);position:relative;overflow:hidden;}
.hero__scrollline::after{content:"";position:absolute;inset:0;width:40%;background:var(--gold);
  animation:scrollpulse 2.2s var(--ease) infinite;}
@keyframes scrollpulse{0%{transform:translateX(-120%);}100%{transform:translateX(320%);}}

.block{max-width:460px;}
.block--wide{max-width:1100px;width:100%;}
.award{max-width:720px;text-align:center;}

/* About / process rows with image */
.block--about{display:flex;align-items:center;gap:44px;max-width:860px;}
.block--about-rev{flex-direction:row-reverse;}
.about__img{width:250px;flex-shrink:0;border-radius:8px;border:1px solid var(--hair);
  box-shadow:0 26px 70px rgba(0,0,0,.6);}
.about__img--wide{width:360px;}
.about__text{max-width:420px;}
@media(max-width:860px){
  .block--about,.block--about-rev{flex-direction:column;align-items:flex-start;gap:24px;}
  .about__img,.about__img--wide{width:100%;max-width:320px;}
}

.stats{list-style:none;display:flex;gap:38px;margin-top:34px;flex-wrap:wrap;}
.stats li{display:flex;flex-direction:column;}
.stats strong{font-family:var(--serif);font-weight:400;font-size:2rem;color:var(--gold-lite);}
.stats span{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim);margin-top:4px;}

/* certifications */
.certs{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:38px;}
.certs li{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lite);
  border:1px solid var(--hair);border-radius:100px;padding:10px 20px;background:rgba(8,11,7,.5);
  backdrop-filter:blur(6px);transition:.35s var(--ease);}
.certs li:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);}

.products__hero{width:100%;max-width:1100px;margin-top:34px;border-radius:10px;
  border:1px solid var(--hair);box-shadow:0 30px 80px rgba(0,0,0,.6);display:block;}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:1px;
  background:var(--hair-soft);border:1px solid var(--hair-soft);}
.card{background:rgba(8,11,7,.72);backdrop-filter:blur(6px);padding:38px 30px 46px;display:flex;
  flex-direction:column;min-height:230px;transition:.4s var(--ease);}
.card:hover{background:rgba(27,38,22,.82);transform:translateY(-4px);}
.card__no{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:.95rem;}
.card__name{font-family:var(--serif);font-weight:300;font-size:1.7rem;line-height:1.1;margin-top:auto;color:var(--cream);}
.card__meta{font-size:.82rem;letter-spacing:.03em;color:var(--cream-dim);margin-top:12px;line-height:1.5;}

.foot{max-width:1040px;width:100%;text-align:center;}
.foot__grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin:60px 0 46px;
  text-align:left;border-top:1px solid var(--hair-soft);padding-top:44px;}
.foot__grid > div{flex:1;min-width:230px;}
.foot__grid .eyebrow{justify-content:flex-start;}
.foot__big{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,2.6vw,2.1rem);
  color:var(--cream);margin-top:6px;}
.foot__big:hover{color:var(--gold-lite);}
.foot__mail{display:block;color:var(--cream-dim);margin-top:10px;word-break:break-word;}
.foot__mail:hover{color:var(--gold-lite);}
.foot__note{font-size:.8rem;color:var(--sage);margin-top:8px;letter-spacing:.04em;}
.foot__addr{color:var(--cream-dim);margin-top:6px;line-height:1.7;}
.foot__legal{font-size:.76rem;color:var(--sage);letter-spacing:.04em;margin-top:10px;}

.reveal,.reveal-block{opacity:0;transform:translateY(26px);}
.reveal.is-in,.reveal-block.is-in{opacity:1;transform:none;
  transition:opacity 1s var(--ease),transform 1s var(--ease);}

/* ---------- legibility scrims ---------- */
.hero,.block,.award,.foot{position:relative;isolation:isolate;}
.hero::before,.block::before,.award::before,.foot::before{
  content:"";position:absolute;inset:-48px -70px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(5,8,4,.82) 0%,rgba(5,8,4,.6) 46%,rgba(5,8,4,.28) 66%,transparent 80%);
  filter:blur(14px);}
.body,.lede{color:#e6ded0;text-shadow:0 2px 14px rgba(0,0,0,.75);}
.display,.h2{text-shadow:0 3px 26px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.5);}
.eyebrow,.hero__scroll,.card__meta,.stats span,.foot__legal{text-shadow:0 1px 8px rgba(0,0,0,.7);}
.card__name,.foot__big,.foot__mail,.foot__addr{text-shadow:0 2px 12px rgba(0,0,0,.7);}

@media (max-width:860px){
  .topnav{display:none;}
  .cards{grid-template-columns:1fr;}
  .panel{padding:110px 22px;}
  .oilgauge{display:none;}
  .foot__grid{flex-direction:column;gap:30px;}
  .brand__logo{height:48px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;}
  .reveal,.reveal-block{opacity:1;transform:none;}
}