@font-face {
    font-family: 'Brown Sugar';
    src: url('../src/Brown-Sugar-Regular.woff2') format('woff2'),
         url('../src/Brown-Sugar-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Millanova';
    src: 
         url('../src/fonts/Millanova.otf') format('woff'),
         url('../src/fonts/Millanova.ttf') format('truetype');
}

@font-face {
    font-family: 'Lovelo';
    src: 
        url('../src/fonts/Lovelo-Black.woff2') format('woff2'),
        url('../src/fonts/Lovelo Black.otf') format('woff'),

}

@font-face {
    font-family: 'Pushkin';
    src: 
        url('../src/fonts/Pushkin W01 Script High.ttf') format('truetype'),
        url('../src/fonts/Pushkin W01 Script High.woff') format('woff');
}

/* size based on screen width */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('../src/imgs/bg2.png');
  /* background-repeat: no-repeat;
  background-size: auto; */
  background-repeat: repeat;
  background-size: 66.66vw; 
  opacity: 0.55; 
  pointer-events: none;
  z-index: -1;
}


@media (max-width: 900px) {
  body::before {
    background-size: 80vw; 
  }
}

body {
    font-size: clamp(11px, 0.85vw, 23px);
    min-height: 100vh;
    margin: 0;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
}

#filo-rosso {
    position: fixed;
    top: 0;
    right: 0;
    width: 40%;
    object-fit: cover;
    z-index: 0;
}

#flower_b {
    transform-origin: bottom center;
    height: 18vw;
    width: auto;
    position: absolute;
    top: 23%;
    left: 29%;
    translate: -50% -50%;
    z-index: 2;
    rotate: calc(-13deg);
}

#flower_a {
    transform-origin: bottom center;
    height: 22vw;
    width: auto;
    position: absolute;
    top: 78%;
    left: 28%;
    translate: -50% -50%;
    z-index: 2;
    rotate: calc(2deg);
}

#flower_v {
    transform-origin: bottom center;
    height: 22vw;
    width: auto;
    position: absolute;
    top: 78%;
    left: 26%;
    translate: -50% -50%;
    z-index: 2;
    rotate: calc(1deg);
}

#flower_r {
    transform-origin: bottom center;
    height: 22vw;
    width: auto;
    position: absolute;
    top: 65%;
    left: 72%;
    translate: -50% -50%;
    z-index: 2;
    rotate: calc(-2deg);
}

#flower_m {
    transform-origin: bottom center;
    height: 27vw;
    width: auto;
    position: absolute;
    top: 60%;
    left: 74%;
    translate: -50% -50%;
    z-index: 2;
    rotate: calc(-2deg);
}


/* classi */
.animate-soft-pulse {
  animation: softPulse 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.animate-float-nudge {
  animation: floatNudge 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.animate-tilt-nudge {
  animation: tiltNudge 1.4s ease-in-out;
}

.animate-pop-attention {
  animation: popAttention 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.animate-combo-attention {
  animation: comboAttention 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.background-flowers {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Permette di cliccare attraverso le immagini */
    z-index: 1; /* Assicurati che sia sotto il contenuto principale */
    overflow: hidden; /* Nasconde eventuali parti delle immagini che escono dal viewport */
}

/* 1) Pulse molto più delicato */
@keyframes softPulse {
  0%   { transform: scale(1); }
  18%  { transform: scale(1.035); }
  36%  { transform: scale(0.992); }
  52%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}


/* 2) Piccolo movimento verticale molto elegante */
@keyframes floatNudge {
  0%   { transform: translateY(0) scale(1); }
  25%  { transform: translateY(-4px) scale(1.01); }
  50%  { transform: translateY(0) scale(1); }
  75%  { transform: translateY(-2px) scale(1.005); }
  100% { transform: translateY(0) scale(1); }
}


/* 3) Leggera inclinazione controllata */
@keyframes tiltNudge {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-2deg); }
  45%  { transform: rotate(1.6deg); }
  70%  { transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}


/* 4) Piccolo "pop" da CTA */
@keyframes popAttention {
  0%   { transform: scale(1); }
  22%  { transform: scale(1.06); }
  45%  { transform: scale(0.985); }
  70%  { transform: scale(1.025); }
  100% { transform: scale(1); }
}

/* 6) Animazione già combinata bene */
@keyframes comboAttention {
  0%   { transform: translateY(0) scale(1) rotate(0deg); }
  18%  { transform: translateY(-3px) scale(1.03) rotate(-1.2deg); }
  36%  { transform: translateY(0) scale(0.992) rotate(0.8deg); }
  54%  { transform: translateY(-2px) scale(1.015) rotate(-0.6deg); }
  72%  { transform: translateY(0) scale(1.005) rotate(0.3deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}

@media (max-width: 800px) {
    #flower_b {
        height: 16vh;
        top: 40%;
        left: 10%;
        rotate: calc(6deg);
    }
    #flower_a {
        height: 20vh;
        top: 58%;
        left: 10%;
    }

    #flower_v {
        height: 20vh;
        top: 58%;
        left: 10%;
    }

    #flower_r {
        height: 20vh;
        top: 57%;
        left: 89%;
    }

    #flower_m {
        height: 23vh;
        top: 55%;
        left: 90%;
    }

}