@import "tailwindcss";
@import '../styles/_variables.scss';                                       
@import '../styles/_keyframe-animations.scss';   

@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@100;200;300;400;500;600;700;800;900;&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Antic+Didone&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&display=swap');


:root {
  --black: #000;
  --background: #000;
  --text: #fff;
  --white: white;
  font-size: 16px;

  /* Definizione delle variabili di dimensione dei font responsivi */
  --font-size-h1: clamp(3rem, 10vw, 5rem); /* Tra 48px e 80px */
  --font-size-h2: clamp(2.5rem, 7vw, 3.5rem); /* Tra 40px e 56px */
  --font-size-h3: clamp(2rem, 5vw, 2.5rem); /* Tra 32px e 40px */
  --font-size-h4: clamp(1.75rem, 4vw, 2rem); /* Tra 28px e 32px */
  --font-size-h5: clamp(1.25rem, 3vw, 1.5rem); /* Tra 20px e 24px */
  --font-size-h6: clamp(1rem, 2.5vw, 1rem); /* Fisso a 16px */
  --animation-delay: 0;
  scroll-behavior: smooth;

  @media screen and (max-width: 768px) {
    font-size: 16px;
  }

  @media screen and (max-width: 540px) {
    font-size: 15px;
  }
}

/* Aggiungi le dichiarazioni @font-face per Fraunces */
@layer base {
  /* Aggiungi le dichiarazioni @font-face per Carmen Sans */
  @font-face {
    font-family: "Carmen Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/CarmenSans-Regular.otf") format("opentype");
  }

  @font-face {
    font-family: "Carmen Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/CarmenSans-Bold.otf") format("opentype");
  }

  @font-face {
    font-family: "Carmen Sans";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("/fonts/CarmenSans-Light.otf") format("opentype");
  }

  @font-face {
    font-family: "Carmen Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/CarmenSans-SemiBold.otf") format("opentype");
  }

  @font-face {
    font-family: "Carmen Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/CarmenSans-Medium.otf") format("opentype");
  }

  @font-face {
    font-family: "Carmen Sans";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("/fonts/CarmenSans-ExtraBold.otf") format("opentype");
  }

  @font-face {
    font-family: "Carmen Sans";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("/fonts/CarmenSans-Heavy.otf") format("opentype");
  }

  @font-face {
    font-family: "Carmen Sans";
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url("/fonts/CarmenSans-UltraLight.otf") format("opentype");
  }

  @font-face {
    font-family: "Carmen Sans";
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url("/fonts/CarmenSans-Thin.otf") format("opentype");
  }
}

/* Applica i font globalmente */
body {
  @apply font-sans;
}

/* Esempi di applicazione dei font per titoli e testo normale */
h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: 'Cormorant', serif;

}

p,
span,
div,
a,
input,
textarea,
button {
  font-family: "Carmen Sans", sans-serif;
}

body {
  background-color: var(--background);
}

.franceus {
  font-family: "Cormorant";
}

.carmens {
  font-family: "Carmen Sans";
}

ol {
  counter-reset: item;

  li:before {
    content: counter(item, decimal-leading-zero);
    counter-increment: item;
    margin-right: 1rem;
  }
}

:root {
  --layer-color-1: #1d1d1d;
  /* Primo strato - sfumatura di grigio */
  --layer-color-2: ##f75c03;
  /* Secondo strato - sfumatura di grigio */
  --layer-color-3: #f1c40f;
  /* Terzo strato - sfumatura di grigio */
  --layer-color-4: #d90368;
  /* Quarto strato - sfumatura di grigio */
  --layer-color-5: #00cc66;
  /* Quinto strato - bianco */
}

.clipped {
  overflow: hidden;
  overflow: clip;
}

.top-layer {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 100%;
  left: 0;
  background: var(--layer-color-1);
  transition: all 0.7s cubic-bezier(0.6, 0.05, 0.4, 1);
  z-index: 10000;
}

.top-layer.active {
  top: -100%;
}

.top-layer.removed {
  top: -200%;
}

.top-layer--1.active {
  top: 0;
}

.top-layer--1.removed {
  top: -200%;
}

.top-layer--2 {
  background: var(--layer-color-2);
  transition-delay: 0.6s;
}

.top-layer--3 {
  background: var(--layer-color-3);
  transition-delay: 0.4s;
}

.top-layer--4 {
  background: var(--layer-color-4);
  transition-delay: 0.2s;
}

.top-layer--5 {
  background: var(--layer-color-5);
  transition-delay: 0.1s;
}

::-webkit-details-marker {
  display: none;
}

@keyframes custom-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(-15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes custom-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(-15px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes grow-left {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
span,
img {
  &.animate {
    opacity: 0;
    transform: translateY(-15px);
    -webkit-animation: custom-fade-in-up 1000ms 00ms forwards;
    animation: custom-fade-in-up 1000ms calc(100ms * var(--animation-delay))
      forwards;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;

    &.animate-visible {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }
}

.animate:not(.animate-container) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  li,
  span,
  img {
    opacity: 0;
    transform: translateY(-15px);
    -webkit-animation: custom-fade-in-up 1000ms 00ms forwards;
    animation: custom-fade-in-up 1000ms calc(100ms * var(--animation-delay))
      forwards;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
  }
  &.animate-visible {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    li,
    span,
    img {
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
  }
}

.animate.animate-container {
  opacity: 0;
  transform: translateY(-15px);
  -webkit-animation: custom-fade-in-up 1000ms 00ms forwards;
  animation: custom-fade-in-up 1000ms calc(100ms * var(--animation-delay))
    forwards;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  &.animate-visible {
    -webkit-animation-play-state: running;
    animation-play-state: running;
  }
}

.hide-scrollbar {
  &::-webkit-scrollbar {
    height: 0px;
    scrollbar-width: none;
  }

  /* Track */
  &::-webkit-scrollbar-track {
    background: black;
  }

  /* Handle */
  &::-webkit-scrollbar-thumb {
    background: #888;
  }

  /* Handle on hover */
  &::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
}

.noise {
  background:
    repeating-radial-gradient(#000 0 0.0001%, #fff 0 0.0002%) 50% 0/2500px
      2500px,
    repeating-conic-gradient(#000 0 0.0001%, #fff 0 0.0002%) 60% 60%/2500px
      2500px;
  background-blend-mode: difference;
  animation: b 500s infinite alternate;
}

@keyframes b {
  100% {
    background-position:
      0% 0,
      100% 100%;
  }
}

/* Quando il SwiperSlide è attivo, applica lo stile alla descrizione */
.swiper-slide .description {
  width: 0%;
  display: none;
  overflow: clip;
  padding: 0;
}
.swiper-slide-active .description {
  width: 100%;
  height: auto;
  display: block;
}

.skiptranslate {
  display: none !important;
}

body:has(.skiptranslate) {
  top: 0 !important;
}

ody {
  font-size: 1rem; /* 16px */
  line-height: 1.5;
  font-family: Arial, sans-serif;
}


:target::before {
  content: "";
  display: block;
  --h: 150;
  height: calc(1px * var(--h, 150)); /* Altezza del menu sticky */
  margin-top: calc(-1px * var(--h, 150)); /* Sposta l'elemento verso l'alto */
  visibility: hidden;
}

a.bg-white{
  padding:10px 40px;

}

.simple-editor-wrapper {
    width: 100%!important;
    height: auto!important;
    overflow: auto!important;
}

.price-content{
  table{
    width: 100%!important;
    max-width:400px;
    border-collapse: collapse;
    tr{
      border-bottom: solid 1px black;
     td{
       padding-top: 6px;
       padding-bottom: 6px;
     }
    }
    tr  td:nth-child(2){
      text-align: right;
    }

  }
}

/* Scrollbar nascosta visivamente ma accessibile */
.scrollbar-none::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Quando focus (tastiera / screen reader) */
.focus-within\:scrollbar-thin::-webkit-scrollbar {
  width: 6px;
}

.focus-within\:scrollbar-thumb-zinc-400::-webkit-scrollbar-thumb {
  background-color: rgb(161 161 170);
  border-radius: 9999px;
}

@media (prefers-reduced-motion: reduce),
(prefers-contrast: more) {
  .scrollbar-none {
    scrollbar-width: auto;
  }

  .scrollbar-none::-webkit-scrollbar {
    width: 8px;
  }
}