Update index.html

index.html

@@ -6,7 +6,6 @@
   <meta name="theme-color" content="#F3EFE9" />
   <title>Trova la tua Cala</title>
 
-  <!-- Montserrat è il font pulito del moodboard. Amsterdam One viene usato se disponibile nel device/sito. -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
@@ -14,27 +13,27 @@
   <style>
     :root {
       --blue: #254B6B;
-      --blue-soft: #8FA3B3;
+      --blue-muted: #8FA3B3;
       --olive: #939675;
       --sage: #C2C5B2;
       --coral: #D08A7A;
       --rose: #EDD3CD;
       --cream: #F3EFE9;
-      --paper: rgba(255, 253, 248, .86);
-      --white: #fffaf4;
-      --shadow: 0 28px 80px rgba(37, 75, 107, .18);
-      --font-main: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      --font-script: "Amsterdam One", "Amsterdam", "Allura", "Great Vibes", "Snell Roundhand", "Brush Script MT", cursive;
+      --paper: #FFFDF8;
+      --ink-soft: rgba(37, 75, 107, .68);
+      --line: rgba(147, 150, 117, .34);
+      --shadow: 0 28px 70px rgba(37, 75, 107, .13);
+      --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     }
 
     * { box-sizing: border-box; }
 
     html,
     body {
-      width: 100%;
-      min-height: 100%;
       margin: 0;
-      font-family: var(--font-main);
+      min-height: 100%;
+      width: 100%;
+      font-family: var(--font);
       color: var(--blue);
       background: var(--cream);
       overflow-x: hidden;
@@ -43,44 +42,47 @@
     body {
       min-height: 100svh;
       background:
-        radial-gradient(circle at 17% 13%, rgba(237, 211, 205, .72) 0 9%, transparent 31%),
-        radial-gradient(circle at 88% 11%, rgba(194, 197, 178, .58) 0 10%, transparent 30%),
-        radial-gradient(circle at 50% 94%, rgba(143, 163, 179, .18) 0 18%, transparent 48%),
-        linear-gradient(180deg, #fffaf4 0%, #f3efe9 64%, #eee7de 100%);
+        radial-gradient(circle at 82% 12%, rgba(237, 211, 205, .42), transparent 28%),
+        radial-gradient(circle at 10% 90%, rgba(194, 197, 178, .42), transparent 30%),
+        linear-gradient(180deg, #fffdf8 0%, #f3efe9 100%);
     }
 
     body::before {
       content: "";
       position: fixed;
-      inset: -10vh -20vw auto auto;
-      width: 90vw;
-      height: 88vh;
+      right: -26vw;
+      top: -4vh;
+      width: 105vw;
+      height: 96vh;
       pointer-events: none;
-      opacity: .18;
-      background:
-        repeating-conic-gradient(from 198deg at 72% 48%, transparent 0deg 7deg, rgba(147,150,117,.54) 7deg 9deg, transparent 9deg 15deg);
+      opacity: .13;
+      background: repeating-conic-gradient(
+        from 205deg at 72% 52%,
+        transparent 0deg 6deg,
+        rgba(147, 150, 117, .70) 6deg 8deg,
+        transparent 8deg 14deg
+      );
       transform: rotate(-10deg);
-      filter: blur(.5px);
       z-index: 0;
     }
 
     body::after {
       content: "";
       position: fixed;
-      inset: auto -15vw -18vh -15vw;
-      height: 34vh;
+      inset: auto -14vw -16vh -14vw;
+      height: 33vh;
       pointer-events: none;
-      opacity: .26;
+      opacity: .18;
       background:
-        radial-gradient(80% 90% at 50% 0%, rgba(143,163,179,.55) 0 11%, transparent 12%),
-        radial-gradient(80% 90% at 16% 7%, rgba(143,163,179,.36) 0 11%, transparent 12%),
-        radial-gradient(80% 90% at 84% 6%, rgba(143,163,179,.30) 0 11%, transparent 12%);
-      animation: softWave 8s ease-in-out infinite alternate;
+        radial-gradient(80% 90% at 50% 0%, rgba(143, 163, 179, .65) 0 11%, transparent 12%),
+        radial-gradient(80% 90% at 16% 7%, rgba(143, 163, 179, .48) 0 11%, transparent 12%),
+        radial-gradient(80% 90% at 84% 6%, rgba(143, 163, 179, .42) 0 11%, transparent 12%);
+      animation: wave 9s ease-in-out infinite alternate;
       z-index: 0;
     }
 
-    @keyframes softWave {
-      from { transform: translateX(-3vw) rotate(-1.5deg); }
+    @keyframes wave {
+      from { transform: translateX(-3vw) rotate(-1deg); }
       to { transform: translateX(3vw) translateY(-1vh) rotate(1deg); }
     }
 
@@ -90,34 +92,32 @@
       min-height: 100svh;
       display: grid;
       place-items: center;
-      padding: max(18px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
+      padding: max(18px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom));
     }
 
     .card {
       position: relative;
-      width: min(100%, 460px);
+      width: min(100%, 440px);
       min-height: min(92svh, 760px);
       display: flex;
       flex-direction: column;
       justify-content: center;
-      border-radius: 36px;
       overflow: hidden;
-      border: 1px solid rgba(255,255,255,.88);
-      background:
-        linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,250,244,.58)),
-        radial-gradient(circle at 50% 22%, rgba(237,211,205,.55), transparent 28%);
+      border-radius: 34px;
+      background: rgba(255, 253, 248, .80);
+      border: 1px solid rgba(37, 75, 107, .10);
       box-shadow: var(--shadow);
-      backdrop-filter: blur(22px);
-      -webkit-backdrop-filter: blur(22px);
-      animation: enter .72s cubic-bezier(.2,.9,.2,1.12) both;
+      backdrop-filter: blur(16px);
+      -webkit-backdrop-filter: blur(16px);
+      animation: enter .7s cubic-bezier(.2,.86,.2,1.08) both;
     }
 
     .card::before {
       content: "";
       position: absolute;
-      inset: 26px;
-      border-radius: 29px;
-      border: 1px solid rgba(37,75,107,.10);
+      inset: 22px;
+      border: 1px solid rgba(147, 150, 117, .28);
+      border-radius: 26px;
       pointer-events: none;
     }
 
@@ -125,169 +125,175 @@
       content: "";
       position: absolute;
       left: 50%;
-      top: 24%;
-      width: 280px;
-      height: 280px;
+      top: 23%;
+      width: 220px;
+      height: 220px;
       transform: translate(-50%, -50%);
       border-radius: 50%;
-      background:
-        radial-gradient(circle, rgba(237,211,205,.50) 0 26%, transparent 27%),
-        radial-gradient(circle, rgba(208,138,122,.18) 0 44%, transparent 45%);
+      background: rgba(237, 211, 205, .34);
+      filter: blur(.2px);
       pointer-events: none;
       z-index: -1;
-      animation: halo 5s ease-in-out infinite alternate;
     }
 
     @keyframes enter {
-      from { opacity: 0; transform: translateY(24px) scale(.97); }
+      from { opacity: 0; transform: translateY(22px) scale(.98); }
       to { opacity: 1; transform: translateY(0) scale(1); }
     }
 
-    @keyframes halo {
-      from { opacity: .64; transform: translate(-50%, -50%) scale(.96); }
-      to { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
-    }
-
     .hero {
       position: relative;
-      padding: 42px 28px 30px;
+      padding: 42px 30px 24px;
       text-align: center;
-      isolation: isolate;
+    }
+
+    .mini-mark {
+      width: 54px;
+      height: 54px;
+      margin: 0 auto 24px;
+      display: grid;
+      place-items: center;
+      border-radius: 50%;
+      border: 1px dashed rgba(208, 138, 122, .70);
+      color: var(--coral);
+      font-size: 24px;
+      background: rgba(255, 253, 248, .62);
     }
 
     h1 {
       margin: 0 auto;
       max-width: 8ch;
       color: var(--blue);
-      font-size: clamp(55px, 15vw, 82px);
-      line-height: .86;
-      letter-spacing: -.07em;
-      font-weight: 900;
+      font-size: clamp(50px, 14vw, 76px);
+      line-height: .90;
+      letter-spacing: -.065em;
+      font-weight: 800;
       text-wrap: balance;
     }
 
-    .script-mark {
-      display: block;
-      margin: 10px auto 0;
-      color: var(--coral);
-      font-family: var(--font-script);
-      font-size: clamp(32px, 9vw, 54px);
-      line-height: .95;
-      font-weight: 400;
-      letter-spacing: .01em;
-      opacity: .95;
-    }
-
-    .islands {
-      display: flex;
-      justify-content: center;
-      align-items: end;
-      gap: 8px;
-      height: 42px;
-      margin-top: 28px;
+    .map-line {
+      width: min(72%, 250px);
+      margin: 32px auto 0;
+      color: var(--olive);
+      opacity: .82;
     }
 
-    .island {
+    .map-line svg {
+      width: 100%;
+      height: auto;
       display: block;
-      border-radius: 999px 999px 22px 22px;
-      background: linear-gradient(180deg, #edd3cd 0%, #d08a7a 62%, #c47c70 100%);
-      box-shadow: inset 0 -7px 0 rgba(37,75,107,.07);
-      animation: bob 3.2s ease-in-out infinite;
+      overflow: visible;
     }
 
-    .island:nth-child(1) { width: 42px; height: 14px; animation-delay: -.15s; background: linear-gradient(180deg, #c2c5b2, #939675); }
-    .island:nth-child(2) { width: 84px; height: 27px; animation-delay: -.55s; }
-    .island:nth-child(3) { width: 36px; height: 13px; animation-delay: -.9s; background: linear-gradient(180deg, #c2c5b2, #939675); }
-
-    @keyframes bob {
-      0%, 100% { transform: translateY(0); }
-      50% { transform: translateY(-4px); }
+    .map-line path {
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2.8;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-dasharray: 520;
+      stroke-dashoffset: 520;
+      animation: draw 1.4s ease .35s forwards;
     }
 
+    @keyframes draw { to { stroke-dashoffset: 0; } }
+
     .form {
-      padding: 2px 28px 46px;
+      position: relative;
+      padding: 4px 30px 44px;
     }
 
     label {
       display: block;
       margin: 0 0 12px;
-      color: rgba(37, 75, 107, .72);
-      font-size: 12px;
+      color: rgba(37, 75, 107, .70);
+      font-size: 11px;
       font-weight: 800;
-      letter-spacing: .14em;
+      letter-spacing: .16em;
       text-transform: uppercase;
     }
 
     input {
       width: 100%;
-      min-height: 66px;
+      min-height: 64px;
       border: 0;
       outline: none;
-      border-radius: 24px;
+      border-radius: 18px;
       padding: 0 18px;
       color: var(--blue);
-      background: rgba(255,255,255,.88);
+      background: rgba(255, 255, 255, .88);
+      font-family: var(--font);
       font-size: 17px;
-      font-weight: 700;
+      font-weight: 600;
       box-shadow:
-        inset 0 0 0 1px rgba(37,75,107,.08),
-        0 14px 30px rgba(37,75,107,.10);
+        inset 0 0 0 1px rgba(37, 75, 107, .12),
+        0 12px 26px rgba(37, 75, 107, .08);
       transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
     }
 
     input::placeholder {
-      color: rgba(37,75,107,.36);
-      font-weight: 700;
+      color: rgba(37, 75, 107, .34);
+      font-weight: 600;
     }
 
     input:focus {
       transform: translateY(-1px);
       background: #fff;
       box-shadow:
-        inset 0 0 0 2px rgba(208,138,122,.42),
-        0 18px 38px rgba(37,75,107,.14);
+        inset 0 0 0 2px rgba(208, 138, 122, .42),
+        0 16px 32px rgba(37, 75, 107, .12);
     }
 
     .discover {
       position: relative;
       width: 100%;
-      min-height: 66px;
+      min-height: 64px;
       margin-top: 14px;
       border: 0;
-      border-radius: 24px;
+      border-radius: 18px;
       overflow: hidden;
       cursor: pointer;
-      color: #fffaf4;
-      background:
-        linear-gradient(110deg, rgba(255,255,255,.32), transparent 28% 70%, rgba(255,255,255,.24)),
-        linear-gradient(135deg, var(--blue) 0%, #315c7c 48%, var(--coral) 100%);
-      box-shadow: 0 18px 36px rgba(37,75,107,.22), inset 0 -3px 0 rgba(0,0,0,.10);
-      font-size: 17px;
+      color: var(--paper);
+      background: var(--blue);
+      box-shadow: 0 16px 32px rgba(37, 75, 107, .20);
+      font-family: var(--font);
+      font-size: 16px;
       font-weight: 800;
-      letter-spacing: -.01em;
-      transition: transform .16s ease, filter .16s ease;
+      letter-spacing: .01em;
+      transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
+    }
+
+    .discover::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(110deg, transparent 0 35%, rgba(255,255,255,.20) 47%, transparent 60% 100%);
+      transform: translateX(-120%);
+      animation: shine 3.5s ease-in-out infinite;
     }
 
     .discover::after {
       content: "";
       position: absolute;
-      top: -90%;
-      left: -46%;
-      width: 35%;
-      height: 280%;
-      background: rgba(255,255,255,.54);
-      transform: rotate(23deg);
-      animation: shine 3.2s ease-in-out infinite;
+      left: 50%;
+      bottom: 10px;
+      width: 58px;
+      height: 2px;
+      border-radius: 999px;
+      background: var(--coral);
+      transform: translateX(-50%);
+      opacity: .92;
     }
 
     @keyframes shine {
-      0%, 54% { left: -52%; }
-      100% { left: 122%; }
+      0%, 55% { transform: translateX(-120%); }
+      100% { transform: translateX(120%); }
     }
 
     .discover:active {
       transform: translateY(2px) scale(.99);
-      filter: saturate(1.05);
+      background: #1f405c;
+      box-shadow: 0 10px 24px rgba(37, 75, 107, .18);
     }
 
     .message {
@@ -304,15 +310,15 @@
     }
 
     .message-card {
-      border-radius: 22px;
-      padding: 16px;
+      border-radius: 18px;
+      padding: 15px 16px;
       text-align: center;
-      color: rgba(37, 75, 107, .80);
-      background: rgba(255,255,255,.70);
-      border: 1px solid rgba(37,75,107,.08);
-      box-shadow: 0 12px 28px rgba(37,75,107,.10);
-      font-size: 14px;
-      font-weight: 700;
+      color: rgba(37, 75, 107, .78);
+      background: rgba(255, 255, 255, .72);
+      border: 1px solid rgba(37, 75, 107, .09);
+      box-shadow: 0 12px 24px rgba(37, 75, 107, .08);
+      font-size: 13px;
+      font-weight: 600;
       line-height: 1.35;
     }
 
@@ -325,13 +331,12 @@
       padding: max(18px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
       color: var(--blue);
       background:
-        radial-gradient(circle at 18% 12%, rgba(237,211,205,.78) 0 10%, transparent 32%),
-        radial-gradient(circle at 82% 14%, rgba(194,197,178,.64) 0 10%, transparent 32%),
-        radial-gradient(circle at 50% 94%, rgba(143,163,179,.20) 0 20%, transparent 54%),
-        linear-gradient(180deg, #fffaf4 0%, #f3efe9 74%, #eee7de 100%);
+        radial-gradient(circle at 84% 12%, rgba(237, 211, 205, .50), transparent 30%),
+        radial-gradient(circle at 12% 88%, rgba(194, 197, 178, .46), transparent 33%),
+        linear-gradient(180deg, #fffdf8 0%, #f3efe9 100%);
       opacity: 0;
       pointer-events: none;
-      transform: scale(1.03);
+      transform: scale(1.02);
       transition: opacity .42s ease, transform .42s ease;
       overflow: hidden;
     }
@@ -345,95 +350,84 @@
     .reveal::before {
       content: "";
       position: absolute;
-      inset: -5vh -12vw auto auto;
-      width: 90vw;
-      height: 90vh;
-      opacity: .18;
-      background:
-        repeating-conic-gradient(from 200deg at 70% 50%, transparent 0deg 7deg, rgba(147,150,117,.62) 7deg 9deg, transparent 9deg 16deg);
+      right: -26vw;
+      top: -4vh;
+      width: 105vw;
+      height: 96vh;
+      opacity: .13;
+      background: repeating-conic-gradient(
+        from 205deg at 72% 52%,
+        transparent 0deg 6deg,
+        rgba(147, 150, 117, .70) 6deg 8deg,
+        transparent 8deg 14deg
+      );
       transform: rotate(-10deg);
       z-index: 0;
     }
 
-    .reveal::after {
-      content: "";
-      position: absolute;
-      left: -16vw;
-      right: -16vw;
-      bottom: -15vh;
-      height: 34vh;
-      opacity: .22;
-      background:
-        radial-gradient(80% 90% at 50% 0%, rgba(143,163,179,.55) 0 11%, transparent 12%),
-        radial-gradient(80% 90% at 16% 7%, rgba(143,163,179,.36) 0 11%, transparent 12%),
-        radial-gradient(80% 90% at 84% 6%, rgba(143,163,179,.30) 0 11%, transparent 12%);
-      animation: softWave 8s ease-in-out infinite alternate;
-      z-index: 0;
-    }
-
     .reveal-content {
       position: relative;
       z-index: 2;
-      width: min(100%, 580px);
-      min-height: min(80svh, 760px);
+      width: min(100%, 560px);
+      min-height: min(82svh, 760px);
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       text-align: center;
-      border-radius: 38px;
+      border-radius: 34px;
       padding: 34px 22px;
-      background: rgba(255,250,244,.72);
-      border: 1px solid rgba(255,255,255,.86);
-      box-shadow: 0 36px 100px rgba(37,75,107,.20);
-      backdrop-filter: blur(18px);
-      -webkit-backdrop-filter: blur(18px);
-      animation: revealPop .74s cubic-bezier(.2,.9,.16,1.22) both;
+      background: rgba(255, 253, 248, .82);
+      border: 1px solid rgba(37, 75, 107, .10);
+      box-shadow: 0 30px 90px rgba(37, 75, 107, .15);
+      backdrop-filter: blur(16px);
+      -webkit-backdrop-filter: blur(16px);
+      animation: revealPop .72s cubic-bezier(.2,.9,.16,1.18) both;
       overflow: hidden;
     }
 
     .reveal-content::before {
       content: "";
       position: absolute;
-      top: 30px;
+      inset: 22px;
+      border: 1px solid rgba(147, 150, 117, .28);
+      border-radius: 26px;
+      pointer-events: none;
+    }
+
+    .reveal-content::after {
+      content: "";
+      position: absolute;
       left: 50%;
-      width: 210px;
-      height: 210px;
-      transform: translateX(-50%);
+      top: 27%;
+      width: 250px;
+      height: 250px;
+      transform: translate(-50%, -50%);
       border-radius: 50%;
-      background:
-        radial-gradient(circle, rgba(237,211,205,.58) 0 27%, transparent 28%),
-        radial-gradient(circle, rgba(208,138,122,.16) 0 45%, transparent 46%);
+      background: rgba(237, 211, 205, .34);
       z-index: -1;
     }
 
     @keyframes revealPop {
-      from { opacity: 0; transform: translateY(32px) scale(.86) rotate(-1.4deg); filter: blur(8px); }
-      60% { opacity: 1; transform: translateY(-4px) scale(1.03) rotate(.4deg); filter: blur(0); }
-      to { opacity: 1; transform: translateY(0) scale(1) rotate(0); filter: blur(0); }
+      from { opacity: 0; transform: translateY(28px) scale(.92); filter: blur(7px); }
+      60% { opacity: 1; transform: translateY(-3px) scale(1.02); filter: blur(0); }
+      to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
     }
 
     .hello {
-      margin: 0 0 22px;
-      color: rgba(37, 75, 107, .72);
-      font-size: clamp(15px, 4.6vw, 21px);
-      font-weight: 700;
+      margin: 0 0 28px;
+      color: rgba(37, 75, 107, .68);
+      font-size: clamp(14px, 4.2vw, 19px);
+      font-weight: 600;
       letter-spacing: .02em;
     }
 
     .small-title {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
       margin-bottom: 18px;
-      padding: 10px 14px;
-      border-radius: 999px;
-      color: var(--cream);
-      background: var(--olive);
-      box-shadow: 0 13px 28px rgba(147,150,117,.20);
+      color: var(--coral);
       font-size: 12px;
       font-weight: 800;
-      letter-spacing: .15em;
+      letter-spacing: .18em;
       text-transform: uppercase;
     }
 
@@ -441,44 +435,41 @@
       margin: 0;
       max-width: 11ch;
       color: var(--blue);
-      font-family: var(--font-main);
-      font-size: clamp(48px, 14vw, 96px);
-      line-height: .91;
+      font-family: var(--font);
+      font-size: clamp(48px, 14vw, 92px);
+      line-height: .92;
       letter-spacing: -.055em;
-      font-weight: 900;
+      font-weight: 800;
       text-wrap: balance;
-      text-shadow: 0 16px 36px rgba(37,75,107,.12);
     }
 
-    .script-cala {
-      display: block;
-      margin-top: 16px;
-      color: var(--coral);
-      font-family: var(--font-script);
-      font-size: clamp(42px, 13vw, 82px);
-      line-height: .82;
-      font-weight: 400;
-      letter-spacing: .01em;
+    .divider {
+      width: 92px;
+      height: 2px;
+      margin: 28px auto 22px;
+      border-radius: 999px;
+      background: var(--coral);
     }
 
     .reveal-note {
-      margin: 28px auto 0;
-      max-width: 26ch;
-      color: rgba(37, 75, 107, .72);
+      margin: 0 auto;
+      max-width: 28ch;
+      color: rgba(37, 75, 107, .68);
       font-size: 15px;
-      line-height: 1.35;
-      font-weight: 600;
+      line-height: 1.38;
+      font-weight: 500;
     }
 
     .again {
       min-height: 52px;
-      margin-top: 28px;
+      margin-top: 30px;
       border: 0;
       border-radius: 999px;
-      padding: 0 22px;
-      color: #fffaf4;
+      padding: 0 24px;
+      color: var(--paper);
       background: var(--blue);
-      box-shadow: 0 16px 38px rgba(37,75,107,.22);
+      box-shadow: 0 16px 36px rgba(37,75,107,.20);
+      font-family: var(--font);
       font-size: 14px;
       font-weight: 800;
       cursor: pointer;
@@ -504,12 +495,12 @@
 
     @media (max-width: 380px) {
       .app { padding-left: 12px; padding-right: 12px; }
-      .card { min-height: 90svh; border-radius: 32px; }
-      .hero { padding: 38px 20px 26px; }
-      h1 { font-size: clamp(50px, 15vw, 74px); }
+      .card { min-height: 90svh; border-radius: 30px; }
+      .hero { padding: 36px 22px 22px; }
+      h1 { font-size: clamp(48px, 15vw, 70px); }
       .form { padding-left: 22px; padding-right: 22px; }
-      input, .discover { min-height: 60px; border-radius: 22px; }
-      .reveal-content { border-radius: 32px; padding-left: 16px; padding-right: 16px; }
+      input, .discover { min-height: 60px; }
+      .reveal-content { border-radius: 30px; padding-left: 16px; padding-right: 16px; }
     }
 
     @media (prefers-reduced-motion: reduce) {
@@ -528,19 +519,19 @@
   <main class="app">
     <section class="card" aria-label="Scopri il tavolo">
       <div class="hero">
+        <div class="mini-mark" aria-hidden="true">🌊</div>
         <h1>Trova la tua Cala</h1>
-        <span class="script-mark" aria-hidden="true">Tremiti</span>
-        <div class="islands" aria-hidden="true">
-          <span class="island"></span>
-          <span class="island"></span>
-          <span class="island"></span>
+        <div class="map-line" aria-hidden="true">
+          <svg viewBox="0 0 260 118" role="img">
+            <path d="M76 72 C64 61 68 48 84 45 C94 43 101 38 99 29 C96 17 112 11 125 19 C137 26 148 25 157 17 C170 6 190 17 184 34 C181 45 193 50 206 50 C224 50 233 66 220 78 C211 87 218 101 203 106 C189 111 181 98 169 103 C153 109 148 120 131 112 C118 106 110 106 97 111 C78 119 62 105 69 89 C72 82 81 79 76 72 Z" />
+          </svg>
         </div>
       </div>
 
       <div class="form">
         <label for="guestName">Nome e cognome</label>
         <input id="guestName" autocomplete="name" inputmode="text" placeholder="Es. Gaia Pollastrini" />
-        <button class="discover" id="discover" type="button">Scopri il Tavolo ✨</button>
+        <button class="discover" id="discover" type="button">Scopri il Tavolo</button>
         <div id="message" class="message" aria-live="polite"></div>
         <div id="status" class="status" aria-live="polite"></div>
       </div>
@@ -552,16 +543,27 @@
       <p class="hello" id="hello"></p>
       <div class="small-title">Il tuo tavolo è</div>
       <h2 class="table-name" id="tableName"></h2>
-      <span class="script-cala" aria-hidden="true">buona cena</span>
+      <div class="divider" aria-hidden="true"></div>
       <p class="reveal-note">Segui la tua cala e goditi la serata.</p>
       <button class="again" id="again" type="button">Cerca un altro nome</button>
     </div>
   </section>
 
   <script>
-    const DATA_URL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vSlb-0cSIFaGN_BWrn_S9tQoQsdqGH7qYRYQGC3_3wRB-rGzwZoPoxIBNr9l6NmxW9Ont82YKIdGKIR/pub?output=csv";
+    const DATA_URL = "";
 
     const SAMPLE_CSV = `
+Nome Cognome,Nome del tavolo
+Gaia Pollastrini,Cala Matano
+Matteo Bergamelli,Cala delle Arene
+Luca Bianchi,Cala Tramontana
+Sara Conti,Cala Spido
+Marco De Santis,Cala Zio Cesare
+Elena Ferri,Cala degli Inglesi
+Davide Greco,Cala Tonda
+Chiara Romano,Cala dei Benedettini
+Alessandro Rinaldi,Cala Pietre di Fucile
+Martina Esposito,Cala Sorrentino
 `;
 
     const els = {
@@ -683,7 +685,7 @@
     }
 
     function showReveal(guest) {
-      els.hello.textContent = `Ciao ${firstName(guest.fullName)} ✨`;
+      els.hello.textContent = `Ciao ${firstName(guest.fullName)}`;
       els.tableName.textContent = guest.tableName;
       els.reveal.classList.add("show");
       els.reveal.setAttribute("aria-hidden", "false");
@@ -749,20 +751,20 @@
       const centerX = window.innerWidth / 2;
       const centerY = window.innerHeight * .42;
 
-      confetti = Array.from({ length: 180 }, () => {
+      confetti = Array.from({ length: 140 }, () => {
         const angle = Math.random() * Math.PI * 2;
-        const speed = 4 + Math.random() * 8.5;
+        const speed = 3.5 + Math.random() * 7;
         return {
           x: centerX,
           y: centerY,
-          size: 5 + Math.random() * 10,
+          size: 4 + Math.random() * 8,
           vx: Math.cos(angle) * speed,
-          vy: Math.sin(angle) * speed - 5,
-          gravity: .18 + Math.random() * .14,
+          vy: Math.sin(angle) * speed - 4.5,
+          gravity: .16 + Math.random() * .12,
           rotation: Math.random() * Math.PI,
-          spin: (Math.random() - .5) * .34,
+          spin: (Math.random() - .5) * .28,
           color: colors[Math.floor(Math.random() * colors.length)],
-          life: 105 + Math.random() * 55
+          life: 95 + Math.random() * 45
         };
       });
 
@@ -784,7 +786,7 @@
         ctx.save();
         ctx.translate(piece.x, piece.y);
         ctx.rotate(piece.rotation);
-        ctx.globalAlpha = Math.max(piece.life / 120, 0);
+        ctx.globalAlpha = Math.max(piece.life / 110, 0);
         ctx.fillStyle = piece.color;
         ctx.fillRect(-piece.size / 2, -piece.size / 2, piece.size, piece.size * .62);
         ctx.restore();