@keyframes bounceIn {
    0%   {
       transform: translateY(-20px) 
       scale(0.9); opacity: 0;
       }
    60%  {
      transform: translateY(4px) 
      scale(1.02); opacity: 1; 
    }
    100% { 
      transform: translateY(0) scale(1); 
      opacity: 1; }
  }


  @keyframes slideOut {
    to { 
      transform: translateX(120%); 
      opacity: 0; 
    }
  }
  @keyframes shrink {
    from {
       width: 100%; 
      } to 
      {
       width: 0%;
      }
  }

  .notif { 
    animation: bounceIn 0.45s cubic-bezier(.36,.07,.19,.97) forwards; border-radius: 20px; 
    padding: 14px 16px; 
    display: flex; 
    align-items: center; 
    gap: 12px;
    border: 2px solid; 
    position: relative; 
    overflow: hidden; 
    cursor: pointer; 
  }
  .notif.hide { 
    animation: slideOut 0.35s ease forwards;
   }
  .notif-bar {
     position: absolute; 
     bottom: 0; 
     left: 0; 
     height: 3px; 
     border-radius: 0 0 0 20px; 
     animation: shrink 4s linear forwards;
   }

  #notif-container {
     position: fixed; 
     top: 20px; 
     right: 20px;
      display: flex; 
      flex-direction: column; 
      gap: 10px; 
      z-index: 9999;
       width: 310px;
     }


  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
  }

  @keyframes bounceDot {
    0%, 100% { transform: translateY(0);   }
    50%      { transform: translateY(-9px);}
  }

  @keyframes eyePulse {
    0%, 100% { box-shadow: 0 4px 18px rgba(0,212,200,.4); }
    50%      { box-shadow: 0 4px 36px rgba(0,212,200,.85);}
  }

  @keyframes twinkle {
    0%, 100% { opacity: 0;   }
    50%      { opacity: 0.7; }
  }

  @keyframes floatUp {
    0%   { transform: translateY(110vh); }
    100% { transform: translateY(-10vh); }
  }

  @keyframes shimmer {
    0%   { left: -100%; }
    100% { left:  100%; }
  }

  @keyframes glowCorner {
    0%, 100% { opacity: .18; }
    50%      { opacity: .38; }
  }

  @keyframes revealItem {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0);    }
  }

  #greeting-card {
    animation: fadeUp .65s cubic-bezier(.34,1.56,.64,1) both;
  }

 
  .reveal-1 {
     opacity:0;
      animation: revealItem .5s .15s ease both;
     }
  .reveal-2 {
     opacity:0; 
     animation: revealItem .5s .25s ease both; 
    }
  .reveal-3 { 
    opacity:0; 
    animation: revealItem .5s .35s ease both; 
  }
  .reveal-4 {
     opacity:0;
    animation: revealItem .5s .45s ease both;
   }
  .reveal-5 { 
    opacity:0;
     animation: revealItem .5s .55s ease both; 
    }
  .reveal-6 {
     opacity:0; 
     animation: revealItem .5s .65s ease both; 
    }


  .eye-bubble {
    animation: eyePulse 2.5s ease-in-out infinite;
  }


  .emoji-bounce-1 { 
    display:inline-block;
     animation: bounceDot 1.6s ease-in-out infinite; 
     animation-delay: 0s;   
    }
  .emoji-bounce-2 {
     display:inline-block; 
     animation: bounceDot 1.6s ease-in-out infinite; animation-delay: .2s; 
     }
  .emoji-bounce-3 { 
    display:inline-block; 
    animation: bounceDot 1.6s ease-in-out infinite; 
    animation-delay: .4s; 
   }


  .glow-tr { 
    animation: glowCorner 3s ease-in-out infinite; 
    animation-delay: 0s;   
  }
  .glow-bl {
     animation: glowCorner 3s ease-in-out infinite;
      animation-delay: 1.5s; }


  .bubble {
    position: fixed;
    border-radius: 50%;
    background: #00d4c8;
    opacity: .055;
    pointer-events: none;
  }
  .bubble-1 {
     width:90px;  
     height:90px; 
      left:7%;  
      animation: floatUp 14s linear infinite 0s; 
     }
  .bubble-2 { 
    width:55px; 
     height:55px;  
     left:71%; 
     animation: floatUp 10s linear infinite 3s;  
    }
  .bubble-3 { 
    width:40px;  
    height:40px; 
    left:44%; 
    animation: floatUp 18s linear infinite 1s; 
   }
  .bubble-4 {
     width:75px;  
     height:75px;  
     left:87%; 
     animation: floatUp 12s linear infinite 5s;  
    }
  .bubble-5 {
     width:30px;  
     height:30px;  
     left:27%; 
     animation: floatUp  9s linear infinite 7s;
      }

  .star {
    position: fixed;
    width: 2px; height: 2px;
    background: white;
    border-radius: 50%;
    pointer-events: none;
    animation: twinkle ease-in-out infinite;
  }
  .star-1 {
     left:15%; 
     top:20%; 
     animation-duration:2.1s;
     }
  .star-2 { 
    left:82%; 
    top:12%;
     animation-duration:1.7s; 
     animation-delay:.5s;  
    }
  .star-3 { 
    left:55%; 
    top:8%; 
     animation-duration:2.5s; 
     animation-delay:1s; 
      }
  .star-4 { 
    left:33%; 
    top:75%; 
    animation-duration:1.9s; 
    animation-delay:.3s; 
 }
  .star-5 {
     left:70%;
     top:80%; 
     animation-duration:2.3s; 
     animation-delay:.8s; 
     }
  .star-6 { 
    left:92%; 
    top:45%; 
    animation-duration:1.5s; 
    animation-delay:1.2s; }
  .star-7 { 
    left:5%;  
    top:60%; 
    animation-duration:2.0s;
    animation-delay:.6s;  
    }

  .btn-shine {
     position: relative;
      overflow: hidden; 
    }
  .btn-shine::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.22), transparent);
    animation: shimmer 2.4s linear infinite;
  }


  .name-input:focus {
    border-color: #00d4c8;
    background: rgba(0,212,200,.08);
    box-shadow: 0 0 0 4px rgba(0,212,200,.14);
    outline: none;
  }