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


@import "../../universal_styles/variables.css?v=20261101-1600";



/* ---------------------------------------------- vv SITE-SPECIFIC STYLES vv ---------------------------------------------- */

/* -----------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------- PAGE STRUCTURE ---------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


/* stacking order (bottom -> top): loader background, hero, footer, sections, nav, loader box */

#indexHero {
  position: relative;
  z-index: 2;
  height: var(--hero-height);
}

#indexBody {
  position: relative;
  z-index: 3;
}

/* nothing of the home page reaches sideways past the screen (the hero blocks slide in from outside during the
   intro). On the page, not the hero: Safari / iOS clips both directions with overflow-x: clip, which is fine here
   (nothing reaches below the page) but cut the hero's corner fill (see HERO) */
.page[data-page="index"] {
  overflow-x: clip;
}

#footer {
  z-index: 2;
}

/* hidden until loaderIndex.js starts the hero intro (during the loader, only the logo shows: see LOADER ANIMATION) */
html.introPending #indexHero,
html.introPending #indexBody,
html.introPending #navBar,
html.introPending #footer {
  visibility: hidden;
}





/* -----------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------- HERO --------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


/* Figma: Home > Hero (2396:554). 6 x 6 grid over the full hero height (5 columns below 1350px, 4 below 550px) */

/* hero variables live on #indexHero (not :root): variables.css is imported again by later stylesheets
   (e.g. cursor.css), which would reset any :root value overridden here */
#indexHero {
  --hero-col: calc(100cqw / var(--hero-columns));   /* one column width (cqw = % of .heroInner's width, works in clip-path too) */

  /* text block */
  --hero-text-width: 184px;
  --hero-text-size: var(--m-text);

  /* logo: center sits 19.5px above the hero's center */
  --logo-hero-offset: -19.5px;

  /* diagonals left (grid cell 3/1 - 5/3, inner padding) */
  --diag-l-pt: 30px;
  --diag-l-pr: 30px;
  --diag-l-pb: 30px;
  --diag-l-pl: 160px;

  /* diagonals right (L-shape over 2 columns, starting after --diag-r-start columns) */
  --diag-r-start: 3;
  --diag-r-pl: 160px;
  --diag-r-pr: 30px;
  --diag-r-pb: calc(var(--hero-row-height) / 2);
}

.heroInner {
  position: relative;
  height: 100%;
  overflow: hidden;
  container-type: inline-size;
  will-change: transform;
}

/* let the hero reach 28px below its bottom edge, so the bottom-right block can fill the gap behind
   section 1's rounded corner (see BLOCKS). Sideways it still clips: clip-path only cuts what is drawn (the page
   can't scroll sideways anyway: body overflow-x: hidden).
   No overflow-x: clip here: Safari / iOS (also Chrome on iPhone) clips both directions with it, so the corner
   fill was cut off there (2026-11-01). Browsers without clip-path keep overflow: hidden (no corner fill) */
@supports (clip-path: inset(0 0 -1px 0)) {
  .heroInner {
    overflow: visible;
    clip-path: inset(0 0 calc(-1 * var(--section-radius)) 0);
  }
}

.heroGrid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--hero-columns), 1fr);
  grid-template-rows: repeat(var(--hero-rows), 1fr);
}



/* ---------------------------------------------- BLOCKS ---------------------------------------------- */

.heroBlock {
  background-color: var(--color-light);
}

.heroBlock1 { grid-area: 1 / 5 / 2 / 7; }
.heroBlock2 { grid-area: 2 / 1 / 3 / 2; }
.heroBlock3 { grid-area: 5 / 1 / 6 / 3; }
.heroBlock4 { grid-area: 6 / 4 / 7 / 7; }

/* the block in the bottom-right corner reaches below the hero, behind section 1's rounded corner.
   It moves with the hero (parallax), so no gray piece stays stuck behind the corner while scrolling */
.heroBlock4 { margin-bottom: calc(-1 * var(--section-radius)); }



/* -------------------------------------------- TEXT BLOCK -------------------------------------------- */

.heroText {
  grid-area: 6 / 1 / 7 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.heroTextBlock {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: var(--hero-text-width);
  font-size: var(--hero-text-size);
}

/* every row is a mask, the words slide up into it */
.heroTextRow {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}

.heroTextRow span {
  display: block;
}



/* -------------------------------------------- TAG LINES --------------------------------------------- */

.heroTagLine {
  display: flex;
  flex-direction: column;
}

.heroTagLineTop {
  grid-area: 1 / 1 / 2 / 4;
  padding: 10px 0 0 15px;
}

.heroTagLineBottom {
  grid-area: 5 / 4 / 6 / 7;
  justify-content: flex-end;
  padding: 0 15px 10px 0;
}



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

/* .diagonalsPattern itself: see styles.css (also used on the drop pages) */

.heroDiagonalsLeft {
  grid-area: 3 / 1 / 5 / 3;
  padding: var(--diag-l-pt) var(--diag-l-pr) var(--diag-l-pb) var(--diag-l-pl);
}

.diagonalsMask {
  position: relative;
  height: 100%;
  overflow: hidden;
}

/* "Diagonals Right 1 + 2" in Figma: one continuous pattern, cut into an L-shape.
   Right 1 = first column, row 1 · Right 2 = both columns, rows 2-3 (minus --diag-r-pb) */
.heroDiagonalsRight {
  --notch: calc(var(--hero-col) - var(--diag-r-pl));   /* width of "Right 1" */

  position: absolute;
  top: 0;
  left: calc(var(--hero-col) * var(--diag-r-start) + var(--diag-r-pl));
  width: calc(var(--hero-col) * 2 - var(--diag-r-pl) - var(--diag-r-pr));
  height: calc(var(--hero-row-height) * 3 - var(--diag-r-pb));
  overflow: hidden;
}

.heroDiagonalsRight .diagonalsPattern {
  clip-path: polygon(0 0, var(--notch) 0, var(--notch) var(--hero-row-height), 100% var(--hero-row-height), 100% 100%, 0 100%);
}



/* ------------------------------------------ VERTICAL LINES ------------------------------------------ */

.heroLines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.heroLine {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--color-white);
  opacity: var(--grid-line-opacity);
}

/* one line between every two columns */
.heroLine:nth-child(1) { left: calc(100% / var(--hero-columns) * 1); }
.heroLine:nth-child(2) { left: calc(100% / var(--hero-columns) * 2); }
.heroLine:nth-child(3) { left: calc(100% / var(--hero-columns) * 3); }
.heroLine:nth-child(4) { left: calc(100% / var(--hero-columns) * 4); }
.heroLine:nth-child(5) { left: calc(100% / var(--hero-columns) * 5); }



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

/* centered horizontally; vertically its center sits --logo-hero-offset away from the hero's center
   (desktop: logo top at 354px of 1052px). 0.28505 = half of the logo's height/width ratio (305 / 535 / 2) */
.heroLogo {
  position: absolute;
  top: calc(50% + var(--logo-hero-offset) - var(--logo-hero-width) * 0.28505);
  left: calc(50% - var(--logo-hero-width) / 2);
  color: var(--color-white);
}



/* ------------------------------------ INTRO START STATES (OFF SCREEN) ------------------------------------ */

/* Already off screen before any script has run (Justus, 2026-11-02: on a first visit the gray blocks sometimes showed
   during the loader). .introStart is in the HTML; loaderIndex.js (setHeroIntroStartStates) reads the side every
   block slides in from here, takes over with the same values and removes the class.
   Blocks + tag lines move by their own width towards the closest screen edge (they change sides below 550px) */
#indexHero.introStart .heroBlock1,
#indexHero.introStart .heroBlock4,
#indexHero.introStart .heroTagLineBottom {
  transform: translateX(100%);
}

#indexHero.introStart .heroBlock2,
#indexHero.introStart .heroBlock3,
#indexHero.introStart .heroTagLineTop {
  transform: translateX(-100%);
}

#indexHero.introStart .heroTextRow span { transform: translateY(40px); }
#indexHero.introStart .heroDiagonalsLeft .diagonalsPattern { transform: translate(-450px, 450px); }
#indexHero.introStart .heroDiagonalsRight .diagonalsPattern { transform: translate(450px, -450px); }
#indexHero.introStart .heroLine { transform: translateY(-115%); }   /* Figma: -1200px on a 1052px hero */





/* -----------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------- DROP SLIDER ----------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


/* Figma: Section 2 > Slider (2463:237). Endless marquee, 170px every 4s.
   The item list exists twice; the track moves by exactly one list length, then loops. */

:root {
  --slider-items: 6;
  --slider-duration: calc(var(--slider-items) * 4s);
}

.dropSlider {
  position: relative;
  height: var(--slider-item-size);
  overflow: hidden;
}

.dropSliderTrack {
  display: flex;
  width: max-content;
  animation: dropSliderMove var(--slider-duration) linear infinite;
}

.dropSliderItem {
  margin-right: var(--slider-gap);
}

.dropSliderImage {
  display: block;
  width: var(--slider-item-size);
  height: var(--slider-item-size);
  background-color: var(--color-placeholder);
  background-size: cover;
  background-position: center;
}

.dropSlider::before,
.dropSlider::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: 1;
  width: var(--slider-shadow-width);
  height: 100%;
  opacity: var(--slider-shadow-opacity);
  pointer-events: none;
}

.dropSlider::before {
  left: 0;
  background: linear-gradient(to right, #000, rgba(0, 0, 0, 0));
}

.dropSlider::after {
  right: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), #000);
}

@keyframes dropSliderMove {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}





/* -----------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------- INTRO LOADER ----------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


/* Figma: Home (Loading & Intro Animation) (2396:603) */

#introLoaderBg {
  position: fixed;
  inset: 0;
  z-index: 1;
  background-color: var(--color-light);
}

/* thin dark line in the center that grows until it covers the whole screen */
#introLoaderExpand {
  position: fixed;
  top: calc(50% - 1px);
  left: calc(50% - 1198px);
  z-index: 1;
  width: 2396px;
  height: 2px;
  background-color: var(--color-dark);
  transform: scale(0);
}

#introLoaderBox {
  position: fixed;
  right: 100px;
  bottom: 100px;
  z-index: 600;
  width: 160px;
  height: 80px;
  border: 1px solid var(--color-white);
  opacity: 0;
}

.introLoaderText {
  position: absolute;
  top: calc(50% - 11px);
  left: calc(50% - 43px);
  font-family: var(--font-display);
  font-weight: var(--bold-weight);
  font-size: var(--l-text);
  line-height: var(--l-line-height);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-white);
  white-space: nowrap;
}

/* white square moving left/right; contains a dark copy of the text so the text inverts inside it */
#introLoaderHighlight {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 80px;
  height: 80px;
  overflow: hidden;
  background-color: var(--color-white);
}

.introLoaderTextInverted {
  top: 29px;    /* same spot as the white text (36px / 28px inside the border), measured from the highlight */
  left: 37px;   /* moves opposite to the highlight so it stays in place */
  color: var(--color-dark);
}



/* ------------------------------------------ LOADER ANIMATION ------------------------------------------ */

/* A CSS animation, not GSAP: it starts with the very first paint, without waiting for any script
   (Justus, 2026-11-02: the loader only started once every script had loaded, after a long pause).
   html.loaderOn is set in index.html's <head> (once per browser session). Times + curves from the Figma timeline
   (same as before in GSAP). loaderIndex.js waits until the page has loaded, takes over at the end of a bounce
   and plays the exit + hero intro.

   0s      dark line grows over the screen (0.79s)
   0.25s   logo scales in (0.85s)
   1.1s    loader box fades in (0.9s)
   1.5s    highlight: right, left, right, left, right (0.4s move + 0.1s pause each) -> 3.9s
   3.9s    bounce (left + right, 1s) until the page has loaded

   Highlight curve: cubic-bezier version of the Figma spring (motion.js springEase, max. 2% off) */

/* the hero is still hidden (html.introPending), only its logo shows during the loader */
html.loaderOn.introPending .heroLogo {
  visibility: visible;
}

html.loaderOn #introLoaderExpand {
  animation: loaderExpand 0.79s cubic-bezier(1, 0, 0.9, 0.9) both;
}

html.loaderOn .heroLogo .logo {
  animation: loaderLogo 0.85s cubic-bezier(1, 0, 0.251, 0.998) 0.25s both;
}

html.loaderOn #introLoaderBox {
  animation: loaderBoxIn 0.9s cubic-bezier(0.5, 0, 0.5, 1) 1.1s both;
}

/* 2 animations: the intro (keeps its end state), then the bounce on repeat (later in the list = wins once it runs) */
html.loaderOn #introLoaderHighlight {
  animation: loaderHighlight 3.9s linear both, loaderBounce 1s linear 3.9s infinite;
}

html.loaderOn .introLoaderTextInverted {
  animation: loaderHighlightText 3.9s linear both, loaderBounceText 1s linear 3.9s infinite;
}


@keyframes loaderExpand {
  from { transform: scale(0); }
  to   { transform: scale(600); }
}

@keyframes loaderLogo {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

@keyframes loaderBoxIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* % of 3.9s: 1.5s = 38.462%, 1.9s = 48.718%, 2.0s = 51.282% ... every move starts at a keyframe with the spring curve */
@keyframes loaderHighlight {
  0%, 38.462%      { transform: translateX(0);     animation-timing-function: cubic-bezier(0.242, 0.475, 0, 1.083); }
  48.718%, 51.282% { transform: translateX(80px);  animation-timing-function: cubic-bezier(0.242, 0.475, 0, 1.083); }
  61.538%, 64.103% { transform: translateX(-3px);  animation-timing-function: cubic-bezier(0.242, 0.475, 0, 1.083); }
  74.359%, 76.923% { transform: translateX(80px);  animation-timing-function: cubic-bezier(0.242, 0.475, 0, 1.083); }
  87.179%, 89.744% { transform: translateX(0);     animation-timing-function: cubic-bezier(0.242, 0.475, 0, 1.083); }
  100%             { transform: translateX(80px); }
}

@keyframes loaderHighlightText {
  0%, 38.462%      { transform: translateX(0);     animation-timing-function: cubic-bezier(0.242, 0.475, 0, 1.083); }
  48.718%, 51.282% { transform: translateX(-80px); animation-timing-function: cubic-bezier(0.242, 0.475, 0, 1.083); }
  61.538%, 64.103% { transform: translateX(3px);   animation-timing-function: cubic-bezier(0.242, 0.475, 0, 1.083); }
  74.359%, 76.923% { transform: translateX(-80px); animation-timing-function: cubic-bezier(0.242, 0.475, 0, 1.083); }
  87.179%, 89.744% { transform: translateX(0);     animation-timing-function: cubic-bezier(0.242, 0.475, 0, 1.083); }
  100%             { transform: translateX(-80px); }
}

/* 1s: pause 0.1s, left (0.4s), pause 0.1s, right (0.4s) */
@keyframes loaderBounce {
  0%, 10%  { transform: translateX(80px); animation-timing-function: cubic-bezier(0.242, 0.475, 0, 1.083); }
  50%, 60% { transform: translateX(0);    animation-timing-function: cubic-bezier(0.242, 0.475, 0, 1.083); }
  100%     { transform: translateX(80px); }
}

@keyframes loaderBounceText {
  0%, 10%  { transform: translateX(-80px); animation-timing-function: cubic-bezier(0.242, 0.475, 0, 1.083); }
  50%, 60% { transform: translateX(0);     animation-timing-function: cubic-bezier(0.242, 0.475, 0, 1.083); }
  100%     { transform: translateX(-80px); }
}





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


/* ----------------------------------- BELOW 1600PX (Figma 2507:15) ----------------------------------- */

@media (max-width: 1600px) {
  #indexHero {
    --logo-hero-width: 481.5px;
    --hero-text-width: 164px;
  }
}


/* ----------------------------- BELOW 1350PX (Figma 2507:221): 5 COLUMNS ----------------------------- */

@media (max-width: 1350px) {
  #indexHero {
    --hero-columns: 5;
    --logo-hero-width: 455.7px;
    --diag-l-pl: 120px;
    --diag-l-pr: 140px;
    --diag-r-pl: 140px;
  }

  .heroBlock1 { grid-area: 1 / 5 / 2 / 6; }
  .heroBlock4 { grid-area: 6 / 4 / 7 / 6; }
  .heroTagLineBottom { grid-area: 5 / 4 / 6 / 6; }

  .heroLine:nth-child(5) { display: none; }
}


/* ---------------------------------- BELOW 1200PX (Figma 2507:426) ----------------------------------- */

@media (max-width: 1200px) {
  #indexHero {
    --logo-hero-width: 423.7px;
    --hero-text-width: 154px;
    --diag-l-pl: 80px;
    --diag-l-pr: 150px;
    --diag-r-pl: 120px;
  }
}


/* ---------------------------------- BELOW 1000PX (Figma 2507:630) ----------------------------------- */

@media (max-width: 1000px) {
  #indexHero {
    --hero-text-width: 134px;
    --diag-l-pl: 30px;
    --diag-l-pr: 160px;
    --diag-r-pl: 100px;
  }

  /* loader box: centered horizontally, still 100px from the bottom (no Figma design for this, Justus' choice) */
  #introLoaderBox {
    left: 0;
    right: 0;
    margin: 0 auto;
  }
}


/* ----------------------------------- BELOW 700PX (Figma 2509:835) ----------------------------------- */

@media (max-width: 700px) {
  #indexHero {
    --hero-text-width: 110px;
    --hero-text-size: var(--s-text);
    --diag-l-pl: 0px;
    --diag-l-pr: 170px;
    --diag-r-pl: 80px;
    --diag-r-pr: 0px;
  }
}


/* ----------------------------- BELOW 550PX (Figma 2509:1039): 4 COLUMNS ----------------------------- */

@media (max-width: 550px) {
  #indexHero {
    --hero-columns: 4;
    --logo-hero-width: 355px;
    --logo-hero-offset: 14px;          /* logo is centered in the full screen height here */
    --diag-l-pr: 120px;
    --diag-r-start: 2;
    --diag-r-pb: 100px;
  }

  .heroBlock1 { grid-area: 1 / 4 / 2 / 5; }
  .heroBlock2 { grid-area: 2 / 1 / 3 / 3; }
  .heroBlock3 { grid-area: 6 / 3 / 7 / 5; }
  .heroBlock4 { grid-area: 5 / 1 / 6 / 2; }

  /* block 3 is the bottom-right one here (see BLOCKS) */
  .heroBlock3 { margin-bottom: calc(-1 * var(--section-radius)); }
  .heroBlock4 { margin-bottom: 0; }
  .heroTagLineTop { grid-area: 1 / 1 / 2 / 3; }
  .heroTagLineBottom { grid-area: 5 / 3 / 6 / 5; }
  .heroText { display: none; }

  .heroLine:nth-child(4) { display: none; }

  /* intro start states: block 3 is on the right, block 4 on the left here */
  #indexHero.introStart .heroBlock3 { transform: translateX(100%); }
  #indexHero.introStart .heroBlock4 { transform: translateX(-100%); }
}


/* ---------------------------------- BELOW 450PX (Figma 2509:1431) ----------------------------------- */

@media (max-width: 450px) {
  #indexHero {
    --logo-hero-width: 310px;
    --diag-l-pr: 70px;
    --diag-r-pl: 60px;
  }
}


/* ---------------------------------- BELOW 390PX (Figma 2509:1836) ----------------------------------- */

@media (max-width: 390px) {
  #indexHero {
    --logo-hero-width: 290px;
    --diag-l-pr: 60px;
    --diag-r-pl: 50px;
  }
}


/* ---------------------------------- BELOW 350PX (Figma 2509:1625) ----------------------------------- */

@media (max-width: 350px) {
  #indexHero {
    --logo-hero-width: 270px;
  }
}