Update index.html

index.html

@@ -8,32 +8,45 @@
 
   <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">
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Great+Vibes&display=swap" rel="stylesheet">
 
   <style>
+    @font-face {
+      font-family: "Amsterdam One";
+      src:
+        url("./AmsterdamOne.woff2") format("woff2"),
+        url("./AmsterdamOne.woff") format("woff"),
+        url("/file=AmsterdamOne.woff2") format("woff2"),
+        url("/file=AmsterdamOne.woff") format("woff");
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+
     :root {
       --blue: #254B6B;
-      --blue-muted: #8FA3B3;
+      --blue-soft: #8FA3B3;
       --olive: #939675;
       --sage: #C2C5B2;
       --coral: #D08A7A;
       --rose: #EDD3CD;
       --cream: #F3EFE9;
       --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;
+      --line: rgba(37, 75, 107, .13);
+      --line-soft: rgba(147, 150, 117, .24);
+      --shadow: 0 18px 46px rgba(37, 75, 107, .10);
+      --font-main: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      --font-script: "Amsterdam One", "Great Vibes", "Snell Roundhand", cursive;
     }
 
     * { box-sizing: border-box; }
 
     html,
     body {
-      margin: 0;
-      min-height: 100%;
       width: 100%;
-      font-family: var(--font);
+      min-height: 100%;
+      margin: 0;
+      font-family: var(--font-main);
       color: var(--blue);
       background: var(--cream);
       overflow-x: hidden;
@@ -42,193 +55,169 @@
     body {
       min-height: 100svh;
       background:
-        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%);
+        linear-gradient(180deg, #fffdf8 0%, #f8f4ee 54%, #f3efe9 100%);
+    }
+
+    body.reveal-open {
+      overflow: hidden;
     }
 
-    body::before {
+    .screen {
+      position: relative;
+      min-height: 100svh;
+      display: flex;
+      justify-content: center;
+      overflow: hidden;
+    }
+
+    .screen::before {
       content: "";
       position: fixed;
-      right: -26vw;
-      top: -4vh;
-      width: 105vw;
-      height: 96vh;
+      inset: 18px;
+      border: 1px solid rgba(147, 150, 117, .22);
+      border-radius: 28px;
       pointer-events: none;
-      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;
     }
 
-    body::after {
+    .screen::after {
       content: "";
       position: fixed;
-      inset: auto -14vw -16vh -14vw;
-      height: 33vh;
+      left: 50%;
+      top: 52%;
+      width: min(78vw, 420px);
+      height: min(78vw, 420px);
+      border-radius: 999px;
+      transform: translate(-50%, -50%);
+      background: rgba(237, 211, 205, .18);
       pointer-events: none;
-      opacity: .18;
-      background:
-        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 wave {
-      from { transform: translateX(-3vw) rotate(-1deg); }
-      to { transform: translateX(3vw) translateY(-1vh) rotate(1deg); }
+      filter: blur(.2px);
     }
 
-    .app {
+    .page {
       position: relative;
       z-index: 1;
+      width: min(100%, 500px);
       min-height: 100svh;
+      padding: max(30px, env(safe-area-inset-top)) 28px max(28px, env(safe-area-inset-bottom));
       display: grid;
-      place-items: center;
-      padding: max(18px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom));
+      grid-template-rows: auto 1fr auto;
     }
 
-    .card {
-      position: relative;
-      width: min(100%, 440px);
-      min-height: min(92svh, 760px);
+    .top-mark {
       display: flex;
-      flex-direction: column;
       justify-content: center;
-      overflow: hidden;
-      border-radius: 34px;
-      background: rgba(255, 253, 248, .80);
-      border: 1px solid rgba(37, 75, 107, .10);
-      box-shadow: var(--shadow);
-      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: 22px;
-      border: 1px solid rgba(147, 150, 117, .28);
-      border-radius: 26px;
-      pointer-events: none;
+      align-items: center;
+      min-height: 44px;
     }
 
-    .card::after {
-      content: "";
-      position: absolute;
-      left: 50%;
-      top: 23%;
-      width: 220px;
-      height: 220px;
-      transform: translate(-50%, -50%);
+    .monogram {
+      width: 48px;
+      height: 48px;
       border-radius: 50%;
-      background: rgba(237, 211, 205, .34);
-      filter: blur(.2px);
-      pointer-events: none;
-      z-index: -1;
+      border: 1px dashed rgba(208, 138, 122, .74);
+      display: grid;
+      place-items: center;
+      color: var(--coral);
+      background: rgba(255, 253, 248, .72);
     }
 
-    @keyframes enter {
-      from { opacity: 0; transform: translateY(22px) scale(.98); }
-      to { opacity: 1; transform: translateY(0) scale(1); }
+    .monogram svg {
+      width: 28px;
+      height: 28px;
+      display: block;
     }
 
     .hero {
-      position: relative;
-      padding: 42px 30px 24px;
+      align-self: center;
       text-align: center;
+      padding: 10px 0 22px;
     }
 
-    .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 {
+    .script-title {
       margin: 0 auto;
-      max-width: 8ch;
+      max-width: 390px;
       color: var(--blue);
-      font-size: clamp(50px, 14vw, 76px);
-      line-height: .90;
-      letter-spacing: -.065em;
-      font-weight: 800;
+      font-family: var(--font-script);
+      font-size: clamp(62px, 18vw, 108px);
+      font-weight: 400;
+      line-height: .76;
+      letter-spacing: -.035em;
       text-wrap: balance;
     }
 
-    .map-line {
-      width: min(72%, 250px);
-      margin: 32px auto 0;
+    .script-title span {
+      display: block;
+    }
+
+    .script-title span:first-child {
+      transform: translateX(-.06em);
+    }
+
+    .script-title span:last-child {
+      margin-top: -.02em;
+      transform: translateX(.08em);
+    }
+
+    .island-line {
+      width: min(72vw, 310px);
+      margin: clamp(32px, 7svh, 54px) auto 0;
       color: var(--olive);
-      opacity: .82;
+      opacity: .90;
     }
 
-    .map-line svg {
+    .island-line svg {
       width: 100%;
       height: auto;
       display: block;
       overflow: visible;
     }
 
-    .map-line path {
+    .island-line path {
       fill: none;
       stroke: currentColor;
-      stroke-width: 2.8;
+      stroke-width: 3;
       stroke-linecap: round;
       stroke-linejoin: round;
-      stroke-dasharray: 520;
-      stroke-dashoffset: 520;
-      animation: draw 1.4s ease .35s forwards;
+      stroke-dasharray: 850;
+      stroke-dashoffset: 850;
+      animation: draw 1.45s ease .2s forwards;
     }
 
     @keyframes draw { to { stroke-dashoffset: 0; } }
 
-    .form {
-      position: relative;
-      padding: 4px 30px 44px;
+    .form-area {
+      align-self: end;
+      padding-bottom: clamp(6px, 2.4svh, 26px);
     }
 
-    label {
+    .field-label {
       display: block;
-      margin: 0 0 12px;
-      color: rgba(37, 75, 107, .70);
+      margin: 0 0 10px;
+      color: rgba(37, 75, 107, .74);
       font-size: 11px;
       font-weight: 800;
-      letter-spacing: .16em;
+      letter-spacing: .15em;
       text-transform: uppercase;
     }
 
+    .input-panel {
+      padding: 0;
+    }
+
     input {
       width: 100%;
-      min-height: 64px;
-      border: 0;
-      outline: none;
-      border-radius: 18px;
-      padding: 0 18px;
+      min-height: 62px;
+      border: 1px solid var(--line-soft);
+      outline: 0;
+      border-radius: 999px;
+      padding: 0 22px;
       color: var(--blue);
-      background: rgba(255, 255, 255, .88);
-      font-family: var(--font);
-      font-size: 17px;
+      background: rgba(255, 253, 248, .92);
+      font-family: var(--font-main);
+      font-size: 16px;
       font-weight: 600;
-      box-shadow:
-        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;
+      box-shadow: 0 10px 28px rgba(37, 75, 107, .07);
+      transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
     }
 
     input::placeholder {
@@ -237,68 +226,51 @@
     }
 
     input:focus {
-      transform: translateY(-1px);
-      background: #fff;
-      box-shadow:
-        inset 0 0 0 2px rgba(208, 138, 122, .42),
-        0 16px 32px rgba(37, 75, 107, .12);
+      border-color: rgba(208, 138, 122, .72);
+      background: #fffdf8;
+      box-shadow: 0 0 0 5px rgba(237, 211, 205, .28), 0 12px 30px rgba(37, 75, 107, .08);
     }
 
     .discover {
       position: relative;
       width: 100%;
-      min-height: 64px;
-      margin-top: 14px;
+      min-height: 62px;
+      margin-top: 12px;
       border: 0;
-      border-radius: 18px;
+      border-radius: 999px;
       overflow: hidden;
       cursor: pointer;
       color: var(--paper);
       background: var(--blue);
-      box-shadow: 0 16px 32px rgba(37, 75, 107, .20);
-      font-family: var(--font);
-      font-size: 16px;
+      font-family: var(--font-main);
+      font-size: 15px;
       font-weight: 800;
-      letter-spacing: .01em;
+      letter-spacing: .02em;
+      box-shadow: 0 14px 32px rgba(37, 75, 107, .18);
       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;
       left: 50%;
       bottom: 10px;
-      width: 58px;
+      width: 56px;
       height: 2px;
       border-radius: 999px;
       background: var(--coral);
       transform: translateX(-50%);
-      opacity: .92;
-    }
-
-    @keyframes shine {
-      0%, 55% { transform: translateX(-120%); }
-      100% { transform: translateX(120%); }
     }
 
     .discover:active {
-      transform: translateY(2px) scale(.99);
-      background: #1f405c;
-      box-shadow: 0 10px 24px rgba(37, 75, 107, .18);
+      transform: translateY(2px);
+      background: #1f405b;
+      box-shadow: 0 8px 22px rgba(37, 75, 107, .16);
     }
 
     .message {
       min-height: 0;
-      margin-top: 14px;
+      margin-top: 12px;
       opacity: 0;
       transform: translateY(8px);
       transition: opacity .24s ease, transform .24s ease;
@@ -311,15 +283,15 @@
 
     .message-card {
       border-radius: 18px;
-      padding: 15px 16px;
-      text-align: center;
+      padding: 14px 16px;
       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);
+      background: rgba(255, 253, 248, .86);
+      border: 1px solid rgba(147, 150, 117, .22);
+      text-align: center;
       font-size: 13px;
-      font-weight: 600;
       line-height: 1.35;
+      font-weight: 600;
+      box-shadow: 0 10px 26px rgba(37, 75, 107, .06);
     }
 
     .reveal {
@@ -328,150 +300,135 @@
       z-index: 20;
       display: grid;
       place-items: center;
-      padding: max(18px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
+      padding: max(28px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
       color: var(--blue);
       background:
-        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%);
+        linear-gradient(180deg, #fffdf8 0%, #f8f4ee 54%, #f3efe9 100%);
       opacity: 0;
+      visibility: hidden;
       pointer-events: none;
-      transform: scale(1.02);
-      transition: opacity .42s ease, transform .42s ease;
+      transform: scale(1.012);
+      transition: opacity .34s ease, transform .34s ease, visibility 0s linear .34s;
       overflow: hidden;
     }
 
-    .reveal.show {
-      opacity: 1;
-      pointer-events: auto;
-      transform: scale(1);
+    .reveal::before {
+      content: "";
+      position: fixed;
+      inset: 18px;
+      border: 1px solid rgba(147, 150, 117, .22);
+      border-radius: 28px;
+      pointer-events: none;
     }
 
-    .reveal::before {
+    .reveal::after {
       content: "";
       position: absolute;
-      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;
+      left: 50%;
+      top: 45%;
+      width: min(82vw, 430px);
+      height: min(82vw, 430px);
+      border-radius: 999px;
+      transform: translate(-50%, -50%);
+      background: rgba(237, 211, 205, .18);
+      pointer-events: none;
+    }
+
+    .reveal.show {
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+      transform: scale(1);
+      transition: opacity .34s ease, transform .34s ease, visibility 0s;
     }
 
-    .reveal-content {
+    .reveal-page {
       position: relative;
       z-index: 2;
       width: min(100%, 560px);
-      min-height: min(82svh, 760px);
+      min-height: min(86svh, 780px);
       display: flex;
       flex-direction: column;
-      align-items: center;
       justify-content: center;
       text-align: center;
-      border-radius: 34px;
-      padding: 34px 22px;
-      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;
+      animation: revealIn .56s cubic-bezier(.2,.9,.18,1.08) both;
     }
 
-    .reveal-content::before {
-      content: "";
-      position: absolute;
-      inset: 22px;
-      border: 1px solid rgba(147, 150, 117, .28);
-      border-radius: 26px;
-      pointer-events: none;
+    .reveal.show .reveal-page {
+      animation: revealIn .56s cubic-bezier(.2,.9,.18,1.08) both;
     }
 
-    .reveal-content::after {
-      content: "";
-      position: absolute;
-      left: 50%;
-      top: 27%;
-      width: 250px;
-      height: 250px;
-      transform: translate(-50%, -50%);
-      border-radius: 50%;
-      background: rgba(237, 211, 205, .34);
-      z-index: -1;
-    }
-
-    @keyframes revealPop {
-      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); }
+    @keyframes revealIn {
+      from { opacity: 0; transform: translateY(18px); }
+      to { opacity: 1; transform: translateY(0); }
     }
 
     .hello {
-      margin: 0 0 28px;
-      color: rgba(37, 75, 107, .68);
-      font-size: clamp(14px, 4.2vw, 19px);
-      font-weight: 600;
+      margin: 0 0 clamp(22px, 5svh, 38px);
+      color: rgba(37, 75, 107, .66);
+      font-size: clamp(15px, 4vw, 19px);
+      font-weight: 500;
       letter-spacing: .02em;
     }
 
-    .small-title {
-      margin-bottom: 18px;
+    .table-kicker {
+      margin: 0 0 8px;
       color: var(--coral);
       font-size: 12px;
       font-weight: 800;
-      letter-spacing: .18em;
+      letter-spacing: .22em;
       text-transform: uppercase;
     }
 
     .table-name {
-      margin: 0;
+      margin: 0 auto;
       max-width: 11ch;
       color: var(--blue);
-      font-family: var(--font);
-      font-size: clamp(48px, 14vw, 92px);
-      line-height: .92;
-      letter-spacing: -.055em;
-      font-weight: 800;
+      font-family: var(--font-script);
+      font-size: clamp(76px, 23vw, 146px);
+      font-weight: 400;
+      line-height: .74;
+      letter-spacing: -.035em;
       text-wrap: balance;
     }
 
-    .divider {
-      width: 92px;
+    .table-name[data-long="true"] {
+      max-width: 12ch;
+      font-size: clamp(58px, 18vw, 112px);
+    }
+
+    .reveal-line {
+      width: 88px;
       height: 2px;
-      margin: 28px auto 22px;
+      margin: clamp(28px, 6svh, 46px) auto 0;
       border-radius: 999px;
-      background: var(--coral);
+      background: var(--olive);
+      opacity: .68;
     }
 
     .reveal-note {
-      margin: 0 auto;
+      margin: 18px auto 0;
       max-width: 28ch;
-      color: rgba(37, 75, 107, .68);
+      color: rgba(37, 75, 107, .66);
       font-size: 15px;
-      line-height: 1.38;
+      line-height: 1.42;
       font-weight: 500;
     }
 
     .again {
+      align-self: center;
       min-height: 52px;
-      margin-top: 30px;
-      border: 0;
+      margin-top: clamp(28px, 6svh, 44px);
+      border: 1px solid rgba(37, 75, 107, .14);
       border-radius: 999px;
       padding: 0 24px;
-      color: var(--paper);
-      background: var(--blue);
-      box-shadow: 0 16px 36px rgba(37,75,107,.20);
-      font-family: var(--font);
-      font-size: 14px;
+      color: var(--blue);
+      background: rgba(255, 253, 248, .88);
+      box-shadow: 0 14px 32px rgba(37, 75, 107, .09);
+      font-family: var(--font-main);
+      font-size: 13px;
       font-weight: 800;
+      letter-spacing: .03em;
       cursor: pointer;
     }
 
@@ -494,13 +451,13 @@
     }
 
     @media (max-width: 380px) {
-      .app { padding-left: 12px; padding-right: 12px; }
-      .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; }
-      .reveal-content { border-radius: 30px; padding-left: 16px; padding-right: 16px; }
+      .screen::before, .reveal::before { inset: 12px; border-radius: 24px; }
+      .page { padding-left: 22px; padding-right: 22px; }
+      .script-title { font-size: clamp(58px, 18vw, 92px); }
+      .island-line { width: min(72vw, 290px); }
+      input, .discover { min-height: 58px; }
+      .table-name { font-size: clamp(68px, 22vw, 120px); }
+      .table-name[data-long="true"] { font-size: clamp(52px, 17vw, 94px); }
     }
 
     @media (prefers-reduced-motion: reduce) {
@@ -516,54 +473,58 @@
 <body>
   <canvas id="confetti"></canvas>
 
-  <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>
-        <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" />
+  <main class="screen">
+    <div class="page">
+      <div class="top-mark">
+        <div class="monogram" aria-hidden="true">
+          <svg viewBox="0 0 64 64" role="img">
+            <path d="M18 35 C23 25 32 21 43 24 C37 27 34 31 35 40 C28 35 23 35 18 35 Z" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M29 39 C34 32 43 28 53 30" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
           </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>
+      <section class="hero" aria-label="Trova la tua cala">
+        <h1 class="script-title">
+          <span>Trova la</span>
+          <span>tua Cala</span>
+        </h1>
+
+        <div class="island-line" aria-hidden="true">
+          <svg viewBox="0 0 420 300">
+            <path d="M202 25 C226 38 241 62 238 83 C254 72 279 79 286 98 C302 98 323 113 319 132 C344 144 350 174 329 191 C313 204 316 224 291 229 C268 233 251 217 231 231 C215 242 198 271 170 262 C149 255 141 232 119 229 C93 226 78 201 91 179 C100 163 81 149 95 126 C108 106 129 109 142 93 C155 76 143 54 165 41 C176 34 190 35 202 25 Z" />
+          </svg>
+        </div>
+      </section>
+
+      <section class="form-area" aria-label="Ricerca invitato">
+        <label class="field-label" for="guestName">Nome e cognome</label>
+        <div class="input-panel">
+          <input id="guestName" autocomplete="name" inputmode="text" placeholder="Es. Gaia Pollastrini" />
+          <button class="discover" id="discover" type="button">Scopri il Tavolo</button>
+        </div>
         <div id="message" class="message" aria-live="polite"></div>
         <div id="status" class="status" aria-live="polite"></div>
-      </div>
-    </section>
+      </section>
+    </div>
   </main>
 
   <section id="reveal" class="reveal" aria-live="assertive" aria-hidden="true">
-    <div class="reveal-content">
+    <div class="reveal-page">
       <p class="hello" id="hello"></p>
-      <div class="small-title">Il tuo tavolo è</div>
+      <p class="table-kicker">Il tuo tavolo è</p>
       <h2 class="table-name" id="tableName"></h2>
-      <div class="divider" aria-hidden="true"></div>
-      <p class="reveal-note">Segui la tua cala e goditi la serata.</p>
+      <div class="reveal-line" aria-hidden="true"></div>
+      <p class="reveal-note">In che cala cenerai? L’hai appena scoperto.</p>
       <button class="again" id="again" type="button">Cerca un altro nome</button>
     </div>
   </section>
 
   <script>
-    const DATA_URL = "";
+    const DATA_URL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vSlb-0cSIFaGN_BWrn_S9tQoQsdqGH7qYRYQGC3_3wRB-rGzwZoPoxIBNr9l6NmxW9Ont82YKIdGKIR/pub?output=csv";
 
     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 = {
@@ -579,6 +540,7 @@ Martina Esposito,Cala Sorrentino
     };
 
     let guests = [];
+    let hideTimer = null;
 
     function normalizeName(value) {
       return String(value || "")
@@ -685,8 +647,12 @@ Martina Esposito,Cala Sorrentino
     }
 
     function showReveal(guest) {
+      clearTimeout(hideTimer);
+      const longName = guest.tableName.length > 14;
       els.hello.textContent = `Ciao ${firstName(guest.fullName)}`;
       els.tableName.textContent = guest.tableName;
+      els.tableName.dataset.long = longName ? "true" : "false";
+      document.body.classList.add("reveal-open");
       els.reveal.classList.add("show");
       els.reveal.setAttribute("aria-hidden", "false");
       celebrate();
@@ -695,9 +661,13 @@ Martina Esposito,Cala Sorrentino
     function hideReveal() {
       els.reveal.classList.remove("show");
       els.reveal.setAttribute("aria-hidden", "true");
-      els.input.value = "";
-      els.message.classList.remove("show");
-      els.input.focus();
+      document.body.classList.remove("reveal-open");
+      stopConfetti();
+
+      hideTimer = window.setTimeout(() => {
+        els.input.value = "";
+        els.message.classList.remove("show");
+      }, 360);
     }
 
     function discoverTable() {
@@ -706,7 +676,6 @@ Martina Esposito,Cala Sorrentino
 
       if (!normalized) {
         showMessage("Scrivi nome e cognome per scoprire il tuo tavolo.");
-        els.input.focus();
         return;
       }
 
@@ -733,6 +702,9 @@ Martina Esposito,Cala Sorrentino
     els.input.addEventListener("keydown", event => {
       if (event.key === "Enter") discoverTable();
     });
+    window.addEventListener("keydown", event => {
+      if (event.key === "Escape" && els.reveal.classList.contains("show")) hideReveal();
+    });
 
     const ctx = els.canvas.getContext("2d");
     let confetti = [];
@@ -747,24 +719,24 @@ Martina Esposito,Cala Sorrentino
 
     function celebrate() {
       resizeCanvas();
-      const colors = ["#254B6B", "#8FA3B3", "#939675", "#C2C5B2", "#D08A7A", "#EDD3CD", "#F3EFE9"];
+      const colors = ["#254B6B", "#8FA3B3", "#939675", "#C2C5B2", "#D08A7A", "#EDD3CD"];
       const centerX = window.innerWidth / 2;
-      const centerY = window.innerHeight * .42;
+      const centerY = window.innerHeight * .36;
 
-      confetti = Array.from({ length: 140 }, () => {
+      confetti = Array.from({ length: 90 }, () => {
         const angle = Math.random() * Math.PI * 2;
-        const speed = 3.5 + Math.random() * 7;
+        const speed = 3 + Math.random() * 6;
         return {
           x: centerX,
           y: centerY,
-          size: 4 + Math.random() * 8,
+          size: 4 + Math.random() * 7,
           vx: Math.cos(angle) * speed,
-          vy: Math.sin(angle) * speed - 4.5,
-          gravity: .16 + Math.random() * .12,
+          vy: Math.sin(angle) * speed - 4,
+          gravity: .15 + Math.random() * .10,
           rotation: Math.random() * Math.PI,
-          spin: (Math.random() - .5) * .28,
+          spin: (Math.random() - .5) * .24,
           color: colors[Math.floor(Math.random() * colors.length)],
-          life: 95 + Math.random() * 45
+          life: 86 + Math.random() * 36
         };
       });
 
@@ -772,6 +744,13 @@ Martina Esposito,Cala Sorrentino
       animateConfetti();
     }
 
+    function stopConfetti() {
+      if (rafId) cancelAnimationFrame(rafId);
+      rafId = null;
+      confetti = [];
+      ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
+    }
+
     function animateConfetti() {
       ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
 
@@ -786,17 +765,18 @@ Martina Esposito,Cala Sorrentino
         ctx.save();
         ctx.translate(piece.x, piece.y);
         ctx.rotate(piece.rotation);
-        ctx.globalAlpha = Math.max(piece.life / 110, 0);
+        ctx.globalAlpha = Math.max(piece.life / 100, 0);
         ctx.fillStyle = piece.color;
-        ctx.fillRect(-piece.size / 2, -piece.size / 2, piece.size, piece.size * .62);
+        ctx.fillRect(-piece.size / 2, -piece.size / 2, piece.size, piece.size * .58);
         ctx.restore();
       });
 
-      confetti = confetti.filter(piece => piece.life > 0 && piece.y < window.innerHeight + 90);
+      confetti = confetti.filter(piece => piece.life > 0 && piece.y < window.innerHeight + 80);
 
       if (confetti.length) {
         rafId = requestAnimationFrame(animateConfetti);
       } else {
+        rafId = null;
         ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
       }
     }