/* ==================================================
   RESET
================================================== */

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

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

button {
  border: none;
  background: transparent;
  cursor: pointer;
}

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

ul {
  list-style: none;
}

/* ==================================================
   TOKENS
================================================== */

:root {

  --bg: #f4ece6;
  --bg-soft: #ece2da;

  --terracotta: #c97141;

  --brown: #4b1f10;

  --white: #faf7f4;

  --container: 1280px;

  --radius-xl: 40px;

  --shadow-soft:
    0 20px 60px rgba(0,0,0,.08);

  --shadow-product:
    0 40px 100px rgba(0,0,0,.12);

}

/* ==================================================
   BASE
================================================== */

html {
  scroll-behavior: smooth;
}

body {

  min-height: 100vh;

  background: var(--bg);

  color: var(--brown);

  font-family: "Cormorant Garamond", serif;

  overflow-x: hidden;

}

/* ==================================================
   NOISE
================================================== */

.noise {

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 1;

  opacity: .025;

  background-image:
    radial-gradient(
      rgba(0,0,0,.25) .5px,
      transparent .5px
    );

  background-size: 24px 24px;

}

/* ==================================================
   CONTAINER
================================================== */

.container {

  width: min(var(--container), 92%);

  margin: 0 auto;

  position: relative;

  z-index: 5;

}

/* ==================================================
   HEADER
================================================== */

.header {

  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  z-index: 200;

  transition: .4s;

}

.header-scrolled {

  backdrop-filter: blur(16px);

  background:
    rgba(244,236,230,.88);

  border-bottom:
    1px solid rgba(0,0,0,.05);

}

.nav {

  height: 92px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.brand {

  font-family: "Montserrat", sans-serif;

  font-weight: 600;

  font-size: 20px;

  letter-spacing: 6px;

}

.nav nav {

  display: flex;

  gap: 42px;

}

.nav a {

  font-family: "Montserrat", sans-serif;

  font-size: 13px;

  letter-spacing: 1px;

  transition: .3s;

}

.nav a:hover {

  color: var(--terracotta);

}

/* ==================================================
   HERO
================================================== */

.hero {

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  padding-top: 120px;

}

.hero-content {

  text-align: center;

}

.hero-symbol {

  width: 90px;

  margin: 0 auto 40px;

}

.hero h1 {

  font-weight: 400;

  line-height: 1.05;

  font-size: clamp(
    3.5rem,
    7vw,
    5.8rem
  );

  margin-bottom: 24px;

}

.hero p {

  max-width: 650px;

  margin: 0 auto;

  font-size: 1.8rem;

  line-height: 1.4;

  opacity: .8;

}

/* ==================================================
   ORBIT SYSTEM
================================================== */

.orbit-system {

  width: 1000px;

  height: 680px;

  margin: 80px auto 0;

  position: relative;

}

.orbit-item {

  position: absolute;

  font-family: "Montserrat", sans-serif;

  font-size: 14px;

  letter-spacing: .5px;

  color: var(--terracotta);

  opacity: .65;

  transition: .4s;

}

.orbit-item:hover {

  opacity: 1;

  transform: scale(1.08);

}

.item-1 {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.item-2 {
  left: 100px;
  top: 180px;
}

.item-3 {
  right: 100px;
  top: 180px;
}

.item-4 {
  left: 170px;
  bottom: 120px;
}

.item-5 {
  right: 170px;
  bottom: 120px;
}

/* ==================================================
   PRODUTO CENTRAL
================================================== */

.central-product {

  position: absolute;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%, -50%);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 10px;

  cursor: pointer;

}

.central-product img {

  width: 310px;

  filter:
    drop-shadow(
      0 50px 90px rgba(0,0,0,.15)
    );

}

#candleOpened {

  position: absolute;

  inset: 0;

  opacity: 0;

}

.central-product h3 {

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 24px;

  font-weight: 500;

  color: var(--terracotta);

}

.central-product span {

  font-family:
    "Montserrat",
    sans-serif;

  text-transform: uppercase;

  letter-spacing: 1px;

  font-size: 12px;

  opacity: .75;

}

/* ==================================================
   SCROLL INDICATOR
================================================== */

.scroll-indicator {

  margin-top: 50px;

}

.scroll-indicator span {

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 11px;

  letter-spacing: 3px;

  text-transform: uppercase;

  color: var(--terracotta);

}

/* ==================================================
   EXPERIENCE
================================================== */

.experience {

  position: fixed;

  inset: 0;

  z-index: 9000;

  background: var(--bg);

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

}

.hidden {

  display: none;

}

.experience-container {

  width: min(1400px, 92%);

  display: grid;

  grid-template-columns:
    1fr 1fr;

  align-items: center;

  gap: 100px;

  position: relative;

  z-index: 5;

}

/* ==================================================
   EXPERIENCE ASSETS
================================================== */

.experience-elements {

  position: absolute;

  inset: 0;

  z-index: 1;

}

/* asset base */

.experience-elements img {

  position: absolute;

  user-select: none;

  pointer-events: none;

}

/* folha frontal */

.layer-front {

  width: 260px;

  left: 5%;

  top: 12%;

  opacity: .22;

}

/* flores */

.layer-flower {

  width: 340px;

  left: 18%;

  top: 15%;

  opacity: .18;

}

/* ramo principal */

.layer-branch {

  width: 450px;

  left: 0;

  top: 10%;

  opacity: .20;

}

/* grãos agrupados */

.layer-beans {

  width: 220px;

  right: 15%;

  bottom: 18%;

  opacity: .22;

}

/* grãos flutuando */

.layer-floating {

  width: 260px;

  right: 5%;

  top: 15%;

  opacity: .20;

}

/* grão individual */

.layer-single {

  width: 120px;

  right: 18%;

  top: 45%;

  opacity: .22;

}

/* folha lateral */

.layer-side {

  width: 260px;

  left: 30%;

  bottom: 10%;

  opacity: .15;

}

/* ==================================================
   EXPERIENCE LEFT
================================================== */

.experience-left {

  position: relative;

  z-index: 5;

}

.experience-left img {

  width: 560px;

  margin: 0 auto;

  filter:
    drop-shadow(
      0 40px 90px rgba(0,0,0,.12)
    );

}

/* ==================================================
   EXPERIENCE RIGHT
================================================== */

.experience-right {

  position: relative;

  z-index: 5;

}

.experience-right span {

  font-family:
    "Montserrat",
    sans-serif;

  text-transform: uppercase;

  letter-spacing: 2px;

  color: var(--terracotta);

  font-size: 13px;

}

.experience-right h2 {

  font-size: 72px;

  font-weight: 400;

  margin-top: 12px;

  margin-bottom: 30px;

}

.experience-right p {

  font-size: 30px;

  line-height: 1.6;

  max-width: 540px;

  margin-bottom: 36px;

}

.experience-right ul {

  display: flex;

  flex-direction: column;

  gap: 14px;

}

.experience-right li {

  font-size: 26px;

}

/* ==================================================
   STORY
================================================== */

.story {

  padding: 220px 0;

}

.story-grid {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 120px;

  align-items: center;

}

.story-image {

  min-height: 700px;

  border-radius:
    var(--radius-xl);

  background:
    linear-gradient(
      135deg,
      #efe4db,
      #e0d3ca
    );

}

.story-content span {

  font-family:
    "Montserrat",
    sans-serif;

  color: var(--terracotta);

  text-transform: uppercase;

  letter-spacing: 2px;

}

.story-content h2 {

  font-size: 72px;

  font-weight: 400;

  margin: 20px 0 30px;

}

.story-content p {

  font-size: 30px;

  line-height: 1.7;

}

/* ==================================================
   PERSONALIZADOS
================================================== */

.personalizados {

  padding: 180px 0;

  text-align: center;

}

.personalizados span {

  font-family:
    "Montserrat",
    sans-serif;

  text-transform: uppercase;

  color: var(--terracotta);

}

.personalizados h2 {

  max-width: 900px;

  margin: 24px auto;

  font-size: 68px;

  font-weight: 400;

}

.btn {

  display: inline-flex;

  justify-content: center;

  align-items: center;

  padding: 20px 40px;

  border-radius: 999px;

  background: var(--terracotta);

  color: #fff;

  font-family:
    "Montserrat",
    sans-serif;

  transition: .4s;

}

.btn:hover {

  transform:
    translateY(-4px);

}

/* ==================================================
   INSTAGRAM
================================================== */

.instagram {

  padding: 180px 0;

}

.instagram span {

  display: block;

  text-align: center;

  margin-bottom: 50px;

  font-family:
    "Montserrat",
    sans-serif;

  color: var(--terracotta);

}

.instagram-grid {

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 24px;

}

.instagram-grid div {

  aspect-ratio: 1;

  border-radius: 30px;

  background:
    linear-gradient(
      135deg,
      #eadfd7,
      #ddd0c6
    );

}

/* ==================================================
   FOOTER
================================================== */

footer {

  padding:
    140px
    0
    100px;

  text-align: center;

}

footer h2 {

  font-size: 72px;

  font-weight: 400;

}

footer p {

  font-size: 30px;

  opacity: .8;

}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 1200px) {

  .experience-container,
  .story-grid {

    grid-template-columns: 1fr;

  }

}

@media (max-width: 768px) {

  .nav nav {
    display: none;
  }

  .orbit-system {

    width: 100%;

    height: auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 20px;

  }

  .orbit-item {

    position: static;

    transform: none !important;

  }

  .central-product {

    position: relative;

    left: auto;
    top: auto;

    transform: none;

  }

  .experience-right h2,
  .story-content h2,
  .personalizados h2 {

    font-size: 48px;

  }

  .experience-right p,
  .story-content p {

    font-size: 22px;

  }

  .instagram-grid {

    grid-template-columns:
      repeat(2,1fr);

  }

}

/* ==================================================
   TOUCH SUPPORT
================================================== */

button,
a,
.central-product,
.orbit-item {

  -webkit-tap-highlight-color: transparent;

  touch-action: manipulation;

}

/* Área mínima recomendada Apple */

.orbit-item {

  min-width: 120px;

  min-height: 44px;

  display: flex;

  align-items: center;

  justify-content: center;

}

/* Feedback tátil */

.orbit-item:active {

  transform: scale(.95);

}

.central-product:active {

  transform:
    translate(-50%, -50%)
    scale(.96);

}

/* Melhor scrolling horizontal no mobile */

@media (max-width: 768px) {

  .orbit-system {

    overflow-x: auto;

    overflow-y: visible;

    display: flex;

    flex-direction: row;

    align-items: center;

    gap: 24px;

    width: 100%;

    padding: 24px;

    scroll-snap-type: x mandatory;

  }

  .orbit-item {

    flex: 0 0 auto;

    scroll-snap-align: center;

  }

  .central-product {

    flex: 0 0 auto;

  }

  .orbit-system::-webkit-scrollbar {

    display: none;

  }

}