/* Nail page signature: a macro set, file to chrome, pinned on scroll. Driven by src/scene-nails.js (sets --o on [data-j]). */
.nsc{position:relative;height:600vh;padding:0;background:#100b0a;color:#fff}
.nsc-stick{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;
  background:radial-gradient(70% 75% at 68% 42%,#2e1f1c 0,#181010 48%,#100b0a 82%)}
.nsc-gl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
/* a soft scrim so the captions never sit on a bright subject */
.nsc-stick::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(16,11,10,.82) 0,rgba(16,11,10,.5) 30%,rgba(16,11,10,0) 48%)}
.nsc-copy{position:relative;z-index:1;height:100%;pointer-events:none}
.nsc [data-j]{opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 26px));will-change:opacity,transform}
.nsc-layer,.nsc-end{position:absolute;left:32px;top:50%;translate:0 -50%;width:min(450px,36vw)}
.nsc .eyebrow{color:rgba(255,255,255,.58)}
.nsc h2{font:800 clamp(42px,5vw,72px)/.98 "Inter Tight";letter-spacing:-.045em;margin-top:18px}
.nsc h3{font:800 clamp(34px,4vw,56px)/1 "Inter Tight";letter-spacing:-.04em}
.nsc em{font:italic 400 1.08em/.9 "Instrument Serif";letter-spacing:-.01em;color:var(--spot)}
.nsc-layer p{margin-top:20px;font-size:18px;line-height:1.55;color:rgba(255,255,255,.7);max-width:420px;text-shadow:0 2px 20px rgba(16,11,10,.8)}
.nsc-n{display:block;margin-bottom:16px;font:700 12px/1 Inter;letter-spacing:.2em;text-transform:uppercase;color:var(--spot)}
.nsc-call{font-size:clamp(44px,5.4vw,82px)!important;line-height:.95!important}
.nsc-call em{display:inline-block;text-shadow:0 0 50px rgba(var(--spot-rgb),.45)}
.nsc-sub{margin-top:22px;font-size:18px;line-height:1.5;color:rgba(255,255,255,.72);max-width:400px}
.nsc-cta{margin-top:28px;pointer-events:auto}
/* no WebGL: the finished set as a still, the copy still runs on scroll */
.nsc-no3d .nsc-gl,.nsc-no3d .nsc-stick::after{display:none}
.nsc-no3d .nsc-stick{background:linear-gradient(90deg,rgba(16,11,10,.92) 0,rgba(16,11,10,.55) 45%,rgba(16,11,10,0) 70%),url(/img/scene-nails.webp) 70% 50%/cover no-repeat,#100b0a}

@media (max-width:760px){
  .nsc-stick::after{background:linear-gradient(180deg,rgba(16,11,10,.85) 0,rgba(16,11,10,.55) 24%,rgba(16,11,10,0) 40%)}
  .nsc{height:560vh}
  .nsc-stick{background:radial-gradient(120% 60% at 50% 66%,#2e1f1c 0,#181010 50%,#100b0a 85%)}
  .nsc-layer{left:16px;right:16px;top:94px;translate:none;width:auto}
  .nsc h2{font-size:clamp(34px,10vw,46px);margin-top:12px}
  .nsc h3{font-size:clamp(30px,8.6vw,40px)}
  .nsc-layer p{margin-top:10px;font-size:15.5px;line-height:1.5}
  .nsc-n{margin-bottom:10px}
  .nsc-end{left:16px;right:16px;top:94px;bottom:26px;translate:none;width:auto;display:flex;flex-direction:column}
  .nsc-call{font-size:clamp(36px,10.5vw,50px)!important}
  .nsc-sub{margin-top:auto;font-size:15.5px}
  .nsc-cta{margin-top:14px;align-self:flex-start}
  .nsc-no3d .nsc-stick{background:linear-gradient(180deg,rgba(16,11,10,.95) 0,rgba(16,11,10,.4) 50%,rgba(16,11,10,.1) 100%),url(/img/scene-nails.webp) 50% 70%/cover no-repeat,#100b0a}
}
@media (prefers-reduced-motion:reduce){
  .nsc{height:auto}
  .nsc-stick{position:relative;height:100svh;min-height:620px}
  .nsc [data-j]{transform:none}
}