/* Clay and depth layer (local preview, 2026-10-10): puffy surfaces (inner highlight + inner shade + soft drop),
   recessed art trays, floating objects. js/nenya-v2.js sets --py (scroll) and --mx/--my (pointer) on .dp. Loaded last. */

.nv2{--clay-hi:inset 6px 6px 14px rgba(255,255,255,.85);--clay-lo:inset -7px -7px 16px rgba(35,31,43,.10);--clay-drop:0 22px 44px rgba(35,31,43,.16),0 6px 14px rgba(35,31,43,.08)}
.dp{display:block;transform:translate3d(var(--mx,0px),calc(var(--py,0px) + var(--my,0px)),0);transition:transform .25s ease-out;will-change:transform}
.fl{display:block;animation:cl-float 7s ease-in-out infinite}
@keyframes cl-float{0%,100%{transform:translateY(0) rotate(var(--r0,0deg))}50%{transform:translateY(-10px) rotate(var(--r1,0deg))}}

/* Clay objects over the hero art */
.cl-deco{position:absolute;inset:0;z-index:1;pointer-events:none}
.cl-deco .dp{position:absolute}
.cl-pos-1{right:9%;top:14%}
.cl-pos-2{right:30%;top:44%}
.cl-pos-3{right:6%;top:58%}
.cl-pos-4{right:42%;top:18%}
.cl-sphere{width:86px;height:86px;border-radius:50%}
.cl-sm{width:38px;height:38px}
.cl-gold{background:radial-gradient(circle at 32% 28%,#FFF3B8 0,#F4CE46 38%,#D9A91E 100%);box-shadow:inset -10px -12px 22px rgba(120,80,0,.25),inset 8px 8px 16px rgba(255,255,255,.55),0 26px 40px rgba(35,31,43,.22)}
.cl-ultra{background:radial-gradient(circle at 32% 28%,#A9A5FF 0,#3A34E6 45%,#231FA8 100%);box-shadow:inset -6px -7px 12px rgba(0,0,40,.3),inset 4px 4px 9px rgba(255,255,255,.35),0 16px 26px rgba(35,31,43,.22);animation-delay:-2.5s}
.cl-cube{width:70px;height:70px;border-radius:22px;--r0:-12deg;--r1:-4deg;background:linear-gradient(145deg,#D6CBE8,#B6A5CF 60%,#9A88B8);box-shadow:inset -8px -9px 18px rgba(60,40,90,.25),inset 7px 7px 14px rgba(255,255,255,.6),0 24px 38px rgba(35,31,43,.2);animation-delay:-1.2s;animation-duration:8s}
.cl-capsule{width:120px;height:46px;border-radius:999px;--r0:18deg;--r1:24deg;background:linear-gradient(160deg,#FFD08A,#F0AE45 55%,#D88F22);box-shadow:inset -8px -9px 16px rgba(120,60,0,.22),inset 7px 7px 14px rgba(255,255,255,.55),0 24px 38px rgba(35,31,43,.2);animation-delay:-4s;animation-duration:9s}

/* Product window: clay frame, chips floating on its corners */
.cl-stage{position:relative}
.cl-chips .dp{position:absolute;z-index:4}
.cl-chip-1{right:clamp(8px,4vw,60px);top:-26px}
.cl-chip-2{left:clamp(14px,2.4vw,34px);bottom:-22px}
.cl-chip{padding:12px 18px;border-radius:999px;background:#FFFDF9;color:var(--plum);font:normal 500 14px/1 var(--sans);white-space:nowrap;box-shadow:var(--clay-hi),var(--clay-lo),var(--clay-drop)}
.cl-chip-blue{background:var(--ultra);color:var(--chalk);box-shadow:inset 5px 5px 12px rgba(255,255,255,.35),inset -6px -6px 14px rgba(0,0,40,.3),0 22px 40px rgba(35,31,43,.22);animation-delay:-3s}
.nv2-shot{border-radius:26px;box-shadow:inset 0 2px 0 rgba(255,255,255,.9),inset 0 -6px 14px rgba(35,31,43,.06),0 40px 80px rgba(20,28,48,.20),0 12px 28px rgba(20,28,48,.12);animation:cl-float-sm 9s ease-in-out infinite}
@keyframes cl-float-sm{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.sh-side{background:linear-gradient(180deg,#F6F2EA,#EFEAE1)}
.sh-ag.on{border-radius:12px;box-shadow:var(--clay-hi),inset -3px -3px 8px rgba(35,31,43,.06),0 4px 10px rgba(35,31,43,.08)}
.sh-ag b{border-radius:9px;box-shadow:inset 2px 2px 4px rgba(255,255,255,.35),inset -2px -2px 5px rgba(0,0,0,.2)}
.sh-card{border:0;border-radius:18px;background:#FFFDF9;box-shadow:var(--clay-hi),var(--clay-lo),0 8px 18px rgba(35,31,43,.06)}
.sh-prog{height:12px;border-radius:999px;box-shadow:inset 2px 2px 5px rgba(35,31,43,.12),inset -2px -2px 5px rgba(255,255,255,.8)}
.sh-prog i{border-radius:999px;box-shadow:inset 2px 2px 4px rgba(255,255,255,.35),inset -2px -3px 5px rgba(0,0,40,.25)}
.sh-on{box-shadow:inset 2px 2px 5px rgba(255,255,255,.7),inset -2px -2px 5px rgba(58,52,230,.15)}

/* Clay buttons in the hero and install */
.nv2-hero .btn,.nv2-install .btn{border:0;transition:transform .2s var(--ease),box-shadow .2s}
.nv2-hero .btn.primary,.nv2-install .btn.primary{box-shadow:inset 4px 4px 10px rgba(255,255,255,.18),inset -5px -6px 12px rgba(0,0,0,.35),0 14px 26px rgba(35,31,43,.25)}
.nv2-hero .btn.ghost{background:#FFFDF9;box-shadow:var(--clay-hi),var(--clay-lo),0 12px 24px rgba(35,31,43,.12)}
.nv2-hero .btn:hover,.nv2-install .btn:hover{transform:translateY(-2px)}

/* Statement: soft clay type */
.nv2-split .nv2-line{text-shadow:0 2px 0 rgba(255,255,255,.7),0 18px 34px rgba(35,31,43,.16)}

/* Board: art becomes a recessed tray; cards are raised clay that bob out of step */
.bd-board{border-radius:30px;padding:20px;gap:16px;box-shadow:inset 0 10px 24px rgba(35,31,43,.22),inset 0 -6px 14px rgba(255,255,255,.35),0 1px 0 rgba(255,255,255,.8)}
.mini{border-radius:22px;box-shadow:var(--clay-hi),var(--clay-lo),var(--clay-drop);animation:cl-float-sm 8s ease-in-out infinite;transition:box-shadow .25s}
.mini:nth-child(2){animation-delay:-2s}
.mini:nth-child(3){animation-delay:-4s}
.mini:nth-child(4){animation-delay:-6s}
.mini:hover{animation-play-state:paused;box-shadow:var(--clay-hi),var(--clay-lo),0 34px 60px rgba(35,31,43,.22),0 10px 20px rgba(35,31,43,.1)}
.mn-rule,.mn-doc,.mn-back,.mn-tok,.mn-dot{box-shadow:inset 2px 2px 4px rgba(255,255,255,.3),inset -2px -2px 5px rgba(0,0,0,.25)}
.mn-track b,.mn-who,.mn-rec{box-shadow:inset 2px 2px 4px rgba(255,255,255,.8),inset -2px -2px 5px rgba(35,31,43,.1),0 3px 6px rgba(35,31,43,.08)}
.mn-prog,.mn-run{height:12px;border-radius:999px;box-shadow:inset 2px 2px 5px rgba(35,31,43,.12),inset -2px -2px 5px rgba(255,255,255,.8)}
.mn-prog .mn-fill,.mn-run .mn-fill{border-radius:999px;box-shadow:inset 2px 2px 4px rgba(255,255,255,.35),inset -2px -3px 5px rgba(0,0,40,.25)}

/* Demo: a recessed tray with a clay label */
.nv2-demo-box.nv2-art{border-radius:30px;box-shadow:inset 0 12px 28px rgba(35,31,43,.22),inset 0 -6px 14px rgba(255,255,255,.35)}
.nv2-demo-box.nv2-art p{padding:12px 20px;box-shadow:var(--clay-hi),var(--clay-lo),var(--clay-drop)}

/* Use cases: clay bars sitting in grooves */
.nv2-uselist li{border-top-color:rgba(35,31,43,.12)}
.nv2-uselist li::after{content:"";grid-column:2;grid-row:1;align-self:center;height:16px;border-radius:999px;background:rgba(35,31,43,.06);box-shadow:inset 2px 2px 5px rgba(120,90,0,.18),inset -2px -2px 5px rgba(255,255,255,.4)}
.nv2-uselist .bar{grid-column:2;grid-row:1;position:relative;z-index:1;height:16px;border-radius:999px;box-shadow:inset 3px 3px 6px rgba(255,255,255,.35),inset -3px -4px 7px rgba(0,0,40,.3),0 6px 12px rgba(35,31,43,.15)}

/* Benchmarks: clay tiles on ultramarine */
.nv2-metrics{gap:clamp(16px,1.6vw,22px)}
.nv2-metrics .m{border-top:0;padding:24px 22px 22px;border-radius:26px;background:linear-gradient(150deg,#4C46F0,#3A34E6 60%,#322CD2);box-shadow:inset 6px 6px 14px rgba(255,255,255,.18),inset -8px -8px 18px rgba(0,0,40,.28),0 24px 44px rgba(10,8,70,.35);animation:cl-float-sm 9s ease-in-out infinite}
.nv2-metrics .m:nth-child(2){animation-delay:-2.2s}
.nv2-metrics .m:nth-child(3){animation-delay:-4.4s}
.nv2-metrics .m:nth-child(4){animation-delay:-6.6s}
.nv2 .cmp span::before{height:10px;border-radius:999px;box-shadow:inset 1px 1px 3px rgba(255,255,255,.3),inset -1px -2px 3px rgba(0,0,40,.25)}
.nv2-case{border-top:0;margin-top:clamp(28px,4vw,48px);padding:24px 26px;border-radius:26px;background:linear-gradient(150deg,#4C46F0,#3A34E6 60%,#322CD2);box-shadow:inset 6px 6px 14px rgba(255,255,255,.18),inset -8px -8px 18px rgba(0,0,40,.28),0 24px 44px rgba(10,8,70,.35)}
.nv2-case .row i{width:16px;height:16px;box-shadow:inset 1px 1px 2px rgba(255,255,255,.35),inset -1px -2px 3px rgba(0,0,40,.25)}

/* Install: recessed tray, clay terminal floating in it, clay step pills */
.nv2-art-term{border-radius:30px;box-shadow:inset 0 12px 28px rgba(35,31,43,.22),inset 0 -6px 14px rgba(255,255,255,.35)}
.nv2-art-term .nv2-term{border-radius:22px;box-shadow:inset 3px 3px 8px rgba(255,255,255,.12),inset -5px -6px 12px rgba(0,0,0,.4),0 34px 64px rgba(20,28,48,.28),0 10px 22px rgba(20,28,48,.14);animation:cl-float-sm 8s ease-in-out infinite}
.nv2-steps li{border-top:0;padding:12px 16px;border-radius:18px;background:#FFFDF9;box-shadow:var(--clay-hi),var(--clay-lo),0 10px 20px rgba(35,31,43,.08)}

@media (max-width:760px){
  .cl-pos-2,.cl-pos-4{display:none}
  .cl-sphere{width:56px;height:56px}.cl-sm{width:30px;height:30px}
  .cl-capsule{width:84px;height:34px}
  .cl-chip-2{display:none}
  .nv2-uselist li::after,.nv2-uselist .bar{grid-column:1;grid-row:2}
}
@media (prefers-reduced-motion:reduce){
  .fl,.mini,.nv2-shot,.nv2-metrics .m,.nv2-art-term .nv2-term{animation:none!important}
  .dp{transform:none!important;transition:none}
}