Titolo e introduzione: illustrazione sempre intera, testi in proporzione, bande riempite con l'immagine sfocata

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017egeN2amL84ErjfgQFtEDn

style.css

@@ -66,12 +66,12 @@ body { display: flex; justify-content: center; overflow-x: hidden; -webkit-tap-h
 .overlay[hidden] { display: none; }
 /* Titolo e introduzione: le illustrazioni a pixel netti, con una velatura per leggere il testo. */
 #title { justify-content: flex-start; padding-top: 6%; image-rendering: pixelated;
-  background: linear-gradient(rgba(20, 12, 30, .55), rgba(20, 12, 30, .05) 45%, rgba(20, 12, 30, .7)), url(assets/scenes/titolo.png) 86% center / cover; }
+  background: none; }
 #title .buttons { margin-top: auto; }
 #title .dedication { margin-bottom: 2%; text-shadow: 2px 2px 0 #000; }
 #title .subtitle { color: var(--ink); text-shadow: 2px 2px 0 #000; }
 #intro { justify-content: flex-start; padding-top: 7%; cursor: pointer; image-rendering: pixelated;
-  background: linear-gradient(rgba(20, 12, 30, .6), rgba(20, 12, 30, .1) 55%), url(assets/scenes/panorama-intro.png) center / cover, #2a2030; }
+  background: none; }
 #intro-text { min-height: 4.2em; max-width: 30em; font-size: clamp(11.52px, 1.87vw, 21.6px); font-weight: bold; line-height: 1.3; color: var(--ink);
   text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000; animation: appear .8s ease-out; }
 #intro .hint { margin-top: auto; margin-bottom: 40px; color: var(--dim); font-size: clamp(8.64px, 1.08vw, 11.52px); text-shadow: 1px 1px 0 #000; }
@@ -85,14 +85,29 @@ body { display: flex; justify-content: center; overflow-x: hidden; -webkit-tap-h
 #splash, #title, #intro { position: fixed; inset: 0; z-index: 10; }
 #credits { position: fixed; inset: 0; z-index: 12; }
 body.full #sound { position: fixed; z-index: 13; top: max(8px, env(safe-area-inset-top)); right: 8px; }
-#title h1 { font-size: clamp(28px, 7vw, 84px); }
+/* Le illustrazioni si vedono sempre intere (contain): sul telefono in verticale il titolo sta sopra e i pulsanti
+   sotto; in orizzontale stanno sopra l'immagine. --u è l'1% della larghezza dell'immagine sullo schermo. */
+#title, #intro { --u: min(1vw, 1.78vh); }
+/* Ai lati dell'illustrazione intera, la stessa immagine sfocata e scura: niente bande vuote. */
+#title, #intro { isolation: isolate; overflow: hidden; }
+#title::before, #intro::before { content: ''; position: absolute; inset: -30px; z-index: -1; background: center / cover;
+  filter: blur(18px) brightness(.4) saturate(1.2); }
+#title::before { background-image: url(assets/scenes/titolo.png); }
+#intro::before { background-image: url(assets/scenes/panorama-intro.png); }
+/* Sopra lo sfocato, l'illustrazione intera con la sua velatura. */
+#title::after, #intro::after { content: ''; position: absolute; inset: 0; z-index: -1; image-rendering: pixelated; }
+#title::after { background: linear-gradient(rgba(20, 12, 30, .55), rgba(20, 12, 30, .05) 45%, rgba(20, 12, 30, .7)), url(assets/scenes/titolo.png) center / contain no-repeat; }
+#intro::after { background: linear-gradient(rgba(20, 12, 30, .6), rgba(20, 12, 30, .1) 55%), url(assets/scenes/panorama-intro.png) center / contain no-repeat; }
+#title h1 { font-size: max(24px, calc(var(--u) * 7)); }
 /* Sotto il controllo del volume, che sta in alto a destra. */
-#title, #intro { padding-top: max(6%, 56px); }
+#title, #intro { padding-top: max(calc(var(--u) * 5), 48px); padding-bottom: max(calc(var(--u) * 2), 10px); }
 #splash .splash-name { font-size: clamp(30px, 9vw, 88px); }
 #splash .splash-art { font-size: clamp(20px, 5vw, 50px); }
 #splash .splash-present { font-size: clamp(12px, 2.6vw, 26px); }
-#title .subtitle { font-size: clamp(11px, 1.8vw, 20px); }
+#title .subtitle { font-size: max(10px, calc(var(--u) * 1.8)); }
-#title .buttons button { font-size: clamp(12px, 2vw, 20px); }
+#title .dedication { font-size: max(9px, calc(var(--u) * 1.5)); }
+#intro-text { font-size: max(11px, calc(var(--u) * 2)); }
+#title .buttons button { font-size: max(11px, calc(var(--u) * 1.9)); }
 #splash { z-index: 11; gap: .15em; cursor: pointer; background: radial-gradient(circle at 50% 45%, #2a2030, #0d0910 70%);
   animation: splash-out .7s ease-in 4.3s forwards; }
 #splash p { margin: 0; max-width: none; font-weight: bold; text-shadow: 3px 3px 0 #000; opacity: 0; }