*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --white: #ffffff;
    --blush: #f9a8c0;
    --rose: #e8607a;
    --gold: #f4c97c;
    --sky: #fde8c8;
    --dawn: #f7c5a0;
    --orange: #f49c6b;
    --purple: #c4a8d4;
    --deep: #7b4a6e;
  }

  body {
    width: 100vw; height: 100vh;
    overflow: hidden;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: 'Cormorant Garamond', serif;
  }

  /* ===== FASE 1: sfondo bianco ===== */
  #bg {
    position: fixed; inset: 0;
    background: white;
    transition: background 3s ease;
    z-index: 0;
  }
  #bg.dawn {
    background: linear-gradient(to top,
      #ff7043 0%,
      #ff8c69 12%,
      #ffb347 28%,
      #ffd580 45%,
      #ffe8b0 62%,
      #fff3d4 78%,
      #b3d9f7 100%);
  }

  /* ===== STELLE ===== */
  #stars { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 2s; }
  #stars.visible { opacity: 1; }
  .star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: twinkle 3s ease-in-out infinite;
  }
  @keyframes twinkle {
    0%,100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.4); }
  }

  /* ===== SOLE ===== */
  #sun {
    position: fixed;
    bottom: -120px; left: 50%;
    transform: translateX(-50%);
    width: 140px; height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, #ffe566, #ffb347, #ff8c42);
    box-shadow: 0 0 60px 30px rgba(255,180,50,0.5), 0 0 120px 60px rgba(255,140,60,0.25);
    z-index: 2;
    transition: bottom 4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
  }
  #sun.rise { bottom: 80px; opacity: 1; }

  /* ===== NUVOLE ===== */
  .cloud {
    position: fixed; z-index: 3;
    opacity: 0;
    pointer-events: none;
    transition: opacity 3s ease;
  }
  .cloud.visible { opacity: 1; }
  .cloud svg { filter: drop-shadow(0 4px 16px rgba(255,160,100,0.3)); }

  #cloud1 { top: 18%; left: -120px; animation: floatCloud 22s linear infinite; }
  #cloud2 { top: 30%; right: -160px; animation: floatCloud2 28s linear infinite; }
  #cloud3 { top: 10%; left: 30%; animation: floatCloud3 35s linear infinite; }

  @keyframes floatCloud  { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 200px)); } }
  @keyframes floatCloud2 { from { transform: translateX(0); } to { transform: translateX(calc(-100vw - 300px)); } }
  @keyframes floatCloud3 { 0%,100% { transform: translateX(0); } 50% { transform: translateX(40px); } }

  /* ===== UCCELLINI ===== */
  .bird {
    position: fixed; z-index: 4; opacity: 0; font-size: 1.4rem;
    animation: flyBird 14s linear infinite;
    pointer-events: none;
    transition: opacity 1s;
  }
  .bird.visible { opacity: 1; }
  @keyframes flyBird {
    from { transform: translateX(-60px) translateY(0); }
    25% { transform: translateX(25vw) translateY(-30px); }
    50% { transform: translateX(50vw) translateY(10px); }
    75% { transform: translateX(75vw) translateY(-20px); }
    to { transform: translateX(calc(100vw + 60px)) translateY(0); }
  }

  /* ===== PETALI ===== */
  .petal {
    position: fixed; top: -30px; z-index: 5;
    pointer-events: none;
    opacity: 0;
    font-size: 1.2rem;
    animation: fallPetal linear infinite;
    transition: opacity 0.5s;
  }
  .petal.active { opacity: 1; }
  @keyframes fallPetal {
    0%   { transform: translateY(0) rotate(0deg) translateX(0); opacity: 1; }
    100% { transform: translateY(110vh) rotate(720deg) translateX(80px); opacity: 0; }
  }

  /* ===== CUORE PRINCIPALE ===== */
  #heart-wrap {
    position: relative; z-index: 10;
    display: flex; flex-direction: column; align-items: center;
    gap: 20px;
    user-select: none;
  }

  #heart {
    position: relative;
    width: 160px; height: 160px;
    cursor: pointer;
    transition: transform 0.2s;
    filter: drop-shadow(0 8px 32px rgba(232,96,122,0.4));
    animation: heartbeat 1.5s ease-in-out infinite;
  }
  #heart:hover { transform: scale(1.08); }
  @keyframes heartbeat {
    0%,100% { transform: scale(1); }
    14% { transform: scale(1.15); }
    28% { transform: scale(1); }
    42% { transform: scale(1.1); }
    70% { transform: scale(1); }
  }

  /* SVG cuore che si "apre" */
  #heart-svg { width: 100%; height: 100%; overflow: visible; }
  .heart-left, .heart-right {
    transform-origin: center;
    transition: transform 1.2s cubic-bezier(0.68,-0.55,0.27,1.55);
  }
  .opened .heart-left { transform: rotate(-45deg) translateX(-30px); }
  .opened .heart-right { transform: rotate(45deg) translateX(30px); }

  /* particelle dal cuore */
  .spark {
    position: absolute; top: 50%; left: 50%;
    width: 8px; height: 8px; border-radius: 50%;
    pointer-events: none;
    animation: spark 0.9s ease-out forwards;
    opacity: 0;
  }
  @keyframes spark {
    0%   { transform: translate(-50%,-50%) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
  }

  /* ===== HINT TESTO ===== */
  #hint {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1rem;
    color: #aaa;
    letter-spacing: 0.1em;
    animation: hintPulse 2s ease-in-out infinite;
    transition: opacity 0.8s;
  }
  #hint.hidden { opacity: 0; pointer-events: none; }
  @keyframes hintPulse {
    0%,100% { opacity: 0.5; }
    50% { opacity: 1; }
  }

  /* ===== TESTI ROMANTICI ===== */
  #messages {
    position: fixed; inset: 0; z-index: 20;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    pointer-events: none;
    gap: 0;
  }

  .msg {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s ease, transform 1.2s ease;
    text-align: center;
    padding: 0 20px;
    pointer-events: none;
  }
  .msg.visible { opacity: 1; transform: translateY(0); }

  #msg1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.8rem, 8vw, 6rem);
    font-weight: 700;
    font-style: italic;
    color: var(--deep);
    text-shadow: 0 4px 24px rgba(124,74,110,0.25);
    line-height: 1;
    margin-bottom: 16px;
  }
  #msg2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.1rem, 3vw, 1.6rem);
    font-style: italic;
    color: var(--rose);
    letter-spacing: 0.05em;
    margin-bottom: 32px;
  }
  #msg3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(0.95rem, 2.5vw, 1.25rem);
    color: #7a4a60;
    max-width: 480px;
    line-height: 1.8;
    font-weight: 300;
    margin-bottom: 24px;
  }
  #msg4 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.4rem, 4vw, 2.2rem);
    font-style: italic;
    color: var(--deep);
    letter-spacing: 0.06em;
  }

  /* piccoli cuori fluttuanti */
  .floaty {
    position: fixed; z-index: 6;
    pointer-events: none;
    opacity: 0;
    font-size: 1.5rem;
    animation: floatUp 4s ease-out forwards;
  }
  @keyframes floatUp {
    0%   { transform: translateY(0) scale(0.5); opacity: 0.8; }
    100% { transform: translateY(-200px) scale(1.2); opacity: 0; }
  }

  /* ===== GROUNDING LINE ===== */
  #horizon {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: 80px; z-index: 2;
    background: linear-gradient(to top, rgba(120,60,80,0.15), transparent);
    opacity: 0; transition: opacity 3s;
  }
  #horizon.visible { opacity: 1; }