/* Home: scena 3D immersiva con HUD monospace agli angoli e velo CRT */
#landing { position: fixed; inset: 0; overflow: hidden; background: #0b0504; color: #f4efe6; font-family: var(--font); text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
#landing.no3d #scene { display: none; }
#landing.no3d { background: radial-gradient(90% 80% at 80% 40%, #5a2408, #0b0504 70%); }

/* Velo CRT: righe di scansione, vignettatura e leggero sfarfallio */
.crt {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55) 100%);
  animation: flicker 5s steps(1) infinite;
}
@keyframes flicker { 0%, 100% { opacity: 1; } 47% { opacity: .93; } 48% { opacity: 1; } 81% { opacity: .96; } 82% { opacity: 1; } }

.hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity .5s ease; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
.hud::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 150px), linear-gradient(to top, rgba(0,0,0,.65), transparent 170px); }
.hud > * { position: absolute; pointer-events: auto; opacity: 0; transition: opacity .9s ease .5s; }
#landing.entered .hud > * { opacity: 1; }
#landing.leaving .hud { opacity: 0; }

.hud-tl { top: 42px; left: 42px; line-height: 1.6; font-weight: 600; pointer-events: none; }
.hud-logo { top: 38px; left: 50%; translate: -50% 0; text-align: center; pointer-events: none; }
.hud-logo b {
  display: block; font-family: "Arial Black", Impact, sans-serif; font-style: italic; font-weight: 900; font-size: 34px; line-height: .9;
  text-transform: lowercase; letter-spacing: -.07em; transform: scaleX(1.45);
  background: repeating-linear-gradient(to bottom, #f4efe6 0 2px, transparent 2px 3px); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
}
.hud-logo span { display: block; margin-top: 4px; font-size: 8px; letter-spacing: 1.05em; padding-left: 1.05em; }
.hud-tr { top: 40px; right: 42px; width: 28px; height: 28px; display: grid; place-items: center; background: #0b0504; border: 1px solid transparent; }
.hud-tr:hover { border-color: #f4efe6; }
.hud-tr svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.hud-tr.off { opacity: .45 !important; }
.hud-tr.off svg path { d: path("M2 12h20"); }

.hud-bl { bottom: 42px; left: 42px; display: flex; align-items: center; gap: 12px; text-align: left; line-height: 1.5; font-weight: 600; color: inherit; text-transform: none; letter-spacing: 0; font-size: 13px; }
.drag-ic { width: 54px; height: 42px; border: 1.5px dashed #f4efe6; display: grid; place-items: center; transition: transform .25s, border-color .2s, color .2s; }
.hud-bl:hover .drag-ic, #landing[data-state="drag"] .drag-ic { border-color: #ff4c00; color: #ff4c00; transform: scale(1.1); }
.hud-br { bottom: 46px; right: 42px; color: inherit; font-weight: 600; padding: 4px 2px; }
.hud-br:hover { color: #ff4c00; }

.hud-cap { bottom: 62px; left: 50%; translate: -50% 0; text-align: center; white-space: nowrap; pointer-events: none; text-transform: none; }
.hud-cap p { margin: 0; min-height: 1.5em; }
.hud-cap p > span { display: inline-block; padding: 3px 10px; background: rgba(0, 0, 0, .78); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hud-cap p > span:empty { padding: 0; }
#capJp { font-size: 14px; margin-bottom: 6px; }
#capIt { font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.hud-credit { bottom: 24px; left: 50%; translate: -50% 0; font-size: 9px; opacity: .0; white-space: nowrap; pointer-events: none; text-transform: none; letter-spacing: .03em; }
#landing.entered .hud-credit { opacity: .75; }

.hud-resume { top: 108px; left: 50%; translate: -50% 0; max-width: 92%; padding: 10px 16px; text-align: center; background: rgba(0, 0, 0, .82); border: 1px solid #ff4c00; }
.hud-resume span { display: block; font-size: 9px; letter-spacing: .14em; color: #ff4c00; }
.hud-resume b { display: block; margin: 4px 0 6px; font-weight: 600; text-transform: none; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-resume button { color: inherit; font-weight: 600; padding: 2px 8px; text-transform: uppercase; letter-spacing: .04em; }
.hud-resume button:hover { color: #ff4c00; }

/* Loader */
#loader {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #000; cursor: pointer; transition: opacity .9s ease, visibility .9s;
}
#landing.entered #loader { opacity: 0; visibility: hidden; }
#loaderFace { width: 192px; height: 96px; image-rendering: pixelated; }
#loader .bar { width: 110px; height: 4px; margin-top: 18px; background: #333; }
#loader .bar i { display: block; height: 100%; width: 0; background: #d9d9d9; animation: load 1.1s ease-out forwards; }
@keyframes load { to { width: 100%; } }
#loader .enter { position: absolute; bottom: 62px; left: 0; right: 0; text-align: center; margin: 0; opacity: 0; transition: opacity .5s; text-transform: none; }
#loader .enter span { display: block; font-size: 15px; line-height: 2.2; }
#landing.ready #loader .enter { opacity: 1; animation: pulse 1.6s ease-in-out infinite .5s; }
@keyframes pulse { 50% { opacity: .45; } }

#app.enter { animation: appIn .5s steps(6); }
@keyframes appIn { from { opacity: 0; } }

@media (max-width: 760px) {
  .hud-tl { top: 20px; left: 16px; font-size: 10px; } .hud-tr { top: 18px; right: 16px; }
  .hud-logo { top: 58px; } .hud-logo b { font-size: 26px; }
  .hud-bl { bottom: 20px; left: 16px; } .hud-br { bottom: 30px; right: 16px; }
  .hud-cap { bottom: 96px; white-space: normal; width: 92%; } .hud-credit { display: none; }
  .hud-resume { top: 112px; }
}
@media (prefers-reduced-motion: reduce) { .crt { animation: none; } }