@charset "UTF-8";
*,
*::after,
*::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --dark-color: #000;
}

html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  background-color: var(--dark-color);
  overflow: hidden;
  perspective: 1000px;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.night {
  position: fixed;
  left: 50%;
  top: 0;
  transform: translate3d(-50%, 0, 0);
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: blur(0.1vmin);
  will-change: transform;
  contain: strict;
  background-image: radial-gradient(ellipse at top, transparent 0%, var(--dark-color)), radial-gradient(ellipse at bottom, var(--dark-color), rgba(220, 145, 255, 0.2)), repeating-linear-gradient(220deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 19px, transparent 19px, transparent 22px), repeating-linear-gradient(189deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 19px, transparent 19px, transparent 22px), repeating-linear-gradient(148deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 19px, transparent 19px, transparent 22px), linear-gradient(90deg, rgb(180, 0, 255), rgb(240, 230, 250));
}

/* Controle das cenas */
.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 1s ease-in-out, visibility 1s;
  z-index: 500;
  contain: layout paint style;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: opacity, visibility;
}

.scene.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.scene.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Cena 1: bolo */
.cake-container {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 40px;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

.cake-layer {
  position: relative;
  border-radius: 5px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translate3d(0, -200px, 0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.layer-bottom {
  width: 180px;
  height: 60px;
  background: linear-gradient(to bottom, #7b3196 0%, #7b3196 40%, #fff 40%, #fff 60%, #7b3196 60%);
  animation: dropCake 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s forwards;
}

.layer-middle {
  width: 140px;
  height: 50px;
  background: linear-gradient(to bottom, #9b54b8 0%, #9b54b8 40%, #fff 40%, #fff 60%, #9b54b8 60%);
  animation: dropCake 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1s forwards;
}

.layer-top {
  width: 100px;
  height: 40px;
  background: #d46bff;
  animation: dropCake 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.5s forwards;
}

.layer-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 15px;
  background: radial-gradient(circle at 10px 0, #fff 10px, transparent 11px) repeat-x;
  background-size: 20px 15px;
}

.layer-middle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 12px;
  background: radial-gradient(circle at 8px 0, #d46bff 8px, transparent 9px) repeat-x;
  background-size: 16px 12px;
}

.layer-bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 12px;
  background: radial-gradient(circle at 8px 0, #9b54b8 8px, transparent 9px) repeat-x;
  background-size: 16px 12px;
}

.candle {
  width: 10px;
  height: 40px;
  background: #fff;
  border-radius: 5px;
  position: relative;
  bottom: -5px;
  opacity: 0;
  transform: translate3d(0, -100px, 0);
  animation: dropCake 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s forwards;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, #d46bff 5px, #d46bff 10px);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.flame {
  width: 16px;
  height: 24px;
  background: #ffdb58;
  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
  position: absolute;
  top: -28px;
  left: -3px;
  box-shadow: 0 0 20px #ffdb58, 0 0 40px #ff8c00;
  opacity: 0;
  animation: ignite 0.5s ease-in 2.5s forwards, flicker 0.1s infinite alternate 3s;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

@keyframes dropCake {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes ignite {
  to {
    opacity: 1;
  }
}
@keyframes flicker {
  0% {
    transform: translateZ(0) scale(1) rotate(-2deg);
    opacity: 0.9;
  }
  100% {
    transform: translateZ(0) scale(1.1) rotate(2deg);
    opacity: 1;
  }
}
.message-container-cake {
  text-align: center;
  opacity: 0;
  animation: fadeIn 2s ease-in 3.5s forwards;
  will-change: opacity;
}

.birthday-text {
  font-family: "Playfair Display", serif;
  font-size: 3.5rem;
  color: #f4ddff;
  text-shadow: 0 0 15px rgba(184, 57, 214, 0.8), 2px 2px 5px rgba(0, 0, 0, 0.8);
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.sub-text {
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
  color: #e0c8ee;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  opacity: 0.9;
  letter-spacing: 1px;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
/* Cena 2: caixa */
.gift-container {
  cursor: pointer;
  text-align: center;
  transition: transform 0.2s;
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

.gift-container:hover {
  transform: translateZ(0) scale(1.05);
}

.gift-box {
  width: 120px;
  height: 100px;
  background: #b339d6;
  position: relative;
  border-radius: 5px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  margin: 0 auto 20px auto;
  animation: shake 2s infinite ease-in-out;
  will-change: transform;
  backface-visibility: hidden;
}

.gift-lid {
  width: 130px;
  height: 30px;
  background: #9b54b8;
  position: absolute;
  top: -10px;
  left: -5px;
  border-radius: 5px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.gift-ribbon-v,
.gift-ribbon-h {
  background: #f4c4ff;
  position: absolute;
}

.gift-ribbon-v {
  width: 20px;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.gift-ribbon-h {
  width: 100%;
  height: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.click-text {
  font-family: "Montserrat", sans-serif;
  color: #fff;
  font-size: 1.5rem;
  letter-spacing: 2px;
  animation: pulseText 1.5s infinite alternate;
}

@keyframes shake {
  0%, 100% {
    transform: translateZ(0) rotate(0deg);
  }
  25% {
    transform: translateZ(0) rotate(5deg);
  }
  50% {
    transform: translateZ(0) rotate(0deg);
  }
  75% {
    transform: translateZ(0) rotate(-5deg);
  }
}
@keyframes pulseText {
  from {
    opacity: 0.6;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
  }
  to {
    opacity: 1;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
  }
}
/* Cena 3: flores */
#scene-flowers {
  align-items: flex-end;
  justify-content: center;
}

.flowers {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  transform: translate3d(0, 0, 0) scale(0.9);
  transform-origin: bottom center;
  will-change: transform;
  backface-visibility: hidden;
  contain: layout paint style;
}

.flower {
  position: absolute;
  bottom: 25vmin;
  left: 50%;
  transform-origin: bottom center;
  z-index: 10;
  --fl-speed: 0.8s;
  will-change: transform;
  backface-visibility: hidden;
  /* Flores principais */
}
.flower--1 {
  animation: moving-flower-1 4s linear infinite;
}
.flower--1 .flower__line {
  height: 60vmin;
  animation-delay: 0.3s;
}
.flower--1 .flower__line__leaf--1 {
  animation: blooming-leaf-right var(--fl-speed) 1.6s backwards;
}
.flower--1 .flower__line__leaf--2 {
  animation: blooming-leaf-right var(--fl-speed) 1.4s backwards;
}
.flower--1 .flower__line__leaf--3 {
  animation: blooming-leaf-left var(--fl-speed) 1.2s backwards;
}
.flower--1 .flower__line__leaf--4 {
  animation: blooming-leaf-left var(--fl-speed) 1s backwards;
}
.flower--1 .flower__line__leaf--5 {
  animation: blooming-leaf-right var(--fl-speed) 1.8s backwards;
}
.flower--1 .flower__line__leaf--6 {
  animation: blooming-leaf-left var(--fl-speed) 2s backwards;
}
.flower--2 {
  animation: moving-flower-2 4s linear infinite;
}
.flower--2 .flower__line {
  height: 55vmin;
  animation-delay: 0.6s;
}
.flower--2 .flower__line__leaf--1 {
  animation: blooming-leaf-right var(--fl-speed) 1.9s backwards;
}
.flower--2 .flower__line__leaf--2 {
  animation: blooming-leaf-right var(--fl-speed) 1.7s backwards;
}
.flower--2 .flower__line__leaf--3 {
  animation: blooming-leaf-left var(--fl-speed) 1.5s backwards;
}
.flower--2 .flower__line__leaf--4 {
  animation: blooming-leaf-left var(--fl-speed) 1.3s backwards;
}
.flower--3 {
  animation: moving-flower-3 4s linear infinite;
}
.flower--3 .flower__line {
  animation-delay: 0.9s;
}
.flower--3 .flower__line__leaf--1 {
  animation: blooming-leaf-right var(--fl-speed) 2.5s backwards;
}
.flower--3 .flower__line__leaf--2 {
  animation: blooming-leaf-right var(--fl-speed) 2.3s backwards;
}
.flower--3 .flower__line__leaf--3 {
  animation: blooming-leaf-left var(--fl-speed) 2.1s backwards;
}
.flower--3 .flower__line__leaf--4 {
  animation: blooming-leaf-left var(--fl-speed) 1.9s backwards;
}
.flower {
  /* Flores de preenchimento */
}
.flower--4 {
  animation: moving-flower-4 4s linear infinite;
}
.flower--4 .flower__line {
  height: 45vmin;
  animation-delay: 1.2s;
}
.flower--4 .flower__line__leaf--1 {
  animation: blooming-leaf-right var(--fl-speed) 2.8s backwards;
}
.flower--4 .flower__line__leaf--2 {
  animation: blooming-leaf-right var(--fl-speed) 2.6s backwards;
}
.flower--4 .flower__line__leaf--3 {
  animation: blooming-leaf-left var(--fl-speed) 2.4s backwards;
}
.flower--4 .flower__line__leaf--4 {
  animation: blooming-leaf-left var(--fl-speed) 2.2s backwards;
}
.flower--5 {
  animation: moving-flower-5 4s linear infinite;
}
.flower--5 .flower__line {
  height: 48vmin;
  animation-delay: 1.4s;
}
.flower--5 .flower__line__leaf--1 {
  animation: blooming-leaf-right var(--fl-speed) 3s backwards;
}
.flower--5 .flower__line__leaf--2 {
  animation: blooming-leaf-right var(--fl-speed) 2.8s backwards;
}
.flower--5 .flower__line__leaf--3 {
  animation: blooming-leaf-left var(--fl-speed) 2.6s backwards;
}
.flower--5 .flower__line__leaf--4 {
  animation: blooming-leaf-left var(--fl-speed) 2.4s backwards;
}
.flower--6 {
  animation: moving-flower-6 4s linear infinite;
}
.flower--6 .flower__line {
  height: 45vmin;
  animation-delay: 1.6s;
}
.flower--6 .flower__line__leaf--1 {
  animation: blooming-leaf-right var(--fl-speed) 3.2s backwards;
}
.flower--6 .flower__line__leaf--2 {
  animation: blooming-leaf-right var(--fl-speed) 3s backwards;
}
.flower--6 .flower__line__leaf--3 {
  animation: blooming-leaf-left var(--fl-speed) 2.8s backwards;
}
.flower--6 .flower__line__leaf--4 {
  animation: blooming-leaf-left var(--fl-speed) 2.6s backwards;
}
.flower--7 {
  animation: moving-flower-7 4s linear infinite;
}
.flower--7 .flower__line {
  height: 48vmin;
  animation-delay: 1.8s;
}
.flower--7 .flower__line__leaf--1 {
  animation: blooming-leaf-right var(--fl-speed) 3.4s backwards;
}
.flower--7 .flower__line__leaf--2 {
  animation: blooming-leaf-right var(--fl-speed) 3.2s backwards;
}
.flower--7 .flower__line__leaf--3 {
  animation: blooming-leaf-left var(--fl-speed) 3s backwards;
}
.flower--7 .flower__line__leaf--4 {
  animation: blooming-leaf-left var(--fl-speed) 2.8s backwards;
}
.flower__leafs {
  position: relative;
  animation: blooming-flower 2s backwards;
  will-change: transform;
  backface-visibility: hidden;
}
.flower__leafs--1 {
  animation-delay: 1.1s;
}
.flower__leafs--2 {
  animation-delay: 1.4s;
}
.flower__leafs--3 {
  animation-delay: 1.7s;
}
.flower__leafs--4 {
  animation-delay: 2s;
}
.flower__leafs--5 {
  animation-delay: 2.3s;
}
.flower__leafs--6 {
  animation-delay: 2.6s;
}
.flower__leafs--7 {
  animation-delay: 2.9s;
}
.flower__leafs::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  transform: translate3d(-50%, -100%, 0);
  width: 8vmin;
  height: 8vmin;
  background-color: #d46bff;
  filter: blur(10vmin);
  pointer-events: none;
}
.flower__leaf {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 8vmin;
  height: 11vmin;
  border-radius: 51% 49% 47% 53%/44% 45% 55% 69%;
  background-color: #f4c4ff;
  background-image: linear-gradient(to top, #9b54b8, #f4c4ff);
  transform-origin: bottom center;
  opacity: 0.9;
  box-shadow: inset 0 0 2vmin rgba(255, 255, 255, 0.5);
  backface-visibility: hidden;
}
.flower__leaf--1 {
  transform: translate3d(-10%, 1%, 0) rotateY(40deg) rotateX(-50deg);
}
.flower__leaf--2 {
  transform: translate3d(-50%, -4%, 0) rotateX(40deg);
}
.flower__leaf--3 {
  transform: translate3d(-90%, 0%, 0) rotateY(45deg) rotateX(50deg);
}
.flower__leaf--4 {
  width: 8vmin;
  height: 8vmin;
  transform-origin: bottom left;
  border-radius: 4vmin 10vmin 4vmin 4vmin;
  transform: translate3d(0%, 18%, 0) rotateX(70deg) rotate(-43deg);
  background-image: linear-gradient(to top, #b339d6, #f4c4ff);
  z-index: 1;
  opacity: 0.8;
}
.flower__white-circle {
  position: absolute;
  left: -3.5vmin;
  top: -3vmin;
  width: 9vmin;
  height: 4vmin;
  border-radius: 50%;
  background-color: #fff;
}
.flower__white-circle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate3d(-50%, -50%, 0);
  width: 60%;
  height: 60%;
  border-radius: inherit;
  background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), linear-gradient(90deg, rgb(255, 235, 18), rgb(255, 206, 0));
}
.flower__line {
  height: 55vmin;
  width: 1.5vmin;
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.2), transparent, rgba(255, 255, 255, 0.2)), linear-gradient(to top, transparent 10%, #60147a, #b339d6);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
  animation: grow-flower-tree 4s backwards;
  will-change: height;
  backface-visibility: hidden;
}
.flower__line__leaf {
  --w: 7vmin;
  --h: calc(var(--w) + 2vmin);
  position: absolute;
  top: 20%;
  left: 90%;
  width: var(--w);
  height: var(--h);
  border-top-right-radius: var(--h);
  border-bottom-left-radius: var(--h);
  background-image: linear-gradient(to top, rgba(96, 20, 122, 0.4), #b339d6);
  backface-visibility: hidden;
  will-change: transform;
}
.flower__line__leaf--1 {
  transform: translateZ(0) rotate(70deg) rotateY(30deg);
}
.flower__line__leaf--2 {
  top: 45%;
  transform: translateZ(0) rotate(70deg) rotateY(30deg);
}
.flower__line__leaf--3, .flower__line__leaf--4, .flower__line__leaf--6 {
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: var(--h);
  border-bottom-right-radius: var(--h);
  left: -460%;
  top: 12%;
  transform: translateZ(0) rotate(-70deg) rotateY(30deg);
}
.flower__line__leaf--4 {
  top: 40%;
}
.flower__line__leaf--5 {
  top: 0;
  transform-origin: left;
  transform: translateZ(0) rotate(70deg) rotateY(30deg) scale(0.6);
}
.flower__line__leaf--6 {
  top: -2%;
  left: -450%;
  transform-origin: right;
  transform: translateZ(0) rotate(-70deg) rotateY(30deg) scale(0.6);
}
.flower__light {
  position: absolute;
  bottom: 0vmin;
  width: 1vmin;
  height: 1vmin;
  background-color: rgb(255, 251, 0);
  border-radius: 50%;
  filter: blur(0.2vmin);
  animation: light-ans 4s linear infinite backwards;
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
}
.flower__light:nth-child(odd) {
  background-color: #d023ff;
}
.flower__light--1 {
  left: -2vmin;
  animation-delay: 1s;
}
.flower__light--2 {
  left: 3vmin;
  animation-delay: 0.5s;
}
.flower__light--3 {
  left: -6vmin;
  animation-delay: 0.3s;
}
.flower__light--4 {
  left: 6vmin;
  animation-delay: 0.9s;
}
.flower__light--5 {
  left: -1vmin;
  animation-delay: 1.5s;
}
.flower__light--6 {
  left: -4vmin;
  animation-delay: 3s;
}
.flower__light--7 {
  left: 3vmin;
  animation-delay: 2s;
}
.flower__light--8 {
  left: -6vmin;
  animation-delay: 3.5s;
}

@keyframes moving-flower-1 {
  0%, 100% {
    transform: translate3d(-50%, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(-50%, 0, 0) rotate(-2deg);
  }
}
@keyframes moving-flower-2 {
  0%, 100% {
    transform: translate3d(-50%, 0, 0) rotate(18deg);
  }
  50% {
    transform: translate3d(-50%, 0, 0) rotate(14deg);
  }
}
@keyframes moving-flower-3 {
  0%, 100% {
    transform: translate3d(-50%, 0, 0) rotate(-18deg);
  }
  50% {
    transform: translate3d(-50%, 0, 0) rotate(-20deg) rotateY(-10deg);
  }
}
@keyframes moving-flower-4 {
  0%, 100% {
    transform: translate3d(-50%, 0, 0) rotate(-35deg) scale(0.75);
  }
  50% {
    transform: translate3d(-50%, 0, 0) rotate(-38deg) scale(0.75);
  }
}
@keyframes moving-flower-5 {
  0%, 100% {
    transform: translate3d(-50%, 0, 0) rotate(35deg) scale(0.75);
  }
  50% {
    transform: translate3d(-50%, 0, 0) rotate(32deg) scale(0.75);
  }
}
@keyframes moving-flower-6 {
  0%, 100% {
    transform: translate3d(-50%, 0, 0) rotate(-45deg) scale(0.6);
  }
  50% {
    transform: translate3d(-50%, 0, 0) rotate(-47deg) scale(0.6);
  }
}
@keyframes moving-flower-7 {
  0%, 100% {
    transform: translate3d(-50%, 0, 0) rotate(45deg) scale(0.6);
  }
  50% {
    transform: translate3d(-50%, 0, 0) rotate(43deg) scale(0.6);
  }
}
@keyframes blooming-leaf-right {
  0% {
    transform-origin: left;
    transform: translateZ(0) rotate(70deg) rotateY(30deg) scale(0);
  }
}
@keyframes blooming-leaf-left {
  0% {
    transform-origin: right;
    transform: translateZ(0) rotate(-70deg) rotateY(30deg) scale(0);
  }
}
@keyframes grow-flower-tree {
  0% {
    height: 0;
    border-radius: 1vmin;
  }
}
@keyframes blooming-flower {
  0% {
    transform: translateZ(0) scale(0);
  }
}
@keyframes light-ans {
  0% {
    opacity: 0;
    transform: translate3d(0, 0vmin, 0);
  }
  25% {
    opacity: 1;
    transform: translate3d(-2vmin, -5vmin, 0);
  }
  50% {
    opacity: 1;
    transform: translate3d(2vmin, -15vmin, 0);
    filter: blur(0.2vmin);
  }
  75% {
    transform: translate3d(-2vmin, -20vmin, 0);
    filter: blur(0.2vmin);
  }
  100% {
    transform: translate3d(0, -30vmin, 0);
    opacity: 0;
    filter: blur(1vmin);
  }
}
.not-loaded * {
  animation-play-state: paused !important;
}

/* Buquê */
@keyframes grow-bouquet {
  0% {
    transform: translate3d(-50%, 0, 0) scaleY(0);
    opacity: 0;
  }
  100% {
    transform: translate3d(-50%, 0, 0) scaleY(1);
    opacity: 1;
  }
}
.wrapper-back {
  position: absolute;
  bottom: 10vmin;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  width: 45vmin;
  height: 48vmin;
  background: linear-gradient(to top, #1a002a, #6a1b9a);
  clip-path: polygon(5% 0, 95% 0, 65% 100%, 35% 100%);
  z-index: 5;
  transform-origin: bottom center;
  animation: grow-bouquet 4s forwards;
  border-radius: 2vmin;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.wrapper-front {
  position: absolute;
  bottom: 10vmin;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  width: 35vmin;
  height: 28vmin;
  z-index: 150;
  transform-origin: bottom center;
  animation: grow-bouquet 4s forwards;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.left-fold {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, #511275, #1a002a);
  clip-path: polygon(5% 0, 100% 40%, 65% 100%, 35% 100%);
}

.right-fold {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom left, #7b1fa2, #2a0845);
  clip-path: polygon(0 40%, 95% 0, 65% 100%, 35% 100%);
}

/* Ajustes mobile mantendo os efeitos */
@media (max-width: 768px) {
  body {
    min-height: 100svh;
    min-height: 100dvh;
    perspective: 800px;
  }
  .night {
    transform: translate3d(-50%, 0, 0);
    filter: blur(0.08vmin);
  }
  .scene {
    height: 100svh;
    height: 100dvh;
  }
  .cake-container {
    width: 180px;
    height: 180px;
    margin-bottom: 28px;
  }
  .birthday-text {
    font-size: clamp(2.2rem, 10vw, 3rem);
    padding: 0 18px;
    line-height: 1.05;
  }
  .sub-text {
    font-size: clamp(1rem, 4vw, 1.15rem);
    padding: 0 22px;
  }
  .gift-container {
    transform: translate3d(0, -2svh, 0);
  }
  .gift-container:hover {
    transform: translate3d(0, -2svh, 0) scale(1.05);
  }
  #scene-flowers {
    align-items: center;
    justify-content: center;
  }
  .flowers {
    height: 100svh;
    height: 100dvh;
    transform: translate3d(0, -3dvh, 0) scale(0.82);
    transform-origin: center center;
  }
  .flower {
    bottom: 27svh;
    bottom: 27dvh;
    --fl-speed: 0.75s;
  }
  .flower--1 .flower__line {
    height: 40svh;
    height: 40dvh;
  }
  .flower--2 .flower__line,
  .flower--3 .flower__line {
    height: 37svh;
    height: 37dvh;
  }
  .flower--4 .flower__line {
    height: 32svh;
    height: 32dvh;
  }
  .flower--5 .flower__line {
    height: 34svh;
    height: 34dvh;
  }
  .flower--6 .flower__line {
    height: 31svh;
    height: 31dvh;
  }
  .flower--7 .flower__line {
    height: 32svh;
    height: 32dvh;
  }
  .wrapper-back {
    bottom: 14svh;
    bottom: 14dvh;
    width: min(58vmin, 44dvh);
    height: min(62vmin, 42dvh);
  }
  .wrapper-front {
    bottom: 14svh;
    bottom: 14dvh;
    width: min(45vmin, 34dvh);
    height: min(36vmin, 26dvh);
  }
  .flower__leafs::after {
    filter: blur(8vmin);
  }
  .flower__light {
    animation-duration: 4.4s;
  }
}
@media (max-width: 480px) {
  .flowers {
    transform: translate3d(0, -4dvh, 0) scale(0.76);
  }
  .flower {
    bottom: 28svh;
    bottom: 28dvh;
  }
  .flower--1 .flower__line {
    height: 38svh;
    height: 38dvh;
  }
  .flower--2 .flower__line,
  .flower--3 .flower__line {
    height: 35svh;
    height: 35dvh;
  }
  .flower--4 .flower__line,
  .flower--5 .flower__line {
    height: 31svh;
    height: 31dvh;
  }
  .flower--6 .flower__line,
  .flower--7 .flower__line {
    height: 30svh;
    height: 30dvh;
  }
  .wrapper-back {
    bottom: 15svh;
    bottom: 15dvh;
    width: min(62vmin, 42dvh);
    height: min(66vmin, 40dvh);
  }
  .wrapper-front {
    bottom: 15svh;
    bottom: 15dvh;
    width: min(48vmin, 33dvh);
    height: min(38vmin, 25dvh);
  }
}/*# sourceMappingURL=style.css.map */