@font-face {
  font-family: "MAIAN";
  src: url("../assets/fonts/MAIAN.TTF") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Matcha Vibes";
  src: url("../assets/fonts/Matcha Vibes.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Mistery Silent";
  src: url("../assets/fonts/Mistery Silent.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Reey";
  src: url("../assets/fonts/Reey-Regular.otf") format("opentype");
  font-display: swap;
}

:root {
  --purple: #6624ff;
  --yellow: #f8ff33;
  --white: #ffffff;
  --black: #000000;
  --dark: #131313;
  --gray: #3d3d3d;
  --glow: rgba(248, 255, 51, 0.55);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100%;
  font-family: "MAIAN", "Trebuchet MS", sans-serif;
  background-color: var(--black);
  color: var(--white);
}

p {
  line-height: 1.6;
}

main {
  margin-top: -50px;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section-title {
  font-family: "Matcha Vibes", "Trebuchet MS", sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: 0.04em;
  text-align: center;
}

.section-subtitle {
  font-family: "MAIAN", "Trebuchet MS", sans-serif;
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  text-align: center;
  opacity: 0.8;
}

.image-button {
  display: inline-block;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

.image-button img {
  display: block;
}

.shadow-glow {
  filter: drop-shadow(0 0 28px var(--glow));
}
[data-parallax] {
  --parallax-y: 0px;
  transform: translate3d(0, var(--parallax-y), 0);
  will-change: transform;
}
.tear-band {
  position: relative;
  background-color: transparent;
  overflow: hidden;
}

.tear-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/strappo-sopra-largo.png");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  clip-path: inset(0 0 0 0);
  transition: none;
  z-index: 0;
}

.tear-band.is-revealed::before {
  clip-path: inset(0 0 0 0);
}

.tear-band > * {
  position: relative;
  z-index: 1;
}

.back-to-top {
  position: fixed;
  right: 4vw;
  bottom: clamp(2rem, 5vw, 3.5rem);
  width: clamp(80px, 10vw, 120px);
  border: 0;
  background: transparent;
  padding: 0;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 20;
  cursor: pointer;
}

.back-to-top.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
}

.back-to-top img {
  width: 100%;
  height: auto;
  display: block;
}

.back-to-top:hover img,
.back-to-top:focus-visible img {
  content: url("../assets/Torna%20su%20con%20ombra.png");
}

.torna-personaggi img {
  display: block;
}

.torna-personaggi img.hover {
  display: none;
}

.torna-personaggi:hover img.normale {
  display: none;
}

.torna-personaggi:hover img.hover {
  display: block;
}

body button.iubenda-tp-btn.iubenda-cs-preferences-link {
  left: 0 !important;
  right: auto !important;
}

@media (max-width: 600px) {

  .back-to-top {
    width: clamp(70px, 18vw, 100px);
    right: 6vw;
    bottom: 1.5rem;
  }

  .followers.tear-band::before {
    background-image: url("../assets/strappo di sopra più ALTO per counters.png") !important;
  }
}

@font-face {
  font-family: "Fort Quinsy";
  src: url("../assets/fonts/FORTQUINSY.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Nexa Extra Light";
  src: url("../assets/fonts/Nexa-ExtraLight.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Nexa Bold";
  src: url("../assets/fonts/NexaBold.otf") format("truetype");
  font-display: swap;
}
.followers.tear-band::before {
  background-image: url("../assets/personaggi/strappo di sopra LARGO.png");
}