/* home.css — la home è la stessa scena dei progetti (carosello + vortice), con il logo davanti.
   Un clic sul logo: il logo si ingrandisce e svanisce, la scena si avvicina e compare l'interfaccia dei progetti.
   Nessun cambio di pagina: sembra un'unica pagina. */

:root { --mx: 0; --my: 0; }

/* ── stato "home": interfaccia nascosta, scena più lontana ── */
.topbar, .heading, .strip { transition: opacity 650ms cubic-bezier(.23, 1, .32, 1) 420ms, transform 650ms cubic-bezier(.23, 1, .32, 1) 420ms; }
body.home .topbar, body.home .heading, body.home .strip { opacity: 0; transform: translateY(-8px); pointer-events: none; transition-delay: 0s; transition-duration: 300ms; }
body.home .strip { transform: translateY(8px); }
.stage { transition: transform 1000ms cubic-bezier(.22, 1, .36, 1); transform-origin: 50% 46%; }
body.home .stage { transform: scale(.9); pointer-events: none; }
body.home .paper:not(.active) .paper-link::after { opacity: .14; }
.paper-link::after { transition: opacity 600ms ease-out; }
body.home .vortex { opacity: .85; }
.vortex { transition: opacity 900ms ease-out; }

/* ── copertina: logo in rilievo + pulsante "Gheb" ── */
.home-cover { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: clamp(54px, 11vh, 110px); cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; }
.hc-cam { position: absolute; inset: 0; perspective: 1000px; perspective-origin: 50% 45%; pointer-events: none; }
.hc-mark { --w: min(30vw, 38vh, 340px); position: absolute; left: 50%; top: 47%; width: var(--w); aspect-ratio: 1600 / 2000; margin: calc(var(--w) * -0.625) 0 0 calc(var(--w) / -2); transform-style: preserve-3d; transition: transform 1000ms cubic-bezier(.5, 0, .15, 1), opacity 550ms ease-in 300ms; will-change: transform; }
/* l'inclinazione col puntatore sta su un elemento a parte: se fosse sullo stesso della transizione d'ingresso, la ritarderebbe a ogni frame */
.hc-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(calc(var(--mx) * 14deg)) rotateX(calc(var(--my) * -9deg)); }
.hc-logo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transform: translateZ(40px); filter: drop-shadow(0 20px 30px rgba(0,0,0,.55)); }
/* spessore: sagome gialle dietro il logo, che si aprono quando la scena si inclina */
.hc-ex { position: absolute; inset: 0; background: #fdd63e; -webkit-mask: url(assets/logo-white.png) center / contain no-repeat; mask: url(assets/logo-white.png) center / contain no-repeat; transform: translateZ(calc(40px - var(--n) * 7px)); filter: brightness(calc(1 - var(--n) * .09)); }
.home-cover .pill { position: relative; z-index: 2; transition: opacity 260ms ease-out, transform 260ms cubic-bezier(.23, 1, .32, 1); }
.pill { display: inline-flex; align-items: center; gap: 14px; padding: 7px 7px 7px 22px; border-radius: 999px; background: #fdd63e; color: #0a0a0a; font: 600 16px/1 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: -.015em; box-shadow: 0 16px 34px -12px rgba(253, 214, 62, .55), inset 0 1px 0 rgba(255,255,255,.5); }
.pill i { width: 32px; height: 32px; border-radius: 50%; background: #0a0a0a; color: #fdd63e; display: grid; place-items: center; font-style: normal; font-size: 13px; animation: heartbeat 1.6s ease-in-out infinite; }
@keyframes heartbeat { 0%,100% { transform: scale(1); } 14% { transform: scale(1.14); } 28% { transform: scale(1); } 42% { transform: scale(1.09); } 58% { transform: scale(1); } }
@media (hover: hover) and (pointer: fine) { .home-cover:hover .pill { transform: translateY(-2px); } }
.home-cover:active .pill { transform: scale(.97); }
.home-cover:focus-visible .pill { outline: 2px solid #f4f4f0; outline-offset: 4px; }

.hc-link { position: absolute; bottom: clamp(18px, 3vw, 32px); z-index: 3; font: 500 12px/1 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #f4f4f0; opacity: .7; text-decoration: none; transition: opacity 160ms ease; }
.hc-link:hover { opacity: 1; }
.hc-ig { left: clamp(18px, 3vw, 32px); }
.hc-me { right: clamp(18px, 3vw, 32px); }
@media (max-width: 639px) { .hc-ig { display: none; } }

/* ── ingresso: il logo si avvicina fino a uscire dallo schermo e svanisce, il pulsante sparisce ── */
body:not(.home) .home-cover { pointer-events: none; }
body:not(.home) .hc-mark { transform: scale(3.4); opacity: 0; transition-delay: 0s, 120ms; }
body:not(.home) .home-cover .pill, body:not(.home) .hc-link { opacity: 0; transform: translateY(8px); }
body.gone .home-cover { display: none; }

@media (prefers-reduced-motion: reduce) {
  .stage, .topbar, .heading, .strip, .hc-mark, .vortex { transition-duration: 1ms !important; transition-delay: 0s !important; }
  .pill i { animation: none; }
}

@media (max-width: 700px) { .hc-mark { --w: min(54vw, 34vh, 340px); } }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }