*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#0a0e24;-webkit-user-select:none;user-select:none}
body{font-family:'Cormorant Garamond',Georgia,serif}
#scene{position:fixed;inset:0;display:block;touch-action:none;cursor:crosshair}
#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
#phase{position:absolute;bottom:13.5vh;left:50%;transform:translateX(-50%);
  font-size:clamp(17px,2.2vw,25px);font-style:italic;letter-spacing:.14em;
  color:rgba(255,246,225,.88);text-shadow:0 0 20px rgba(0,0,0,.65);
  opacity:0;transition:opacity 1.4s ease;white-space:nowrap}
#phase.show{opacity:1}
#hint{position:absolute;bottom:13.5vh;left:50%;transform:translateX(-50%);
  font-family:Inter,system-ui,sans-serif;font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,246,225,.55);transition:opacity 2.2s ease;white-space:nowrap}
#credit{position:absolute;left:22px;bottom:18px;font-family:Inter,sans-serif;font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(255,246,225,.38)}
#soundBtn{position:absolute;top:20px;right:20px;pointer-events:auto;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,246,225,.28);background:rgba(10,14,30,.35);backdrop-filter:blur(8px);
  color:#fff6e1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.3s;opacity:.85}
#soundBtn:hover{background:rgba(255,246,225,.14);opacity:1}
#soundBtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#soundBtn .icon-off{display:none}
#soundBtn.muted .icon-on{display:none}
#soundBtn.muted .icon-off{display:block}
#overlay{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 38%, rgba(16,24,48,.5), rgba(6,9,22,.84));
  backdrop-filter:blur(10px);transition:opacity 1.8s ease,visibility 1.8s}
#overlay.hidden{opacity:0;visibility:hidden}
.ov-inner{text-align:center;color:#fff6e1;padding:24px;max-width:720px;animation:rise 1.6s ease both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.ov-kicker{font-family:Inter,sans-serif;font-size:11px;letter-spacing:.5em;text-transform:uppercase;
  color:rgba(255,246,225,.6);margin-bottom:22px}
h1{font-weight:300;font-size:clamp(40px,7.4vw,82px);letter-spacing:.16em;text-transform:uppercase;
  line-height:1.18;text-shadow:0 0 46px rgba(150,200,255,.4)}
.ov-sub{margin:26px auto 34px;font-size:clamp(16px,2vw,20px);font-style:italic;line-height:1.75;
  color:rgba(255,246,225,.88);max-width:580px}
#enterBtn{pointer-events:auto;font-family:Inter,sans-serif;font-size:12px;letter-spacing:.42em;text-transform:uppercase;
  color:#fff6e1;background:transparent;border:1px solid rgba(255,246,225,.5);padding:17px 44px;border-radius:40px;
  cursor:pointer;transition:.4s;animation:breathe 3.6s ease-in-out infinite}
#enterBtn:hover{background:rgba(255,246,225,.14);box-shadow:0 0 38px rgba(160,220,255,.4);letter-spacing:.5em}
@keyframes breathe{0%,100%{box-shadow:0 0 0 rgba(160,220,255,0)}50%{box-shadow:0 0 28px rgba(160,220,255,.3)}}
.ov-note{margin-top:28px;font-family:Inter,sans-serif;font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(255,246,225,.42)}

#brand{position:absolute;left:50%;bottom:1.6vh;transform:translateX(-50%);
  clip-path:inset(8.5% 0 0 0);
  width:min(30vw,340px);height:auto;opacity:.95;pointer-events:none;
  filter:drop-shadow(0 0 26px rgba(255,220,150,.45)) drop-shadow(0 2px 10px rgba(0,0,0,.6));
  animation:brandGlow 6s ease-in-out infinite}
@keyframes brandGlow{0%,100%{opacity:.88}50%{opacity:1}}
#social{position:absolute;top:18px;left:18px;display:flex;flex-direction:column;gap:9px;pointer-events:none;z-index:6}
#social a{pointer-events:auto;display:flex;align-items:center;gap:9px;
  padding:9px 16px 9px 11px;border-radius:30px;text-decoration:none;
  font-family:Inter,system-ui,sans-serif;font-size:12px;font-weight:600;letter-spacing:.1em;
  color:#fff;border:1px solid rgba(255,255,255,.28);
  box-shadow:0 3px 16px rgba(0,0,0,.45);transition:transform .25s,box-shadow .25s,filter .25s}
#social a span{white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.45)}
#social a:hover{transform:translateX(4px) scale(1.04);filter:brightness(1.12);
  box-shadow:0 5px 26px rgba(0,0,0,.55),0 0 22px rgba(255,255,255,.28)}
#social svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#social a[data-label="sacropan.it"]{background:linear-gradient(135deg,#d8a63c,#a8761c)}
#social a[data-label="YouTube"]{background:linear-gradient(135deg,#ff3d3d,#c40000)}
#social a[data-label="Instagram"]{background:linear-gradient(135deg,#f9a03f 0%,#e1306c 45%,#8a3ab9 100%)}
#social a[data-label="Facebook"]{background:linear-gradient(135deg,#3b8bfd,#0d5bd4)}
@media(max-width:640px){
  #brand{width:min(56vw,300px);bottom:1.2vh}
  #social{top:12px;left:12px;gap:7px}
  #social a{padding:7px 13px 7px 9px;font-size:10.5px;gap:7px}
  #social svg{width:16px;height:16px}
}