/* The landing hero is the only place where periodic metal spheres fall. */
/* Fabric and the landing share one color token. */
.hero{--hero-paper:#fdfdfc;isolation:isolate;background:var(--hero-paper);min-height:max(820px,calc(100svh - 98px))}
.hero .hero-stage{position:absolute;inset:4% 0 auto;height:54%;z-index:3;pointer-events:none;overflow:visible;perspective:1000px}
.hero .impact-halo{position:absolute;width:430px;max-width:90%;aspect-ratio:1;left:50%;top:5%;translate:-50% 0;border-radius:50%;background:radial-gradient(circle,#0003 0 18%,#555a6a20 38%,transparent 68%);filter:blur(19px);opacity:.55}
.screen-tension{position:absolute;left:50%;top:31%;width:23%;max-width:125px;aspect-ratio:1;transform:translateX(-50%);background:radial-gradient(ellipse at 42% 38%,#fff 12%,var(--hero-paper) 42%,#d5d5d3 67%,var(--hero-paper) 73%);border-radius:45% 55% 46% 54%;filter:blur(2px);opacity:0;z-index:3}
.grapple-emergence{position:absolute;inset:0;z-index:4}
.fabric-rupture{position:absolute;left:50%;top:6%;height:106%;aspect-ratio:2/3;transform:translateX(-50%);z-index:2;mix-blend-mode:multiply;transform-origin:50% 52%}
.fabric-rupture:before{display:none;content:'';position:absolute;inset:0;background:#101114;clip-path:polygon(49% 8%,63% 17%,68% 26%,77% 33%,72% 48%,78% 60%,77% 72%,64% 86%,51% 86%,42% 79%,38% 70%,29% 59%,23% 46%,23% 31%,35% 19%)}
.fabric-rupture img{position:relative;width:100%;height:100%;max-width:none;object-fit:contain;filter:grayscale(1)}
.fabric-stress{position:absolute;left:50%;top:0;height:100%;width:auto;transform:translateX(-50%);z-index:3;opacity:0;fill:none;stroke:#878985;stroke-width:1.6;stroke-linecap:round}
.grapple-rig{position:absolute;left:50%;top:-12%;height:116%;aspect-ratio:2/3;transform:translateX(-50%);transform-origin:50% 3%;z-index:4;filter:drop-shadow(9px 18px 12px #0005)}
.fabric-trophy{position:absolute;left:45%;top:62%;width:45%;height:auto;z-index:2;opacity:0;transform-origin:50% 12%;filter:grayscale(1) brightness(1.08) drop-shadow(3px 7px 3px #0003);pointer-events:none}
.grapple-piece{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:contain}
.grapple-body{clip-path:polygon(38% 0,64% 0,69% 20%,65% 34%,62% 38%,38% 38%,34% 32%);z-index:4}
.grapple-back{clip-path:polygon(43% 33%,58% 33%,63% 57%,61% 70%,39% 70%,37% 58%);z-index:1}
.grapple-left{clip-path:polygon(35% 34%,44% 34%,45% 43%,35% 55%,37% 68%,33% 82%,31% 93%,17% 90%,3% 80%,0 66%,8% 56%,24% 51%,26% 43%);transform-origin:41% 36%;z-index:2}
.grapple-right{clip-path:polygon(56% 34%,65% 34%,74% 43%,76% 51%,92% 56%,100% 66%,97% 80%,83% 90%,69% 93%,67% 82%,63% 68%,65% 55%,55% 43%);transform-origin:59% 36%;z-index:2}
.grapple-front{clip-path:polygon(44% 34%,56% 34%,57% 50%,60% 56%,59% 74%,55% 87%,50% 92%,44% 86%,40% 74%,40% 57%,44% 50%);transform-origin:50% 37%;z-index:5}
.hero .stage-caption{right:7%;bottom:6%;font-size:10px;color:#777b86}
.hero-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:9;contain:layout paint}
.hero-orb{position:absolute;left:0;top:0;width:var(--orb-size);height:var(--orb-size);border-radius:50%;display:grid;place-items:center;color:#fff;user-select:none;will-change:transform;box-shadow:inset -9px -12px 12px #000b,inset 7px 8px 9px #fff9,0 7px 9px #0006;text-shadow:0 1px 2px #0009}
.hero-orb:after{content:'';position:absolute;inset:6%;border:1px solid #fff9;border-radius:50%;pointer-events:none}
.hero-orb b{font-size:calc(var(--orb-size)*.36);line-height:1;letter-spacing:-.09em;transform:translateY(2px)}
.hero-orb small{position:absolute;top:15%;left:21%;font:600 calc(var(--orb-size)*.13) var(--mono)}
.hero-orb.blue{background:radial-gradient(circle at 29% 24%,#f4f6ff,#7889ff 17%,#2542e6 42%,#071454 84%)}
.hero-orb.silver{background:radial-gradient(circle at 29% 24%,#fff,#e5e9f0 18%,#929eac 43%,#252e3e 85%)}
.hero-orb.dark{background:radial-gradient(circle at 29% 24%,#aab0ba,#4a5262 18%,#161923 57%,#030409 89%)}
.hero-orb.copper{background:radial-gradient(circle at 29% 24%,#ffe4cb,#d98957 18%,#92502d 48%,#29100c 87%)}
.hero-controls{position:absolute;right:3.5vw;bottom:19px;z-index:12;display:flex;gap:8px;align-items:center}
.hero-controls button{border:1px solid #111114;background:#fdfdfcea;color:#111114;min-height:38px;padding:0 14px;font:600 10px var(--mono);letter-spacing:.05em;box-shadow:0 5px 15px #0001;backdrop-filter:blur(5px)}
.hero-controls button:hover{background:#111114;color:white}.hero-controls button[aria-pressed=true]{background:#111114;color:white}
.hero-controls button span{margin-left:14px;font-size:17px}
.hero .hero-title-wrap{padding-bottom:clamp(98px,13vh,170px)}
.hero .hero-title-wrap h1{position:relative;z-index:1}
@media(max-width:900px){.hero .hero-stage{inset:6% 0 auto;height:52%}.hero .stage-caption{right:5%;bottom:7%}}
@media(max-width:650px){.hero{min-height:850px}.hero .hero-stage{inset:9% 0 auto;height:49%}.grapple-rig{height:110%;top:-8%}.fabric-rupture{height:104%;top:3%}.hero .impact-halo{width:320px;top:12%}.hero .stage-caption{right:4%;bottom:-3%;font-size:9px}.hero .hero-title-wrap{padding-bottom:135px}.hero-controls{left:20px;right:20px;bottom:13px;justify-content:space-between}.hero-controls button{font-size:9px;padding:0 10px;min-height:34px}.hero-orb{box-shadow:inset -7px -9px 9px #000b,inset 5px 6px 7px #fff9,0 5px 7px #0006}}
@media(prefers-reduced-motion:reduce){.hero-orb{will-change:auto}}

.fabric-notch{position:absolute;left:62%;top:62%;width:22%;height:18%;background:#101114;transform-origin:0 25%;clip-path:polygon(0 0,55% 4%,51% 14%,89% 27%,77% 41%,100% 50%,85% 67%,92% 81%,66% 94%,30% 100%,0 80%);z-index:2}
/* Photographed folds and fibers retain real contact shadows; pure white merges with the page. */
.fabric-depth{position:absolute;left:50%;top:0;height:117%;width:auto;aspect-ratio:4/5;transform:translateX(-50%);z-index:2;pointer-events:none}
.fabric-depth-ready .fabric-rupture,.fabric-depth-ready .screen-tension,.fabric-depth-ready .fabric-stress{visibility:hidden}
@media(max-width:650px){.fabric-depth{height:112%;top:0}}

.fabric-notch{display:none}
/* CANDIDATO: while the visitor drives the full-size claw, the rig in the hero hides (the live claw
   in the cursor layer replaces it in the same spot). */
.hero.hero-claw-live .grapple-rig{visibility:hidden}
html.hero-claw-touch .grapple-cursor{display:block}
/* While the hero claw is live, the scroll-driven twin stays out of sight (no double claw). */
html.hero-claw-on .scroll-grapple{visibility:hidden!important}
/* CANDIDATO: no canned intro tear; the visitor tears the surface with the claw (hero-tear.js). */
.hero-tear{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero[data-user-tear] :is(.fabric-rupture,.tear-shadow,.fabric-stress,.screen-tension,.impact-halo,.fabric-trophy,.fabric-depth){display:none}
html.hero-claw-touch .hero{touch-action:pan-y}
.fabric-waves{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}