Update index.html

index.html

@@ -8,7 +8,7 @@
 
   <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&family=Great+Vibes&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Great+Vibes&display=swap" rel="stylesheet">
 
   <style>
     @font-face {
@@ -25,23 +25,31 @@
 
     :root {
       --blue: #254B6B;
+      --blue-deep: #1B3A55;
       --blue-soft: #8FA3B3;
       --olive: #939675;
+      --olive-deep: #6F7257;
       --sage: #C2C5B2;
       --coral: #D08A7A;
+      --coral-deep: #B8705F;
       --rose: #EDD3CD;
       --cream: #F3EFE9;
       --paper: #FFFDF8;
-      --border: rgba(147, 150, 117, .22);
-      --shadow: 0 16px 38px rgba(37, 75, 107, .10);
+      --ink: rgba(37, 75, 107, .82);
+      --ink-soft: rgba(37, 75, 107, .56);
+      --ink-faint: rgba(37, 75, 107, .34);
+      --hair: rgba(147, 150, 117, .26);
       --font-main: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      --font-serif: "Cormorant Garamond", "Cormorant", Georgia, serif;
       --font-script: "Amsterdam One", "Great Vibes", "Snell Roundhand", cursive;
+
+      --grain:
+        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.145 0 0 0 0 0.294 0 0 0 0 0.420 0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
     }
 
     * { box-sizing: border-box; }
 
-    html,
-    body {
+    html, body {
       width: 100%;
       height: 100%;
       margin: 0;
@@ -49,13 +57,60 @@
       font-family: var(--font-main);
       color: var(--blue);
       background: var(--cream);
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
     }
 
     body {
       min-height: 100dvh;
-      background: linear-gradient(180deg, #fffdf8 0%, #f7f2ec 100%);
+      background-color: var(--cream);
+      background-image:
+        radial-gradient(ellipse 70% 55% at 50% 38%, rgba(237, 211, 205, .26) 0%, rgba(237, 211, 205, 0) 60%),
+        radial-gradient(ellipse 90% 60% at 50% 105%, rgba(143, 163, 179, .14) 0%, rgba(143, 163, 179, 0) 65%),
+        linear-gradient(180deg, #fffdf8 0%, #f5efe7 100%);
+      position: relative;
+    }
+
+    body::before {
+      content: "";
+      position: fixed;
+      inset: 0;
+      background-image: var(--grain);
+      background-size: 220px 220px;
+      opacity: .42;
+      mix-blend-mode: multiply;
+      pointer-events: none;
+      z-index: 0;
     }
 
+    body.reveal-open { overflow: hidden; }
+
+    /* ---------- decorative frame + corners ---------- */
+    .frame {
+      position: fixed;
+      inset: 18px;
+      border: 1px solid var(--hair);
+      border-radius: 30px;
+      pointer-events: none;
+      z-index: 1;
+    }
+
+    .corner {
+      position: fixed;
+      width: 64px;
+      height: 64px;
+      color: var(--olive);
+      opacity: .55;
+      pointer-events: none;
+      z-index: 2;
+    }
+    .corner svg { width: 100%; height: 100%; display: block; overflow: visible; }
+    .corner-tl { top: 26px; left: 26px; }
+    .corner-tr { top: 26px; right: 26px; transform: scaleX(-1); }
+    .corner-bl { bottom: 26px; left: 26px; transform: scaleY(-1); }
+    .corner-br { bottom: 26px; right: 26px; transform: scale(-1, -1); }
+
+    /* ---------- screen layout ---------- */
     .screen {
       position: relative;
       width: 100%;
@@ -64,48 +119,78 @@
       display: flex;
       justify-content: center;
       overflow: hidden;
-    }
-
-    .screen::before,
-    .reveal::before {
-      content: "";
-      position: fixed;
-      inset: 16px;
-      border: 1px solid var(--border);
-      border-radius: 28px;
-      pointer-events: none;
-      z-index: 0;
+      z-index: 3;
     }
 
     .page {
       position: relative;
-      z-index: 1;
       width: min(100%, 500px);
       height: 100dvh;
-      padding: max(20px, env(safe-area-inset-top)) 28px max(18px, env(safe-area-inset-bottom));
+      padding: max(20px, env(safe-area-inset-top)) 30px max(20px, env(safe-area-inset-bottom));
       display: grid;
-      grid-template-rows: 58px minmax(0, 1fr) auto;
-      gap: 10px;
+      grid-template-rows: auto minmax(0, 1fr) auto;
+      gap: 6px;
       overflow: hidden;
     }
 
+    /* ---------- staggered entrance ---------- */
+    @keyframes rise {
+      from { opacity: 0; transform: translateY(14px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    @keyframes fadeIn {
+      from { opacity: 0; }
+      to   { opacity: 1; }
+    }
+    @keyframes float {
+      0%, 100% { transform: translateY(0); }
+      50%      { transform: translateY(-6px); }
+    }
+
+    .anim { opacity: 0; animation: rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
+    .anim-1 { animation-delay: .05s; }
+    .anim-2 { animation-delay: .18s; }
+    .anim-3 { animation-delay: .32s; }
+    .anim-4 { animation-delay: .46s; }
+    .anim-5 { animation-delay: .60s; }
+
+    /* ---------- top mark ---------- */
     .top-mark {
       display: flex;
+      flex-direction: column;
       align-items: center;
       justify-content: center;
+      padding: 6px 0 0;
+      gap: 8px;
     }
 
     .logo {
-      width: 54px;
-      height: 54px;
+      width: 76px;
+      height: 76px;
       display: block;
       object-fit: contain;
       background: transparent;
-      opacity: .96;
-      mix-blend-mode: normal;
-      filter: none;
     }
 
+    .top-eyebrow {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      color: var(--ink-faint);
+      font-size: 9.5px;
+      font-weight: 700;
+      letter-spacing: .38em;
+      text-transform: uppercase;
+    }
+    .top-eyebrow::before,
+    .top-eyebrow::after {
+      content: "";
+      width: 22px;
+      height: 1px;
+      background: var(--hair);
+    }
+
+    /* ---------- hero ---------- */
     .hero {
       min-height: 0;
       display: flex;
@@ -113,98 +198,159 @@
       align-items: center;
       justify-content: center;
       text-align: center;
-      padding: 2px 0 8px;
+      padding: 0 0 4px;
+    }
+
+    .hero-tag {
+      margin: 0 0 8px;
+      color: var(--coral-deep);
+      font-family: var(--font-serif);
+      font-style: italic;
+      font-size: 16px;
+      font-weight: 400;
+      letter-spacing: .02em;
     }
 
     .script-title {
       margin: 0 auto;
       color: var(--blue);
       font-family: var(--font-script);
-      font-size: clamp(50px, 13vw, 78px);
+      font-size: clamp(60px, 16vw, 96px);
       font-weight: 400;
-      line-height: .82;
+      line-height: .78;
       letter-spacing: -.025em;
       text-wrap: balance;
     }
 
-    .script-title span {
-      display: block;
-    }
+    .script-title span { display: block; }
+    .script-title span:first-child { transform: translateX(-.04em); }
+    .script-title span:last-child  { transform: translateX(.05em); margin-top: -.02em; }
 
-    .script-title span:first-child {
-      transform: translateX(-.04em);
+    /* ---------- coastline illustration ---------- */
+    .coast {
+      width: min(78vw, 320px);
+      height: 158px;
+      margin: clamp(14px, 3dvh, 26px) auto 0;
+      animation: float 7s ease-in-out infinite;
+    }
+    .coast svg { width: 100%; height: 100%; display: block; overflow: visible; }
+
+    .sea-wave {
+      fill: none;
+      stroke: var(--blue-soft);
+      stroke-width: 1.1;
+      stroke-linecap: round;
+      opacity: .42;
+      vector-effect: non-scaling-stroke;
+    }
+    .sea-wave-soft {
+      fill: none;
+      stroke: var(--sage);
+      stroke-width: 1;
+      stroke-linecap: round;
+      opacity: .55;
+      vector-effect: non-scaling-stroke;
+    }
+    .sun {
+      fill: none;
+      stroke: var(--coral);
+      stroke-width: 1.4;
+      opacity: .72;
+      vector-effect: non-scaling-stroke;
+    }
+    .island-shape {
+      fill: rgba(147, 150, 117, .10);
+      stroke: var(--olive-deep);
+      stroke-width: 1.6;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      vector-effect: non-scaling-stroke;
+    }
+    .cypress {
+      fill: var(--olive-deep);
+      opacity: .82;
+    }
+    .cala-dot {
+      fill: var(--coral);
+    }
+    .cala-ring {
+      fill: none;
+      stroke: var(--coral);
+      stroke-width: 1.2;
+      opacity: .35;
+      vector-effect: non-scaling-stroke;
     }
 
-    .script-title span:last-child {
-      transform: translateX(.05em);
-      margin-top: -.02em;
+    /* ---------- form ---------- */
+    .form-area {
+      padding-bottom: clamp(2px, 1.6dvh, 14px);
     }
 
-    .island-line {
-      width: min(34vw, 150px);
-      max-width: 150px;
-      height: 118px;
-      margin: clamp(16px, 3dvh, 26px) auto 0;
+    .field-label {
       display: flex;
       align-items: center;
       justify-content: center;
-      overflow: hidden;
+      gap: 10px;
+      margin: 0 0 12px;
+      color: var(--ink-soft);
+      font-size: 10.5px;
+      font-weight: 700;
+      letter-spacing: .26em;
+      text-transform: uppercase;
     }
-
-    .island-img {
-      max-width: 100%;
-      max-height: 100%;
-      width: auto;
-      height: auto;
-      display: block;
-      object-fit: contain;
-      opacity: 1;
-      background: transparent;
-      mix-blend-mode: normal;
-      filter: none;
-      transform: none;
-      animation: none;
+    .field-label::before,
+    .field-label::after {
+      content: "";
+      flex: 0 0 18px;
+      height: 1px;
+      background: var(--hair);
     }
 
-    .form-area {
-      padding-bottom: clamp(2px, 1.6dvh, 16px);
+    .input-wrap {
+      position: relative;
     }
 
-    .field-label {
-      display: block;
-      margin: 0 0 10px;
-      color: rgba(37, 75, 107, .74);
-      font-size: 11px;
-      font-weight: 800;
-      letter-spacing: .15em;
-      text-transform: uppercase;
+    .input-wrap::before {
+      content: "";
+      position: absolute;
+      left: 22px;
+      top: 50%;
+      width: 14px;
+      height: 14px;
+      transform: translateY(-50%);
+      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23254B6B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' opacity='0.42'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>");
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: contain;
+      pointer-events: none;
     }
 
     input {
       width: 100%;
       height: 60px;
-      border: 1px solid rgba(147, 150, 117, .30);
+      border: 1px solid rgba(147, 150, 117, .32);
       outline: 0;
       border-radius: 999px;
-      padding: 0 22px;
+      padding: 0 22px 0 46px;
       color: var(--blue);
       background: rgba(255, 253, 248, .92);
       font-family: var(--font-main);
-      font-size: 16px;
+      font-size: 15.5px;
       font-weight: 600;
-      box-shadow: 0 10px 26px rgba(37, 75, 107, .07);
-      transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
+      letter-spacing: .005em;
+      box-shadow: 0 8px 22px rgba(37, 75, 107, .06), inset 0 1px 0 rgba(255, 255, 255, .5);
+      transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
     }
 
-    input::placeholder {
-      color: rgba(37, 75, 107, .34);
-      font-weight: 600;
-    }
+    input::placeholder { color: var(--ink-faint); font-weight: 500; font-style: italic; }
 
     input:focus {
-      border-color: rgba(208, 138, 122, .70);
+      border-color: rgba(208, 138, 122, .65);
       background: var(--paper);
-      box-shadow: 0 0 0 5px rgba(237, 211, 205, .28), 0 12px 30px rgba(37, 75, 107, .08);
+      box-shadow:
+        0 0 0 5px rgba(237, 211, 205, .32),
+        0 12px 28px rgba(37, 75, 107, .08),
+        inset 0 1px 0 rgba(255, 255, 255, .6);
     }
 
     .discover {
@@ -217,87 +363,144 @@
       cursor: pointer;
       overflow: hidden;
       color: var(--paper);
-      background: var(--blue);
+      background: linear-gradient(180deg, #2a557a 0%, #1f405b 100%);
       font-family: var(--font-main);
-      font-size: 15px;
-      font-weight: 800;
-      letter-spacing: .02em;
-      box-shadow: 0 14px 32px rgba(37, 75, 107, .17);
-      transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
+      font-size: 13.5px;
+      font-weight: 700;
+      letter-spacing: .22em;
+      text-transform: uppercase;
+      box-shadow:
+        0 14px 30px rgba(37, 75, 107, .22),
+        inset 0 1px 0 rgba(255, 255, 255, .12);
+      transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
+    }
+
+    .discover-inner {
+      display: inline-flex;
+      align-items: center;
+      gap: 14px;
+    }
+    .discover-inner::before,
+    .discover-inner::after {
+      content: "";
+      width: 16px;
+      height: 1px;
+      background: rgba(237, 211, 205, .55);
     }
 
     .discover::after {
       content: "";
       position: absolute;
       left: 50%;
-      bottom: 9px;
-      width: 54px;
-      height: 2px;
+      bottom: 8px;
+      width: 6px;
+      height: 6px;
       border-radius: 999px;
       background: var(--coral);
       transform: translateX(-50%);
+      box-shadow: 0 0 0 3px rgba(208, 138, 122, .22);
     }
 
+    .discover:hover {
+      transform: translateY(-1px);
+      filter: brightness(1.04);
+      box-shadow:
+        0 18px 36px rgba(37, 75, 107, .26),
+        inset 0 1px 0 rgba(255, 255, 255, .14);
+    }
     .discover:active {
       transform: translateY(2px);
-      background: #1f405b;
-      box-shadow: 0 8px 22px rgba(37, 75, 107, .14);
+      box-shadow:
+        0 8px 18px rgba(37, 75, 107, .14),
+        inset 0 1px 0 rgba(255, 255, 255, .10);
     }
 
     .message {
       min-height: 0;
-      margin-top: 10px;
+      margin-top: 12px;
       opacity: 0;
       transform: translateY(8px);
-      transition: opacity .22s ease, transform .22s ease;
-    }
-
-    .message.show {
-      opacity: 1;
-      transform: translateY(0);
+      transition: opacity .26s ease, transform .26s ease;
     }
+    .message.show { opacity: 1; transform: translateY(0); }
 
     .message-card {
-      border-radius: 18px;
-      padding: 13px 15px;
-      color: rgba(37, 75, 107, .78);
-      background: rgba(255, 253, 248, .90);
-      border: 1px solid rgba(147, 150, 117, .22);
+      position: relative;
+      border-radius: 16px;
+      padding: 14px 16px;
+      color: var(--ink);
+      background: rgba(255, 253, 248, .92);
+      border: 1px solid var(--hair);
       text-align: center;
-      font-size: 13px;
-      line-height: 1.35;
-      font-weight: 600;
-      box-shadow: 0 10px 26px rgba(37, 75, 107, .06);
+      font-size: 12.5px;
+      line-height: 1.42;
+      font-weight: 500;
+      letter-spacing: .005em;
+      box-shadow: 0 10px 24px rgba(37, 75, 107, .05);
+    }
+    .message-card::before {
+      content: "";
+      position: absolute;
+      top: -1px;
+      left: 50%;
+      width: 36px;
+      height: 2px;
+      background: var(--coral);
+      border-radius: 999px;
+      transform: translateX(-50%);
     }
 
+    /* ---------- reveal screen ---------- */
     .reveal {
       position: fixed;
       inset: 0;
       z-index: 20;
       display: grid;
       place-items: center;
-      padding: max(24px, env(safe-area-inset-top)) 24px max(22px, env(safe-area-inset-bottom));
+      padding: max(28px, env(safe-area-inset-top)) 28px max(24px, env(safe-area-inset-bottom));
       color: var(--blue);
-      background: linear-gradient(180deg, #fffdf8 0%, #f7f2ec 100%);
+      background-color: var(--cream);
+      background-image:
+        radial-gradient(ellipse 75% 60% at 50% 38%, rgba(237, 211, 205, .32) 0%, rgba(237, 211, 205, 0) 60%),
+        radial-gradient(ellipse 90% 55% at 50% 110%, rgba(143, 163, 179, .18) 0%, rgba(143, 163, 179, 0) 65%),
+        linear-gradient(180deg, #fffdf8 0%, #f4ede4 100%);
       opacity: 0;
       visibility: hidden;
       pointer-events: none;
-      transform: scale(1.01);
-      transition: opacity .30s ease, transform .30s ease, visibility 0s linear .30s;
+      transform: scale(1.015);
+      transition: opacity .36s ease, transform .36s ease, visibility 0s linear .36s;
       overflow: hidden;
     }
-
+    .reveal::after {
+      content: "";
+      position: fixed;
+      inset: 0;
+      background-image: var(--grain);
+      background-size: 220px 220px;
+      opacity: .42;
+      mix-blend-mode: multiply;
+      pointer-events: none;
+    }
     .reveal.show {
       opacity: 1;
       visibility: visible;
       pointer-events: auto;
       transform: scale(1);
-      transition: opacity .30s ease, transform .30s ease, visibility 0s;
+      transition: opacity .36s ease, transform .36s ease, visibility 0s;
+    }
+
+    .reveal-frame {
+      position: fixed;
+      inset: 18px;
+      border: 1px solid var(--hair);
+      border-radius: 30px;
+      pointer-events: none;
+      z-index: 1;
     }
 
     .reveal-page {
       position: relative;
-      z-index: 1;
+      z-index: 2;
       width: min(100%, 560px);
       height: 100%;
       display: flex;
@@ -307,84 +510,175 @@
       overflow: hidden;
     }
 
+    .reveal.show .reveal-step { animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
+    .reveal.show .step-1 { animation-delay: .08s; }
+    .reveal.show .step-2 { animation-delay: .22s; }
+    .reveal.show .step-3 { animation-delay: .38s; }
+    .reveal.show .step-4 { animation-delay: .56s; }
+    .reveal.show .step-5 { animation-delay: .72s; }
+    .reveal.show .step-6 { animation-delay: .86s; }
+
     .hello {
-      margin: 0 0 clamp(20px, 4dvh, 34px);
-      color: rgba(37, 75, 107, .66);
-      font-size: clamp(15px, 4vw, 19px);
-      font-weight: 500;
-      letter-spacing: .02em;
+      margin: 0 0 6px;
+      color: var(--ink-soft);
+      font-family: var(--font-serif);
+      font-style: italic;
+      font-size: clamp(17px, 4.4vw, 22px);
+      font-weight: 400;
+      letter-spacing: .005em;
+    }
+
+    .hello-divider {
+      width: 28px;
+      height: 1px;
+      margin: 0 auto clamp(18px, 3.6dvh, 28px);
+      background: var(--hair);
+      position: relative;
+    }
+    .hello-divider::before {
+      content: "";
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      width: 5px;
+      height: 5px;
+      border-radius: 999px;
+      background: var(--coral);
+      transform: translate(-50%, -50%);
     }
 
     .table-kicker {
-      margin: 0 0 8px;
-      color: var(--coral);
-      font-size: 12px;
-      font-weight: 800;
-      letter-spacing: .22em;
+      margin: 0 0 12px;
+      color: var(--coral-deep);
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: .42em;
       text-transform: uppercase;
     }
+    .table-kicker span {
+      display: inline-flex;
+      align-items: center;
+      gap: 14px;
+    }
+    .table-kicker span::before,
+    .table-kicker span::after {
+      content: "";
+      width: 24px;
+      height: 1px;
+      background: var(--coral);
+      opacity: .55;
+    }
+
+    .table-name-wrap {
+      position: relative;
+      display: inline-block;
+      margin: 0 auto;
+      padding: 0 clamp(28px, 8vw, 56px);
+    }
+
+    .branch {
+      position: absolute;
+      top: 50%;
+      width: clamp(36px, 9vw, 56px);
+      height: clamp(72px, 18vw, 110px);
+      transform: translateY(-50%);
+      color: var(--olive);
+      opacity: .68;
+      pointer-events: none;
+    }
+    .branch svg { width: 100%; height: 100%; display: block; overflow: visible; }
+    .branch-l { left: -8px; }
+    .branch-r { right: -8px; transform: translateY(-50%) scaleX(-1); }
+
+    .branch-stem {
+      fill: none;
+      stroke: var(--olive-deep);
+      stroke-width: 1.4;
+      stroke-linecap: round;
+      vector-effect: non-scaling-stroke;
+    }
+    .branch-leaf {
+      fill: var(--olive);
+      opacity: .85;
+    }
+    .branch-leaf-soft {
+      fill: var(--sage);
+      opacity: .9;
+    }
 
     .table-name {
       margin: 0 auto;
       max-width: 11ch;
       color: var(--blue);
       font-family: var(--font-script);
-      font-size: clamp(72px, 22vw, 138px);
+      font-size: clamp(76px, 23vw, 144px);
       font-weight: 400;
       line-height: .76;
       letter-spacing: -.035em;
       text-wrap: balance;
     }
-
     .table-name[data-long="true"] {
       max-width: 12ch;
-      font-size: clamp(54px, 17vw, 104px);
+      font-size: clamp(56px, 17vw, 108px);
     }
 
-    .reveal-island {
-      width: min(30vw, 132px);
-      height: 100px;
-      margin: clamp(18px, 3.2dvh, 26px) auto 0;
+    .reveal-divider {
       display: flex;
       align-items: center;
       justify-content: center;
-      overflow: hidden;
-      opacity: .34;
+      gap: 10px;
+      margin: clamp(20px, 4dvh, 32px) auto 0;
     }
-
-    .reveal-line {
-      width: 82px;
-      height: 2px;
-      margin: clamp(14px, 2.8dvh, 24px) auto 0;
-      border-radius: 999px;
+    .reveal-divider::before,
+    .reveal-divider::after {
+      content: "";
+      width: 38px;
+      height: 1px;
       background: var(--olive);
-      opacity: .58;
+      opacity: .55;
+    }
+    .reveal-divider .dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 999px;
+      background: var(--coral);
+      box-shadow: 0 0 0 4px rgba(208, 138, 122, .18);
     }
 
     .reveal-note {
-      margin: 14px auto 0;
-      max-width: 28ch;
-      color: rgba(37, 75, 107, .66);
-      font-size: 15px;
-      line-height: 1.42;
-      font-weight: 500;
+      margin: 16px auto 0;
+      max-width: 32ch;
+      color: var(--ink-soft);
+      font-family: var(--font-serif);
+      font-style: italic;
+      font-size: clamp(15px, 4vw, 18px);
+      font-weight: 400;
+      line-height: 1.45;
+      letter-spacing: .003em;
     }
 
     .again {
       align-self: center;
-      height: 52px;
-      margin-top: clamp(20px, 4dvh, 30px);
-      border: 1px solid rgba(37, 75, 107, .14);
+      height: 50px;
+      margin-top: clamp(22px, 4.4dvh, 32px);
+      border: 1px solid rgba(37, 75, 107, .16);
       border-radius: 999px;
-      padding: 0 24px;
+      padding: 0 26px;
       color: var(--blue);
-      background: rgba(255, 253, 248, .90);
-      box-shadow: 0 14px 32px rgba(37, 75, 107, .08);
+      background: rgba(255, 253, 248, .92);
+      box-shadow: 0 12px 26px rgba(37, 75, 107, .07);
       font-family: var(--font-main);
-      font-size: 13px;
-      font-weight: 800;
-      letter-spacing: .03em;
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: .26em;
+      text-transform: uppercase;
       cursor: pointer;
+      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
+    }
+    .again:hover {
+      transform: translateY(-1px);
+      background: var(--paper);
+      box-shadow: 0 16px 30px rgba(37, 75, 107, .10);
     }
 
     .status {
@@ -405,79 +699,217 @@
       pointer-events: none;
     }
 
+    /* ---------- responsive tightening ---------- */
+    @media (max-height: 720px) {
+      .logo { width: 64px; height: 64px; }
+      .coast { height: 134px; margin-top: 10px; }
+      .script-title { font-size: clamp(54px, 14vw, 84px); }
+    }
+
     @media (max-width: 380px) {
-      .screen::before, .reveal::before { inset: 12px; border-radius: 24px; }
-      .page { padding-left: 22px; padding-right: 22px; grid-template-rows: 52px minmax(0, 1fr) auto; }
-      .logo { width: 48px; height: 48px; }
-      .script-title { font-size: clamp(48px, 14vw, 70px); }
-      .island-line { width: min(32vw, 125px); height: 96px; margin-top: 14px; }
+      .frame, .reveal-frame { inset: 12px; border-radius: 24px; }
+      .corner { width: 52px; height: 52px; }
+      .corner-tl, .corner-tr { top: 20px; }
+      .corner-bl, .corner-br { bottom: 20px; }
+      .corner-tl, .corner-bl { left: 20px; }
+      .corner-tr, .corner-br { right: 20px; }
+      .page { padding-left: 22px; padding-right: 22px; }
+      .logo { width: 64px; height: 64px; }
+      .script-title { font-size: clamp(50px, 14vw, 76px); }
+      .coast { width: min(72vw, 270px); height: 130px; }
       input, .discover { height: 56px; }
-      .table-name { font-size: clamp(62px, 20vw, 106px); }
-      .table-name[data-long="true"] { font-size: clamp(50px, 16vw, 88px); }
-      .reveal-island { width: min(28vw, 112px); height: 84px; }
+      .table-name { font-size: clamp(64px, 21vw, 108px); }
+      .table-name[data-long="true"] { font-size: clamp(48px, 16vw, 88px); }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .anim, .reveal.show .reveal-step { animation: none; opacity: 1; transform: none; }
+      .coast { animation: none; }
     }
   </style>
 </head>
 <body>
   <canvas id="confetti"></canvas>
 
+  <!-- decorative frame & corner ornaments -->
+  <div class="frame" aria-hidden="true"></div>
+
+  <div class="corner corner-tl" aria-hidden="true">
+    <svg viewBox="0 0 80 80">
+      <path d="M8 8 L8 30 M8 8 L30 8" fill="none" stroke="currentColor" stroke-width="1" opacity=".55" stroke-linecap="round"/>
+      <path d="M14 14 C 22 16, 30 22, 36 32" fill="none" stroke="currentColor" stroke-width="1.1" opacity=".7" stroke-linecap="round"/>
+      <ellipse cx="20" cy="18" rx="3" ry="1.4" fill="currentColor" opacity=".75" transform="rotate(35 20 18)"/>
+      <ellipse cx="26" cy="22" rx="3.4" ry="1.5" fill="currentColor" opacity=".6" transform="rotate(45 26 22)"/>
+      <ellipse cx="31" cy="28" rx="3" ry="1.4" fill="currentColor" opacity=".75" transform="rotate(55 31 28)"/>
+      <ellipse cx="34" cy="33" rx="2.4" ry="1.2" fill="currentColor" opacity=".55" transform="rotate(60 34 33)"/>
+    </svg>
+  </div>
+  <div class="corner corner-tr" aria-hidden="true">
+    <svg viewBox="0 0 80 80">
+      <path d="M8 8 L8 30 M8 8 L30 8" fill="none" stroke="currentColor" stroke-width="1" opacity=".55" stroke-linecap="round"/>
+      <path d="M14 14 C 22 16, 30 22, 36 32" fill="none" stroke="currentColor" stroke-width="1.1" opacity=".7" stroke-linecap="round"/>
+      <ellipse cx="20" cy="18" rx="3" ry="1.4" fill="currentColor" opacity=".75" transform="rotate(35 20 18)"/>
+      <ellipse cx="26" cy="22" rx="3.4" ry="1.5" fill="currentColor" opacity=".6" transform="rotate(45 26 22)"/>
+      <ellipse cx="31" cy="28" rx="3" ry="1.4" fill="currentColor" opacity=".75" transform="rotate(55 31 28)"/>
+      <ellipse cx="34" cy="33" rx="2.4" ry="1.2" fill="currentColor" opacity=".55" transform="rotate(60 34 33)"/>
+    </svg>
+  </div>
+  <div class="corner corner-bl" aria-hidden="true">
+    <svg viewBox="0 0 80 80">
+      <path d="M8 8 L8 30 M8 8 L30 8" fill="none" stroke="currentColor" stroke-width="1" opacity=".55" stroke-linecap="round"/>
+      <path d="M14 14 C 22 16, 30 22, 36 32" fill="none" stroke="currentColor" stroke-width="1.1" opacity=".7" stroke-linecap="round"/>
+      <ellipse cx="20" cy="18" rx="3" ry="1.4" fill="currentColor" opacity=".75" transform="rotate(35 20 18)"/>
+      <ellipse cx="26" cy="22" rx="3.4" ry="1.5" fill="currentColor" opacity=".6" transform="rotate(45 26 22)"/>
+      <ellipse cx="31" cy="28" rx="3" ry="1.4" fill="currentColor" opacity=".75" transform="rotate(55 31 28)"/>
+      <ellipse cx="34" cy="33" rx="2.4" ry="1.2" fill="currentColor" opacity=".55" transform="rotate(60 34 33)"/>
+    </svg>
+  </div>
+  <div class="corner corner-br" aria-hidden="true">
+    <svg viewBox="0 0 80 80">
+      <path d="M8 8 L8 30 M8 8 L30 8" fill="none" stroke="currentColor" stroke-width="1" opacity=".55" stroke-linecap="round"/>
+      <path d="M14 14 C 22 16, 30 22, 36 32" fill="none" stroke="currentColor" stroke-width="1.1" opacity=".7" stroke-linecap="round"/>
+      <ellipse cx="20" cy="18" rx="3" ry="1.4" fill="currentColor" opacity=".75" transform="rotate(35 20 18)"/>
+      <ellipse cx="26" cy="22" rx="3.4" ry="1.5" fill="currentColor" opacity=".6" transform="rotate(45 26 22)"/>
+      <ellipse cx="31" cy="28" rx="3" ry="1.4" fill="currentColor" opacity=".75" transform="rotate(55 31 28)"/>
+      <ellipse cx="34" cy="33" rx="2.4" ry="1.2" fill="currentColor" opacity=".55" transform="rotate(60 34 33)"/>
+    </svg>
+  </div>
+
   <main class="screen">
     <div class="page">
-      <div class="top-mark">
-        <img class="logo clean-bg" src="logo.png" alt="Logo matrimonio" />
+      <div class="top-mark anim anim-1">
+        <img class="logo" src="logo.png" alt="Logo matrimonio" />
+        <div class="top-eyebrow">Mise en place</div>
       </div>
 
       <section class="hero" aria-label="Trova la tua cala">
-        <h1 class="script-title">
+        <p class="hero-tag anim anim-2">a tavola, in riva al mare</p>
+        <h1 class="script-title anim anim-3">
           <span>Trova la</span>
           <span>tua Cala</span>
         </h1>
 
-        <div class="island-line" aria-hidden="true">
-          <img class="island-img clean-bg" src="isola.png" alt="" />
+        <div class="coast anim anim-4" aria-hidden="true">
+          <svg viewBox="0 0 420 220" role="img">
+            <!-- soft sea waves behind -->
+            <path class="sea-wave-soft" d="M30 168 Q 80 162 130 168 T 230 168 T 330 168 T 410 168" />
+            <path class="sea-wave-soft" d="M30 184 Q 80 178 130 184 T 230 184 T 330 184 T 410 184" />
+            <path class="sea-wave" d="M30 200 Q 80 194 130 200 T 230 200 T 330 200 T 410 200" />
+
+            <!-- sun -->
+            <circle class="sun" cx="338" cy="56" r="22" />
+
+            <!-- island -->
+            <path class="island-shape" d="M62 152
+              C 78 130, 102 116, 134 116
+              C 158 116, 178 124, 196 116
+              C 218 106, 238 110, 256 122
+              C 278 110, 304 114, 322 130
+              C 340 144, 348 156, 354 162
+              L 62 162 Z" />
+
+            <!-- cypresses on island -->
+            <path class="cypress" d="M148 116 q 1.6 -16 0 -28 q -1.6 12 0 28 z" />
+            <path class="cypress" d="M210 110 q 1.4 -14 0 -24 q -1.4 10 0 24 z" />
+            <path class="cypress" d="M278 116 q 1.5 -15 0 -26 q -1.5 11 0 26 z" />
+
+            <!-- cala dots with rings -->
+            <circle class="cala-ring" cx="96" cy="146" r="6" />
+            <circle class="cala-dot"  cx="96" cy="146" r="2.6" />
+
+            <circle class="cala-ring" cx="178" cy="138" r="6" />
+            <circle class="cala-dot"  cx="178" cy="138" r="2.6" />
+
+            <circle class="cala-ring" cx="244" cy="142" r="6" />
+            <circle class="cala-dot"  cx="244" cy="142" r="2.6" />
+
+            <circle class="cala-ring" cx="316" cy="146" r="6" />
+            <circle class="cala-dot"  cx="316" cy="146" r="2.6" />
+
+            <!-- sailboat -->
+            <g opacity=".75">
+              <path d="M70 188 L 88 188 L 84 194 L 74 194 Z" fill="#6F7257"/>
+              <path d="M79 188 L 79 172 L 90 188 Z" fill="#6F7257"/>
+            </g>
+          </svg>
         </div>
       </section>
 
-      <section class="form-area" aria-label="Ricerca invitato">
-        <label class="field-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="form-area anim anim-5" aria-label="Ricerca invitato">
+        <label class="field-label" for="guestName">Nome &amp; Cognome</label>
+        <div class="input-wrap">
+          <input id="guestName" autocomplete="name" inputmode="text" placeholder="Es. Gaia Pollastrini" />
+        </div>
+        <button class="discover" id="discover" type="button">
+          <span class="discover-inner">Scopri il tavolo</span>
+        </button>
         <div id="message" class="message" aria-live="polite"></div>
         <div id="status" class="status" aria-live="polite"></div>
       </section>
     </div>
   </main>
 
+  <!-- ===================== REVEAL ===================== -->
   <section id="reveal" class="reveal" aria-live="assertive" aria-hidden="true">
+    <div class="reveal-frame" aria-hidden="true"></div>
+
     <div class="reveal-page">
-      <p class="hello" id="hello"></p>
-      <p class="table-kicker">Il tuo tavolo è</p>
-      <h2 class="table-name" id="tableName"></h2>
-      <div class="reveal-island" aria-hidden="true">
-        <img class="island-img clean-bg" src="isola.png" alt="" />
+      <p class="hello reveal-step step-1" id="hello"></p>
+      <div class="hello-divider reveal-step step-2" aria-hidden="true"></div>
+
+      <p class="table-kicker reveal-step step-3"><span>Il tuo tavolo è</span></p>
+
+      <div class="table-name-wrap reveal-step step-4">
+        <!-- left olive branch -->
+        <div class="branch branch-l" aria-hidden="true">
+          <svg viewBox="0 0 60 120">
+            <path class="branch-stem" d="M50 6 C 32 36, 22 70, 30 116" />
+            <ellipse class="branch-leaf"      cx="44" cy="20" rx="6" ry="2.4" transform="rotate(-25 44 20)"/>
+            <ellipse class="branch-leaf-soft" cx="36" cy="32" rx="6.5" ry="2.6" transform="rotate(-30 36 32)"/>
+            <ellipse class="branch-leaf"      cx="32" cy="46" rx="7" ry="2.7" transform="rotate(-38 32 46)"/>
+            <ellipse class="branch-leaf-soft" cx="28" cy="60" rx="7" ry="2.7" transform="rotate(-46 28 60)"/>
+            <ellipse class="branch-leaf"      cx="26" cy="74" rx="7" ry="2.7" transform="rotate(-54 26 74)"/>
+            <ellipse class="branch-leaf-soft" cx="26" cy="88" rx="6.5" ry="2.6" transform="rotate(-62 26 88)"/>
+            <ellipse class="branch-leaf"      cx="28" cy="102" rx="5.6" ry="2.3" transform="rotate(-70 28 102)"/>
+            <!-- tiny olives -->
+            <circle cx="40" cy="26" r="1.6" fill="var(--olive-deep)" opacity=".75"/>
+            <circle cx="30" cy="54" r="1.6" fill="var(--olive-deep)" opacity=".75"/>
+            <circle cx="27" cy="82" r="1.6" fill="var(--olive-deep)" opacity=".75"/>
+          </svg>
+        </div>
+
+        <h2 class="table-name" id="tableName"></h2>
+
+        <!-- right olive branch (mirrored via CSS) -->
+        <div class="branch branch-r" aria-hidden="true">
+          <svg viewBox="0 0 60 120">
+            <path class="branch-stem" d="M50 6 C 32 36, 22 70, 30 116" />
+            <ellipse class="branch-leaf"      cx="44" cy="20" rx="6" ry="2.4" transform="rotate(-25 44 20)"/>
+            <ellipse class="branch-leaf-soft" cx="36" cy="32" rx="6.5" ry="2.6" transform="rotate(-30 36 32)"/>
+            <ellipse class="branch-leaf"      cx="32" cy="46" rx="7" ry="2.7" transform="rotate(-38 32 46)"/>
+            <ellipse class="branch-leaf-soft" cx="28" cy="60" rx="7" ry="2.7" transform="rotate(-46 28 60)"/>
+            <ellipse class="branch-leaf"      cx="26" cy="74" rx="7" ry="2.7" transform="rotate(-54 26 74)"/>
+            <ellipse class="branch-leaf-soft" cx="26" cy="88" rx="6.5" ry="2.6" transform="rotate(-62 26 88)"/>
+            <ellipse class="branch-leaf"      cx="28" cy="102" rx="5.6" ry="2.3" transform="rotate(-70 28 102)"/>
+            <circle cx="40" cy="26" r="1.6" fill="var(--olive-deep)" opacity=".75"/>
+            <circle cx="30" cy="54" r="1.6" fill="var(--olive-deep)" opacity=".75"/>
+            <circle cx="27" cy="82" r="1.6" fill="var(--olive-deep)" opacity=".75"/>
+          </svg>
+        </div>
+      </div>
+
+      <div class="reveal-divider reveal-step step-5" aria-hidden="true">
+        <span class="dot"></span>
       </div>
-      <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>
+
+      <p class="reveal-note reveal-step step-5">In che cala cenerai? <br/>L'hai appena scoperto.</p>
+
+      <button class="again reveal-step step-6" id="again" type="button">Cerca un altro nome</button>
     </div>
   </section>
 
   <script>
-    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 DATA_URL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vSlb-0cSIFaGN_BWrn_S9tQoQsdqGH7qYRYQGC3_3wRB-rGzwZoPoxIBNr9l6NmxW9Ont82YKIdGKIR/pub?output=csv";
 
     const els = {
       input: document.getElementById("guestName"),
@@ -561,21 +993,14 @@ Martina Esposito,Cala Sorrentino
     }
 
     async function loadGuests() {
-      const params = new URLSearchParams(window.location.search);
-      const url = params.get("data") || DATA_URL;
-
       try {
-        if (url && url.trim()) {
-          const response = await fetch(url.trim(), { cache: "no-store" });
-          if (!response.ok) throw new Error("Lista non disponibile");
-          guests = tableFromCSV(await response.text());
-        } else {
-          guests = tableFromCSV(SAMPLE_CSV);
-        }
+        const response = await fetch(DATA_URL, { cache: "no-store" });
+        if (!response.ok) throw new Error("Lista non disponibile");
+        guests = tableFromCSV(await response.text());
         els.status.textContent = "Lista invitati pronta.";
       } catch (error) {
-        guests = tableFromCSV(SAMPLE_CSV);
-        els.status.textContent = "Lista invitati pronta.";
+        guests = [];
+        els.status.textContent = "Lista invitati non disponibile.";
       }
     }
 
@@ -601,7 +1026,7 @@ Martina Esposito,Cala Sorrentino
     function showReveal(guest) {
       clearTimeout(hideTimer);
       const longName = guest.tableName.length > 14;
-      els.hello.textContent = `Ciao ${firstName(guest.fullName)}`;
+      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");
@@ -619,7 +1044,7 @@ Martina Esposito,Cala Sorrentino
       hideTimer = window.setTimeout(() => {
         els.input.value = "";
         els.message.classList.remove("show");
-      }, 330);
+      }, 360);
     }
 
     function discoverTable() {
@@ -631,6 +1056,11 @@ Martina Esposito,Cala Sorrentino
         return;
       }
 
+      if (!guests.length) {
+        showMessage("Lista invitati non ancora disponibile. Riprova tra qualche secondo.");
+        return;
+      }
+
       const guest = findGuest(typed);
       if (!guest) {
         showMessage("Nome non trovato. Controlla di aver scritto nome e cognome corretti.");
@@ -649,86 +1079,6 @@ Martina Esposito,Cala Sorrentino
         .replaceAll("'", "&#039;");
     }
 
-    // Rimuove fondi bianchi/grigi/quadrettati collegati ai bordi del PNG.
-    // Serve quando un file sembra trasparente ma nel browser mostra ancora il checkerboard.
-    function cleanTransparentImage(img) {
-      if (img.dataset.cleaned === "true" || !img.complete || !img.naturalWidth) return;
-      img.dataset.cleaned = "true";
-
-      const width = img.naturalWidth;
-      const height = img.naturalHeight;
-      const canvas = document.createElement("canvas");
-      const context = canvas.getContext("2d");
-      canvas.width = width;
-      canvas.height = height;
-
-      try {
-        context.drawImage(img, 0, 0);
-        const imageData = context.getImageData(0, 0, width, height);
-        const data = imageData.data;
-        const visited = new Uint8Array(width * height);
-        const queue = [];
-
-        function indexOf(x, y) { return y * width + x; }
-
-        function isBackgroundPixel(i) {
-          const p = i * 4;
-          const r = data[p];
-          const g = data[p + 1];
-          const b = data[p + 2];
-          const a = data[p + 3];
-          if (a < 20) return true;
-
-          const max = Math.max(r, g, b);
-          const min = Math.min(r, g, b);
-          const avg = (r + g + b) / 3;
-          const lowColor = (max - min) < 34;
-
-          return lowColor && avg > 202;
-        }
-
-        function addIfBackground(x, y) {
-          if (x < 0 || y < 0 || x >= width || y >= height) return;
-          const i = indexOf(x, y);
-          if (visited[i] || !isBackgroundPixel(i)) return;
-          visited[i] = 1;
-          queue.push(i);
-        }
-
-        for (let x = 0; x < width; x++) {
-          addIfBackground(x, 0);
-          addIfBackground(x, height - 1);
-        }
-        for (let y = 0; y < height; y++) {
-          addIfBackground(0, y);
-          addIfBackground(width - 1, y);
-        }
-
-        for (let q = 0; q < queue.length; q++) {
-          const i = queue[q];
-          const x = i % width;
-          const y = Math.floor(i / width);
-          data[i * 4 + 3] = 0;
-          addIfBackground(x + 1, y);
-          addIfBackground(x - 1, y);
-          addIfBackground(x, y + 1);
-          addIfBackground(x, y - 1);
-        }
-
-        context.putImageData(imageData, 0, 0);
-        img.src = canvas.toDataURL("image/png");
-      } catch (error) {
-        // Se il browser blocca il canvas per sicurezza, lasciamo l'immagine originale.
-      }
-    }
-
-    function cleanAllImages() {
-      document.querySelectorAll("img.clean-bg").forEach(img => {
-        if (img.complete) cleanTransparentImage(img);
-        else img.addEventListener("load", () => cleanTransparentImage(img), { once: true });
-      });
-    }
-
     els.discover.addEventListener("click", discoverTable);
     els.again.addEventListener("click", hideReveal);
     els.input.addEventListener("keydown", event => {
@@ -738,8 +1088,9 @@ Martina Esposito,Cala Sorrentino
       if (event.key === "Escape" && els.reveal.classList.contains("show")) hideReveal();
     });
 
+    /* ============= petali (ex-confetti) ============= */
     const ctx = els.canvas.getContext("2d");
-    let confetti = [];
+    let petals = [];
     let rafId = null;
 
     function resizeCanvas() {
@@ -751,62 +1102,65 @@ Martina Esposito,Cala Sorrentino
 
     function celebrate() {
       resizeCanvas();
-      const colors = ["#254B6B", "#8FA3B3", "#939675", "#C2C5B2", "#D08A7A", "#EDD3CD"];
-      const centerX = window.innerWidth / 2;
-      const centerY = window.innerHeight * .36;
+      const colors = ["#EDD3CD", "#D08A7A", "#C2C5B2", "#8FA3B3", "#F3EFE9", "#EDD3CD", "#D08A7A"];
+      const w = window.innerWidth;
 
-      confetti = Array.from({ length: 80 }, () => {
-        const angle = Math.random() * Math.PI * 2;
-        const speed = 3 + Math.random() * 6;
+      petals = Array.from({ length: 56 }, () => {
         return {
-          x: centerX,
-          y: centerY,
-          size: 4 + Math.random() * 7,
-          vx: Math.cos(angle) * speed,
-          vy: Math.sin(angle) * speed - 4,
-          gravity: .15 + Math.random() * .10,
+          x: Math.random() * w,
+          y: -20 - Math.random() * 200,
+          rx: 5 + Math.random() * 5,
+          ry: 2.4 + Math.random() * 1.6,
+          vy: 1.0 + Math.random() * 1.6,
+          vx: (Math.random() - .5) * .6,
           rotation: Math.random() * Math.PI,
-          spin: (Math.random() - .5) * .24,
+          spin: (Math.random() - .5) * .04,
+          sway: Math.random() * Math.PI * 2,
+          swaySpeed: .015 + Math.random() * .02,
+          swayAmp: .4 + Math.random() * .9,
           color: colors[Math.floor(Math.random() * colors.length)],
-          life: 82 + Math.random() * 34
+          alpha: .75 + Math.random() * .25,
+          life: 360 + Math.random() * 200
         };
       });
 
       if (rafId) cancelAnimationFrame(rafId);
-      animateConfetti();
+      animatePetals();
     }
 
     function stopConfetti() {
       if (rafId) cancelAnimationFrame(rafId);
       rafId = null;
-      confetti = [];
+      petals = [];
       ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
     }
 
-    function animateConfetti() {
+    function animatePetals() {
       ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
+      const h = window.innerHeight;
 
-      confetti.forEach(piece => {
-        piece.x += piece.vx;
-        piece.y += piece.vy;
-        piece.vy += piece.gravity;
-        piece.vx *= .988;
-        piece.rotation += piece.spin;
-        piece.life -= 1;
+      petals.forEach(p => {
+        p.sway += p.swaySpeed;
+        p.x += p.vx + Math.sin(p.sway) * p.swayAmp;
+        p.y += p.vy;
+        p.rotation += p.spin;
+        p.life -= 1;
 
         ctx.save();
-        ctx.translate(piece.x, piece.y);
-        ctx.rotate(piece.rotation);
-        ctx.globalAlpha = Math.max(piece.life / 100, 0);
-        ctx.fillStyle = piece.color;
-        ctx.fillRect(-piece.size / 2, -piece.size / 2, piece.size, piece.size * .58);
+        ctx.translate(p.x, p.y);
+        ctx.rotate(p.rotation);
+        ctx.globalAlpha = Math.min(p.alpha, Math.max(p.life / 100, 0));
+        ctx.fillStyle = p.color;
+        ctx.beginPath();
+        ctx.ellipse(0, 0, p.rx, p.ry, 0, 0, Math.PI * 2);
+        ctx.fill();
         ctx.restore();
       });
 
-      confetti = confetti.filter(piece => piece.life > 0 && piece.y < window.innerHeight + 80);
+      petals = petals.filter(p => p.life > 0 && p.y < h + 40);
 
-      if (confetti.length) {
-        rafId = requestAnimationFrame(animateConfetti);
+      if (petals.length) {
+        rafId = requestAnimationFrame(animatePetals);
       } else {
         rafId = null;
         ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
@@ -814,8 +1168,7 @@ Martina Esposito,Cala Sorrentino
     }
 
     window.addEventListener("resize", resizeCanvas);
-    cleanAllImages();
     loadGuests();
   </script>
 </body>
-</html>
+</html>