:root {
    --color-Primary: red;
    --color-Second: rgb(212, 2, 235);
    --color-Accent: #FFE3E3;
}

html, body {
    margin: 0;
    padding: 0;
    max-width: 100%;
    overflow-x: hidden;
}

body, .hurricane-regular {
    /* Costringe i browser a smussare il font nello stesso modo */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@import url('https://fonts.googleapis.com/css2?family=Hurricane&family=Kalnia+Glaze:wght@100..700&display=swap');
.hurricane-regular {
  font-family: "Hurricane", cursive;
  font-weight: 400;
  font-style: normal;
}
.kalnia-glaze {
  font-family: "Kalnia Glaze", serif;
  font-optical-sizing: auto;
  font-style: normal;
}


.bg-s {
    background-color: var(--color-Second);
}

.color-P {
    color: var(--color-Primary);
}

.color-S {
    color: var(--color-Second);
}

.color-A {
    color: var(--color-Accent);
}

.text-purple {
    color: #cb00cb;
    text-shadow: 
        0 0 10px #ffffff,
        0 0 20px #ffffff,
        0 0 50px #ffffff,
        0 0 70px #ffffff;
}

/* Sfumatura tra HOME e CHI SONO */
.dark-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 10%,
        rgba(0, 0, 0, 0.6) 25%,
        rgba(0, 0, 0, 0) 60%);
    z-index: 1;
}

.topbar {
    background: black;
    color: white;
    padding: 10px 0;
    overflow: hidden;
    position: relative;
}

.topbar-p {
    display: inline-block;
    white-space: nowrap;
    padding-left: 60%;
    letter-spacing: 1px;
    animation: scrollText 12s linear infinite 1s;
}

.lilith-image {
  width: 100%;
  height: 120vh;
  object-fit: cover;
  display: block;
}

.overlay-text {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  font-size: clamp(2rem, 5vw, 5rem);
  font-weight: 700;
  letter-spacing: 3px;
  opacity: 0;
  
  text-shadow: 0 4px 20px rgba(0,0,0,0.4);
  animation: textReveal 1s ease-out forwards;
  animation-delay: 0.5s;
}

.scroll-indicator {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    color: white;
    letter-spacing: 2px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 3s ease, visibility 1s ease;
}

.scroll-indicator.visibile {
    opacity: 1;
    visibility: visible;
}

/* Animazione per l'icona di Bootstrap */
.scroll-arrow {
    margin-top: 10px;
    display: inline-block;
    font-size: 1.5rem;
    color: white;
    animation: frecciaScroll 2s infinite;
    animation-delay: 3s;
}

.deck{
    display:flex;
    justify-content:center;
    margin-top:100px;
}

.deck img{
    width:220px;
    margin-left:-50px; /* sovrapposizione */
    margin-bottom: 50px;
    transition:.3s;
}

.carta-lilith {
    z-index: 1;
    transition: 1s;
}
.carta-lilith2 {
    transition: 1s;
    z-index: 2;
}
.carta-lilith3 {
    transition: 1s;
    position: relative;
    z-index: 3;
    top: -100px;
}

.carta-lilith.animate {
    animation: card1 1s ease-out;
}
.carta-lilith2.animate {
    animation: card3 1s ease-out;
}
.carta-lilith3.animate {
    animation: card2 1s ease-out;
}

.ritual-label {
    font-size: 38px;
}


/* Container della Griglia delle Card */
.motivo-container {
    max-width: 1140px;
    width: 100%;
    margin: 100px auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Genera 2 colonne su desktop */
    gap: 100px;
}

.motivo-card {
    border-radius: 150px;
    padding: 50px;
    box-shadow: -2px -1px 18px 10px rgba(215,33,230,0.67);
    -webkit-box-shadow: -2px -1px 18px 10px rgba(215,33,230,0.67);
    -moz-box-shadow: -2px -1px 18px 10px rgba(215,33,230,0.67);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.motivo-card:hover {
    box-shadow: -2px -1px 109px 10px rgba(215,33,230,0.67);
    -webkit-box-shadow: -2px -1px 109px 10px rgba(215,33,230,0.67);
    -moz-box-shadow: -2px -1px 109px 10px rgba(215,33,230,0.67);
}

/* Icona Stellina */
.stellina {
    font-size: 1.5rem;
    color: #ba68c8;
    margin-right: 10px;
}

.freccia-giu {
    text-align: center;
    letter-spacing: 20px;
    animation: frecciaScroll 1s infinite;
    font-size: 50px;

    /* Gestione altezza e allineamento testo */
    min-height: 50px; /* Meglio min-height di height fissa */
    line-height: 26px; /* Centra il testo verticalmente invece di usare padding alti */
    padding: 11px 20px; /* Ridotto il padding laterale per dare spazio al testo */

    /* Fix specifici per iOS Safari */
    -webkit-appearance: none;
    appearance: none;
}

/* Bottone di Contattami */
.contact-btn {
    box-sizing: border-box; /* FONDAMENTALE: include il padding nei 300px di larghezza */
    display: block;
    height: 50px;
    width: 300px;
    max-width: 90%; /* Evita che il bottone esca fuori su schermi piccolissimi */

    /* Gestione altezza e allineamento testo */
    min-height: 50px; /* Meglio min-height di height fissa */
    line-height: 26px; /* Centra il testo verticalmente invece di usare padding alti */
    padding: 11px 20px; /* Ridotto il padding laterale per dare spazio al testo */

    margin-left: auto;
    margin-right: auto;
    background: linear-gradient(135deg, #8e24aa 0%, #6a1b9a 100%);
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    border-radius: 30px;
    letter-spacing: 1px;
    font-weight: light;
    border: 1px solid #8e24aa;
    transition: all 0.3s ease;

    /* Fix specifici per iOS Safari */
    -webkit-appearance: none;
    appearance: none;
}

.contact-btn:hover {
    box-shadow: 0 5px 20px rgba(142, 36, 170, 0.4);
    transform: translateY(-2px);
}


.fullscreen-container {
  width: 100vw;
  height: 95vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}


/* Galleria Rituali */
.gallery  {
    display: grid;
    width: min(500px, 100%);
    margin: 0 auto;
}
.gallery > img {
  grid-area: 1/1;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 10px solid #f2f2f2;
  box-shadow: 0 0 10px #0007;
  animation: slide 8s infinite;
}
.gallery > img:last-child {
  animation-name: slide-last;
}

.gallery > img:nth-child(2) { animation-delay: -2s; } 
.gallery > img:nth-child(3) { animation-delay: -4s; }
.gallery > img:nth-child(4) { animation-delay: -6s; }


/* Card per le recensioni */
.screenshot-card {
    opacity: 0;
    transform: scale(0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.screenshot-card.animate {
    animation: popIn2 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.screenshot-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

/* Delay per la sequenza */
.screenshot-card.animate.delay-1 { animation-delay: .1s; }
.screenshot-card.animate.delay-2 { animation-delay: .25s; }
.screenshot-card.animate.delay-3 { animation-delay: .4s; }
.screenshot-card.animate.delay-4 { animation-delay: .6s; }
.screenshot-card.animate.delay-5 { animation-delay: .8s; }
.screenshot-card.animate.delay-6 { animation-delay: 1s; }


.effetto-brillantinato {
  /* Gradiente dorato base combinato con un motivo di luccichii */
  background: linear-gradient(
    120deg, 
    #ffd700 0%, 
    #fff8dc 20%, 
    #ffffff 40%, 
    #ffd700 60%, 
    #d4af37 80%, 
    #ffd700 100%
  );
  background-size: 200% auto;
  
  /* Applica lo sfondo al testo */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: brilla 3s linear infinite;
  
  /* Ombra morbida per far risaltare il testo */
  filter: drop-shadow(0px 2px 8px rgba(255, 215, 0, 0.5));
}

.effetto-brillantinato2 {
  background: linear-gradient(
    120deg, 
    #ff0000 0%, 
    #ffdcdc 20%, 
    #ffffff 40%, 
    #ec1515 60%, 
    #d43737 80%, 
    #ff0000 100%
  );
  background-size: 200% auto;
  
  /* Applica lo sfondo al testo */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: brilla 3s linear infinite;
  
  /* Ombra morbida per far risaltare il testo */
  filter: drop-shadow(0px 2px 8px rgba(255, 0, 0, 0.5));
}

.card-gradient {
    width: 100%;
    border-radius: 50px;
    padding: 50px;
    overflow: hidden;
    border: none;
    /* background: linear-gradient(140deg, #e67ef1 20%, #c4384b 100%); */
    background: linear-gradient(190deg, #c30985 0%, rgb(212, 56, 220) 50%, #e67ef1 100%);
    color: white;
    -webkit-box-shadow: 0px 0px 50px 10px rgba(0,0,0,0.8); 
    box-shadow: 0px 0px 30px 10px rgba(255,255,255,0.8);
    transition: all 0.3s ease;
}

.card-gradient:hover {
    box-shadow: 0px 0px 70px 10px rgba(255,255,255,0.8);
    transform: translateY(-5px);
}

.border-richiesto {
    border: 3px solid black;
}

.btn-custom::before {
  content: '';
  position: absolute;
  height: 250%;
  width: 40px;
  top: 0;
  left: -60px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: rotate(45deg) translateY(-35%);
  animation: shine 3s ease infinite;
}

.btn-custom {
    position: relative;
    justify-content: center;
    align-items: center;
    display: flex;
    text-decoration: none;
    background: rgba(74, 220, 1, 0.8);
    width: 100%;
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.5s ease;
}

.text-green {
    color: rgb(2, 238, 26);
}

.social-btn{
    width:65px;
    height:65px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    color:#fff;
    font-size:1.8rem;
    transition:all .35s ease;
    box-shadow:0 .5rem 1rem rgba(0,0,0,.25);
}

.instagram{
    background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
}

.facebook{
    background:#1877F2;
}

.tiktok{
    background:#000;
    border: 1px solid white;
}

.whatsapp-float {
    position: fixed;
    width: 70px;
    height: 70px;
    bottom: 40px;
    right: 30px;
    background-color: #25D366;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: 1s;
    animation: whatsScroll 1.5s infinite;
    animation-delay: 4s;
    visibility: hidden;
}

.whatsapp-float.visibile {
    opacity: 1;
    visibility: visible;
}

.whatsapp-float:hover {
    background-color: #20ba5a;
    transform: scale(1.1);
}


/* --- OTTIMIZZAZIONE RESPONSIVE (Mobile) --- */
@media (max-width: 768px) {
    .lilith-image {
        opacity: 60%;
    }

    .carta-lilith {
        height: 300px;
        width: 200px;
    }

    .carta-lilith1 {
        height: 300px;
        width: 200px;
    }

    .deck img{
        width:185px;
        margin-left:-50px; /* sovrapposizione */
        transition:.3s;
    }

    .motivo-container {
        grid-template-columns: 1fr; /* Le card si impilano una sotto l'altra */
        gap: 70px;
        padding: 0px 50px;
    }

    .ritual-btn {
        margin-bottom: 100px;
    }

    .ritual-label {
        font-size: 25px;
    }

    .gallery{
        width:100%;
        max-width:none;
    }

    .gallery > img{
        border-width:6px;
    }

    .sezione-successiva {
        padding: 40px;
    }

    .overlay-text {
    /* clamp(minimo, preferito, massimo) */
    font-size: clamp(3.5rem, 10vw, 5rem) !important;
    top: 30%;
    }
    
    .scroll-indicator {
        padding-bottom: 80px;
    }

    .w-25 {
        width: 100% !important;
    }
}


/* ANIMAZIONI */
/* Movimento della TopBar */
@keyframes scrollText {
    from { transform: translateX(0);}
    to { transform: translateX(-100%);}
}

/* Movimento Testo dell'Immagine Principale */
@keyframes textReveal {
  0% {
    opacity: 0;
    transform: translate(-50%, -30%);
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
    filter: blur(0);
  }
}

/* Animazioni Galleria Rituali */
@keyframes slide {
  0%     {transform: translateX(0%)  ;z-index: 2;}
  16.66% {transform: translateX(120%);z-index: 2;}
  16.67% {transform: translateX(120%);z-index: 1;} 
  33.34% {transform: translateX(0%)  ;z-index: 1;}
  66.33% {transform: translateX(0%)  ;z-index: 1;}
  66.34% {transform: translateX(0%)  ;z-index: 2;} 
  100%   {transform: translateX(0%)  ;z-index: 2;}  
}
@keyframes slide-last {
  0%     {transform: translateX(0%)  ;z-index: 2;}
  16.66% {transform: translateX(120%);z-index: 2;}
  16.67% {transform: translateX(120%);z-index: 1;} 
  33.34% {transform: translateX(0%)  ;z-index: 1;}
  83.33% {transform: translateX(0%)  ;z-index: 1;}
  83.34% {transform: translateX(0%)  ;z-index: 2;} 
  100%   {transform: translateX(0%)  ;z-index: 2;}  
}


/* Animazioni degli ScreenShot */
@keyframes popIn2 {
    0% {
    opacity: 0;
    transform: scale(0.5);
    }
    100% {
    opacity: 1;
    transform: scale(1);
    }
}

@keyframes card1 {
    0% {
        transform: translateX(-50px);
    }
    100% {
        transform: translateX(0px);
    }
}
@keyframes card2 {
    0% {
        transform: translateY(-50px);
    }
    100% {
        transform: translateY(0);
    }
}
@keyframes card3 {
    0% {
        transform: translateX(50px);
    }
    100% {
        transform: translateX(0);
    }
}

/* Movimento dello sfondo per simulare l'effetto di luce */
@keyframes brilla {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Movimento Freccie dei 3 Motivi */
@keyframes frecciaScroll {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(10px); opacity: 1; }
}

@keyframes whatsScroll {
    0%, 100% { scale: 1.0;}
    50% {
        transform: translateY(-10px);
        scale: 1.2;
    }
}

@keyframes shine {
  0% {
    left: -80px;
  }
  40% {
    left: calc(100% + 20px);
  }
  100% {
    left: calc(100% + 20px);
  }
}