/* ==========================================================
   PROJECT XAMUCO
   File: bottle.css
   Version: 1.0.0
   Description: Chapter III · La Botella
========================================================== */

/* ======================================================
   BOTTLE
====================================================== */

.bottle {
  position: relative;

  background: var(--color-background);

  color: var(--color-black);

  overflow: hidden;
}

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

.bottle__header {
  max-width: 48rem;

  margin: 0 auto;

  padding-top: var(--space-5xl);

  text-align: center;
}

/* ======================================================
   TITLE
====================================================== */

.bottle__title {
  margin-top: var(--space-sm);

  margin-bottom: 0;

  color: var(--color-primary);
}

/* ======================================================
   BOTTLE REVEAL
====================================================== */

.bottle__reveal {
  position: relative;

  width: 100%;

  margin-top: var(--space-5xl);

  margin-bottom: var(--space-5xl);
}

/* ======================================================
   BOTTLE STAGE
====================================================== */

.bottle__stage {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  min-height: 70vh;

  padding-inline: var(--space-lg);
}

/* ======================================================
   BOTTLE IMAGE
====================================================== */

.bottle__image {
  display: block;

  width: auto;

  height: min(72vh, 46rem);

  max-width: 70vw;

  object-fit: contain;

  filter: drop-shadow(0 1.5rem 2rem rgba(0, 0, 0, 0.08));

  user-select: none;

  -webkit-user-drag: none;
}

/* ======================================================
   STATEMENT
====================================================== */

.bottle__introduction {
  max-width: 52rem;

  margin: 0 auto;

  padding-block: var(--space-4xl);

  text-align: center;
}

/* ======================================================
   STATEMENT TEXT
====================================================== */

.bottle__statement {
  margin: 0;

  font-family: var(--font-heading);

  font-size: clamp(2rem, 4vw, 3.5rem);

  line-height: 1.15;

  color: var(--color-primary);
}

/* ======================================================
   STATEMENT EMPHASIS
====================================================== */

.bottle__statement span {
  display: block;

  margin-top: var(--space-md);
}

/* ======================================================
   CHAPTER BLOCK
====================================================== */

.bottle__chapter {
  display: grid;

  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

  gap: var(--space-5xl);

  align-items: center;

  max-width: 1200px;

  margin-inline: auto;

  padding-block: var(--space-5xl);
}

/* ======================================================
   REVERSE LAYOUT
====================================================== */

.bottle__chapter--reverse {
  direction: rtl;
}

.bottle__chapter--reverse > * {
  direction: ltr;
}

/* ======================================================
   CHAPTER CONTENT
====================================================== */

.bottle__chapter-content {
  max-width: 34rem;
}

/* ======================================================
   CHAPTER TITLE
====================================================== */

.bottle__chapter-title {
  margin-top: var(--space-md);

  margin-bottom: var(--space-xl);

  max-width: 32rem;

  color: var(--color-primary);
}

/* ======================================================
   CHAPTER TEXT
====================================================== */

.bottle__chapter-text {
  display: flex;

  flex-direction: column;

  gap: var(--space-lg);

  max-width: 32rem;
}

/* ======================================================
   CHAPTER TEXT PARAGRAPHS
====================================================== */

.bottle__chapter-text p {
  margin: 0;
}

/* ======================================================
   CLOSING
====================================================== */

.bottle__closing {
  max-width: 1100px;

  margin-inline: auto;

  padding-block: calc(var(--space-5xl) * 1.5);

  text-align: center;
}

/* ======================================================
   CLOSING CONTENT
====================================================== */

.bottle__closing-content {
  max-width: 46rem;

  margin-inline: auto;
}

/* ======================================================
   CLOSING TEXT
====================================================== */

.bottle__closing-text {
  display: flex;

  flex-direction: column;

  gap: var(--space-xl);

  margin-top: var(--space-2xl);
}

/* ======================================================
   CLOSING EMPHASIS
====================================================== */

.bottle__closing-text p:first-child,
.bottle__closing-text p:nth-child(2) {
  font-family: var(--font-heading);

  font-size: clamp(2rem, 4vw, 3rem);

  line-height: 1.15;

  color: var(--color-primary);
}

/* ======================================================
   NEXT HOVER
====================================================== */

.bottle__next-link:hover {
  transform: translateY(6px);

  color: var(--color-primary);
}

.bottle__next-link:hover .bottle__next-icon {
  transform: translateY(4px);
}

/* ======================================================
   PRESENCE
====================================================== */

.bottle__chapter--presence {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);

  gap: var(--space-5xl);

  padding-block: calc(var(--space-5xl) * 1.5);
}

/* ======================================================
   PRESENCE CONTENT
====================================================== */

.bottle__chapter--presence .bottle__chapter-content {
  max-width: 36rem;

  justify-self: start;
}

/* ======================================================
   PRESENCE ART
====================================================== */

.bottle__chapter--presence .bottle__chapter-art {
  justify-self: end;
}

/* ======================================================
   PRESENCE TITLE
====================================================== */

.bottle__chapter--presence .bottle__chapter-title {
  max-width: 34rem;

  font-size: clamp(2rem, 3.5vw, 3rem);

  line-height: 1.15;
}

/* ======================================================
   PRESENCE TEXT
====================================================== */

.bottle__chapter--presence .bottle__chapter-text {
  max-width: 30rem;
}

/* ======================================================
   CRAFT
====================================================== */

.bottle__chapter--craft {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);

  gap: var(--space-4xl);

  padding-block: calc(var(--space-5xl) * 1.5);
}

/* ======================================================
   CRAFT ART
====================================================== */

.bottle__chapter-art {
  position: relative;

  width: 100%;

  margin: 0;

  overflow: hidden;

  aspect-ratio: 4 / 5;

  background: var(--color-dark);
}

/* ======================================================
   CRAFT IMAGE
====================================================== */

.bottle__chapter-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.8s ease;
}

/* ======================================================
   CRAFT CONTENT
====================================================== */

.bottle__chapter--craft .bottle__chapter-content {
  max-width: 34rem;

  justify-self: end;
}

/* ======================================================
   CRAFT TEXT
====================================================== */

.bottle__chapter--craft .bottle__chapter-text {
  max-width: 30rem;
}

/* ======================================================
   CLOSING
====================================================== */

.bottle__closing {
  display: flex;

  flex-direction: column;

  align-items: center;

  max-width: 900px;

  margin-inline: auto;

  padding-block: calc(var(--space-5xl) * 1.5);

  text-align: center;
}

/* ======================================================
   CLOSING CONTENT
====================================================== */

.bottle__closing-content {
  max-width: 46rem;

  margin-inline: auto;
}

/* ======================================================
   CLOSING ART
====================================================== */

.bottle__closing-art {
  width: min(100%, 58rem);

  margin: var(--space-4xl) auto;

  overflow: hidden;

  aspect-ratio: 16 / 7;

  background: var(--color-dark);
}

/* ======================================================
   CLOSING IMAGE
====================================================== */

.bottle__closing-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

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

.bottle__closing-story {
  max-width: 36rem;

  margin-inline: auto;
}

/* ======================================================
   CLOSING STORY TEXT
====================================================== */

.bottle__closing-story p {
  margin: 0 0 var(--space-lg);
}

/* ======================================================
   CLOSING FINAL
====================================================== */

.bottle__closing-final {
  margin-top: var(--space-3xl) !important;

  margin-bottom: var(--space-xl) !important;

  font-family: var(--font-heading);

  font-size: clamp(2rem, 4vw, 3rem);

  line-height: 1.15;

  color: var(--color-primary);
}

/* ======================================================
   PURCHASE CTA
====================================================== */

.bottle__purchase {
  margin-top: var(--space-2xl);

  text-align: center;
}