/*          =========================================
              HERO SECTION (Our Projects)
            ========================================= */
/*#region   ========================================= */

.hero-ourprj {
  width: 100%;
  min-height: auto; /* La sezione ora si adatta al contenuto e non avanza spazio */
  padding-bottom: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  overflow: hidden; /* Blocca ogni movimento del contenuto interno */
  /* DOPPIO BACKGROUND: Gradiente personalizzato (immagine) sopra, Bianco solido sotto */
  background:
    linear-gradient(
      90deg,
      rgba(243, 221, 235, 0.38) 1%,
      rgba(227, 214, 242, 0.55) 27%,
      rgba(215, 227, 246, 0.72) 54%,
      rgba(201, 216, 242, 0.88) 89%
    ),
    #ffffff;
  background-repeat: no-repeat;
}

.hero-ourprj__workspace {
  width: 100%;
  max-width: var(--workspace-width);
  margin-inline: auto;
  padding-inline: var(--paddinginline-workspace);
  padding-top: 140px;
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Ritorna a sinistra su mobile */
  text-align: left;
  gap: 15px;
  overflow: visible;
}

.hero-ourprj__workspace > * {
  margin-inline: 0;
  width: 100%;
}

/* --- CONTENT ELEMENTS --- */
.hero-ourprj__title {
  text-align: left;
  margin: 0;
  margin-top: 50px;
}
.hero-ourprj__subtitle-group > * {
  margin: 0;
  padding: 0;
}
.hero-ourprj__subtitle-group {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Testo e icona a sinistra */
  gap: 15px;
  width: 100%;
}

.hero-ourprj__subtitle {
  margin: 0;
}

.hero-ourprj__icon {
  margin-top: 0;
  display: flex;
  align-items: start;
}

.hero-ourprj__icon svg,
.hero-ourprj__icon img {
  width: 32px; /* Icona più piccola per allinearsi meglio al testo */
  height: auto;
  animation: wave-hand 2.5s infinite;
  transform-origin: bottom left; /* Pivot at the wrist */
  display: inline-block;
}

@keyframes wave-hand {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(14deg);
  }
  20% {
    transform: rotate(-8deg);
  }
  30% {
    transform: rotate(14deg);
  }
  40% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(10deg);
  }
  60% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.hero-ourprj__text {
  max-width: 500px;
  margin-top: 10px;
}

/* --- MOBILE SPECIFIC IMAGES (1, 2) --- */
.hero-ourprj__img1,
.hero-ourprj__img2,
.hero-ourprj__img1 figure,
.hero-ourprj__img2 figure {
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: visible;
  margin: 0;
  padding: 0;
}

.hero-ourprj__img1 img,
.hero-ourprj__img2 img {
  max-width: none !important; /* Impedisce il ridimensionamento */
  flex-shrink: 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: block;
}

/* L'immagine 2 rimane a 863px come concordato */
.hero-ourprj__img2 img {
  width: 863px !important;
  margin-top: -50px;
  margin-bottom: -10px; /* COMPENSA IL MARGINE SOPRA: elimina lo spazio vuoto in fondo */
}

/* Immagine 1: larghezza fissa in PX per impedire il ridimensionamento */
.hero-ourprj__img1 img {
  width: 360px !important; /* Regola questo valore per la dimensione della prima img */
}

/* --- VISUAL AREA (COLLAGE) --- */
.hero-ourprj__visual {
  grid-area: visual;
  position: relative;
  width: 100%;
  height: 0; /* Su mobile non deve occupare spazio se non ci sono elementi */
  display: none; /* Lo nascondiamo del tutto su mobile */
}

/* Specific Collage Items - placeholders for now */
.hero-ourprj__collage-item {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

.hero-ourprj__item-main {
  width: 120%;
  height: 120%;
  z-index: 3;
  /* Sarà la figura sulla bolla */
}

@media (min-width: 900px) {
  .hero-ourprj {
    min-height: 1100px; /* Altezza aumentata come richiesto */
    padding-top: 0;
    align-items: flex-end; /* Sposta tutto verso il basso */
    padding-bottom: 100px; /* Aumentato per staccare il testo dal fondo */
    /* TRIPLO BACKGROUND: Immagine (Layer 1), Gradiente (Layer 2), Bianco (Base) */
    background-image:
      url("https://www.horizonfyw.com/wp-content/uploads/2026/02/Hero-Image-Desktop.png"),
      linear-gradient(
        90deg,
        rgba(243, 221, 235, 0.38) 1%,
        rgba(227, 214, 242, 0.55) 27%,
        rgba(215, 227, 246, 0.72) 54%,
        rgba(201, 216, 242, 0.88) 89%
      );
    background-color: #ffffff;

    /* Layer 1: Ingrandita a 1500px | Layer 2: 100% */
    background-size:
      1500px auto,
      100% 100%;

    /* POSIZIONE BLINDATA: Orrizontale calc(), Verticale 100.1% per bordi puliti */
    background-position:
      calc(50% + 50px) 105%,
      center center;

    background-repeat: no-repeat;
    margin-inline: auto;
    width: 100%;
    margin-bottom: 0px;
    overflow: hidden;
  }
  /* La sezione occupa tutto lo schermo */
  .hero-ourprj__workspace {
    display: grid; /* Torna a grid per il layout editoriale */
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "title visual"
      "subtitle visual"
      "text visual";
    justify-items: start; /* Allinea a sinistra gli elementi della griglia */
    align-items: end;
    text-align: left;
    gap: 0;
  }

  .hero-ourprj__workspace > * {
    margin-inline: 0;
    text-align: left;
  }

  .hero-ourprj__title {
    grid-area: title;
    text-align: left;
    font-size: 64px;
    z-index: 2;
  }

  .hero-ourprj__subtitle-group {
    grid-area: subtitle;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: -45px; /* Alzato di più verso il titolo */
    margin-left: 250px; /* Portato più a sinistra */
    z-index: 3;
  }

  .hero-ourprj__text {
    grid-area: text;
    margin-top: 30px; /* Spazio pulito sotto i titoli */
    max-width: 500px;
  }

  .hero-ourprj__visual {
    grid-area: visual;
    align-self: center;
  }
}

/*          =========================================
              PROJECTS SECTION (Our Projects)
            ========================================= */
/*#region   ========================================= */

.project-ourprj {
  width: 100%;
  padding-block: 100px;
  background-color: #f7f6f3;
  margin-top: 0;
  display: flex;
  justify-content: center;
}

.project-ourprj__workspace {
  width: 100%;
  max-width: var(--workspace-width);
  margin-inline: auto;
  padding-inline: var(--paddinginline-workspace);
}

/* --- SHOWCASE GRID --- */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px 225px;
  max-width: 1200px;
  margin: 60px auto;
  padding: 20px;
}

.project-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

/* --- CARD COMPOSITION --- */
.magazine-comp {
  position: relative;
  width: 420px;
  height: 504px;
  flex-shrink: 0;
  cursor: pointer;
  display: block;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-decoration: none;
}

.magazine-comp:hover {
  transform: scale(1.02);
}

.magazine-comp__img-container {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Images URLs */
.card-1 {
  background-image: url("https://www.horizonfyw.com/wp-content/uploads/2026/02/immagine-megazine-errare.png");
}
.card-2 {
  background-image: url("https://www.horizonfyw.com/wp-content/uploads/2026/02/immagine-web-desing.png");
}
.card-3 {
  background-image: url("https://www.horizonfyw.com/wp-content/uploads/2026/02/immagine-surface-design-jelly-fish.png");
}
.card-4 {
  background-image: url("https://www.horizonfyw.com/wp-content/uploads/2026/02/immagine-cretive-design-1.png");
}

/* --- LIQUID GLASS LABELS (Static) --- */
.project-ourprj .liquidglass-wrapper {
  position: absolute;
  overflow: hidden;
  border-radius: 100px;
  padding: 10px 32px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(12px);
  z-index: 10;
  pointer-events: none;
}

.project-ourprj .liquidglass-filter,
.project-ourprj .liquidglass-overlay,
.project-ourprj .liquidglass-specular {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.project-ourprj .liquidglass-filter {
  z-index: 0;
  filter: url(#liquidglass-lens-filter) saturate(105%) brightness(1.05);
}

.project-ourprj .liquidglass-overlay {
  z-index: 1;
  background: rgba(255, 255, 255, 0.15);
}

.project-ourprj .liquidglass-specular {
  z-index: 2;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 3px rgba(255, 255, 255, 0.9);
}

.project-ourprj .liquidglass-content {
  position: relative;
  z-index: 3;
  font-size: 24px;
  font-weight: 400;
  color: #1a1a1a;
  white-space: nowrap;
  font-family: "Cal Sans", sans-serif;
  letter-spacing: 0.08em;
}

.project-ourprj .liquidglass-content.is-violet {
  color: #544fa1;
}

/* Posizionamenti Card 1 (Magazine) */
.project-ourprj .label-mag-top {
  top: 13%;
  left: -70px;
}
.project-ourprj .label-mag-mid {
  top: 70%;
  right: -90px;
}
.project-ourprj .label-mag-bot {
  bottom: 8%;
  left: -50px;
}

/* Posizionamenti Card 2 (Web) */
.project-ourprj .label-web-top {
  top: 10%;
  left: -70px;
}
.project-ourprj .label-web-mid-l {
  top: 27%;
  right: -20px;
}
.project-ourprj .label-web-mid-r {
  top: 55%;
  right: -80px;
}
.project-ourprj .label-web-bot {
  bottom: 20%;
  left: -100px;
}

/* Card 3 (Jelly) */
.project-ourprj .label-jelly-main {
  top: 15%;
  right: -100px;
}
.project-ourprj .label-jelly-mid {
  top: 38%;
  left: -80px;
}
.project-ourprj .label-jelly-bot {
  top: 50%;
  right: -80px;
}

/* Card 4 (Shopbag) */
.project-ourprj .label-shop-main {
  top: 12%;
  left: -60px;
}
.project-ourprj .label-shop-mid {
  top: 42%;
  right: -50px;
}
.project-ourprj .label-shop-bot {
  bottom: 20%;
  left: -35px;
}

/* --- ROTATING ICON --- */
.project-icon {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 90px;
  height: 90px;
  color: #544fa1;
  z-index: 20;
}

.rotating-text-group {
  transform-origin: center;
  animation: spinText 12s linear infinite;
}

.rotating-text-group text,
.rotating-text-group textPath {
  font-size: 12px !important;
  font-family: "Cal Sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: 5px;
  fill: #544fa1;
  font-weight: 700;
}
.pulsing-arrow {
  transform-origin: center;
  animation: pulseArrow 2s ease-in-out infinite;
}

@keyframes spinText {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulseArrow {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

/* Mobile Responsive & Fluid Scaling */
@media (max-width: 900px) {
  .showcase-grid {
    grid-template-columns: 1fr;
    gap: 80px;
  }

  /* Larghezza fluida: 230px su schermi mini -> 420px vicino ai 900px */
  .magazine-comp {
    width: clamp(230px, 35vw + 110px, 420px);
    height: auto;
    aspect-ratio: 420 / 504;
    margin: 0 auto;
  }

  .project-ourprj .liquidglass-content {
    font-size: clamp(14px, 2vw + 8px, 24px);
  }

  .project-ourprj .liquidglass-wrapper {
    padding: clamp(6px, 1vw + 4px, 10px) clamp(12px, 2vw + 6px, 32px);
  }

  .project-icon {
    width: clamp(50px, 8vw + 20px, 90px);
    height: clamp(50px, 8vw + 20px, 90px);
    bottom: -13px;
    right: -12px;
  }

  /* --- Posizionamenti Fluidi ---
     Valori minimi alzati a -5px per proteggere gli schermi da 320px
  */

  /* Card 1: Magazine */
  .project-ourprj .label-mag-top {
    left: clamp(-70px, -8vw, -5px);
  }
  .project-ourprj .label-mag-mid {
    right: clamp(-90px, -10vw, -5px);
  }
  .project-ourprj .label-mag-bot {
    left: clamp(-50px, -6vw, -5px);
  }

  /* Card 2: Web */
  .project-ourprj .label-web-top {
    left: clamp(-70px, -8vw, -5px);
  }
  .project-ourprj .label-web-mid-l {
    right: clamp(-20px, -2vw, -5px);
  }
  .project-ourprj .label-web-mid-r {
    right: clamp(-80px, -9vw, -5px);
  }
  .project-ourprj .label-web-bot {
    left: clamp(-100px, -11vw, -5px);
  }

  /* Card 3: Jelly */
  .project-ourprj .label-jelly-main {
    right: clamp(-100px, -11vw, -5px);
  }
  .project-ourprj .label-jelly-mid {
    left: clamp(-80px, -9vw, -5px);
  }
  .project-ourprj .label-jelly-bot {
    right: clamp(-80px, -9vw, -5px);
  }

  /* Card 4: Shopbag */
  .project-ourprj .label-shop-main {
    left: clamp(-60px, -7vw, -5px);
  }
  .project-ourprj .label-shop-mid {
    right: clamp(-50px, -6vw, -5px);
  }
  .project-ourprj .label-shop-bot {
    left: clamp(-35px, -4vw, -5px);
  }
}

/* Intermediate Layout (901px - 1300px) */
@media (min-width: 901px) and (max-width: 1300px) {
  .showcase-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 80px clamp(20px, 10vw, 225px);
    padding-inline: 40px;
    max-width: 100%;
  }

  .magazine-comp {
    width: clamp(300px, 32vw, 420px);
    height: auto;
    aspect-ratio: 420 / 504;
    margin: 0 auto;
  }

  /* Scaling fluido sporgenze per 2 colonne */
  .project-ourprj .label-mag-top {
    left: clamp(-70px, -6vw, -20px);
  }
  .project-ourprj .label-mag-mid {
    right: clamp(-90px, -8vw, -20px);
  }
  .project-ourprj .label-mag-bot {
    left: clamp(-50px, -4vw, -20px);
  }

  .project-ourprj .label-web-top {
    left: clamp(-70px, -6vw, -20px);
  }
  .project-ourprj .label-web-mid-l {
    right: clamp(-20px, -2vw, -10px);
  }
  .project-ourprj .label-web-mid-r {
    right: clamp(-80px, -7vw, -20px);
  }
  .project-ourprj .label-web-bot {
    left: clamp(-100px, -9vw, -20px);
  }

  .project-ourprj .label-jelly-main {
    right: clamp(-100px, -9vw, -20px);
  }
  .project-ourprj .label-jelly-mid {
    left: clamp(-80px, -7vw, -20px);
  }
  .project-ourprj .label-jelly-bot {
    right: clamp(-80px, -7vw, -20px);
  }

  .project-ourprj .label-shop-main {
    left: clamp(-60px, -5vw, -20px);
  }
  .project-ourprj .label-shop-mid {
    right: clamp(-50px, -4vw, -20px);
  }
  .project-ourprj .label-shop-bot {
    left: clamp(-35px, -3vw, -10px);
  }

  .project-icon {
    width: clamp(65px, 8vw, 90px);
    height: clamp(65px, 8vw, 90px);
  }
}

/*#endregion */

/*          =========================================
              FRASE SECTION (Our Projects)
            ========================================= */
/*#region   ========================================= */
.frase-ourprj {
  margin-top: 150px;
}

.frase-ourprj__workspace {
  width: 100%;
  max-width: var(--workspace-width);
  margin-inline: auto;
  padding-inline: var(--paddinginline-workspace);
}
.frase-ourprj__title {
  text-align: center;
}

/*#endregion */

.contactf-ourprj {
  padding-block: 150px;
}