/* override flowbite input fields formatting */
input:focus,
textarea:focus,
select:focus {
    --tw-ring-offset-width: 0px !important;       /* no offset */
    --tw-ring-width: 2px !important;              /* 2px thick */
    --tw-ring-color: #34D399 !important;          /* gevent-400 hex */
}

body {
    font-family: "Poppins", sans-serif;
}

/* scrollbar styling */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE/Edge */
    scrollbar-width: none;     /* Firefox */
}


/* Response page styling */
.rsvp-drawer {
    right: -100vw; /* or -420px for desktop, -100vw for mobile */
    transition: right 0.6s cubic-bezier(.77,0,.18,1);
}
.rsvp-drawer.open {
    right: 0;
}

/* Envelope animation */
:root {
    --img-width: 43vw;
    --half-img-width: 21.6vw;
    --envelope-width: 95vw;
    --move-down: calc(var(--img-width) * 0.75);
    --move-up: calc(var(--img-width) * -0.45);
    --img-scale-final: 2.17;
  }
  @media (min-width: 768px) {
    :root {
      --img-width: 18vw;
      --half-img-width: 9vw;
      --envelope-width: 36vw;
      --move-down: calc(var(--img-width) * 0.75);
      --move-up: calc(var(--img-width) * -0.5);
      --img-scale-final: 2.5;
    }
  }
  

  .envelope-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .invitation {
    position: absolute;
    width: var(--img-width);
    transform: rotate(-90deg);
    animation: slideup 3s 2s forwards;
 }
  .envelope {
    margin-top: 20vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--envelope-width);
    height: var(--img-width);
  }
  .envelope-front {
    position: absolute;
    z-index: 1;
    width: 0;
    height: 0;
    bottom: 0;
    border-left: var(--img-width) solid #f0e4d1;
    border-right: var(--img-width) solid #f0e4d1;
    border-bottom: var(--half-img-width) solid #f0e4d1;
    border-top: var(--half-img-width) solid transparent;
    animation: slidedown 3s 2s forwards;
  }
  .envelope-flap,
  .envelope-back {
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    border-left: var(--img-width) solid transparent;
    border-right: var(--img-width) solid transparent;
    border-top: var(--half-img-width) solid #f0e4d1;
  }
  .envelope-flap {
    z-index: 1;
    animation: openflap 2s forwards, slidedownflap 3s 2s forwards;
  }
  .envelope-back {
    animation: slidedown 3s 2s forwards;
  }
  .stamp {
    position: absolute;
    width: 5vw;
    height: 5vw;
    z-index: 3;
    animation: slidedown 3s 2s forwards;
  }
  
  @keyframes slideup {
    0% { transform: rotate(-90deg);}
    50% { transform: translateY(var(--move-up)) rotate(-90deg);}
    100% { transform: translateY(var(--move-up)) rotate(0deg) scale(var(--img-scale-final));}
  }
  @keyframes slidedown {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(var(--move-down));
    }
  }
  @keyframes openflap {
    0% {
      transform: rotateX(0deg);
      transform-origin: top;
      z-index: 1;
    }
    100% {
      transform: rotateX(180deg);
      transform-origin: top;
      z-index: 0;
    }
  }
  @keyframes slidedownflap {
    0% {
      transform: translateY(0) rotateX(180deg);
    }
    100% {
      transform: translateY(var(--move-down)) rotateX(180deg);
    }
  }

  /* event menu icons and pages animations */
  .nav-btn:hover .emoji-icon {
    transform: scale(1.15);
    transition: transform 0.2s ease-in-out;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
  }

  .nav-btn.active .emoji-icon {
    animation: pulse 1.5s infinite;
  }

  @keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
  }

  @keyframes fade-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in {
    animation: fade-in 0.4s ease-out;
  }

  .nav-btn {
    width: 100% !important;
  }

  .nav-btn.active, .nav-btn.active:focus, .nav-btn.active:active {
    border-radius: 0 !important;
  }