/* ================= HERO — sticky reveal ================= */
.hero-wrapper { position: relative; height: 260vh; }
.hero-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #000; }
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: none; will-change: transform; }

/* LIVELLO 1: Le "Toppe" concave */
.patch-layer { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: grid; gap: 0; pointer-events: none; }
.patch-cell { position: relative; width: 100%; height: 100%; }
.patch { position: absolute; width: calc(var(--tile-radius, 12px) + 1px); height: calc(var(--tile-radius, 12px) + 1px); opacity: 0; }
.patch.tl { top: 0; left: 0; background: radial-gradient(circle at 100% 100%, transparent var(--tile-radius), var(--bg-color) var(--tile-radius)); }
.patch.tr { top: 0; right: 0; background: radial-gradient(circle at 0% 100%, transparent var(--tile-radius), var(--bg-color) var(--tile-radius)); }
.patch.bl { bottom: 0; left: 0; background: radial-gradient(circle at 100% 0%, transparent var(--tile-radius), var(--bg-color) var(--tile-radius)); }
.patch.br { bottom: 0; right: 0; background: radial-gradient(circle at 0% 0%, transparent var(--tile-radius), var(--bg-color) var(--tile-radius)); }

/* LIVELLO 2: I quadrati animati */
.mask { position: absolute; top: 0; left: 0; right: 0; z-index: 4; display: grid; gap: 0; }
.tile { background: var(--bg-color); margin: 0; will-change: opacity, transform, filter, border-radius; }

/* Scroll Cue */
.scroll-cue { position: absolute; right: 3.4vw; bottom: 3.4vw; z-index: 5; width: 2.6vw; height: 4.2vw; border: 1.5px solid rgba(244,242,239,.8); border-radius: 2vw; display: flex; justify-content: center; padding-top: .6vw; transition: opacity .5s ease; }
.scroll-cue::after { content: ''; width: .35vw; height: .7vw; background: #f4f2ef; border-radius: 1vw; animation: cue 1.6s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(.9vw); opacity: .3; } }