.hero-root{--p:1;--b:calc(100 - 114 * var(--p));--tw:11;--dir:1;--pt:clamp(0,calc((var(--p) - 0.55) / 0.35),1)}[dir=rtl] .hero-root{--dir:-1}.hero-bed{overflow:hidden;background:var(--color-ink)}.hero-bed,.hero-layer,.roll-stage{position:absolute;inset:0}.roll-stage{z-index:5;pointer-events:none;overflow:hidden}.roll-page{overflow:hidden;transform:translateX(calc(var(--dir) * (var(--b) - 100) * 1%));will-change:transform}.roll-page-inner{inset:0;transform:translateX(calc(var(--dir) * (100 - var(--b)) * 1%))}.roll-lift,.roll-page-inner{position:absolute;will-change:transform}.roll-lift{inset-block:0;inset-inline-start:0;inline-size:7%;transform:translateX(calc(var(--dir) * (var(--b) - 7) / 7 * 100%));background:linear-gradient(90deg,rgba(24,21,16,0),rgba(24,21,16,.32))}[dir=rtl] .roll-lift{background:linear-gradient(270deg,rgba(24,21,16,0),rgba(24,21,16,.32))}.roll{position:absolute;inset-block:0;inset-inline-start:0;inline-size:calc(var(--tw) * 1%);transform:translateX(calc(var(--dir) * var(--b) / var(--tw) * 100%));overflow:hidden;background:var(--color-cream);border-inline-start:1px solid rgba(175,145,83,.7);box-shadow:0 0 40px rgba(24,21,16,.35);will-change:transform}.roll-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(24,21,16,.38) 0,rgba(24,21,16,.08) 16%,rgba(255,255,255,.55) 32%,rgba(255,255,255,.1) 50%,rgba(24,21,16,.22) 78%,rgba(24,21,16,.48))}[dir=rtl] .roll-shade{background:linear-gradient(270deg,rgba(24,21,16,.38) 0,rgba(24,21,16,.08) 16%,rgba(255,255,255,.55) 32%,rgba(255,255,255,.1) 50%,rgba(24,21,16,.22) 78%,rgba(24,21,16,.48))}.roll-shadow{position:absolute;inset-block:0;inset-inline-start:0;inline-size:10%;transform:translateX(calc(var(--dir) * (var(--b) + var(--tw)) / 10 * 100%));background:linear-gradient(90deg,rgba(24,21,16,.42),rgba(24,21,16,0));will-change:transform}[dir=rtl] .roll-shadow{background:linear-gradient(270deg,rgba(24,21,16,.42),rgba(24,21,16,0))}.hero-unfold-text{opacity:var(--pt);transform:translateY(calc(12px * (1 - var(--pt))));filter:blur(calc(5px * (1 - var(--pt))));will-change:opacity,transform,filter}.hero-debug{position:absolute;inset-block-end:0;inset-inline:0;z-index:50;display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;background:rgba(47,48,51,.92);color:#fff;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}.hero-debug input[type=range]{flex:1;accent-color:var(--color-gold)}.hero-debug button{border:1px solid rgba(255,255,255,.4);padding:.25rem .6rem}