/* ════════════════════════════════════════════════════════════════
   CRAFTNEARBY V9 — GOD-LEVEL MOTION LAYER (shared, additive)
   Loaded on every page. All states are JS-gated via html.v9 class,
   so pages render perfectly with JS off. Reduced-motion = static.
   ════════════════════════════════════════════════════════════════ */

/* ---------- film grain ---------- */
.v9-grain{position:fixed;inset:-50%;width:200%;height:200%;z-index:11000;pointer-events:none;opacity:.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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:v9grain .9s steps(2) infinite}
@keyframes v9grain{0%{transform:translate(0,0)}25%{transform:translate(-2%,1%)}50%{transform:translate(1%,-2%)}75%{transform:translate(-1%,2%)}100%{transform:translate(2%,-1%)}}

/* ---------- scroll progress hairline ---------- */
.v9-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:12000;pointer-events:none;
  background:linear-gradient(90deg,#c8893a,#e5a652);transform-origin:0 50%;transform:scaleX(0);
  box-shadow:0 0 12px rgba(200,137,58,.55)}

/* ---------- page-transition veil ---------- */
.v9-veil{position:fixed;inset:0;z-index:13000;pointer-events:none;background:#0a0a0c;
  transform:translateY(101%);will-change:transform;display:flex;align-items:center;justify-content:center}
.v9-veil .pin{width:44px;height:52px;opacity:0;transform:scale(.7)}
.v9-veil.in{pointer-events:all}
html.v9-entering .v9-veil{transform:translateY(0)}

/* ---------- auto reveal system (subpages) ---------- */
html.v9 .v9-r{opacity:0;transform:translateY(34px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
html.v9 .v9-r.v9-in{opacity:1;transform:none}
html.v9 .v9-r.v9-d1{transition-delay:.07s}html.v9 .v9-r.v9-d2{transition-delay:.14s}
html.v9 .v9-r.v9-d3{transition-delay:.21s}html.v9 .v9-r.v9-d4{transition-delay:.28s}
html.v9 .v9-r.v9-d5{transition-delay:.35s}html.v9 .v9-r.v9-d6{transition-delay:.42s}

/* ---------- headline word rise (subpages) ---------- */
.v9-wline{display:inline-block;overflow:hidden;vertical-align:bottom}
.v9-w{display:inline-block;will-change:transform}
html.v9 .v9-w{transform:translateY(115%);transition:transform 1.15s cubic-bezier(.16,1,.3,1)}
html.v9 .v9-hin .v9-w{transform:translateY(0)}

/* ---------- decode label ---------- */
.v9-decode{display:inline-block;white-space:pre}

/* ---------- magnetic ---------- */
.v9-mag{will-change:transform}

/* ---------- 3D tilt cards + copper glare ---------- */
.v9-tilt{transform-style:preserve-3d;will-change:transform;position:relative}
.v9-tilt .v9-glare{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(200,137,58,.16),transparent 65%);
  transition:opacity .35s}
.v9-tilt:hover .v9-glare{opacity:1}

/* ---------- drawn copper underline ---------- */
.v9-u{position:relative;display:inline-block}
.v9-u svg{position:absolute;left:-2%;bottom:-.12em;width:104%;height:.32em;overflow:visible;pointer-events:none}
.v9-u svg path{fill:none;stroke:#c8893a;stroke-width:2.2;stroke-linecap:round;opacity:.85}

/* ---------- nav conversion CTA (injected on subpages) ---------- */
.v9-navcta{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;
  letter-spacing:.02em;background:#0a0a0c;color:#f6f4ef!important;padding:9px 16px;border-radius:100px;
  transition:background .3s,transform .3s cubic-bezier(.16,1,.3,1);white-space:nowrap}
.v9-navcta:hover{background:#c8893a;transform:translateY(-1px)}
.v9-navcta em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;color:#e5a652}
@media(max-width:560px){.v9-navcta{display:none}}

/* rail UI base state — hidden everywhere; the ≥1024px rail mode reveals it */
.v9-railbar{display:none}
/* endcap — the field-guide's closing plate (styled at every size; on
   mobile it simply becomes the 9th grid tile) */
.v9-endcap{background:#0a0a0c!important;display:flex;flex-direction:column;
  justify-content:space-between;padding:28px;text-decoration:none}
.v9-endcap .fin{font-family:'Instrument Serif',Georgia,serif;font-style:italic;
  font-size:clamp(30px,3.4vw,52px);color:#f6f4ef;line-height:1.05}
.v9-endcap .fin b{color:#c8893a;font-weight:400}
.v9-endcap .go{font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:#c8893a;display:inline-flex;
  align-items:center;gap:10px}
.v9-endcap .go i{font-style:normal;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.v9-endcap:hover .go i{transform:translateX(6px)}
.v9-endcap .plate{font-family:'Geist Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(246,244,239,.4)}

/* ════════════════════════════════════════════════════════════════
   INDEX — CATS SECTION → PINNED HORIZONTAL CINEMATIC RAIL (≥1024px)
   v2 — every part of the scene is sized off the VIEWPORT, so the
   pinned frame composes perfectly on any screen height.
   Scene anatomy (exactly 100vh):
     top strip   : eyebrow ←→ counter + progress track   (~10vh)
     head row    : h2 ←→ 2-line lede                     (~24vh)
     the shelf   : cards at 52vh, sliding horizontally    (rest)
   ════════════════════════════════════════════════════════════════ */
@media(min-width:1024px){
  html.v9-rail .cats{overflow:clip;padding:0!important;perspective:none}
  html.v9-rail .cats-inner{display:flex;flex-direction:column;justify-content:center;
    height:100vh;max-width:none;margin:0;
    padding:clamp(18px,4vh,44px) 0 clamp(16px,3.5vh,36px) clamp(28px,5vw,84px);
    gap:clamp(14px,3vh,34px)}

  /* top strip — eyebrow left, railbar right (v9.js moves them together) */
  html.v9-rail .v9-topstrip{display:flex;align-items:center;justify-content:space-between;
    gap:24px;padding-right:clamp(28px,5vw,84px)}
  html.v9-rail .v9-topstrip .section-eyebrow{margin:0}

  /* compact head — h2 left, clamped lede right, baseline-aligned */
  html.v9-rail .cats-head{display:grid;grid-template-columns:auto minmax(0,420px);
    align-items:end;gap:clamp(28px,4vw,70px);margin:0;max-width:none;
    padding-right:clamp(28px,5vw,84px)}
  html.v9-rail .cats-head h2{font-size:clamp(30px,4.6vw,62px)}
  html.v9-rail .cats-head .lede{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
    overflow:hidden;font-size:14px;max-width:46ch}
  @media(max-height:700px){html.v9-rail .cats-head .lede{-webkit-line-clamp:2}}
  @media(max-height:600px){html.v9-rail .cats-head .lede{display:none}}

  /* the shelf — card height driven by viewport, never taller than fits */
  html.v9-rail .cats-grid{display:flex!important;flex-wrap:nowrap!important;
    gap:clamp(14px,1.6vw,26px);width:max-content;margin:0;align-items:stretch;
    background:none;border:none;will-change:transform}
  html.v9-rail .cat-card{height:clamp(280px,52vh,560px);width:auto;aspect-ratio:1/1.2;
    flex:0 0 auto;border:1px solid var(--hair-faint,#e8e6df);
    transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .6s cubic-bezier(.16,1,.3,1)}
  html.v9-rail .cat-card .cat-photo{will-change:transform}
  /* live card — the one under the counter gets presence */
  html.v9-rail .cat-card.v9-live{transform:translateY(-8px);
    box-shadow:0 40px 90px -30px rgba(0,0,0,.55),0 0 0 1px rgba(201,162,75,.55)}
  html.v9-rail .cat-card.v9-live .cat-photo{transform:scale(1.1)}

  /* progress rail + counter (lives in the top strip now) */
  html.v9-rail .v9-railbar{display:flex;align-items:center;gap:16px;margin:0;
    width:min(380px,32vw)}
  .v9-railbar .track{flex:1;height:1px;background:rgba(10,10,12,.15);position:relative}
  .v9-railbar .fill{position:absolute;inset:0;background:linear-gradient(90deg,#c8893a,#e5a652);
    transform-origin:0 50%;transform:scaleX(0)}
  .v9-railbar .count{font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.18em;
    color:#6b6b70;font-variant-numeric:tabular-nums;white-space:nowrap}
  .v9-railbar .count b{color:#0a0a0c;font-weight:500}
  .v9-railbar .hint{font-family:'Geist Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.22em;
    text-transform:uppercase;color:#98989e;white-space:nowrap}
  @media(max-width:1240px){.v9-railbar .hint{display:none}}
}

/* ════════════════════════════════════════════════════════════════
   WAITLIST — empty-state email capture (business layer)
   ════════════════════════════════════════════════════════════════ */
.v9-wait{max-width:620px;margin:34px auto 0;border:1px solid #d8d6cf;background:#fff;
  border-radius:4px;padding:clamp(24px,4vw,40px);text-align:left;position:relative;overflow:hidden}
.v9-wait::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,#c8893a,#e5a652)}
.v9-wait .tag{font-family:'Geist Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:#98989e;display:flex;align-items:center;gap:10px;margin-bottom:14px}
.v9-wait .tag::before{content:"";width:6px;height:6px;border-radius:50%;background:#c8893a;
  box-shadow:0 0 8px rgba(200,137,58,.5)}
.v9-wait h4{font-size:clamp(20px,2.6vw,26px);font-weight:400;letter-spacing:-.02em;line-height:1.15;
  margin-bottom:8px;color:#0a0a0c}
.v9-wait h4 em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;color:#c8893a}
.v9-wait p{font-size:14.5px;line-height:1.55;color:#6b6b70;max-width:44ch;margin-bottom:20px}
.v9-wait form{display:flex;gap:8px;flex-wrap:wrap}
.v9-wait input[type=email]{flex:1;min-width:220px;height:46px;padding:0 16px;border:1px solid #d8d6cf;
  border-radius:4px;background:#f6f4ef;font-family:'Geist',sans-serif;font-size:15px;color:#0a0a0c;
  outline:none;transition:border-color .3s,box-shadow .3s}
.v9-wait input[type=email]:focus{border-color:#c8893a;box-shadow:0 0 0 3px rgba(200,137,58,.14);background:#fff}
.v9-wait input[type=email].err{border-color:#b3654a;box-shadow:0 0 0 3px rgba(179,101,74,.14)}
.v9-wait button{height:46px;padding:0 22px;border:none;border-radius:4px;background:#0a0a0c;color:#f6f4ef;
  font-family:'Geist',sans-serif;font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap;
  transition:background .3s,transform .25s cubic-bezier(.16,1,.3,1)}
.v9-wait button:hover{background:#c8893a}
.v9-wait button:active{transform:translateY(1px)}
.v9-wait button[disabled]{opacity:.55;cursor:default}
.v9-wait .note{font-family:'Geist Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.06em;
  color:#98989e;margin-top:12px}
.v9-wait .msg{font-size:13.5px;margin-top:10px;line-height:1.5;display:none}
.v9-wait .msg.err{display:block;color:#b3654a}
.v9-wait .hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
/* success state */
.v9-wait.done form,.v9-wait.done .note{display:none}
.v9-wait .ok{display:none;align-items:flex-start;gap:14px}
.v9-wait.done .ok{display:flex}
.v9-wait .ok svg{flex:none;width:34px;height:34px}
.v9-wait .ok svg path{stroke:#c8893a;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:40;stroke-dashoffset:40;animation:v9check .7s cubic-bezier(.16,1,.3,1) .1s forwards}
@keyframes v9check{to{stroke-dashoffset:0}}
.v9-wait .ok b{display:block;font-size:16px;font-weight:500;color:#0a0a0c;margin-bottom:4px}
.v9-wait .ok span{font-size:13.5px;color:#6b6b70;line-height:1.5}

/* ---------- reduced motion: everything static & visible ---------- */
@media(prefers-reduced-motion:reduce){
  .v9-grain,.v9-progress,.v9-veil{display:none!important}
  html.v9 .v9-r{opacity:1!important;transform:none!important;transition:none!important}
  html.v9 .v9-w{transform:none!important;transition:none!important}
  .v9-u svg path{stroke-dashoffset:0!important}
}