/* H4L - esperienza 3D (index.html) */
#mount { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#spacer { height: 760vh; }
#fade { position: fixed; inset: 0; background: var(--bg-deep); opacity: 0; pointer-events: none; transition: opacity .45s ease; z-index: 50; }

#topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 26px; pointer-events: none;
  background: linear-gradient(180deg, rgba(3,3,8,.65), rgba(3,3,8,0));
}
#topbar .logo { color: var(--ink); font-weight: 900; font-size: 18px; letter-spacing: .08em; }
#topbar .nav { color: rgba(255,255,255,.65); font-size: 11px; letter-spacing: .25em; }

#progresswrap { position: fixed; right: 16px; top: 50%; transform: translateY(-50%); width: 1px; height: 32vh; background: rgba(255,255,255,.14); z-index: 3; }
#progress { width: 100%; height: 0%; background: linear-gradient(#f5f6fa, #7c818c); transition: height .15s linear; }

#intro { position: fixed; inset: 0; z-index: 2; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 9vh; }
#intro .tagline { color: rgba(255,255,255,.78); font-size: 12px; letter-spacing: .42em; text-align: center; margin-bottom: 40px; padding: 0 24px; animation: h4lIn .6s cubic-bezier(.2,.8,.2,1) 1.6s both; }
#intro .scrolltxt { color: rgba(255,255,255,.6); font-size: 11px; letter-spacing: .35em; margin-bottom: 12px; }
.h4l-scrollline { position: relative; width: 1px; height: 44px; background: rgba(255,255,255,.18); overflow: hidden; }
.h4l-scrollline::after { content: ''; position: absolute; left: 0; top: -50%; width: 100%; height: 50%; background: linear-gradient(#f5f6fa, #7c818c); animation: h4lDrop 1.6s ease-in-out infinite; }
@keyframes h4lDrop { to { top: 110%; } }

#label { position: fixed; left: 26px; bottom: 9vh; z-index: 2; pointer-events: none; max-width: 340px; display: none; }
#label .eyebrow { color: rgba(255,255,255,.68); font-size: 12px; letter-spacing: .3em; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
#label .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
#label .divider { width: 44px; height: 1px; margin: 14px 0; }
#label .sub { color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.55; }
#label .h4l-grad-title { font-size: clamp(26px, 6vw, 42px); }

#finale { position: fixed; inset: 0; z-index: 2; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px; }
#finale .payoff { color: rgba(255,255,255,.78); font-size: 16px; margin: 22px 0 34px; letter-spacing: .05em; }
#finale .credit { color: rgba(255,255,255,.3); font-size: 10px; letter-spacing: .25em; margin-top: 48px; }
#finale .h4l-grad-title { font-size: clamp(34px, 9vw, 76px); letter-spacing: .06em; line-height: 1; }

.h4l-grad-title {
  background: linear-gradient(100deg, #ffffff 0%, var(--ga, #fff) 55%, var(--gb, #fff) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-weight: 900; letter-spacing: .04em; line-height: 1.05;
}
.h4l-glitch { position: relative; display: inline-block; }
.h4l-glitch::before, .h4l-glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; opacity: 0; pointer-events: none; background: none; }
.h4l-glitch::before { color: var(--ga, #fff); -webkit-text-fill-color: var(--ga, #fff); animation: h4lGlA 3.1s steps(1,end) infinite; }
.h4l-glitch::after  { color: var(--gb, #fff); -webkit-text-fill-color: var(--gb, #fff); animation: h4lGlB 2.4s steps(1,end) infinite; }
@keyframes h4lGlA { 0%, 86%, 100% { opacity: 0; } 87% { opacity: .8; clip-path: inset(8% 0 62% 0); transform: translate(-3px, -1px); } 90% { opacity: .8; clip-path: inset(48% 0 18% 0); transform: translate(3px, 1px); } 93% { opacity: 0; } }
@keyframes h4lGlB { 0%, 78%, 100% { opacity: 0; } 79% { opacity: .55; clip-path: inset(30% 0 40% 0); transform: translate(4px, 0); } 82% { opacity: .55; clip-path: inset(65% 0 5% 0); transform: translate(-4px, 0); } 85% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .h4l-glitch::before, .h4l-glitch::after, .h4l-scrollline::after { animation: none; }
}