@font-face {
  font-display: swap;
  font-family: "Chelsea Market";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/chelsea-market-v14-latin-regular.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400;
  src: url("../Fonts/nunito-v32-latin-regular.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700;
  src: url("../Fonts/nunito-v32-latin-700.woff2") format("woff2");
}

:root {
  --color-neutral-100: oklch(100% 0.00011 271.152);
  --color-neutral-300: oklch(95.735% 0.02153 83.231);
  --color-neutral-800: oklch(17.616% 0.01019 18.057);
  --color-neutral-900: oklch(0% 0 0);

  --color-primary-400: oklch(58.696% 0.15057 140.236);
  --color-primary-800: oklch(37.481% 0.06098 149.376);
  --color-primary-900: oklch(from var(--color-primary-400) calc(l - 0.47) c h);

  --color-accent-400: oklch(46.164% 0.15883 317.443);
  --color-accent-800: oklch(28.136% 0.08759 317.149);

  --hero-color-original: oklch(0.23 0.08 277.35);
  --hero-color: oklch(0.23 0.08 277.35);

  --text-color: var(--color-neutral-100);
  --button-color: var(--color-primary-400);
  --button-shadow-color: var(--color-primary-800);
  --highlight-color: var(--color-primary-400);

  --treetop-top: oklch(from var(--color-primary-400) calc(l - 0.3) c h);
  --treetop-middle: oklch(from var(--color-primary-400) calc(l - 0.4) c h);
  --treetop-bottom: oklch(from var(--color-primary-400) calc(l - 0.47) c h);

  --card-color: oklch(from var(--color-primary-400) calc(l - 0.47) c h);

  --multiplier: 0.03;

  --trunk: oklch(0.16 0.01 0);

  --rainbow-one: violet;
  --rainbow-two: indigo;
  --rainbow-three: blue;
  --rainbow-four: green;
  --rainbow-five: yellow;
  --rainbow-six: orange;
  --rainbow-seven: red;

  --ff-primary: "Chelsea Market", system-ui;
  --ff-secondary: "Nunito", sans-serif;

  --size-100: 0.75rem;
  --size-200: 1rem;
  --size-300: 1.125rem;
  --size-400: 1.25rem;
  --size-500: 1.5rem;
  --size-600: 1.775rem;
  --size-700: 2rem;
  --size-750: 2.5rem;
  --size-800: 3rem;
  --size-900: 5rem;

  --spring-easing: linear(
    0,
    0.0018,
    0.0069 1.15%,
    0.026 2.3%,
    0.0637,
    0.1135 5.18%,
    0.2229 7.78%,
    0.5977 15.84%,
    0.7014,
    0.7904,
    0.8641,
    0.9228,
    0.9676 28.8%,
    1.0032 31.68%,
    1.0225,
    1.0352 36.29%,
    1.0431 38.88%,
    1.046 42.05%,
    1.0448 44.35%,
    1.0407 47.23%,
    1.0118 61.63%,
    1.0025 69.41%,
    0.9981 80.35%,
    0.9992 99.94%
  );
  --spring-duration: 0.8333s;

  --spring-easing-two: linear(
    0,
    0.01 0.7%,
    0.037 1.4%,
    0.149 3%,
    0.75 8.6%,
    0.977 11.2%,
    1.117 13.7%,
    1.158 15%,
    1.182 16.4%,
    1.188 17.9%,
    1.175 19.6%,
    1.011 28.3%,
    0.98 31%,
    0.966 33.8%,
    0.967 37.1%,
    0.998 45.8%,
    1.006 51.1%,
    0.999 68.2%,
    1
  );
  --spring-duration-two: 6500ms;

  --boop-easing: linear(
    0,
    0.0028 0.22%,
    0.0136 0.48%,
    0.0527 0.96%,
    0.1214,
    0.2133 2%,
    0.4371 3.01%,
    1.0485 5.4%,
    1.2017 6.1%,
    1.3151,
    1.4057 7.32%,
    1.4676,
    1.5074 8.45%,
    1.5198,
    1.5259 9.06%,
    1.5265 9.28%,
    1.5233,
    1.516,
    1.5048 10.07%,
    1.4715 10.59%,
    1.4212 11.15%,
    1.3052 12.16%,
    0.9667 14.68%,
    0.8917 15.34%,
    0.8324,
    0.7851 16.56%,
    0.7528,
    0.7323 17.69%,
    0.7267 17.95%,
    0.7232 18.26%,
    0.7242 18.74%,
    0.7335 19.26%,
    0.7525,
    0.7792 20.39%,
    0.8406 21.39%,
    1.016 23.88%,
    1.0581 24.58%,
    1.0892 25.19%,
    1.1123,
    1.1296,
    1.1407,
    1.1457 27.45%,
    1.1454 27.93%,
    1.1406 28.45%,
    1.1309,
    1.1169 29.59%,
    1.0832 30.63%,
    0.9909 33.12%,
    0.9526 34.42%,
    0.9405,
    0.9315 35.56%,
    0.9261 36.08%,
    0.9233 36.65%,
    0.925 37.52%,
    0.9339 38.48%,
    0.9509 39.56%,
    0.9996 42.05%,
    1.0193 43.22%,
    1.0343 44.53%,
    1.0384,
    1.0403 45.84%,
    1.0395 46.75%,
    1.0347 47.71%,
    1.0257 48.8%,
    1 51.29%,
    0.9897 52.46%,
    0.9819 53.77%,
    0.9788 55.03%,
    0.9817 56.91%,
    1.0053 61.66%,
    1.0094,
    1.0112 64.18%,
    1.0096 66.14%,
    0.9972 70.85%,
    0.9941 73.33%,
    0.995 75.38%,
    1.0013 79.96%,
    1.003 82.31%,
    0.9984 91.55%,
    1.0008 99.96%
  );
  --boop-duration: 2.142s;

  --prezzi-easing: linear(
    0,
    0.002 0.49%,
    0.0082,
    0.0182,
    0.0318 2.06%,
    0.0497 2.61%,
    0.072 3.19%,
    0.1303 4.44%,
    0.1876 5.49%,
    0.2596 6.68%,
    0.5548 11.18%,
    0.6793 13.18%,
    0.7954 15.27%,
    0.8443,
    0.8891 17.24%,
    0.9307 18.26%,
    0.9667,
    0.9985 20.23%,
    1.0268 21.25%,
    1.0515,
    1.0718 23.34%,
    1.0885 24.41%,
    1.1015 25.52%,
    1.1127 26.94%,
    1.1186 28.45%,
    1.1192 30.05%,
    1.1147 31.79%,
    1.1078 33.24%,
    1.0975 34.86%,
    1.0414 42.18%,
    1.0173 45.92%,
    1.0068 48.01%,
    0.9985 50.13%,
    0.9925 52.28%,
    0.9884 54.55%,
    0.9859 57.62%,
    0.9863 61.16%,
    0.9974 74.61%,
    1.0009 81.8%,
    1.0007 99.98%
  );
  --prezzi-duration: 2.625s;

  scroll-behavior: smooth;
}

[data-theme="dark"] {
  --color-neutral-100: oklch(10% 0.00011 271.152);
  --color-neutral-300: oklch(20% 0.02153 83.231);
  --color-neutral-800: oklch(90% 0.01019 18.057);
  --color-neutral-900: oklch(100% 0 0);

  --color-primary-400: oklch(0.9 0.08 319.23);
  --color-primary-800: oklch(
    from var(--color-primary-400) calc(l - 0.2) calc(c + 0.1) h
  );
  --color-primary-900: oklch(
    from var(--color-primary-400) calc(l - 0.4) calc(c + 0.2) h
  );

  --color-accent-400: oklch(75% 0.15883 317.443);
  --color-accent-800: oklch(90% 0.08759 317.149);

  --hero-color-original: oklch(0.85 0.08 277.35);
  --hero-color: oklch(0.85 0.08 277.35);

  --text-color: var(--color-neutral-100);
  --button-color: var(--color-primary-800);
  --button-shadow-color: var(--color-primary-900);
  --highlight-color: var(--color-primary-900);

  --treetop-top: oklch(
    from var(--color-primary-400) calc(l - 0.4) calc(c + 0.25) h
  );
  --treetop-middle: oklch(
    from var(--color-primary-400) calc(l - 0.23) calc(c + 0.15) h
  );
  --treetop-bottom: oklch(from var(--color-primary-400) calc(l) c h);

  --card-color: oklch(from var(--color-primary-400) calc(l) calc(c) h);

  --multiplier: -0.09;

  --trunk: oklch(77.115% 0.00583 2.528);

  --rainbow-one: rgb(15, 53, 37);
  --rainbow-two: indigo;
  --rainbow-three: blue;
  --rainbow-four: green;
  --rainbow-five: yellow;
  --rainbow-six: rgb(136, 255, 0);
  --rainbow-seven: red;
}

::view-transition-old(root) {
  animation-delay: 500ms;
}

::view-transition-new(root) {
  animation: circle-in 500ms;
}

@keyframes circle-in {
  0% {
    clip-path: circle(0% at 90% 0%);
  }
  100% {
    clip-path: circle(100% at 50% 50%);
  }
}

.flex {
  display: flex;
}

[x-cloak] {
  display: none !important;
}

.content-grid {
  --padding-inline: 1rem;
  --content-max-width: 900px;
  --breakout-max-width: 1200px;

  --breakout-size: calc(
    (var(--breakout-max-width) - var(--content-max-width)) / 2
  );

  display: grid;
  grid-template-columns:
    [full-width-start] minmax(var(--padding-inline), 1fr)
    [breakout-start] minmax(0, var(--breakout-size))
    [content-start] min(
      100% - (var(--padding-inline) * 2),
      var(--content-max-width)
    )
    [content-end]
    minmax(0, var(--breakout-size)) [breakout-end]
    minmax(var(--padding-inline), 1fr) [full-width-end];
}

.content-grid > :not(.breakout, .full-width),
.full-width > :not(.breakout, .full-width) {
  grid-column: content;
}

.content-grid > .breakout,
.full-width > .breakout {
  grid-column: breakout;
}

.content-grid > .full-width,
.full-width > .full-width:not(.hero__svg-bg, .faq__svg-bg, .bgtest),
.aboutme > .full-width,
.hero > .full-width:not(.hero__svg-bg),
.prezzi > .full-width,
.faq > .full-width:not(.faq__svg-bg, .bgtest) {
  grid-column: full-width;

  display: grid;
  grid-template-columns: inherit;
}

.hero__svg-bg {
  > * {
    grid-column: content !important;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ff-primary);
  font-size: var(--size-100-rem);
}
p {
  font-family: var(--ff-secondary);
}


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


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


@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {

  line-height: 1.5;

  -webkit-font-smoothing: antialiased;
}


img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}


input,
button,
textarea,
select {
  font: inherit;
}


p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}


p {
  text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}


#root,
#__next {
  isolation: isolate;
}


.section__header {
  font-size: var(--size-800);
  text-align: center;
}

.subsection__header {
  font-size: var(--size-600);
  text-align: center;
  margin-block: var(--size-200);
}



section,
a {
  color: var(--text-color);
}

/* Top Menu */
body {
  background: var(--hero-color);
}

header {
  --thickness: 4px;
  display: flex !important;
  justify-content: space-evenly;
  height: 10vh;
  margin-block-end: -10vh;
  padding-inline: 2em;
  position: sticky;
  top: 0;
  z-index: 2000;
  transition: background 300ms ease;
 place-items: center;
  background: linear-gradient(to top, transparent 0, var(--hero-color) 100%);
}


@supports (backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px)) {
  .backdrop {
    position: absolute;
    inset: 0;

    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);

    pointer-events: none;
  }


}


@supports (mask-image: none) or (-webkit-mask-image: none) {
  .backdrop {
    height: 200%;
    -webkit-mask-image: linear-gradient(
      to bottom,
      black 0% 50%,
      transparent 50% 100%
    );
    mask-image: linear-gradient(to bottom, black 0% 50%, transparent 50% 100%);
  }

}

.desktop__nav {
  .menu {
    position: relative;
    display: flex;

    margin-inline: auto;
    justify-content: center;
    align-items: center;
    z-index: 3;

    a {
      opacity: 0.5;
      margin-inline: 0.75em;
      text-decoration: none;
      color: var(--text-color);
      font-family: var(--ff-secondary);
      font-size: var(--size-600);
      transition: opacity 1000ms ease-out;

      &:hover {
        transition: none;
        opacity: 1;
      }
    }
  }
}

.header__logo,
.mobile__nav-logo {
  position: relative;
  z-index: 2;
  font-family: var(--ff-primary);
  font-size: var(--size-500);

  a {
    text-decoration: none;
  }

  svg {
    width: 70%;
    height: 100%;
  }

  .header__logo-text {
    font-family: var(--ff-primary);
 
    fill: var(--text-color);

    > text:first-of-type {
      font-size: 37.43px;
    }
    > text:last-of-type {
      font-size: 30px;
    }
  }

  .header__logo-line {
    fill: none;

    stroke: var(--text-color);
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width: 6px;
  }
}

.header__icons {
  display: flex;
  justify-content: center;
  gap: 10%;
  position: relative;
  min-width: 10%;
  z-index: 2;
  overflow: clip;

  svg {
    aspect-ratio: 1;
    stroke: var(--text-color);
    stroke-width: 3px;
    fill: none;
  }
}

.header__icon {
  width: 1.75rem;
  aspect-ratio: 1;
}

.changeTheme {
  display: inline-grid;
  place-content: center;
  > svg {
    grid-area: 1/1;
  }
}
.sun,
.moon,
.prev,
.globe,
.next,
.dot,
.faq__arrow,
.telefono__svg,
.phone,
.point__svg,
.mail__svg,
.cross,
.itaflag {
  transition: transform;
  transition-timing-function: var(--boop-easing, ease);
  transition-duration: var(--boop-duration, 1s);
}

.phone,
.point__svg,
.mail__svg,
.mail__inside,
.mail__outside {
  transition: transform, fill, stroke;
  transition-timing-function: var(--boop-easing, ease), ease-in-out, ease-in-out;
  transition-duration: var(--boop-duration, 1s), 250ms, 250ms;
}

.sun {
  --rotate: 30deg;
  --scale: 1.05;
  cursor: pointer;
}
.moon {
  --rotate: -20deg;
  --scale: 1.05;
  cursor: pointer;
}
.globe {
  
  --scale: 1.05;
  
}

.itaflag {
  --scale: 0.7;
  transform-origin: center;
}
.next {
  --x: 2px;
}
.prev {
  --x: -2px;
}
.dot {
  --scale: 1.2;
}
.faq__arrow {
  --y: 5px;
}

.boop {
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--rotate, 0))
    scale(var(--scale, 1)) skew(var(--skewX, 0), var(--skewY, 0));

  .cross,
  .itaflag {
    transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--rotate, 0))
      scale(var(--scale, 1)) skew(var(--skewX, 0), var(--skewY, 0));
  }
}

.rotate {
  transform-origin: bottom left;
  transform: rotate(90deg) translate(100%, 100%);
}

.mobile__nav,
.mobile__nav-icons {
  display: none;
}
.hamburger {
  display: none;
}

@media (width < 1050px) {
  .menu {
    a {
      font-size: var(--size-400);
    }
  }
}
@media (width < 760px) {
  .menu {
    a {
      font-size: var(--size-300);
    }
  }
}

@media (width < 800px) {
  .hero__images {
    pointer-events: none;
  }

  .header__desktop {
    display: none !important;
  }
  .hamburger {
    display: inline;
  }

  .mobile__nav {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: fixed;
    width: 60%;
    height: 100vh;
    top: 0;
    right: 0;
    z-index: 99;
    background-color: var(--treetop-bottom);
    border-left: 5px solid var(--text-color);
    border-bottom: 5px solid var(--text-color);

    opacity: 0;
    transform: translateX(100%);
    transition: opacity 500ms, transform 500ms;

    .menu {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;

      height: 70%;

      a {
        text-decoration: none;
        color: var(--text-color);
        font-family: var(--ff-secondary);
        font-size: var(--size-600);
      }
    }
  }

  .mobile__nav > .menu,
  .mobile__nav-logo {
    opacity: 0;
    transition: opacity 500ms;
    transition-delay: 250ms;
  }

  .menu-opacity {
    opacity: 1 !important;
  }

  .mobile__open {
    opacity: 1;
    transform: translateX(0);
  }

  .mobile__nav-logo {
    display: block;
    width: 85%;
    margin: 0 auto;

    svg {
      width: 100%;
      height: auto;
    }
  }

  .mobile__nav-icons {
    display: flow;
    position: fixed;

    z-index: 100;

    top: 2%;
    right: 2%;

    fill: none;
    stroke: var(--text-color);
    stroke-width: 3px;
    stroke-linejoin: round;
    stroke-linecap: round;
  }

  .header__icons {
    gap: 15%;
  }

  .header__icon {
    width: 4rem;
  }
}

/* Hero */
.hero {
  position: relative;
  background-color: rgb(165, 165, 238);
  background: var(--hero-color);
}



.hero__container {
  position: relative;
  min-height: 100vh;
  display: flex !important;
  justify-content: space-around;
}

.hero__images {
  display: grid;
  place-content: center;
  align-items: baseline;
  position: relative;
  width: 100%;

  > * {
    grid-area: 1/1;
  }
}

.logo {

  scale: 0.6;

  transform-origin: center;
  pointer-events: none;
  will-change: filter;

  rotate: -15deg;
  filter: drop-shadow(5px 5px 0px var(--color-primary-800));
  transition: filter 0.1s ease-out;
  fill: var(--highlight-color);
  font-family: var(--ff-primary);

  .one {
    font-size: 343.52px;
    letter-spacing: 0.07em;
  }
  .two {
    font-size: 196.08px;
  }
  .three {
    font-size: 230px;
  }
}

.hero__text {
  --border-radius: 10px;
  --button-width: 12em;
  --button-height: 2.5em;
  position: relative;
  max-width: 60%;
  display: grid;
  place-items: center;
  z-index: 3;
}

.hero__text-container {
  padding: var(--size-600);

  display: grid;
  > h1 {
    font-size: var(--size-700);
    line-height: 1;
    margin-block: var(--size-400);
  }

  > p {
    font-size: var(--size-500);
    margin-block: var(--size-400);
  }

  > a {
    font-size: var(--size-500);
    font-family: var(--ff-primary);
    justify-self: center;
    text-decoration: none;
  }
}

.hero__svg-bg {
  .treetop__bottom {
    filter: drop-shadow(
      5px 5px 5px oklch(from var(--color-primary-400) calc(l - 0.4) c h)
    );
  }
}

.hero__svg-bg,
.faq__svg-bg,
.footer__svg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
  overflow: clip;
  pointer-events: none;
  > svg {
    display: block;
    max-width: revert;
    width: 100%;
    min-width: 5400px;
    overflow: clip;


    .treetop__top,
    .d,
    .e,
    .f {
      fill: var(--treetop-top);
    }
    .treetop__middle,
    .b {
      fill: var(--treetop-middle);
    }
    .treetop__bottom,
    .c {
      fill: var(--treetop-bottom);
    }


  }
}

@media (width < 1000px) {
  .hero__container {
    display: flow !important;
    min-height: 60vh;
    z-index: 5;
  }

  .hero__images {
    max-width: 100%;
    margin: auto;
    margin-block-end: -5rem;
  }

  .hero__text {
    max-width: 100%;
    margin: auto;
    padding-inline: var(--size-500);

    &::after {
      position: absolute;
      content: "";
      z-index: 2;
      width: 100%;
      height: 50%;
      backdrop-filter: blur(15px);
      top: -100px;
    }
  }

  .hero__text-container {
    position: relative;
    z-index: 3;
  }
}

@media (width < 600px) {
  .hero__text-container {
    .pushable {
      font-size: var(--size-300);
    }
  }

  .hero__text {
    &::after {
      top: 0;
    }
  }
}

/* Perchè */

.perche {
  position: relative;

  background: var(--treetop-bottom);
  color: var(--text-color);
}

.perche__container {
  > div {
    position: relative;
    flex-wrap: wrap;

    margin-block: var(--size-600);
    overflow: clip;


  }
}

.perche__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  flex: 1 1 30%;
  min-width: 250px;
  padding-inline: 1.5em;
  opacity: 0;

  transition: transform var(--spring-duration-two) var(--spring-easing-two),
    opacity var(--spring-duration-two) var(--spring-easing-two),
    border var(--spring-duration-two) var(--spring-easing-two);
  transition-delay: var(--delay, 0), var(--delay, 0), 4500ms;
  border: 3px solid transparent;

  > svg {
    position: absolute;
    right: 0;
    fill: var(--text-color);
  }
}
.perche__cards-one {
  .perche__card {
    transform: translate(-50%, 0);
  }
}
.perche__cards-two {
  .perche__card {
    transform: translate(50%, 0);
  }
}
.perche__cards-three {
  .perche__card {
    transform: translate(0, 50%);
  }
}
.perche__slide {
  transform: translate(0, 0) !important;
  opacity: 1 !important;
}

@media (width < 534px) {
  .perche__border:nth-of-type(-n + 2) {
    border-bottom-color: var(--text-color);
  }

  .perche__card {
    padding-block: var(--size-300);
  }
}

@media (width > 534px) and (width < 777px) {
  .perche__border:nth-of-type(1) {
    border-right-color: var(--text-color);
  }

  .perche__border:nth-of-type(3) {
    margin-block-start: var(--size-400);
    border-top-color: var(--text-color);
  }
}

@media (width > 777px) {
  .perche__border:nth-of-type(-n + 2) {

    border-right-color: var(--text-color);
  }
}

.seed {
  width: 200px;

  .dirt {
    transform: translateY(200%);
  }
}
.perche__tiny-svg {
  --aniTimer: 1500ms;
  display: grid;
  place-items: center;
  margin-inline: auto;
  max-width: 200px;
  aspect-ratio: 1;
  overflow: clip;

  stroke: var(--text-color);
  fill: none;

  > svg {
    max-width: 50%;
    stroke: var(--text-color);
    fill: none;
  }

  .stem {
    transform: translateY(200%);
  }

  .big-leaf__inside {
    opacity: 0;
  }
  .big-leaf__outside {
    stroke-dasharray: 210;
    stroke-dashoffset: 210;
  }
}

.mound,
.hat {
  fill: var(--treetop-bottom);
}

.seed {
  max-width: 125px;
}

.grow {
  stroke: var(--text-color);
  fill: none;
  --y: 29px;

  .leaf {
    transform: scale(0) translateY(var(--y));
  }
  .dirt {
    transform: translateY(0);
  }
}

.flourish {
  --y: 0;
  stroke: var(--text-color);
  fill: none;

  .tiny-leaf {
    transform: scale(0);
  }
}

.prezzi__svg {
  overflow: clip;
  svg {
    width: 125px;
    stroke: var(--text-color);
    fill: none;
  }

  .bud {
    transform: translateY(33%);
  }
  .grow {
    transform: translateY(31%);
    .stem {
      transform: translateY(0);
    }

    .leaf {
      transform: scale(1) translateY(0);
    }
  }

  .flourish {
    .tiny-leaf {
      transform: scale(1);
    }

    .big-leaf__inside {
      opacity: 1;
    }
    .big-leaf__outside {
      stroke-dasharray: 0;
      stroke-dashoffset: 0;
    }
  }
}
.seed__ani {
  .acorn {
    transform-box: fill-box;
    transform-origin: center;
    animation: SVGdrop var(--aniTimer) forwards;
    animation-timing-function: var(--spring-easing);
  }

  .dirt {
    transform-box: fill-box;
    transform-origin: center;
    animation: SVGpopin 2s forwards;
    animation-delay: var(--aniTimer);
    animation-timing-function: var(--spring-easing);
  }
}

.grow__ani {
  .stem {
    transform-box: fill-box;
    transform-origin: center;
    animation: SVGpopin var(--aniTimer) forwards;
    animation-timing-function: var(--spring-easing);
    animation-delay: calc(var(--aniTimer) / 2);
  }

  .dirt {
    transform-box: fill-box;
    transform-origin: center;
    animation: SVGdown var(--aniTimer) forwards;
    animation-timing-function: var(--spring-easing);
  }
  .leaf {
    --delay: 200ms;

    transform-box: fill-box;
    transform-origin: center;
    animation: SVGscale var(--aniTimer) forwards;

    animation-timing-function: var(--spring-easing);
  }
  .leaf-bl {
    animation-delay: calc(
      var(--aniTimer) + calc(var(--delay) * 0) + calc(var(--aniTimer) / 2)
    );
  }
  .leaf-br {
    animation-delay: calc(
      var(--aniTimer) + calc(var(--delay) * 1) + calc(var(--aniTimer) / 2)
    );
  }
  .leaf-tl {
    animation-delay: calc(
      var(--aniTimer) + calc(var(--delay) * 2) + calc(var(--aniTimer) / 2)
    );
  }
  .leaf-tr {
    animation-delay: calc(
      var(--aniTimer) + calc(var(--delay) * 3) + calc(var(--aniTimer) / 2)
    );
  }
}

.flourish__ani {
  .tiny-leaf {
    transform-box: fill-box;
    transform-origin: center;
    animation: SVGscale var(--aniTimer) forwards;
    animation-delay: calc(var(--aniTimer) * 2);
    animation-timing-function: var(--spring-easing);
  }
  .big-leaf__inside {
    transform-box: fill-box;
    transform-origin: center;
    animation: SVGopacity var(--aniTimer) forwards;

    animation-timing-function: var(--spring-easing);
    animation-delay: var(--aniTimer);
  }

  .big-leaf__outside {
    transform-box: fill-box;
    transform-origin: center;
    animation: SVGdraw var(--aniTimer) forwards;

    animation-timing-function: var(--spring-easing);
  }
}

@keyframes SVGdrop {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
  }

  30% {
    transform: translateY(-10%) scale(0.8) rotate(0deg);
  }

  60% {
    transform: translateY(-10%) scale(0.8) rotate(360deg);
  }

  100% {
    transform: translateY(200%) scale(0.8) rotate(360deg);
  }
}

@keyframes SVGpopin {
  0% {
    transform: translateY(200%) scale(0.8);
  }

  100% {
    transform: translateY(var(--y, 0)) scale(1);
  }
}
@keyframes SVGdown {
  0% {
    transform: translateY(0%) scale(1);
  }

  100% {
    transform: translateY(75%) scale(1);
  }
}

@keyframes SVGscale {
  0% {
    transform: scale(0) translateY(var(--y));
  }

  100% {
    transform: scale(1) translateY(var(--y));
  }
}
@keyframes SVGopacity {
  100% {
    opacity: 1;
  }
}

@keyframes SVGdraw {
  100% {
    stroke-dashoffset: 0;
  }
}

.grow {
  height: 120px;
}
.flourish {
  max-width: 150px;
}
.perche__subheader {
  font-size: var(--size-800);
  font-family: var(--ff-primary);
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  text-align: center;

  + p {
    text-align: center;
    font-family: var(--ff-secondary);
    font-size: var(--size-500);
  }
}




@media (width < 1000px) {
  .perche {
    padding-block-start: 10rem;
  }
}

/* Portfolio */

.portfolio {
  background: var(--treetop-bottom);
  padding-block: 10rem;
}

.portfolio__container {
  position: relative;
  height: 60vh;
}

.portfolio__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;

  blockquote {
    margin-block-start: var(--size-400);
    margin-block-end: var(--size-100);
    margin-inline-start: var(--size-200);
    padding-inline-start: var(--size-200);
    border-left: 2px solid var(--text-color);
  }
}

.portfolio__slide-text {
  position: relative;
  z-index: 2;
  max-width: 60%;
  p {
    max-width: 30ch;
  }
}

.portfolio__slide-logo {
  position: absolute;
  width: 400px;
  left: 25%;
  top: 5%;
  pointer-events: none;
  
  z-index: 1;
  > img {
    opacity: 0;
    width: 100%;
  }
}
.portfolio__slide-images {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  max-width: 50%;

  overflow-x: clip;
  &:hover {
    > img {
      animation-play-state: paused;
    }
    > img:not(:hover) {
      max-width: 0%;
      border: none;
    }
  }
  > img {
    max-width: 25%;
    border: 2px solid var(--text-color);
    object-fit: cover;
    opacity: var(--opacity, 1);
    filter: grayscale(1);
    transition: filter 300ms ease-in-out, max-width 300ms ease-in-out,
      border 300ms ease-in-out, opacity 300ms ease-in-out;
    animation: oscillate 1500ms alternate infinite ease-in-out both;
    animation-delay: var(--delay);
    &:hover {
      filter: grayscale(0);
      max-width: 100%;
      opacity: 1;
    }
  }
}

@keyframes oscillate {
  0% {
    transform: translate(var(--x, 0), var(--billow)) scale(var(--s, 1));
  }

  100% {
    transform: translate(var(--x, 0), calc(var(--billow) * -5))
      scale(var(--s, 1));
  }
}

.cit {
  font-size: var(--size-100);
}
.slide__text {
  margin-block: var(--size-400);
  font-size: var(--size-300);
}

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.5em;
  margin-top: 1em;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-neutral-300);
  border: none;
  cursor: pointer;

}

.dot.active {
  background-color: var(--highlight-color);
}

.carousel__buttons {
  display: flex;
  justify-content: center;
  gap: 10rem;
  > svg {
    cursor: pointer;
    stroke: var(--text-color);
    max-width: 3rem;
  }
}

.carousel__buttons-container-mobile {
  display: none;
}

.slide-enter {
  transition: opacity 600ms ease-in-out, transform 600ms ease-in-out;
}
.slide-enter-start {
  opacity: 0;
  transform: translateX(50px);
}
.slide-enter-end {
  opacity: 1;
  transform: translateX(0);
}

/* Leaving */
.slide-leave {
  transition: opacity 600ms ease-in-out, transform 600ms ease-in-out;
}
.slide-leave-start {
  opacity: 1;
  transform: translateX(0);
}
.slide-leave-end {
  opacity: 0;
  transform: translateX(-50px);
}

.logo-animate {
  animation: logoFadeIn 6000ms ease forwards;
}

@keyframes logoFadeIn {
  0% {
    transform: translateX(400px);
    opacity: 0;
  }

  10% {
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 0.2;
  }
}

@media (width < 800px) {
  .carousel__buttons-container {
    margin-block-start: var(--size-900);
  }
}

@media (width < 600px) and (width > 490px) {
  .portfolio__slide-logo {
    width: 300px;
  }
}

@media (width < 600px) {
  .carousel__buttons-container {
    margin-block-start: calc(var(--size-900) + 4rem);
  }
}

@media (width < 500px) {
  .portfolio__container {
    --bottom-margin: 250px;
    margin-block-end: var(--bottom-margin);
    overflow-x: clip;
  }
  .portfolio__slide {
    display: flow;
  }

  .portfolio__slide-text {
    max-width: 100%;
    p {
      max-width: 100%;
    }
  }

  .portfolio__slide-images {
    max-width: 100%;
    height: var(--bottom-margin);
  }

  .carousel__buttons-container {
    margin-block-start: var(--size-900);
  }
}

/* About Me */

.aboutme {
  position: relative;

  background-size: 40% 100%;
  background-repeat: no-repeat;
  background-position: left;
  background: var(--treetop-bottom);
}

.aboutme__flex + .aboutme__svg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30%;
  max-width: 500px;
}

.section__header + .aboutme__svg {
  display: none !important;
}

.aboutme__flex {
  display: flex !important;
  flex-wrap: wrap;
  max-width: 70%;
  justify-self: end;

  > div {
    display: grid;
    place-items: center;
    flex: 1 1 25%;
    min-width: 250px;
    > img {
      max-width: 170px;
      max-height: 100px;
    }
  }
}

.aboutme__text {
  min-width: 90% !important;

  border-bottom: 5px solid var(--text-color);

  > p {
    font-size: var(--size-400);
  }
}

.card {
  padding: 1em;
  margin: 1em;


  > p {
    font-size: var(--size-400);
    margin-block: var(--size-100);
  }
}

.card:nth-of-type(2),
.card:nth-of-type(3) {
  border-right: 5px solid var(--text-color);
}

@media (width < 1200px) {
  .aboutme__flex {
    max-width: 100%;
  }

  .aboutme__flex + .aboutme__svg {
    display: none !important;
  }

  .section__header + .aboutme__svg {
    display: flow !important;
    max-width: 125px;
    margin-inline: auto;
  }
}

@media (width < 900px) {
  .card:nth-of-type(3) {
    border-right: none;
  }
  .card:nth-of-type(4) {
    border-top: 5px solid var(--text-color);
  }
}

@media (width < 610px) {
  .card:nth-of-type(2) {
    border-right: none;
  }
  .card:not(.card:nth-of-type(4)) {
    border-bottom: 5px solid var(--text-color);
  }
  .card:nth-of-type(4) {
    border-top: none;
  }
}

/* Prezzi */

.prezzi {
  background: var(--treetop-bottom);
  overflow-x: clip;
}

.prezzi__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 125vh;
}

.prezzi__text {
  max-width: 40%;
  margin-inline-end: var(--size-600);

  > p {
    margin-block: var(--size-400);
    font-size: var(--size-400);
  }
}

.prezzi__items {
  --border-radius: 20px;
  --button-font-size: var(--size-300);
  --button-width: 100px;
  --button-height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 60%;

  perspective: 1000px;
}

.prezzi__item {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--size-200);
  border: 2px solid var(--text-color);
  border-radius: 10px;

  transition: all;
  transition-timing-function: var(--prezzi-easing);
  transition-duration: var(--prezzi-duration);
    transform-style: preserve-3d;
  left: 0;
  width: 600px;
   animation-delay: var(--delay);

  > p {
    max-width: 40ch;
    margin-block: var(--size-200);
    font-size: var(--size-400);
  }
  > ul + p:not(p:last-of-type) {
    font-family: var(--ff-primary);
    font-size: var(--size-400);
  }
 

  li {
    font-family: var(--ff-secondary);
    margin-block: var(--size-100);
  }

  > img {
    max-width: 50px;
  }

  > button {
    filter: grayscale(100%);
    transition: filter 900ms ease-out;
    &:hover {
      filter: grayscale(0%);
    }
  }
}

.prezzi__tab {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30%;
  padding: var(--size-200);
  font-family: var(--ff-primary);
  font-size: var(--size-500);

  > h4 {
    font-size: var(--size-500);
  }

  > svg {
    stroke: var(--text-color);
    cursor: pointer;
  }
}

.list-price {
  font-size: larger;
  text-align: center;
  margin-block: var(--size-300);

  > span {
    font-weight: bold;
  }
}

.drop-enter {
  height: 0;
  margin-block: 0;
  overflow: hidden;
  transition: height 900ms ease, margin 900ms ease;
}

.drop-enter-start {
  height: 0;
  margin-block: 0;
}

.drop-enter-end {
  height: auto;
  margin-block: 0rem;
}

.drop-leave {
  height: auto;
  overflow: hidden;
  margin-block: 1rem;
  transition: height 900ms ease, margin 900ms ease;
}

.drop-leave-start {
  height: auto;
  margin-block: 1rem;
}

.drop-leave-end {
  height: 0;
  margin: 0;
  margin-block: 0;
}

.prezzi__buttons {
  width: 100%;
  margin: auto;

  display: flex;
  justify-content: space-evenly;

  fill: var(--text-color);
  stroke: var(--text-color);
  > svg {
    cursor: pointer;
    stroke: var(--text-color);
    max-width: 3rem;
  }
}

@media (width > 1600px) {
  .prezzi__container {
    min-height: 130vh;
  }
}

@media (width < 1050px) {
  .prezzi__container {
    display: flow;
  }

  .prezzi__text {
    max-width: 100%;
    margin-inline-end: 0;
  }

  .prezzi__items {
    display: flow;
 
  }
  .prezzi__items {
    height: 1000px;
  }

  .prezzi__buttons {
    margin-block: var(--size-500);
  }
}

@media (width < 650px) {
  .prezzi__items {
    width: 100%;
  }
  .prezzi__item {
    width: auto;
  }
}

.rotatePrezzi {
  transform: rotate(180deg);
}

/* Contatti e FAQ */

.faq__svg-bg {
  top: 0;
  bottom: auto;
  rotate: 180deg;

  z-index: 2;

  .treetop__top {
    filter: drop-shadow(-5px -5px 50px var(--treetop-top));
  }

  .treetop__middle {
    filter: drop-shadow(-5px -5px 5px var(--treetop-middle));
  }

  .treetop__bottom {
    filter: drop-shadow(-5px -5px 50px var(--treetop-bottom));
  }
}

.treetop__bottom.bottom {
  transform: translateY(2px);
}

.bgtest {


  --boop2: oklch(36.909% 0.03156 72.365);
  position: absolute;
  top: 0;

  stroke: var(--text-color);
  fill: none;
  filter: drop-shadow(10px 5px 10px var(--color-neutral-900));

  .tree {
    fill: var(--trunk);
    stroke-width: 5px;
  }

  .outer1 {
    fill: oklch(from var(--trunk) calc(l + 0.05) c h);
  }
  .outer2 {
    fill: oklch(from var(--trunk) calc(l + 0.1) c h);
  }
  .outer3 {
    fill: oklch(from var(--trunk) calc(l + 0.15) c h);
  }
  .outer4 {
    fill: oklch(from var(--trunk) calc(l + 0.2) c h);
  }
  .outer5 {
    fill: oklch(from var(--trunk) calc(l + 0.25) c h);
  }

  .circle {
    stroke: none;
    fill: var(--trunk);
  }
}
@media (width < 1800px) {
  .bgtest {
    scale: 1;
  }
}
@media (width > 1800px) {
  .bgtest {
    scale: 1.2;
  }
}
.contatti__container {
  --border-radius: 10px;
  --button-font-size: var(--size-300);
  --button-width: 150px;
  --button-height: 50px;
  display: flex;
  position: relative;
  z-index: 3;
  align-items: center;
  justify-content: space-between;
  min-height: 100vh;

  > button {
    max-width: 25%;
  }
  > div {
    max-width: 60%;
  }
}

.contatti__details {
  display: flex;
  flex-direction: column;
  > p {
    font-size: var(--size-300);
  }
  > div {
    display: flex;
    align-items: center;

    margin-block: var(--size-200);

    > svg {
      margin-inline-end: var(--size-600);
      max-width: 40px;
      max-height: 36px;
    }
    > a {
      text-decoration: none;
      font-size: var(--size-300);
    }
  }

  button {
    align-self: center;
    margin-block: var(--size-200);
  }
}

.contatti__details-row {
  a {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 0px;
    transition: text-decoration-color 250s, text-decoration-thickness 250ms,
      color 250ms;
  }
  &:hover {
    > a {
      color: var(--highlight-color);
      text-decoration-color: currentColor;
      text-decoration-thickness: 2px;
    }
    > svg {
      fill: var(--highlight-color);
    }

    .mail__outside {
      fill: var(--highlight-color);
      stroke: var(--highlight-color);
    }
    .mail__inside {
      stroke: var(--highlight-color);
    }
  }
}


.phone {
  transform-origin: center;

  --rotate: -20deg;
}

.mail__svg {
  transform-origin: right;
  --scale: 0.6;
  --x: 5px;


  .mail__outside {
    fill: var(--text-color);
  }

  .mail__inside {
    fill: var(--color-neutral-900);
  }
}

.telefono__svg,
.point__svg {
  fill: var(--text-color);
}
.mail__svg {
  fill: none;
  stroke: var(--text-color);
  stroke-width: 5px;
}

.faq {
  background-color: var(--hero-color-original);
  overflow-y: clip;

  background-repeat: no-repeat;
  background-position: right;

  background-size: contain;

  position: relative;
 
}

:root[data-theme="dark"] .faq {
  background-image: url("../alberolight.svg");
}

:root[data-theme="light"] .faq {
  background-image: url("../alberodark.svg");
}

.bgtest {
  display: none !important;
}



@media (width < 808px) {
  .contatti__container {
    > div {
      max-width: 100%;
    }
  }
}

/* Footer */
.footer {
  position: relative;
  width: 100%;
  height: 10vh;
  z-index: 5;
  background-color: var(--treetop-bottom);

  > * {
    font-family: var(--ff-secondary);
  }

  > svg {
    width: 100%;
    height: 100%;
  }
}

.footer__svg {
  z-index: 1;
  top: -10em;
  > svg {
    filter: drop-shadow(0px -2px 0 var(--text-color));
    min-width: 1600px;

    path {
      fill: var(--treetop-bottom);
    }
  }
}

.footer__content {
  display: flex !important;
  position: relative;
  justify-content: space-around;
  align-items: center;
  z-index: 2;

  > * {
    text-align: center;
    width: 350px;
  }
}

@media (width > 2200px) {
  .footer__svg {
    top: -12em;
  }
}

@media (width < 800px) {
  .footer {
    height: 20vh;
  }

  .footer__svg {
    top: -12em;
  }

  .footer__content {
    flex-direction: column;

    > * {
      width: fit-content;
    }
  }
}

/* Modals */

dialog {
  opacity: 0;
  scale: 0.5;
}

dialog[open] {
  display: flex;

  width: 800px;
  height: 600px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  overflow-y: visible;
  overflow-x: visible;

  box-shadow: 15px 15px 0px 0px var(--color-primary-800),
    18px 18px 0px 0px var(--text-color), 18px 12px 0px 0px var(--text-color),
    12px 18px 0 0 var(--text-color);
}

.slide-in {
  animation-name: slide-in;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes slide-in {
  0% {
 
  }

  100% {
    opacity: 1;
    scale: 1;
  }
}

dialog {
  background: var(--treetop-bottom);
  border: 3px solid var(--text-color);
}

.contact__modal {

  display: flex;
  overflow-y: scroll;

 

  p {
    color: var(--text-color);
    font-family: var(--ff-secondary);
    text-align: center;
    margin-block: 0.5em;
  }

  > form {
    --border-radius: 10px;
    --button-font-size: var(--size-300);
    --button-width: 100px;
    --button-height: 50px;
  
    flex-direction: column;
    max-width: 50%;
    padding: 2em;
    font-family: var(--ff-secondary);

    input,
    textarea {
      border: none;
      margin-block: 1.5em;
     
      color: (var(--color-neutral-900));
      padding-block: 0.5em;
      padding-inline-start: 0.25em;
      border-radius: 10px;
      resize: none;
      transition: all 1s;
     

      &:hover {
        box-shadow: inset 0px 0px 10px 2px var(--highlight-color);
        scale: 1.05;
      }
    }
    button {
      margin-inline: auto;
      margin-block: 1.5em;
      transition: opacity 250ms, filter 250ms;
    }

    button[disabled] {
      opacity: 0.4;
      filter: grayscale(0.8);
      pointer-events: none;
    }

    > .form__row {
      display: flex;

      > input {
        max-width: 40%;
      }
      > input:last-of-type {
        margin-inline-start: auto;
      }
    }

    label {
      color: var(--text-color);
    }
  }

  .wrapper {
    width: 100%;
    display: grid;
  }

  #message,
  #email {
    width: 100%;
  }


}


.invis {
  display: none;
}
.boxes {
  width: 70%;

  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 2%;
  label {
    width: 100%;
    height: 100%;
  }

  input[type="radio"] {
    display: none;
    &:checked + .box {
      color: var(--text-color);
      filter: grayscale(0);
    }
    &:not(:checked) + .box {
      color: var(--color-neutral-900);
      filter: grayscale(100%);
      scale: 0.9;
      opacity: 0.6;
    }
  }
}

.box {
  background-color: var(--highlight-color);
  width: 100%;
  aspect-ratio: 2/1;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: all 250ms ease-in-out;

  span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    font-family: var(--ff-primary);
    font-size: var(--size-400);
  }
}

.modal__close-svg {
  position: absolute;
  width: 50px;
  top: -40px;
  right: -50px;

  svg {
    width: 100%;
    stroke: var(--text-color);
    fill: transparent;
    opacity: 0.7;
    cursor: pointer;

    transition: transform, stroke, opacity;
    transition-timing-function: var(--boop-easing, ease), ease-in-out,
      ease-in-out;
    transition-duration: var(--boop-duration, 1s), 250ms, 250ms;

    .cross {
      --rotate: 0deg;
      --scale: 0.9;
      transform-origin: center;
      stroke-linecap: round;
      stroke-width: 5px;
    }

    .circle {
      stroke-width: 6px;
    }
    &:hover {
      opacity: 1;
      stroke: var(--highlight-color);
    }
  }
}

.hover__color {
  opacity: 0.7;
  transition: transform, stroke, opacity;
  transition-timing-function: var(--boop-easing, ease), ease-in-out, ease-in-out;
  transition-duration: var(--boop-duration, 1s), 250ms, 250ms;

  &:hover {
    opacity: 1;
    stroke: var(--highlight-color);
  }
}

.close {
  --rotate: 25deg;
  --scale: 1.1;
}

*::placeholder {
  padding-inline-start: 0.25em;
}
.modal__text {
  position: relative;
  padding: 1rem;
  color: var(--text-color);

  > p {
    position: relative;
    margin-block: var(--size-200);
    font-size: var(--size-300);
    z-index: 2;
  }
}

.error__list {
  > li {
    font-size: var(--size-400);
    margin-block: 0.5em;
  }
}

.modal__img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;

  width: 50%;
  height: 50%;
}

.modal__portrait-svg {
  position: fixed;
  width: 200px;
  bottom: 0;
  left: 50%;
  transform: translateX(50%);
}

.contact__modal-response {
  --border-radius: 20px;
  --button-font-size: var(--size-300);
  --button-width: 200px;
  --button-height: 50px;

  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--text-color);

  > div {
    width: 50%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15%;

    > p {
      font-size: var(--size-400);
    }
  }
}

@media (width < 900px) {
  dialog[open] {
    width: 100%;
    height: 100%;
    overflow-x: scroll;
    overflow-y: scroll;
  }

  .modal__portrait-svg {
    display: none;
    position: absolute;
    bottom: 0;
    z-index: 2;
  }
  .modal__close-svg {
    top: 5px;
    right: 5px;
  }

  .contact__modal {
    position: relative;
    z-index: 3;
    flex-direction: column-reverse;

    > form {
      max-width: 100%;
     

      textarea {
        min-height: 3rem;
      }
    }
  }
}

.pushable {
  font-family: var(--ff-primary);
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline-offset: 4px;
  transition: filter 250ms;
}
.shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--button-width);
  height: var(--button-height);
  border-radius: var(--border-radius);
  background: hsl(0deg 0% 0% / 0.25);
  will-change: transform;
  transform: translateY(2px);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

.edge {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--button-width);
  height: var(--button-height);
  border-radius: var(--border-radius);
  background: linear-gradient(
    to left,
    var(--button-color) 0%,
    var(--button-shadow-color) 8%,
    var(--button-color) 92%,
    var(--button-shadow-color) 100%
  );
}

.front {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--button-width);
  height: var(--button-height);
  position: relative;
 
  border-radius: var(--border-radius);
  font-size: var(--button-font-size);
  color: var(--text-color);
  background: var(--button-color);
  will-change: transform;
  transform: translateY(-4px);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

.pushable:hover {
  filter: brightness(110%);
}
.pushable:hover .front {
  transform: translateY(-6px);
  transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}
.pushable:active .front {
  transform: translateY(-2px);
  transition: transform 34ms;
}
.pushable:hover .shadow {
  transform: translateY(4px);
  transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}
.pushable:active .shadow {
  transform: translateY(1px);
  transition: transform 34ms;
}
.pushable:focus:not(:focus-visible) {
  outline: none;
}
.pushable:hover {
  filter: brightness(110%);
}




.sparkle-wrapper {
  position: relative;
  display: inline-block;
}

.sparkle-text {
  position: relative;
  z-index: 1;
  font-weight: bold;
}

.sparkle-svg {
  position: absolute;
  pointer-events: none;
  animation: sparkleTwinkle 800ms ease-out forwards;
  z-index: 0;
}

@keyframes sparkleTwinkle {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(90deg);
    opacity: 1;
  }
  100% {
    transform: scale(0) rotate(180deg);
    opacity: 0;
  }
}