/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
:root {
  --img-width: 20vw;
  --half-img-width: 10vw;
  --envelope-width: 40vw;
  --move-down: calc(var(--img-width) * 0.75);
  --move-up: calc(var(--img-width) * -0.5);
}

.invitation {
  position: absolute;
  width: calc(var(--img-width) + -1px);
  transform: rotate(-90deg);
}

.envelope {
  margin-top: 50vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: var(--envelope-width);
  height: var(--img-width);
  margin-top: 0; /* Removed static margin */
  transition: margin-top 3s ease; /* Smooth transition for margin */
}

.envelope.start-animation {
  margin-top: 40vh; /* Dynamic margin applied when animation starts */
  cursor: default;
}

.envelope-front {
  position: absolute;
  z-index: 1;
  width: 0;
  height: 0;
  bottom: 0;
  border-left: var(--img-width) solid #daebf3;
  border-right: var(--img-width) solid #daebf3;
  border-bottom: var(--half-img-width) solid #c3d2d9;
  border-top: var(--half-img-width) solid transparent;
}

.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 #c3d2d9;
}

.envelope.birthday .envelope-front{
  border-left: var(--img-width) solid #E4F4FC;
  border-right: var(--img-width) solid #E4F4FC;
  border-bottom: var(--half-img-width) solid #98C9EE;
  border-top: var(--half-img-width) solid transparent;
}

.envelope.birthday .envelope-flap,
.envelope.birthday .envelope-back{
  border-left: var(--img-width) solid transparent;
  border-right: var(--img-width) solid transparent;
  border-top: var(--half-img-width) solid #98C9EE;
}

.envelope-flap {
  z-index: 1;
}

.stamp {
  position: absolute;
  width: 5vw;
  height: 5vw;
  z-index: 3;
}

/* Animations are only applied when .start-animation class is added */
.envelope.start-animation .invitation {
  animation: slideup 3s 2s forwards;
}

.envelope.start-animation .envelope-front {
  animation: slidedown 3s 2s forwards;
}

.envelope.start-animation .envelope-flap {
  animation: openflap 2s forwards, slidedownflap 3s 2s forwards;
}

.envelope.start-animation .envelope-back {
  animation: slidedown 3s 2s forwards;
}

.envelope.start-animation .stamp {
  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(1.5);
  }
}

@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);
  }
}

@media (max-width: 1366px){ 
  :root {
    --img-width: 24vw;
    --half-img-width: 12vw;
    --envelope-width: 40vw;
  }

  .envelope.start-animation {
    margin-top: 15vh;
  }

  .stamp{
    width: 8vw;
  }
}

@media (max-width: 1024px){ 
  :root {
    --img-width: 30vw;
    --half-img-width: 15vw;
    --envelope-width: 50vw;
  }

  .envelope.start-animation {
    margin-top: 10vh;
  }

  .stamp{
    width: 10vw;
  }
}

@media (max-width: 767px){ 
  :root {
    --img-width: 43.8vw;
    --half-img-width: 22vw;
    --envelope-width: 60vw;
  }

  .envelope.start-animation {
    margin-top: 5vh;
  }

  .stamp{
    width: 15vw;
  }
}