/* ============ TRANSFORMATION PASS — hero as event, weave as narrative ============ */
:root{ --gold:#C8A96A; --gold-hi:#E9D5A3; --gold-dim:rgba(200,169,106,.5); }
html{scroll-padding-top:84px}
body{overflow-x:hidden}
/* --- HERO: full viewport flagship reveal --- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:56px 24px 72px;position:relative;isolation:isolate}
@media(max-width:640px){.hero{padding:40px 18px 56px;min-height:auto}}
.thread-field{position:absolute;inset:0;z-index:-2;overflow:hidden;background:radial-gradient(120% 90% at 70% 0%,#1B1812 0%,#0E0D0B 55%)}
.thread-field canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cloth-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,13,11,.25) 0%,rgba(14,13,11,0) 30%,rgba(14,13,11,.55) 78%,var(--paper) 100%);pointer-events:none}
.fabric-wordmark{position:relative;z-index:1;font-weight:900;font-size:clamp(84px,17.5vw,248px);line-height:.82;letter-spacing:-.055em;color:transparent;-webkit-text-stroke:1px rgba(233,213,163,.34);margin:6px 0 10px;user-select:none;animation:wordIn 1.6s cubic-bezier(.22,1,.36,1) both .25s}
.fabric-wordmark::after{content:"FABRIC";position:absolute;inset:0;color:var(--ink);-webkit-text-stroke:0;clip-path:inset(0 100% 0 0);animation:wordFill 2.4s cubic-bezier(.65,0,.25,1) both .7s}
@keyframes wordFill{to{clip-path:inset(0 0 0 0)}}
@keyframes wordIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero .pill{animation:wordIn 1.1s cubic-bezier(.22,1,.36,1) both .1s}
.hero h1{font-size:clamp(44px,6.4vw,76px);animation:wordIn 1.2s cubic-bezier(.22,1,.36,1) both .9s}
.hero p.lead{animation:wordIn 1.2s cubic-bezier(.22,1,.36,1) both 1.1s}
.hero .qual,.hero .cta-row,.hero .micro{animation:wordIn 1.2s cubic-bezier(.22,1,.36,1) both 1.3s}
.hero .scarcity{animation:wordIn 1.2s cubic-bezier(.22,1,.36,1) both 1.5s}
.hero-grid{animation:wordIn 1.4s cubic-bezier(.22,1,.36,1) both 1s}
/* editorial section numbering */
.sec-num{display:inline-block;font-size:11px;letter-spacing:.24em;font-weight:800;color:var(--muted);margin-right:12px;font-style:normal}
.sec-num::after{content:"";display:inline-block;width:34px;height:1px;background:var(--gold-dim);vertical-align:middle;margin-left:12px}
/* --- weave states per section --- */
.weave-loose{position:relative}
.weave-loose::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='120'%3E%3Cg fill='none' stroke='%23C8A96A' stroke-opacity='.13'%3E%3Cpath d='M-10 22 C 90 4, 180 44, 430 14'/%3E%3Cpath d='M-10 66 C 110 92, 240 38, 430 74'/%3E%3Cpath d='M-10 104 C 80 84, 260 122, 430 96'/%3E%3C/g%3E%3C/svg%3E");background-size:420px 120px}
.weave-tight{position:relative}
.weave-tight::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;background-image:repeating-linear-gradient(0deg,rgba(200,169,106,.055) 0 1px,transparent 1px 14px),repeating-linear-gradient(90deg,rgba(200,169,106,.055) 0 1px,transparent 1px 14px)}
.weave-loose>*,.weave-tight>*{position:relative}
/* --- choreographed reveals --- */
.rv{opacity:0;transform:translateY(30px);transition:opacity 1.05s cubic-bezier(0.2,0,0,1),transform 1.05s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}
.rv-l{opacity:0;transform:translateX(-38px);transition:opacity 1.05s cubic-bezier(0.2,0,0,1),transform 1.05s cubic-bezier(.22,1,.36,1)}
.rv-r{opacity:0;transform:translateX(38px);transition:opacity 1.05s cubic-bezier(0.2,0,0,1),transform 1.05s cubic-bezier(.22,1,.36,1)}
.rv-l.in,.rv-r.in{opacity:1;transform:none}
/* --- NOT list: strike with intent --- */
.not-card h3{position:relative;display:inline-block}
.not-card .strike{position:absolute;left:-4px;right:-4px;top:54%;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left center;transition:transform .8s cubic-bezier(.65,0,.25,1) .35s;border-radius:2px}
.not-card.struck .strike{transform:scaleX(1)}
.not-card.yes .strike{display:none}
/* --- math: dramatic build --- */
.math-thread{height:2px;background:rgba(244,239,227,.1);border-radius:2px;overflow:hidden;margin-top:26px}
.math-thread i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-dim),var(--gold-hi));transition:width 2.2s cubic-bezier(.22,1,.36,1)}
.math-thread.full i{width:100%}
.math-card .big{font-size:clamp(40px,4.6vw,58px)}
/* --- modules assemble (hidden state applied by script only, below-fold only) --- */
.carrot.pre{opacity:0;transform:translateX(44px)}
.carrot.in{opacity:1;transform:none;transition:opacity .9s cubic-bezier(0.2,0,0,1),transform .9s cubic-bezier(.22,1,.36,1)}
/* huge section heads + vast space */
section{padding:110px 0}
@media(max-width:640px){section{padding:72px 0}}
h2{font-size:clamp(34px,4.8vw,56px)}
.thread-rule{display:none}
@media (prefers-reduced-motion: reduce){
  .fabric-wordmark,.fabric-wordmark::after,.hero .pill,.hero h1,.hero p.lead,.hero .qual,.hero .cta-row,.hero .micro,.hero .scarcity,.hero-grid{animation:none!important}
  .fabric-wordmark::after{clip-path:none}
  .rv,.rv-l,.rv-r,.carrot{opacity:1!important;transform:none!important;transition:none!important}
  .not-card .strike{transition:none!important}
  .math-thread i{transition:none!important;width:100%}
}