/* #region GLOBAL */
.section {
  padding: 3.5rem 1rem;
}
/* #endregion GLOBAL */

/* #region UTILITIES */

/* #region flex */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-center {
  justify-content: center;
  align-items: center;
}
/* #endregion flex */

/* #region text */
/* #endregion text */

/* #endregion UTILITIES */

/* #region COMPONENTS */
.button {
  display: inline-flex;
  padding: 0.875rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;

  border-radius: 1.5625rem;
  letter-spacing: 0.02rem;
}
.button--primary {
  background: var(--color-text);
  color: var(--color-bg);
  border: 1px solid #1c162f;
}
.button--secondary {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-text);
}

@media (min-width: 1024px) {
  .button--primary,
  .button--secondary {
    transition:
      background 0.25s ease,
      box-shadow 0.25s ease;
  }

  .button--primary:hover {
    background: rgba(28, 22, 47, 0.85);
    box-shadow: inset 0 0 0 1px #1c162f;
  }

  .button--secondary:hover {
    background: #ebebeb;
    box-shadow: inset 0 0 0 1px #1c162f;
  }
}

/* #endregion COMPONENTS */

/* #region HEADER */
.site-header {
  position: relative;
  overflow: hidden;
}

/* #region Navbar */

.desktop {
  display: none;
}

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;

  height: 5rem;
  color: var(--color-text);

  transform: translateY(0);
  transition: transform 0.35s ease;
  will-change: transform;

  /* Apple-like glass */
  background: rgba(245, 245, 245, 0.58);
  -webkit-backdrop-filter: saturate(190%) blur(20px);
  backdrop-filter: saturate(190%) blur(20px);

  /* subtle separation like iOS */
  border-bottom: 1px solid rgba(28, 22, 47, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.site-nav.site-nav--hidden {
  transform: translateY(-110%);
}

.nav-container {
  height: 100%;
  padding: 0 1.88rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* #endregion Navbar */

/* #region Menu Panel */
.menu-panel {
  position: fixed;
  top: 5rem;
  right: -100%;
  height: calc(100% - 5rem);
  width: 100%;
  /* Apple-like glass */
  background: rgba(245, 245, 245, 0.56);
  -webkit-backdrop-filter: saturate(190%) blur(20px);
  backdrop-filter: saturate(190%) blur(20px);
  border-left: 1px solid rgba(28, 22, 47, 0.1);
  transition: right 0.6s ease-in-out;

  align-items: center;
  gap: 5rem;
  z-index: 10;
  /* ✅ centra tutto il contenutodel menu */
}

.menu-panel.active {
  right: 0;
  pointer-events: auto;
}

/* ✅ ul centrato e in colonna */
.menu-panel ul {
  list-style: none;
  margin-top: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
}

.menu-panel ul li {
  margin: 0;
}

/* ✅ link: niente position:absolute (era la causa del disallineamento) */
.menu-panel ul li a {
  text-decoration: none;

  padding: 0.3125rem 1.875rem;
  color: var(--color-text);
  border-radius: 3.125rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  position: relative;
  line-height: 1.2;

  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

/* hover pill (solo su device con hover reale) */
.menu-panel ul li a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(28, 22, 47, 0.08);
  border-radius: 3.125rem;
  transform: scaleY(0);
  z-index: -1;
  transition: transform 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .menu-panel ul li a:hover::after {
    transform: scaleY(1);
  }

  .menu-panel ul li a:hover {
    color: var(--color-text);
  }
}

/* Stato applicato via JS per vedere l'effetto anche su tap/click (mobile) */
.menu-panel ul li a.is-clicked::after {
  transform: scaleY(1);
}

.menu-panel ul li a.is-clicked {
  color: var(--color-text);
}

/* ✅ social dentro il menu: trattalo come un normale blocco, centrato */
.social-links.mobile {
  margin-top: 2.5rem;
  justify-content: center;
}

/* reveal animation */
.menu-panel.active ul li a,
.social-links.mobile {
  opacity: 1;
  transform: translateY(0);
}

/* #endregion Menu Panel */

/* #region Hamburger */
.menu-btn {
  cursor: pointer;
  z-index: 1;
  background-color: transparent;
  border: none;
  border-radius: 50%;
  width: 2.625rem;
  height: 2.625rem;
}

.menu-btn svg {
  /* The size of the SVG defines the overall size */
  height: 3em;
  /* Define the transition for transforming the SVG */
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line {
  fill: none;
  stroke: var(--color-text);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  /* Define the transition for transforming the Stroke */
  transition:
    stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line-top-bottom {
  stroke-dasharray: 12 63;
}

.menu-btn.active {
  transform: rotate(-45deg);
}

.menu-btn.active .line-top-bottom {
  stroke-dasharray: 20 300;
  stroke-dashoffset: -32.42;
}

.menu-btn {
  -webkit-tap-highlight-color: transparent;
}

/* #endregion Hamburger */

/* #region Social Icons */
.circle-container {
  width: 3.625rem;
  height: 3.625rem;
  border-radius: 26px;
  background: var(--color-text);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition-duration: 0.3s;
}

.circle-container:hover {
  background-image: url(/assets/img/bg-social.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.social-links {
  display: flex;
  gap: 0.75rem;
  z-index: 100;
}

.circle-container:active {
  transform: scale(0.9);
  transition-duration: 0.3s;
}

/* dimensiona e uniforma tutte le icone dentro i cerchi */

/* per le icone a riempimento (IG/LinkedIn ecc.) */
.socialSvg path {
  fill: rgb(255, 255, 255);
}

/* anima QUALSIASI svg dentro il container hover (include containerFour) */
.circle-container:hover svg {
  animation: slide-in-top 0.3s both;
}

.containerFour path {
  fill: rgb(255, 255, 255);
}

@keyframes slide-in-top {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/* #endregion Social Icons */

/* #endregion HEADER */

/* #region LAYOUT */
/* #region Background Blobs */
.bg-blobs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.bg-blobs__item {
  position: absolute;
  display: block;
  opacity: 0.9;
  filter: blur(clamp(70px, 10vw, 125px));
  transform: translate3d(0, 0, 0); /* aiuta performance */
}
.bg-blobs__item--1 {
  border-radius: 39.39575rem;
  background: #9ea5f5;
  filter: blur(125px);
  width: 16.4375rem;
  height: 39.39575rem;
  left: -2.6875rem;
  top: -4.9246rem;
}
.bg-blobs__item--2 {
  border-radius: 20.79888rem;
  background: #fbc6a4;
  filter: blur(125px);
  width: 12.78869rem;
  height: 20.79888rem;
  transform: rotate(0.071deg);
  top: 7.1848rem;
  left: 11.6249rem;
}
.bg-blobs__item--3 {
  border-radius: 61.60256rem;
  background: #f8e0c4;
  filter: blur(125px);
  width: 9.75319rem;
  height: 61.60256rem;
  top: -15.5661rem;
  left: 17.8511rem;
}
.bg-blobs__item--4 {
  border-radius: 43.44569rem;
  background: #fbc6a4;
  filter: blur(125px);
  width: 20.07738rem;
  height: 43.44569rem;
  transform: rotate(0.071deg);
  top: 22.7657rem;
  left: -7.375rem;
}
.bg-blobs__item--5 {
  border-radius: 61.59631rem;
  background: #f8e0c4;
  filter: blur(125px);
  width: 18rem;
  height: 22rem;
  top: 14rem;
  left: 7rem;
}

.bg-blobs__item--6 {
  width: 28rem;
  height: 39rem;
  border-radius: 26rem;
  background: #9ea5f5;
  filter: blur(125px);
  top: 32rem;
  left: 9rem;
}

.bg-blobs__item--7 {
  border-radius: 23.3125rem;
  background: #9ea5f5;
  filter: blur(125px);
  width: 24rem;
  height: 20rem;
  top: -4rem;
  left: -6rem;
}

.bg-blobs__item--8 {
  border-radius: 16.5rem;
  background: #f8e0c4;
  filter: blur(125px);
  width: 18rem;
  height: 16rem;
  top: -2rem;
  left: 11rem;
}

.bg-blobs__item--14 {
  border-radius: 18rem;
  background: #fbc6a4;
  filter: blur(125px);
  width: 16rem;
  height: 14rem;
  top: -3rem;
  right: 4rem;
}

.bg-blobs__item--15 {
  border-radius: 16rem;
  background: #f8e0c4;
  filter: blur(125px);
  width: 14rem;
  height: 12rem;
  top: -2rem;
  right: -3rem;
}

.bg-blobs__item--9 {
  border-radius: 16.5rem;
  background: #9ea5f5;
  width: 10.5rem;
  height: 8.75rem;
  filter: blur(75px);
  will-change: transform;
  animation: blob-loop-i 26s ease-in-out infinite alternate;
}
.bg-blobs__item--10 {
  border-radius: 16.5rem;
  background: #fbc6a4;
  width: 11.63481rem;
  height: 8.2355rem;
  left: 10.7411rem;
  filter: blur(75px);
  will-change: transform;
  animation: blob-loop-l 32s ease-in-out infinite alternate;
}

.bg-blobs__item--11 {
  border-radius: 16.5rem;
  background: #f8e0c4;
  width: 11.4375rem;
  height: 10.1875rem;
  filter: blur(75px);
  left: 23.25rem;
  will-change: transform;
  animation: blob-loop-m 28s ease-in-out infinite alternate;
}

.bg-blobs__item--12 {
  width: 24rem;
  height: 18rem;
  border-radius: 24rem;
  background: #fbc6a4;
  filter: blur(125px);
  top: 38rem;
  left: -4rem;
}

.bg-blobs__item--13 {
  width: 22rem;
  height: 16rem;
  border-radius: 22rem;
  background: #f8e0c4;
  filter: blur(125px);
  top: 39rem;
  right: -3rem;
}

/* #endregion Background Blobs */

/* #endregion LAYOUT */

/* ==============================
   ANIMAZIONI ENTRATA
   ============================== */

.animazione {
  opacity: 0;
  transform: translateY(1.5rem);
  will-change: opacity, transform;
}