/* -----------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------- IMPORTED STYLES --------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


@import "fonts.css?v=20261101-1600";
@import "variables.css?v=20261101-1600";
@import "../../components/css/navbar.css?v=20261101-1600";
@import "../../components/css/footer.css?v=20261101-1600";



/* ------------------------------------------------- vv GLOBAL STYLES vv -------------------------------------------------- */

/* -----------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------ GENERAL ------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


html {
  box-sizing: border-box;
  background: var(--color-dark);
}

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

body {
  background: var(--color-dark);
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-body);
  color: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3, h4, p {
  margin: 0;
  font-weight: inherit;
}

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

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-align: inherit;
}

/* scroll is locked while the loader / intro animation plays */
html.scrollLocked, html.scrollLocked body {
  overflow: hidden;
}

/* no native scrollbar on any page in any browser (the page width never changes because of one):
   #scrollIndicator shows the scroll position instead (see SCROLL INDICATOR).
   scrollbar-width: Firefox, Chrome / Edge 121+, Safari 18.2+ · ::-webkit-scrollbar: older Chrome + Safari */
html, body {
  scrollbar-width: none;
}

html::-webkit-scrollbar, body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}





/* -----------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------ LAYOUT -------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


.fullWidth {
  width: 100% !important;
}





/* -----------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------- SHORTHAND CLASSES -------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


.flexRow {
  display: flex;
  flex-direction: row;
}

.zIndex-500 {
  z-index: 500 !important;
}

/* hidden visually, still read by screen readers */
.visuallyHidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}





/* -----------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------ FONTS & TEXTSTYLES -------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


.textTitle {
  font-family: var(--font-display);
  font-weight: var(--semi-bold-weight);
  font-size: var(--title-text);
  line-height: var(--title-line-height);
  letter-spacing: var(--letter-spacing-tight);
}

.textBody {
  font-family: var(--font-body);
  font-size: var(--s-text);
  line-height: var(--body-line-height);
  letter-spacing: var(--letter-spacing-tight);
}

.textDetail {
  font-family: var(--font-body);
  font-size: var(--xs-text);
  line-height: normal;
  letter-spacing: var(--letter-spacing-tight);
  white-space: nowrap;
}

.textMedium {
  font-family: var(--font-body);
  font-size: var(--m-text);
  line-height: var(--l-line-height);
  letter-spacing: var(--letter-spacing-tight);
  white-space: nowrap;
}





/* -----------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------- LOGO --------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


/* logo.svg is white. Used as a mask so its color follows `color` (currentColor) */

.logo {
  display: block;
  width: var(--logo-hero-width);
  aspect-ratio: 535 / 305;
  background-color: currentColor;
  -webkit-mask: url("../../images/universal_images/logo/logo.svg") center / contain no-repeat;
  mask: url("../../images/universal_images/logo/logo.svg") center / contain no-repeat;
}





/* -----------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------- DIAGONALS ------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


/* 45° white lines, 50px apart (Figma: "Line 4" diagonals on the home hero + drop pages). Fills its (clipping) parent.
   The lines are an SVG <pattern> (#diagonalLines, defined once per page in .svgDefs) filling an inline <svg>:
   <div class="diagonalsPattern"><svg><rect width="100%" height="100%" fill="url(#diagonalLines)"/></svg></div>
   Not a repeating CSS background image: Firefox scales such a background as a bitmap while the element is being
   scaled (drop change), so the lines turned blurry and dim until the animation ended */
.diagonalsPattern {
  position: absolute;
  inset: 0;
  opacity: var(--diagonal-opacity);
}

.diagonalsPattern svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* holds the shared SVG definitions; must stay rendered (no display: none), otherwise patterns may not work */
.svgDefs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}





/* -----------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------- DETAIL LINES ----------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


/* small text + thin line, e.g. "who we are ————" */

.detailRow {
  display: flex;
  align-items: center;
  gap: var(--detail-gap);
  width: 100%;
}

.detailRow.detailRowFigma {
  height: 8px;                 /* Figma: detail rows are 8px high, the text overflows them */
}

/* mask around an 8px detail row: 6px extra room above/below so the text isn't cut off,
   pulled back with negative margins so the layout still counts 8px */
.detailMask {
  padding: 6px 0;
  margin: -6px 0;
}

.detailLine {
  flex: 1 0 0;
  min-width: 1px;
  height: var(--line-weight);
  background-color: currentColor;
  opacity: var(--line-opacity);
}





/* -----------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------ BUTTONS ------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


/* Figma: "Button Row" (300 x 36px, or the full width) containing one "Button" that fills it.
   Same structure on every page:  <div class="btnRow"><a class="btn btnDark" href="...">text</a></div>
   .btnRowFull: row as wide as its container (drop pages). Home: the row is also the move-in mask (.moveInMask) */
.btnRow {
  display: flex;
  width: var(--button-width);
  height: var(--button-height);
}

.btnRowFull {
  width: 100%;
}

.btn {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: var(--font-display);
  font-weight: var(--regular-weight);
  font-size: var(--button-text);
  letter-spacing: var(--letter-spacing-wide);
  white-space: nowrap;
}

.btnDark {
  background-color: var(--color-dark);
  color: var(--color-white);
}

.btnLight {
  background-color: var(--color-white);
  color: var(--color-dark);
}

/* not clickable yet (e.g. "pre-orders start december 2026" on drop pages) */
.btnDisabled {
  background-color: var(--color-muted);
  color: var(--color-white);
}





/* -----------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------- CONTENT SECTIONS --------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


/* Full-viewport sections with rounded top corners that slide over each other.
   .contentSection      -> stays in place (scroll trigger + stacking)
   .contentSectionInner -> visible section, gets the parallax transform */

.contentSection {
  position: relative;
  height: var(--section-height);
}

.contentSection + .contentSection {
  margin-top: calc(-1 * var(--section-overlap));
}

.contentSectionInner {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--page-padding) var(--section-overlap);   /* content is centered in the part not covered by the next section */
  border-radius: var(--section-radius) var(--section-radius) 0 0;
  will-change: transform;
}

.sectionLight .contentSectionInner {
  background-color: var(--color-white);
  color: var(--color-dark);
}

.sectionDark .contentSectionInner {
  background-color: var(--color-dark);
  color: var(--color-white);
}

.sectionContent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--content-gap);
  width: 100%;
}

.sectionColumns {
  display: grid;
  /* minmax(0, 1fr): the columns are always exactly half each. With plain 1fr a column grows when its content is
     wider (e.g. a split move-in line measured slightly wider than the wrapped text), which moved the right column
     a few px to the left until the split was undone */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--column-gap);
  align-items: end;
  width: 100%;
}

/* inline links inside body text (e.g. email / instagram in the contact section) */
.textBody a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 0.03em;   /* Figma: 3% */
  text-decoration-skip-ink: none;
}

/* several paragraphs in one column, separated by one empty line */
.sectionText {
  display: flex;
  flex-direction: column;
  gap: var(--body-line-height);
}

.sectionDetail {
  width: calc((100% - var(--column-gap)) / 2);
}





/* -----------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------- MOVE-IN ANIMATION -------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


/* .moveInMask   -> clips its child (Figma "Parallax Mask")
   .moveIn       -> slides up into the mask when its group scrolls into view (scripts/universal_scripts/moveIn.js)
   .moveInLines  -> text that gets split into lines; every line slides up in its own mask
   Before JS runs, everything is visible, so the page still works without JavaScript. */

.moveInMask {
  overflow: hidden;
}

/* lines are hidden until moveIn.js has wrapped them in their masks (it adds .isSplit) */
html.js .moveInLines:not(.isSplit) {
  visibility: hidden;
}

/* one line of a split text (moveIn.js): the mask clips, the line slides up inside it.
   nowrap: each line holds exactly what the browser put on that line, so it must never wrap again.
   The mask only clips at the top + bottom (clip-path instead of overflow: hidden): a line that measures a few px
   wider than its column (possible with the negative letter-spacing) is never cut off at the right */
.moveInLineMask {
  display: block;
  clip-path: inset(0 -100%);
}

.moveInLine {
  display: block;
  white-space: nowrap;
}





/* -----------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------- TEXT VARIANTS ---------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


/* Some texts have a long / medium / short version in Figma, depending on the screen width.
   All versions are in the HTML, only the matching one is shown (display: none is also skipped by screen readers).
   long: above 1350px · medium: 1201-1350px and up to 1000px · short: 1001-1200px
   (range syntax "width > 1350px" so no in-between width is left without text) */

@media (width > 1350px) {
  .variantMedium, .variantShort { display: none !important; }
}

@media (1200px < width <= 1350px) {
  .variantLong, .variantShort { display: none !important; }
}

@media (1000px < width <= 1200px) {
  .variantLong, .variantMedium { display: none !important; }
}

@media (width <= 1000px) {
  .variantLong, .variantShort { display: none !important; }
}





/* -----------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------- PAGE TRANSITION --------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


/* page transitions (scripts/universal_scripts/pageTransitions.js, Figma 2586:2): fixed full-screen layers,
   below the nav (500). Order: white panel < moving page.
   will-change: transform -> the browser draws each layer once and then only moves / scales that image.
   Without it, Chrome redraws the scaled page for every new scale value (measured: ~36 instead of ~60 frames
   per second during the way into the drops page) */
.pageTransitionPanel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  bottom: 0;   /* not 100vh: on phones that is the height without the browser bars (taller than the screen) */
  pointer-events: none;
  will-change: transform;
}

.pageTransitionPanel { z-index: 410; background-color: var(--color-white); }

/* the drop page while it moves in / out: a fixed layer over (or above) the other page. Its own fixed parts
   (drops, up/down buttons) stay inside it, because it has a transform */
.pageTransitionLayer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  bottom: 0;   /* exactly the screen, like the drop page's own fixed layers afterwards (100vh on phones = taller,
                  so the page jumped up when the transition ended) */
  z-index: 420;
  will-change: transform;
}

/* the drop in Figma is much wider than the screen with a white frame around it, so at 90% its sides are
   still white: the same white is added left + right of the moving page */
.pageTransitionLayer::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: -50vw;
  right: -50vw;
  background-color: var(--color-white);
}





/* -----------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------- SCROLL INDICATOR --------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


/* replaces the native scrollbar (scrollIndicator.js): 4px wide at the right edge, over the full window height.
   mix-blend-mode difference like the cursor: #ebebe9 gives exactly #141416 over white and #d7d7d3 over #141416.
   Below the page transition layers (410+) and the nav (500) */
#scrollIndicator {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 4px;
  z-index: 400;
  pointer-events: none;
  mix-blend-mode: difference;
}

#scrollIndicator.isInactive {
  display: none;
}

/* height + position: scrollIndicator.js. Fades in quickly while scrolling, fades out 1s after (class isVisible) */
.scrollIndicatorThumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-radius: var(--corner-radius-infinite);
  background-color: #ebebe9;
  opacity: 0;
  transition: opacity 0.3s ease;
  touch-action: none;
  will-change: transform;
}

#scrollIndicator.isVisible .scrollIndicatorThumb {
  opacity: 1;
  transition-duration: 0.15s;
  pointer-events: auto;   /* draggable while visible */
}

/* wider grab area (12px to the left of the 4px bar), invisible */
.scrollIndicatorThumb::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 16px;
}

/* with a mouse also while hidden, so it shows up when the mouse reaches it */
@media (hover: hover) and (pointer: fine) {
  .scrollIndicatorThumb {
    pointer-events: auto;
  }
}

html.scrollLocked #scrollIndicator .scrollIndicatorThumb {
  pointer-events: none;
}





/* -----------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------- RESPONSIVE -----------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


/* ------------------------------------ BELOW 1000PX: ONE COLUMN ------------------------------------- */

@media (max-width: 1000px) {
  .sectionColumns {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--content-gap);
    align-items: start;
  }

  .sectionDetail {
    width: 100%;
  }
}


/* --------------------------------- BELOW 550PX: FULL-WIDTH BUTTONS ---------------------------------- */

@media (max-width: 550px) {
  .btnRow {
    width: 100%;
  }
}