* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --white: rgb(255, 255, 255, 0.9);
  --gray-50: #fafafa;
  --gray-100: #f0f0f0;
  --gray-200: #e6e6e6;
  --gray-300: #d6d6d6;
  --gray-400: #a5a5a5;
  --gray-500: #767676;
  --gray-600: #575757;
  --gray-700: #434343;
  --gray-800: #292929;
  --gray-900: #1a1a1a;
  --gray-950: #0a0a0a;
  --black: rgba(0, 0, 0, 0.96);

  --size-h1-large: clamp(148px, 12vw, 256px); /* responsividade com 192px */
  --size-h1-medium: clamp(72px, 10vw, 128px); /* responsividade com 64px */
  --size-h1: clamp(42px, 6vw, 64px);
  --size-h2: clamp(26px, 5vw, 48px);
  --size-h3: 40px;
  --size-h3-small: clamp(24px, 3vw, 36px);
  --size-h4: clamp(20px, 2.5vw, 32px);
  --size-h4-small: clamp(22px, 1.5vw, 28px);
  --size-h5: clamp(20px, 1vw, 24px);
  --size-h5-small: clamp(18px, 2vw, 24px);
  --size-h6: clamp(16px, 1vw, 20px);
  --size-p: clamp(14px, 2vw + 1rem, 18px);
  --size-small: 12px;
}

@media (max-height: 600px) {
  :root {
    --size-h1-large: clamp(148px, 10vw, 240px);
    --size-h1-medium: clamp(50px, 8vw, 60px);
    --size-h1: clamp(30px, 4vw, 48px);
    --size-h3-small: clamp(18px, 2vw, 24px);
    --size-h4-small: clamp(16px, 1vw, 20px);
    --size-h5: clamp(14px, 0.75vw, 20px);
  }


}

html {
  background-color: var(--white);
}

h1 {
  font-family: "lust-script", "Inter", sans-serif;
}

h2, h3, h4 {
  font-family: "lust", "Inter", sans-serif;
}

p {
  font-size: clamp(14px, 2vw + 1rem, 16px);
  margin-top: 12px;
  margin-bottom: 12px;
  word-break: break-word;
  overflow-wrap: anywhere;
}

h1 {
  font-size: var(--size-h1);
  font-weight: 500;
  text-align: center;
  line-height: 0.38;
  display: inline-grid;
}

h2 {
  font-size: var(--size-h2);
  line-height: 80px;
}

h3 {
  font-size: var(--size-h3);
}

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

h5 {
  font-size: var(--size-h5);
}

h6 {
  font-size: var(--size-h6);
}

.invertido {
  transform: scaleX(-1);
}

/* Shallow "U" notch at the top of each section (except the first), revealing
   a sliver of the previous section for a soft page-transition feel. */
main > section:not(:first-child) {
  position: relative;
  margin-top: -24px;
  clip-path: polygon(
    0% 0px,
    10% 9px,
    20% 15px,
    30% 20px,
    40% 23px,
    50% 24px,
    60% 23px,
    70% 20px,
    80% 15px,
    90% 9px,
    100% 0px,
    100% 100%,
    0% 100%
  );
}

.hero {
  height: 100vh;
  height: 100lvh;
  display: flex;
  flex-direction: row;
  position: relative;
  text-align: center;

  .ramo-hero {
    position: absolute;
    left: -110px;
    top: -60px;
    height: 90vh;
    height: 90lvh;
    z-index: -1;
  }

  .ramo-noivos {
    position: absolute;
    right: 0;
    width: 36%;
    bottom: 0;
  }

  .hero-decriptions {
    display: flex;
    flex-direction: column;
    align-items: end;
    flex: 1;
    justify-content: center;
    margin-right: 28px;
    z-index: 10;

    .hero-content {
      .title {
        font-size: var(--size-h1-medium);

        .title-conector {
          color: var(--gray-300);
          z-index: -5;
          font-size: var(--size-h1-large);
        }
      }

      .day-hour {
        font-size: var(--size-h4-small);
        margin-top: 48px;
        margin-bottom: 24px;
      }

      .day-complete {
        display: inline-grid;
  
        .day {
          font-size: var(--size-h1-medium);
          line-height: 0.8;
        }

        .month {
          font-size: var(--size-h3-small);
        }
  
        .year {
          font-size: var(--size-h1);
        }
      }

      .country-house-name,
      .address,
      .city {
        font-size: var(--size-h5);
      }
    }
  }

  .actions {
    margin-top: 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 12px;

    .btn {
      background-color: var(--gray-950);
      padding: 12px 24px;
      font-size: var(--size-p);
      color: var(--gray-100);
      text-decoration: none;
    }
  }

  .foto-noivos {
    right: 0;
    width: 50%;
    height: 100vh;
    height: 100lvh;
    align-self: center;
    background: url(assets/images/foto-noivos-pg-1.jpeg) lightgray 65% 50% / cover no-repeat;
    mask: url(#heart-mask);
    -webkit-mask: url(#heart-mask);
  }

  @media (max-width: 1200px) {
    flex-direction: column;
    min-height: 100vh;
    min-height: 100lvh;
    align-items: center;

    .ramo-hero {
      height: min(65%, 100vw);
      left: clamp(-80px, -15%, -60px);
      top: -3%;
    }

    .hero-decriptions {
      margin-right: 0;

      .hero-content .title .title-conector {
        color: var(--gray-400);
      }
    }

    .ramo-noivos {
      display: none;
    }

    .foto-noivos {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 85vw;
      height: 85vh;
      height: 85lvh;
      flex: none;
      opacity: 0.25;
      z-index: 0;
    }
  }
}

.counter {
  background-color: var(--gray-100);
  padding-top: 40px;
  padding-bottom: 40px;
  position: relative;
  width: 100%;
  overflow-x: hidden;

  h3 {
    font-size: clamp(28px, 4vw, 64px);
  }

  .title-counter {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;

    img {
      width: 96px;
    }

    .title-counter-text {
      font-family: "Inter";
    }
  }

  .counter-marquee {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 40px;
    width: 100%;
    height: 200px;
    position: relative;
    transform: translateX(-50%);
    left: 50%;

    .ramo-counter {
      position: absolute;
      height: 200px;
    }
    
    .primeiro-ramo-counter {
      left: 0
    }

    .segundo-ramo-counter {
      right: 0;
    }

    .marquee-item {
      border: var(--gray-300) 2px solid;
      background-color: var(--gray-200);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 20px;
      width: 12vw;
      height: 12vw;
      max-width: 200px;
      max-height: 200px;
      min-width: 100px;
      min-height: 100px;
      box-shadow: 0px 1px 30px var(--gray-400);

      h4 {
        font-size: var(--size-h5-small);
      }
    }
  }

   @media screen and (max-width: 900px) {
    .counter-marquee {
      height: auto;
      display: grid;
      grid-template-columns: repeat(2, max-content);
      justify-content: center;
      justify-items: center;
      gap: 20px;

      .marquee-item:nth-child(2) {
        margin-left: -120%;
      }
      .marquee-item:nth-child(3) {
        margin-left: -120%;
      }

      .marquee-item:nth-child(6) {
        grid-column: 1 / -1;
        align-self: center;
      }

      .ramo-counter {
        width: 100px;
        bottom: 0;
      }
      .primeiro-ramo-counter {
        transform: rotate(-30deg);
      }
      
      .segundo-ramo-counter {
        transform: scaleX(-1) rotate(-30deg);
      }
    }
   }

  .counter-marquee > * {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.our-history {
  background-color: var(--white);
  padding-top: 64px;
  padding-bottom: 40px;
  text-align: center;

  .history-items {
    margin-top: 48px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 5%;

    .history-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 32px;
  
      .black-dot {
        width: 20px;
        height: 20px;
        border-radius: 100%;
        background-color: var(--black);
      }
  
      .history-item-texts {
        width: 15vw;
        
        min-width: 100px;
        min-height: 100px;
        max-width: 200px;
        max-height: 200px;
  
        .history-item-text-date {
          font-weight: 200;
        }
      }

      .history-item-circle {
        border-radius: 100%;
        box-shadow: 0px 5px 30px var(--gray-500);
        overflow: hidden;
        width: 15vw;
        height: 15vw;
        min-width: 100px;
        min-height: 100px;
        max-width: 250px;
        max-height: 250px;
        
        .history-item-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .img-1 {
          width: 140%;
          object-position: center 20%;
          transform: translateX(-5%);
        }
        
        .img-2 {
          width: 100%;
          object-position: center 15%;
        }

        .img-3 {
          width: 100%;
          object-position: center 0%;
        }

        .img-4 {
          width: 100%;
          object-position: center center;
        }
      }
  
    }
  }

  @media (max-width: 900px) {
    .history-items {
      flex-direction: column;
      gap: 50px;
      align-items: center;
      gap: 24px;

      .history-item {
        flex-direction: row;
        width: 100%;
        padding-left: 24px;
        padding-right: 24px;
        justify-content: center;

        .black-dot {
          align-self: flex-start;
          margin-top: 10%;
        }

        .history-item-texts {
          text-align: start;
          flex: 1;
        }

        .history-item-img {
          align-self: baseline;
        }
      }
    }
  }
}

.transition {
  position: relative;
}

.moments {
  background-color: var(--gray-100);
  padding-top: 64px;
  /* padding-bottom: 40px; */
  text-align: center;

  .photo-album {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 48px;

    .photo-frame {
      height: 20lvw;
      width: 20vw;
      min-width: 200px;
      min-height: 200px;
      object-fit: cover;
      overflow: hidden;
      display: flex;

      border: var(--gray-50) solid 2vw;
      box-shadow: 0px 20px 30px var(--gray-300);
      border-radius: 20px;

      .photo {
        border-radius: 20px;
        height: 100%;
        width: 100%;
        object-fit: cover;
      }

      .photo-2 {
        object-position: center 35%;
      }

      .photo-3 {
        object-position: center 35%;
      }

      .photo-4 {
        object-position: center 50%;
      }
    }

    @media (max-width: 1200px) {
      .photo-frame {
        width: 80vw;
        height: 40lvh;
      }
    }
  }

  .other-images {
    margin-top: 40px;
    position: relative;
    height: 100vh;
    height: 100lvh;
    overflow: hidden;

    > *:not(.night-of-magic) {
      position: absolute;
      inset: 0;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .image-frame {
      width: 80vw;
      height: 80lvh;
      border: var(--gray-50) solid 2vw;
      box-shadow: 0px 20px 30px var(--gray-300);
      border-radius: 20px;
      overflow: hidden;

      .image {
        border-radius: 20px;
        height: 100%;
        width: 100%;
        object-fit: cover;
      }

      .image-1 {
        object-position: center center;
      }

      .image-2 {
        object-position: center 0%;
      }

      .image-3 {
        object-position: center 25%;
      }

      .image-4 {
        object-position: center 10%;
      }

      .image-5 {
        object-position: 30% 10%;
      }

      .image-6 {
        object-position: 32% 10%;
      }
    }
    
    .image-frame-2 {
      height: 85lvh;
    }

    .image-frame-3 {
      height: 100lvh;
    }

    .dual-frames {
      display: flex;
      gap: 40px;
      flex-wrap: wrap;
      justify-content: center;

      .image-frame {
        width: 39vw;
      }

      @media (max-width: 1200px) {
        .image-frame {
          width: 80vw;
          height: 50lvh;
        }
      }
    }

  }
}

.night-of-magic {
  position: absolute;
  overflow: hidden;
  opacity: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: -5;
  padding-top: 0;
  padding-bottom: 40px;
  display: flex;
  justify-content: space-around;
  padding-right: 40px;
  padding-left: 40px;
  background-color: var(--gray-950);
  color: var(--white);

  &::before {
    content: "";
    position: absolute;
    inset: -15%;
    z-index: 0;
    pointer-events: none;
    background-image:
      radial-gradient(45% 35% at 15% 25%, rgba(255, 255, 255, 0.06), transparent 70%),
      radial-gradient(40% 32% at 75% 65%, rgba(255, 255, 255, 0.05), transparent 70%),
      radial-gradient(38% 40% at 40% 85%, rgba(255, 255, 255, 0.045), transparent 70%),
      radial-gradient(50% 34% at 88% 15%, rgba(255, 255, 255, 0.04), transparent 70%),
      radial-gradient(42% 30% at 55% 40%, rgba(255, 255, 255, 0.05), transparent 70%),
      radial-gradient(36% 38% at 8% 60%, rgba(255, 255, 255, 0.045), transparent 70%),
      radial-gradient(44% 33% at 65% 92%, rgba(255, 255, 255, 0.04), transparent 70%),
      radial-gradient(40% 36% at 96% 50%, rgba(255, 255, 255, 0.045), transparent 70%);
    filter: blur(35px);
    animation: night-of-magic-smoke 45s ease-in-out infinite alternate;
  }

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-repeat: no-repeat;
    background-image:
      radial-gradient(1.5px 1.5px at 8% 12%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 16% 32%, #fff 50%, transparent 51%),
      radial-gradient(1.2px 1.2px at 27% 18%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 35% 55%, #fff 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 44% 8%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 52% 40%, #fff 50%, transparent 51%),
      radial-gradient(1.3px 1.3px at 61% 22%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 68% 60%, #fff 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 76% 14%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 85% 45%, #fff 50%, transparent 51%),
      radial-gradient(1.2px 1.2px at 92% 25%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 12% 70%, #fff 50%, transparent 51%),
      radial-gradient(1.4px 1.4px at 22% 88%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 33% 75%, #fff 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 48% 92%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 58% 78%, #fff 50%, transparent 51%),
      radial-gradient(1.3px 1.3px at 70% 90%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 80% 72%, #fff 50%, transparent 51%),
      radial-gradient(1.4px 1.4px at 90% 85%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 96% 55%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 5% 50%, #fff 50%, transparent 51%),
      radial-gradient(1.3px 1.3px at 20% 5%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 30% 45%, #fff 50%, transparent 51%),
      radial-gradient(1.4px 1.4px at 40% 65%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 50% 25%, #fff 50%, transparent 51%),
      radial-gradient(1.2px 1.2px at 63% 48%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 72% 30%, #fff 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 82% 8%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 88% 62%, #fff 50%, transparent 51%),
      radial-gradient(1.3px 1.3px at 98% 15%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 5% 90%, #fff 50%, transparent 51%),
      radial-gradient(1.2px 1.2px at 15% 55%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 25% 95%, #fff 50%, transparent 51%),
      radial-gradient(1.4px 1.4px at 55% 78%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 63% 12%, #fff 50%, transparent 51%);
    animation: night-of-magic-twinkle 5s ease-in-out infinite alternate;
  }

  .texts {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 500px;
    z-index: 5;
    margin-top: 10%;

    .title-texts {
      display: inline-grid;

      .title-texts-start-text {
        font-family: "lust", "Inter", sans-serif;
        margin-bottom: 28px;
        font-size: var(--size-h2);
      }

      .title-texts-magic {
        font-family: "lust-script", "Inter", sans-serif;
        font-size: var(--size-h1-medium);
        font-style: italic;

        @media (max-height: 600px) {
          font-size: var(--size-h1-large);
        }
      }
    }

    .p-texts {
      margin-top: 64px;
      width: 60%;
    }

    .date-texts {
      margin-top: 24px;
    }
    
    .await-you-texts {
      margin-top: 24px;
    }
  }
  
  .night-of-magic-photo {
    position: relative;
    z-index: 2;
    height: 100vh;
    height: 100lvh;
    filter: grayscale(100%);
    -webkit-mask-image: radial-gradient(
      55% 50% at 50% 50%,
      white 15%,
      transparent 100%
    );
    mask-image: radial-gradient(
      55% 50% at 50% 50%,
      white 15%,
      transparent 100%
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  @media (max-width: 1200px) {
    flex-direction: column;
    align-items: center;
    position: relative;

    .texts {
      .title-texts {
        .title-texts-start-text {
          margin-bottom: 0;
        }
      }
    }

    .night-of-magic-photo {
      position: absolute;
      height: 85vh;
      height: 85lvh;
      flex: none;
      opacity: 0.25;
      z-index: 0;
    }
  }
}

@keyframes night-of-magic-smoke {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(4%, -3%) scale(1.08);
  }
  100% {
    transform: translate(-4%, 3%) scale(1);
  }
}

@keyframes night-of-magic-twinkle {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .night-of-magic::before,
  .night-of-magic::after {
    animation: none;
  }
}