/* ================================= */
/* FONT                              */
/* ================================= */

@font-face {
  font-family: "CustomFont";
  src: url("font.woff2") format("woff2");
  font-display: swap;
}


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

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

html {
  margin: 0;
  padding: 0;

  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;

  background: transparent;
}

body {
  margin: 0;
  padding: 0;

  font-family: "CustomFont", sans-serif;
  color: #222;

  overflow-x: hidden;

  -webkit-font-smoothing: antialiased;

  background: transparent;
}


/* Hide default cursor on pointer devices */
@media (hover: hover) {
  body {
    cursor: none;
  }
}


/* ================================= */
/* PAGE STRUCTURE                    */
/* ================================= */

.page {
  width: 100%;
}

.section {
  position: relative;

  width: 100%;
  min-height: 100vh;
  height: 100dvh;

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

  scroll-snap-align: start;
  scroll-snap-stop: always;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* Footer shorter */
.footer {
  height: 50dvh;
  min-height: 50dvh;

  scroll-snap-align: end;

  position: relative;

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

/* override full-page section rule */
.section.footer {
  height: 50dvh;
  min-height: 50dvh;
}

.footer::before {

  content: "";

  position: absolute;
  inset: 0;

  background-image: url("assets/backgrounds/compressed_backgrounds/background_desktop_1.webp");
  background-size: cover;
  background-position: center;

  opacity: 0.85;

  z-index: 0;

}

/* darken footer background */
.footer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.18);
  pointer-events: none;
  z-index: 0;
}


/* ================================= */
/* BACKGROUNDS                       */
/* ================================= */

.landing {
  position: relative;
  overflow: hidden;
}

.landing::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/backgrounds/compressed_backgrounds/background_desktop_1.webp");
  background-size: cover;
  background-position: 50% 50%;
  transform: scale(1.25);
  animation: landing-drift 18s ease-in-out infinite alternate;
  z-index: 0;
}

.landing .section-inner {
  position: relative;
  z-index: 1;
}

@keyframes landing-drift {
  0% {
    transform: scale(1.25) translateX(-3%);
  }
  100% {
    transform: scale(1.25) translateX(3%);
  }
}

.product-section-1 {
  background-image: url("assets/backgrounds/compressed_backgrounds/background_desktop_2.webp");
}

.product-section-2 {
  background-image: url("assets/backgrounds/compressed_backgrounds/background_desktop_1.webp");
}

.product-section-3 {
  background-image: url("assets/backgrounds/compressed_backgrounds/background_desktop_2.webp");
}

.product-section-4 {
  background-image: url("assets/backgrounds/compressed_backgrounds/background_desktop_1.webp");
}

.product-section-5 {
  background-image: url("assets/backgrounds/compressed_backgrounds/background_desktop_2.webp");
}


/* ================================= */
/* SECTION GRID SYSTEM               */
/* ================================= */

.section-inner {

  position: relative;

  width: min(1200px, 92vw);
  height: 100%;

  display: grid;

  grid-template-rows:
    1fr
    auto
    auto
    1fr;

  justify-items: center;
  align-items: center;

  text-align: center;
}


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

.hero {
  grid-row: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.9s cubic-bezier(.22,.61,.36,1);
}

.collection-title {

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

  letter-spacing: 0.14em;

  margin: 0;
  animation: title-breathe 12s ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}

@keyframes title-breathe {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.012);
  }
  100% {
    transform: scale(1);
  }
}

.collection-subtitle {

  margin-top: 1.4rem;

  font-style: italic;

  font-size: clamp(0.96rem, 1.45vw, 1.15rem);

  letter-spacing: 0.08em;

  opacity: 0.85;
  transition:
    transform 0.9s cubic-bezier(.22,.61,.36,1),
    opacity 0.7s ease;
}


/* ================================= */
/* PRODUCT RENDER (ANCHOR)           */
/* ================================= */

.product-render {
  grid-row: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  transform: translateY(36px);
  opacity: 0.9;

  transition:
    transform 1.25s cubic-bezier(.22,.61,.36,1) 0.14s,
    opacity 1s ease 0.14s;
}

.product.reveal .product-render {
  transform: translateY(0);
  opacity: 1;
}

.product-render img {

  width: min(980px, 78vw);
  max-height: min(70vh, 520px);

  height: auto;

  object-fit: contain;

  opacity: 0;

  transition: opacity 0.45s ease;
}

.product-render img.loaded {
  opacity: 1;
}

@media (min-height: 900px) {
  .product-render img {
    max-height: min(72vh, 640px);
  }
}


/* ================================= */
/* PRODUCT TEXT BLOCK                */
/* ================================= */

.product-info {

  grid-row: 3;

  display: flex;
  flex-direction: column;

  align-items: center;

  gap: clamp(0.45rem, 0.9vh, 0.8rem);

  margin-top: clamp(0.6rem, 1.5vh, 1.2rem);

  opacity: 1;
  transition: opacity 0.35s ease-out;
}

.product-title {

  font-size: clamp(1.55rem, 2.55vw, 2.05rem);

  letter-spacing: 0.1em;

  margin: 0;

  opacity: 1;
  transition: opacity 0.35s ease-out;
}

.product-text {

  display: flex;
  flex-direction: column;

  align-items: center;

  gap: 0.15rem;
}

.product-material {

  font-size: clamp(1.1rem, 1.4vw, 1.4rem);

  font-weight: 500;
}

.product-edition {

  font-size: clamp(0.9rem, 1.1vw, 1rem);

  font-style: italic;

  opacity: 0.9;
}

.product-price {

  font-size: clamp(1.2rem, 1.5vw, 1.5rem);

  margin-top: 0.25rem;
}


/* ================================= */
/* RESERVE BUTTON                    */
/* ================================= */

.reserve-button {
  appearance: none;
  -webkit-appearance: none;

  margin-top: 1rem;
  font-family: "CustomFont";
  font-size: clamp(1.1rem, 1.25vw, 1.25rem);
  letter-spacing: 0.22em;
  padding: 1em 2.8em;
  background: rgba(255,255,255,0.5);
  border: 1.5px solid #222;
  color: #222;

  cursor: pointer;

  transition:
    background 0.25s ease,
    transform 0.2s ease;
}

.reserve-button:hover {
  background: rgba(34,34,34,0.08);
  transform: translateY(-2px);
}


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

.footer-inner {

  position: relative;
  z-index: 1;

  width: min(1000px, 92vw);
  height: 100%;

  display: flex;
  flex-direction: column;

  justify-content: space-evenly; /* equal top & bottom spacing */

  align-items: center;
}

.footer-links {

  display: flex;

  gap: clamp(2rem, 5vw, 6rem);

  font-size: clamp(0.75rem, 0.8vw + 0.55rem, 1.44rem); /* +20% */

  letter-spacing: 0.12em;

  margin-top: clamp(1rem, 3vh, 2.5rem);

  flex-wrap: nowrap;
}

.footer-links a {

  color: #222;

  text-decoration: none;

  transition: opacity 0.25s ease;

  white-space: nowrap;
}

.footer-links a:hover {
  opacity: 0.6;
}

.footer-legal {

  margin-top: clamp(2rem, 5vh, 4rem);

  font-size: clamp(0.9rem, 1.1vw, 1.1rem);

  text-align: center;

  opacity: 0.8;

  max-width: 700px;

  line-height: 1.6;
}

.footer-wordmark img {
  width: 180px;
  opacity: 0.9;
}


/* ================================= */
/* CUSTOM CURSOR                     */
/* ================================= */

.custom-cursor {

  position: fixed;

  top: 0;
  left: 0;

  width: 20px;
  height: 20px;

  border: 1.5px solid rgba(0,0,0,0.7);

  border-radius: 50%;

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

  pointer-events: none;

  z-index: 10000;
}


/* Hide system cursor on pointer devices */
@media (hover: hover) {

  body,
  body * {
    cursor: none !important;
  }

}


/* Disable custom cursor on touch devices */
@media (hover: none) {

  .custom-cursor {
    display: none;
  }

  body {
    cursor: auto;
  }

}


/* ================================= */
/* POPUP                             */
/* ================================= */

#popup-overlay {

  position: fixed;
  inset: 0;

  background: rgba(0,0,0,0.5);

  display: none;

  z-index: 9000;
}

#popup {

  position: fixed;

  top: 50%;
  left: 50%;

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

  width: min(420px, 90vw);

  padding: 2.5rem 2rem;

  background-image: url("assets/backgrounds/compressed_backgrounds/background_desktop_1.webp");
  background-size: cover;

  box-shadow: 0 20px 60px rgba(0,0,0,0.25);

  display: none;

  z-index: 9500;

  overflow: hidden;
}

#popup::before {

  content: "";

  position: absolute;
  inset: 0;

  background: rgba(255,255,255,0.55);

  pointer-events: none;   /* IMPORTANT */
}

#popup form {

  position: relative;

  display: flex;
  flex-direction: column;

  gap: 1.2rem;

  z-index: 1;
}

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

.popup-header {

  display: flex;
  flex-direction: column;

  align-items: center;
  text-align: center;

  margin-bottom: 0.5rem;
}

.popup-title {

  margin: 0;

  font-size: clamp(1.6rem, 2.4vw, 2rem);

  letter-spacing: 0.12em;
}

.popup-subtitle {

  margin-top: 0.6rem;

  font-size: clamp(0.75rem, 1vw, 0.9rem);

  font-style: italic;

  letter-spacing: 0.08em;

  opacity: 0.85;
}

#popup label {

  font-size: 0.9rem;

  letter-spacing: 0.12em;

  font-weight: 500;
}

#popup input {

  padding: 0.8rem;

  border: 1.5px solid #222;

  background: transparent;

  font-family: "CustomFont";
}

/* ================================= */
/* POPUP CHECKBOX                    */
/* ================================= */

.popup-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;

  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.popup-checkbox input[type="checkbox"] {
  margin-top: 3px;
}

/* ================================= */
/* POPUP SUBMIT BUTTON               */
/* ================================= */

.popup-submit {

  margin-top: 1rem;

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

  font-size: clamp(0.9rem, 1vw, 1rem);

  letter-spacing: 0.2em;

  padding: 0.8em 2.3em;

  border: 1.5px solid #222;

  background: rgba(255,255,255,0.5);

  cursor: pointer;

  transition:
    background 0.25s ease,
    transform 0.2s ease;
}

.popup-submit:hover {

  background: rgba(34,34,34,0.08);

  transform: translateY(-1px);
}

.popup-close {
  margin-top: 1rem;
  border: none;
  background: none;
  font-size: 1.9rem;   /* ~20% bigger */
  color: #222;         /* force black instead of mobile blue */
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  line-height: 1;
  transition: opacity 0.2s ease, transform 0.15s ease;
  padding: 6px 10px;
}

.popup-close:hover {
  opacity: 0.6;
}

.popup-close:active {
  transform: scale(0.9);
}


/* ================================= */
/* LEGAL PAGE BACKGROUND             */
/* ================================= */

body::before {
  content: "";
  position: fixed;
  inset: 0;

  background: url("assets/backgrounds/compressed_backgrounds/background_desktop_1.webp") center / cover no-repeat;

  opacity: 0.85;

  z-index: 0;
}

body > * {
  position: relative;
  z-index: 1;
}

.legal-container {
  width: min(980px, 92vw);
  margin: 0 auto;
  padding: clamp(70px, 8vh, 120px) clamp(28px, 5vw, 64px);
  line-height: 1.75;
  font-size: clamp(1rem, 0.4vw + 0.95rem, 1.2rem);
}

.legal-container strong {
  display: block;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
  font-weight: 600;
}

/* ================================= */
/* LEGAL TEXT SIZE (DESKTOP BOOST)   */
/* ================================= */

@media (min-width: 900px) {
  .legal-container {
    font-size: clamp(1.15rem, 0.45vw + 1.05rem, 1.38rem);
  }
}

/* ================================= */
/* REMOVE LEGAL PAGE ARROW           */
/* ================================= */

.legal-arrow {
  display: none !important;
}

/* ================================= */
/* LEGAL PAGE DARK OVERLAY           */
/* ================================= */

body.legal-body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.18); /* darkness level */
  pointer-events: none;
  z-index: 0;
}

/* ================================= */
/* DISABLE OVERSCROLL ON LEGAL PAGES */
/* ================================= */

body.legal-body,
body.legal-body html {
  overscroll-behavior: none;
}

body.legal-body {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  background: #000;
}

/* ================================= */
/* SAFARI RUBBER BAND FIX (LEGAL)    */
/* ================================= */

body.legal-body {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* ================================= */
/* LEGAL PAGE SCROLL CONTAINER       */
/* ================================= */

.legal-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

/* ================================= */
/* SHADOW ABOVE FOOTER               */
/* ================================= */

.product-section-5 {
  box-shadow: 0 10px 15px rgba(0,0,0,0.28);
  z-index: 2;
  background-image: url("assets/backgrounds/compressed_backgrounds/background_desktop_2.webp");
}

/* ================================= */
/* LANDING SCROLL MOTION             */
/* ================================= */

.hero {
  transition: transform 0.9s cubic-bezier(.22,.61,.36,1);
}

.collection-title {
  transition: transform 0.9s cubic-bezier(.22,.61,.36,1);
}

.collection-subtitle {
  transition:
    transform 0.9s cubic-bezier(.22,.61,.36,1),
    opacity 0.7s ease;
}

.landing.scrolled .collection-title {
  transform: translateY(-40px);
}

.landing.scrolled .collection-subtitle {
  transform: translateY(-20px);
  opacity: 0.4;
}

/* ================================= */
/* MOBILE RENDER SCALE               */
/* ================================= */

@media (max-width: 600px) {
  .product-render img {
    width: min(980px, 94vw);
    max-height: min(78vh, 620px);
  }
}

/* ================================= */
/* TABLET RENDER SCALE               */
/* ================================= */

@media (min-width: 601px) and (max-width: 1100px) {
  .product-render img {
    width: min(980px, 88vw);
    max-height: min(75vh, 620px);
  }
}

/* ================================= */
/* FIX COMPOSITION FOR MOLTEN ARCHES */
/* ================================= */

.product-section-2 .product-render img {
  transform: translateX(-7.5%);
}