/* =========================================================
   Monolithic — monolithic.nl
   ========================================================= */

:root {
  --mw: clamp(200px, 27vw, 390px);   /* breedte van de monoliet */
  --start: 48vh;                     /* hoogste punt van de gebroken top bij laden */
  --crown: .58;                      /* hoogte van de gebroken top (× breedte), getekend in 3D */
  --side: .36;                       /* zichtbare breedte van het rechterzijvlak (× breedte) */

  --f-display: "Fira Code", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --f-body: "Fira Code", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --f-mono: "Fira Code", ui-monospace, "SFMono-Regular", Consolas, monospace;



  --ink: #eef1f7;
  --sand-1: #dca067;
  --sand-cream: #f6ead0;
}

@media (max-width: 640px) {
  :root { --mw: 54vw; --side: .3; }
}

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


html {
  /* zwart bij overscroll boven, aarde bij overscroll onder */
  background: linear-gradient(#000 50%, #140a05 50%);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--f-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; left: 16px; top: -64px; z-index: 20;
  padding: 10px 14px; background: #fff; color: #000;
  font: 500 14px/1 var(--f-body); text-decoration: none;
}
.skip-link:focus { top: 16px; }

:focus-visible { outline: 2px solid #9ec1ff; outline-offset: 3px; }

/* Lenis (smooth scroll) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* =========================================================
   ACHTERGROND — ruimte → lucht → woestijn
   ========================================================= */

/* Vaste hoogte (de grote viewport): zo schuiven de lagen niet als de adresbalk
   van iPhone-browsers in- en uitklapt. */
.scene {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.scene--front { z-index: 5; }

.scene [data-speed],
.sky { will-change: transform; }

/* Eén hoge gradient die langzamer meebeweegt dan de monoliet.
   340vh hoog; JS schuift hem 200vh op tussen begin en grond. */
.sky {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 340vh;
  background:
    linear-gradient(180deg,
      #010103 0%,
      #020308 30%,
      #04071a 55%,
      #070b26 78%,
      #0a0f30 100%);
}
/* Ruimte: WebGL-shader (sterren, nevel, zwart gat, pulsar) + 2D-laag voor vallende sterren */
.space,
.stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Zon — gluurt bij het laden net over de top van de monoliet (2001-knipoog) */
.sun {
  position: absolute;
  top: 0;
  left: 77.3%;
  width: 0; height: 0;
}
.sun::before,
.sun::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  animation: bloom 2.6s 1.1s cubic-bezier(.2, .7, .2, 1) both;
}
.sun::before {
  width: 70vmin; height: 70vmin;
  left: -35vmin; top: -35vmin;
  background: radial-gradient(closest-side,
    rgba(255, 246, 228, .55),
    rgba(255, 222, 180, .20) 22%,
    rgba(140, 160, 255, .07) 52%,
    transparent 100%);
}
.sun::after {
  width: 2vmin; height: 2vmin;
  left: -1vmin; top: -1vmin;
  background: #fff;
  box-shadow:
    0 0 1.6vmin .5vmin rgba(255, 248, 230, .95),
    0 0 7vmin 2vmin rgba(255, 228, 190, .35);
}

/* Lensflare (voorste laag) */
.flare {
  position: absolute;
  top: 0;
  left: 77.3%;
  width: 0; height: 0;
}
.flare::before {
  content: "";
  position: absolute;
  left: -30vw; top: -1px;
  width: 60vw; height: 2px;
  background: linear-gradient(90deg,
    transparent 4%,
    rgba(170, 195, 255, .25) 30%,
    rgba(220, 232, 255, .7) 46%,
    #fff 50%,
    rgba(220, 232, 255, .7) 54%,
    rgba(170, 195, 255, .25) 70%,
    transparent 96%);
  filter: blur(.4px);
  animation: flare 2.4s 1.5s cubic-bezier(.2, .7, .2, 1) both;
}

/* Stofdeeltjes die bij de voet omhoog zweven */
.motes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 3D-laag: woestijn-shader + de monoliet (three.js) */
.three {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* =========================================================
   VOORGROND — de monoliet
   ========================================================= */

.world {
  position: relative;            /* géén z-index: monoliet en zand moeten in elkaar grijpen */
  overflow-x: clip;
  padding-top: var(--start);
}

.monolith {
  position: relative;
  z-index: 2;
  width: var(--mw);
  /* voorvlak + zichtbaar zijvlak samen gecentreerd */
  margin: 0 0 0 calc(50% - var(--mw) * (1 + var(--side)) / 2);
  padding-top: calc(var(--mw) * var(--crown));   /* ruimte voor de 3D-top */
}

.monolith__body { position: relative; }

/* Het voorvlak. Met 3D tekent three.js de steen hierachter; dit element
   draagt alleen tekst, logo's en de "leegte". Zonder 3D: gewoon zwart. */
.monolith__face {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #0b0b0e, #030304 18%, #020203 50%, #040405 82%, #0a0a0c);
}
html.has-3d .monolith__face { background: transparent; }

/* Gravures en barsten (getekend door JS); verwering zit in het 3D-materiaal */
.monolith__cracks {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.monolith__cracks { overflow: visible; }

/* Reactie: de ring rond het logo gloeit amber op.
   Elke gloed is een eigen laag (will-change): het ademen kost dan geen tekenwerk. */
.glow {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
  will-change: opacity;
}
.glow__paint {
  fill: none;
  stroke: #ffb35c;
  stroke-linecap: square;
  filter: drop-shadow(0 0 2px rgba(255, 150, 60, .95)) drop-shadow(0 0 8px rgba(255, 110, 30, .6));
}
.glow.is-lit { opacity: .9; animation: ring-breathe 5s ease-in-out infinite; }
/* de inscripties rond het woord gloeien altijd een heel klein beetje na */
.glow[data-ring="t"] { animation: title-rest 9s ease-in-out infinite; }
.glow[data-ring="t"].is-lit { animation: title-awake 5s ease-in-out infinite; }
@keyframes title-rest  { 0%, 100% { opacity: .1; } 50% { opacity: .26; } }
@keyframes title-awake { 0%, 100% { opacity: .5; } 50% { opacity: .8; } }
@keyframes ring-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.product.is-awake .product__logo {
  filter: blur(0) drop-shadow(0 0 14px rgba(255, 170, 90, .45));
  transform: scale(1.03);
}

/* Sterren ín de steen — vast aan het scherm, blijven zichtbaar, ook midden op de dag */
.monolith__reflect {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100vh;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: transform;
}
.void {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- M O N O L I T H I C ---------- */
.monolith__title {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: calc(var(--mw) * .24) 0 calc(var(--mw) * .46);
  display: flex;
  flex-direction: column;
  align-items: center;
  font: 900 calc(var(--mw) * .27) / 1.12 "Prompt", var(--f-display);
}

/* Elke letter is een eigen, buitenaards teken (getekend door JS in een vak van 100 × 120):
   een groef in de steen, daarin brons, met amber inlegwerk. */
.letter {
  position: relative;
  display: block;
  isolation: isolate;
  width: .9em;
  height: 1.08em;
  margin: .035em 0;
  color: transparent;            /* de tekst zelf is onzichtbaar; het teken is getekend */
  line-height: 1;
  overflow: visible;
}
.letter > svg,
.letter__glow > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.letter__groove { z-index: 0; }

/* Obsidiaan-metaal. De glans is een gradient die vast aan het scherm hangt
   (JS zet --sy per frame, --ly per letter) en over de letters glijdt;
   daarboven ouderdom (--wear): mat geworden plekken, krassen, putjes, Mars-stof.
   De vorm — met alle happen, barsten en afgebroken stukken — komt uit het masker (--metal). */
.letter::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    var(--wear, none),
    linear-gradient(180deg,
      #15161b 0%,
      #2c2f38 15%,
      #121317 28%,
      #3a3e4b 41%,
      #767c8e 46%,
      #0a0a0d 49%,
      #17181e 62%,
      #08080a 80%,
      #14151a 100%);
  background-size: 512px 1024px, 100% 100vh;
  background-position:
    0 calc(var(--ly, 0) * -1px),
    0 calc((var(--sy, 0) - var(--ly, 0)) * 1px);
  -webkit-mask: var(--metal) center / 100% 100% no-repeat;
  mask: var(--metal) center / 100% 100% no-repeat;
  opacity: 0;
  transition: opacity 1.6s ease;
  transition-delay: inherit;     /* de letters lichten één voor één op */
}

/* Schaduw van de groefwand op het metaal (boven/links) — het ligt dieper dan de steen */
.letter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 0, 0, .8);
  -webkit-mask: var(--wall) center / 100% 100% no-repeat;
  mask: var(--wall) center / 100% 100% no-repeat;
  filter: blur(.6px);
  opacity: 0;
  transition: opacity 1.6s ease;
  transition-delay: inherit;
  pointer-events: none;
}
.letter.is-lit::after,
.letter.is-lit::before { opacity: 1; }

/* Rand die licht vangt + de gloeiende amber kern door elke streek (getekend door JS) */
.letter__fx {
  z-index: 3;
  opacity: 0;
  transition: opacity 1.6s ease;
  transition-delay: inherit;
}
.letter.is-lit .letter__fx { opacity: 1; }
/* Gloed van de letters: de wrapper verschijnt één keer; de lagen erin ademen
   als hele laag (will-change), zonder dat er opnieuw getekend hoeft te worden. */
.letter__glow {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
  transition-delay: inherit;
}
.letter.is-lit .letter__glow { opacity: 1; }
.letter__core,
.letter__acc { will-change: opacity; }
.letter__core-paint {
  filter: drop-shadow(0 0 1.5px rgba(255, 170, 80, 1)) drop-shadow(0 0 6px rgba(255, 120, 35, .8)) drop-shadow(0 0 16px rgba(255, 90, 20, .35));
}
.letter__core { animation: core-breathe 10s ease-in-out infinite; }
.monolith__title.is-awake .letter__core { animation: core-awake 4s ease-in-out infinite; }
@keyframes core-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes core-awake   { 0%, 100% { opacity: .9; } 50% { opacity: 1; } }

/* Amber inlegwerk in de letters: ademt mee met de inscripties, licht op bij hover */
.letter__acc-paint {
  filter: drop-shadow(0 0 2px rgba(255, 160, 70, .95)) drop-shadow(0 0 8px rgba(255, 110, 30, .55));
}
.letter__acc { animation: acc-breathe 9s ease-in-out infinite; }
.monolith__title.is-awake .letter__acc { animation: acc-awake 5s ease-in-out infinite; }
@keyframes acc-breathe { 0%, 100% { opacity: .45; } 50% { opacity: .85; } }
@keyframes acc-awake   { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }

/* ---------- Producten ---------- */
.products {
  position: relative;
  z-index: 2;
  padding-bottom: 30vh;
}

.product {
  position: relative;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10vh calc(var(--mw) * .1);
  text-align: center;
}

/* lichtstreep die over de steen trekt bij het onthullen */
.product::after {
  content: "";
  position: absolute;
  inset: -10% -60%;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 40%,
    rgba(255, 255, 255, .06) 47%,
    rgba(255, 255, 255, .15) 50%,
    rgba(255, 255, 255, .06) 53%,
    transparent 60%);
  transform: translateX(-100%);
}
.product.is-revealed::after {
  animation: sweep 2.4s .25s cubic-bezier(.3, .6, .2, 1) forwards;
}

.product__index {
  font: 400 11px/1 var(--f-mono);
  letter-spacing: .32em;
  color: rgba(255, 255, 255, .3);
  margin-bottom: calc(var(--mw) * .09);
}

.product__logo {
  width: 52%;
  height: auto;
  opacity: .05;
  filter: blur(8px) drop-shadow(0 0 0 rgba(170, 200, 255, 0));
  transform: scale(.9);
  transition:
    opacity 1.6s ease,
    filter 1.6s ease,
    transform 2s cubic-bezier(.16, .84, .24, 1);
}
.is-revealed .product__logo {
  opacity: 1;
  filter: blur(0) drop-shadow(0 0 16px rgba(170, 200, 255, .28));
  transform: none;
}

.product__name,
.product__desc,
.product__link {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.1s ease, transform 1.3s cubic-bezier(.16, .84, .24, 1);
}
.is-revealed .product__name { transition-delay: .5s; }
.is-revealed .product__desc { transition-delay: .7s; }
.is-revealed .product__link { transition-delay: .9s; }
.is-revealed .product__name,
.is-revealed .product__desc,
.is-revealed .product__link { opacity: 1; transform: none; }

.product__name {
  margin: calc(var(--mw) * .1) 0 0;
  padding-left: .22em;           /* compenseert letter-spacing */
  font: 600 calc(var(--mw) * .06) / 1.2 var(--f-display);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #f2f4f9;
}

.product__desc {
  margin: 14px 0 0;
  max-width: 30ch;
  font: 400 clamp(12px, calc(var(--mw) * .036), 14px) / 1.6 var(--f-body);
  color: rgba(220, 226, 238, .62);
}

.product__link {
  margin-top: 22px;
  padding: 11px 16px;
  border: 1px solid rgba(255, 255, 255, .2);
  color: var(--ink);
  font: 500 11px/1 var(--f-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition-property: opacity, transform, background-color, border-color;
}
.product__link:hover {
  background-color: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .45);
}

/* =========================================================
   ZAND + DOORSNEDE (footer)
   ========================================================= */

.underground {
  position: relative;            /* géén z-index, zie .world */
  min-height: 96vh;
  color: var(--sand-cream);
}

.underground__soil {
  position: absolute;
  left: 0;
  top: -16vh;                    /* kraterrand en achterwand van de kom boven de snijlijn */
  width: 100%;
  height: calc(100% + 16vh);
  z-index: 3;                    /* vóór de monoliet: de voet verdwijnt in het zand */
  /* fallback tot de korrels getekend zijn */
  background: linear-gradient(transparent 16vh, #96624a 16vh, #724832 35%, #3a2418 65%, #120a06);
}

/* Artefacten, half begraven */
.underground__artifacts {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}
.artifact {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  transform: rotate(var(--r, 0deg));
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)) saturate(.85) brightness(var(--b, 1));
}
.artifact::before {                      /* holte in de aarde */
  content: "";
  position: absolute;
  inset: -16%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(18, 9, 3, .5), rgba(18, 9, 3, .2) 60%, transparent);
}
.artifact svg { display: block; width: 100%; height: auto; overflow: visible; }

.artifact--ammonite { --x: 5%;   --y: 15vh; --w: clamp(56px, 6vw, 92px);  --r: -12deg; }
.artifact--fish     { --x: 19%;  --y: 33vh; --w: clamp(110px, 12vw, 180px); --r: 6deg;  --b: .85; }
.artifact--amphora  { --x: 1.5%; --y: 58vh; --w: clamp(60px, 6.5vw, 100px); --r: -64deg; --b: .7; }
.artifact--coin     { --x: 6%;   --y: 84vh; --w: clamp(30px, 2.8vw, 44px); --r: 20deg; --b: .55; }
.artifact--bone     { --x: 70%;  --y: 12vh; --w: clamp(110px, 12vw, 180px); --r: -18deg; }
.artifact--axe      { --x: 84%;  --y: 34vh; --w: clamp(44px, 4.5vw, 70px);  --r: 24deg; --b: .8; }
.artifact--skeleton { --x: 52%;  --y: 30vh; --w: clamp(220px, 22vw, 340px); --r: -3deg; --b: .92; }

@media (max-width: 760px) {
  .artifact--ammonite { --x: 6%;  --y: 16vh; }
  .artifact--bone     { --x: 58%; --y: 21vh; --w: 34vw; }
  .artifact--skeleton { --x: 14%; --y: 28vh; --w: 70vw; }
  .artifact--fish,
  .artifact--amphora,
  .artifact--coin,
  .artifact--axe { display: none; }
}

.underground__content {
  position: relative;
  z-index: 4;
  max-width: 1120px;
  margin: 0 auto;
  padding: 56vh 24px 36px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 32px;
  text-shadow: 0 1px 3px rgba(15, 7, 2, .7);
}

.fc-logo {
  margin: 0;
  font: 700 20px/1 var(--f-display);
  letter-spacing: .32em;
}
.fc-tagline {
  margin: 14px 0 0;
  font-size: 15px;
  color: rgba(246, 234, 208, .75);
}

.fc-col h2 {
  margin: 0 0 14px;
  font: 400 11px/1 var(--f-mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(246, 234, 208, .6);
}
.fc-col ul {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 9px;
  font: 400 15px/1.4 var(--f-body);
}
.fc-col a {
  color: #fbf1dc;
  text-decoration: none;
  border-bottom: 1px solid rgba(251, 241, 220, .28);
  transition: border-color .25s;
}
.fc-col a:hover { border-color: rgba(251, 241, 220, .9); }

.fc-credit {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  opacity: .7;
}
.fc-bottom {
  grid-column: 1 / -1;
  margin: 5vh 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(246, 234, 208, .14);
  font: 400 12px/1.4 var(--f-mono);
  letter-spacing: .08em;
  color: rgba(246, 234, 208, .5);
}

@media (max-width: 760px) {
  .underground__content {
    grid-template-columns: 1fr 1fr;
    padding-top: 48vh;
    gap: 28px 20px;
  }
  .fc-brand { grid-column: 1 / -1; }
}

/* =========================================================
   HUD — hoogtemeter en scroll-hint
   ========================================================= */

.altimeter {
  position: fixed;
  right: clamp(12px, 3vw, 40px);
  top: 50%;
  z-index: 6;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font: 400 10px/1.2 var(--f-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  pointer-events: none;
  animation: fade-in 1.2s 2.4s both;
}
.altimeter__value {
  font-size: 13px;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.altimeter__track {
  position: relative;
  width: 1px;
  height: 46vh;
  margin: 8px 3px 0 0;
  background: rgba(255, 255, 255, .28);
}
.altimeter__dot {
  position: absolute;
  left: -3px; top: 0;
  z-index: 1;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, .8);
}

/* markeringen: een streepje op de schaal, ernaast naam + hoogte */
.altimeter__marks {
  list-style: none;
  margin: 0;
  padding: 0;
}
.altimeter__mark {
  position: absolute;
  right: -4px;
  transform: translateY(-50%);
}
.altimeter__mark a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 4px 10px;
  color: rgba(255, 255, 255, .5);
  text-decoration: none;
  pointer-events: auto;
  transition: color .3s ease;
}
.altimeter__mark a::after {          /* streepje op de schaal */
  content: "";
  width: 9px;
  height: 1px;
  background: currentColor;
}
.altimeter__name { white-space: nowrap; }
.altimeter__at {
  order: -1;
  font-size: 9px;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .35);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity .3s ease;
}
.altimeter__mark a:hover,
.altimeter__mark a:focus-visible,
.altimeter__mark.is-active a { color: #fff; }
.altimeter__mark a:hover .altimeter__at,
.altimeter__mark a:focus-visible .altimeter__at { opacity: 1; }

@media (max-width: 640px) {
  .scroll-hint { display: none; }
  .product__link { letter-spacing: .1em; padding: 10px 12px; }
  /* smal scherm: alleen de schaal met tikbare streepjes */
  .altimeter { right: 8px; }
  .altimeter__label,
  .altimeter__value { display: none; }
  .altimeter__track { height: 56vh; }
  .altimeter__mark a { padding: 10px 0 10px 18px; }
  .altimeter__name,
  .altimeter__at {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}

.scroll-hint { display: none; }
  .product__link { letter-spacing: .1em; padding: 10px 12px; }
}

.scroll-hint {
  position: fixed;
  left: clamp(16px, 4vw, 48px);
  bottom: 32px;
  z-index: 6;
  transition: opacity .6s ease;
  pointer-events: none;
}
.scroll-hint.is-hidden { opacity: 0; }
.scroll-hint__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 400 11px/1 var(--f-mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  animation: fade-in 1.2s 2.8s both;
}
.scroll-hint__line {
  width: 1px;
  height: 40px;
  background: linear-gradient(transparent, rgba(255, 255, 255, .85));
  transform-origin: top;
  animation: drip 2.2s 3s ease-in-out infinite;
}

/* =========================================================
   ANIMATIES
   ========================================================= */

@keyframes bloom  { from { opacity: 0; transform: scale(.4); } }
@keyframes flare  { from { opacity: 0; transform: scaleX(.1); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes sweep  { to { transform: translateX(100%); } }
@keyframes breathe { 0%, 100% { opacity: .12; } 50% { opacity: .85; } }
@keyframes seam { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes drip {
  0%   { transform: scaleY(0); opacity: 1; }
  60%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}