.hero-motion-study{will-change:clip-path}
.hero-fold-stage{background:transparent}
.hero-variant-light{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.hero-variant .slogan-opening,.hero-variant .slogan-result,.hero-variant .direction-hero-main>p,.hero-variant.mini-direction-hero>p{position:relative;z-index:1}
/* A: an understated cloth reflection drifting across the material. */
.hero-variant-ambient .hero-variant-light{background:linear-gradient(110deg,#0007,transparent 40%),url('orange-fabric-hero.webp') center/140% 140%;opacity:.17;mix-blend-mode:soft-light;mask-image:linear-gradient(90deg,transparent 25%,#000 70%);animation:cloth-ambient 18s ease-in-out infinite alternate}
@keyframes cloth-ambient{from{background-position:0% 35%;filter:brightness(.75)}to{background-position:90% 70%;filter:brightness(1.65)}}
/* B: a quieter, slightly smaller stone panel on a wide fabric background. */
.hero-compact-stage{padding:40px 4%;background:#20120d url('orange-fabric-hero.webp') center/cover;box-shadow:inset 0 0 160px 70px #000b}
html[data-brand-preview] .hero-compact-stage .direction-hero{min-height:700px;border:2px solid #c6a366;border-radius:28px;box-shadow:0 25px 80px #0008}
html[data-brand-preview] .hero-compact-stage .direction-hero-main h1{font-size:clamp(45px,5.7vw,92px)}
.hero-variant-compact .hero-variant-light{background:linear-gradient(115deg,transparent 15%,#ffe6ab18 40%,transparent 65%);background-size:200% 100%;animation:stone-drift 15s ease-in-out infinite alternate}
/* C: light only; no fabric forms or change to the approved proportions. */
.hero-variant-stone .hero-variant-light{background:radial-gradient(ellipse at 15% 25%,#ffe4b92b,transparent 45%),linear-gradient(115deg,transparent 25%,#ffca7121 45%,transparent 65%);background-size:150% 150%,220% 100%;mix-blend-mode:screen;animation:stone-drift 8s ease-in-out infinite alternate}
@keyframes stone-drift{from{background-position:0% 40%}to{background-position:100% 60%}}
@media(max-width:620px){.hero-compact-stage{padding:20px 12px}html[data-brand-preview] .hero-compact-stage .direction-hero{min-height:690px;padding-inline:20px}html[data-brand-preview] .hero-compact-stage .direction-hero-main h1{font-size:clamp(31px,8vw,46px)}}
@media(prefers-reduced-motion:reduce){.hero-variant-light{animation:none!important}}
.hero-motion-study .hero-cloth-wings{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero-motion-study .slogan-opening,.hero-motion-study .slogan-result,.hero-motion-study .direction-hero-main>p,.hero-motion-study.mini-direction-hero>p{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.hero-motion-study{will-change:auto;clip-path:none!important}.hero-cloth-wings{display:none}}

/* The opening viewport is the vortex; stone arrives and unfolds from below. */
.hero-vortex-intro{height:calc(100svh - var(--entry-header,98px));min-height:260px;pointer-events:none}
.hero-entry-stage{position:relative}
.hero-vortex-entry .hero-entry-stage>.direction-hero{position:sticky;top:var(--stone-pin,98px)}
.hero-fold-shading{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:var(--fold-shade,0);background:repeating-linear-gradient(180deg,#0009 0%,transparent 4%,#ffe1a81a 9.8%,#0009 10%)}
@media(prefers-reduced-motion:reduce){.hero-vortex-intro{display:none}.hero-vortex-entry .hero-entry-stage>.direction-hero{position:relative;top:auto}.hero-fold-shading{display:none}}

/* Drag only the uncovered vortex; page links and forms keep their own cursors. */
.vortex-orbit-enabled .hero-vortex-intro{pointer-events:auto;cursor:grab;touch-action:pan-y pinch-zoom}
body.vortex-hover{cursor:grab}
body.vortex-dragging,body.vortex-dragging *{cursor:grabbing!important;user-select:none!important}
.vortex-orbit-enabled .hero-vortex-intro:focus-visible{outline:1px solid #c6a366;outline-offset:-6px}

/* First opening is the vortex alone; the copy waits below the initial viewport. */
.hero-vortex-entry .hero-vortex-intro{height:calc(100svh - var(--entry-header,98px) - var(--entry-nav,0px) + 2px)}
.hero-vortex-entry .hero-side-glass:not(.hero-copy-revealed) h1{visibility:hidden}
.gold-vortex-3d{animation:vortex-first-light 1.4s ease-out both}
@keyframes vortex-first-light{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.gold-vortex-3d{animation:none}.hero-vortex-entry .hero-side-glass:not(.hero-copy-revealed) h1{visibility:visible}}

.hero-vortex-entry .hero-entry-stage>.mini-direction-hero{position:sticky;top:var(--stone-pin,98px)}

/* Let wheel/touch progress extend the pinned reading stage without scroll anchoring jumps. */
.hero-entry-stage{overflow-anchor:none}
body.hero-vortex-entry{overflow-anchor:none}