/* ERELON — one page: the name, a dive, the floor.

   Tokens, three layers:
     primitive  raw colours sampled from the owner's ERELON wordmark
     semantic   what a colour is FOR
     component  kept next to the one thing that uses it */

:root {
  /* ---- primitive ---- */
  --green-950: #041a17;
  --green-800: #0e433c; /* the wordmark's background, exactly */
  --gold-700: #a88f4e; /* the foil's shadow side */
  --gold-500: #c5ad78;
  --gold-300: #dfcb9e;
  --gold-100: #f5e6be; /* the foil's highlight */

  /* ---- semantic ---- */
  --bg: var(--green-800);
  --abyss: var(--green-950);
  --ink: var(--gold-100);
  --muted: var(--gold-500);
  /* The foil, as sampled left to right across the wordmark. */
  --foil: linear-gradient(
    100deg,
    var(--gold-700) 0%,
    var(--gold-500) 18%,
    var(--gold-100) 40%,
    var(--gold-300) 56%,
    #b39a5c 80%,
    var(--gold-700) 100%
  );
  /* The same foil twice over, so sliding it one period is a seamless sheen. */
  --foil-sweep: linear-gradient(
    100deg,
    var(--gold-700) 0%,
    var(--gold-500) 9%,
    var(--gold-100) 20%,
    var(--gold-300) 28%,
    #b39a5c 40%,
    var(--gold-700) 50%,
    var(--gold-500) 59%,
    var(--gold-100) 70%,
    var(--gold-300) 78%,
    #b39a5c 90%,
    var(--gold-700) 100%
  );
  --serif: "Cormorant Garamond", Georgia, serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

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

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}
h1,
p {
  margin: 0;
}
::selection {
  background: var(--gold-500);
  color: var(--abyss);
}

.foil {
  background: var(--foil);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- The water ---------- */

.deep {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg) url("assets/deep.webp") center / cover no-repeat;
}
.deep video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Light from above, darker below, and darker still the deeper you are. */
.shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(14 67 60 / 0) 0%, rgb(4 26 23 / 0.55) 100%);
}
.shade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--abyss);
  opacity: 0.3;
}
/* The browser runs this from the scroll position, off the main thread.
   Browsers without scroll timelines keep the fixed middle depth above. */
@supports (animation-timeline: scroll()) {
  .shade::after {
    animation: sink linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes sink {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.75;
  }
}

/* ---------- The car ---------- */

/* Directly on the page, not inside anything with its own layer, so the
   blend reaches the water behind. main.js sets size, frame and opacity. */
.car-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}
.car-layer.is-body {
  mix-blend-mode: multiply;
}
.car-layer.is-glow {
  mix-blend-mode: screen;
}

/* ---------- The surface: the name ---------- */

.surface {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 0 16px;
  text-align: center;
  overflow: clip; /* the glow behind the name is wider than the screen */
}
/* A soft dark pool behind the words, so gold reads over the brightest rays. */
.surface::before {
  content: "";
  position: absolute;
  inset: 22% -10% 18%;
  background: radial-gradient(closest-side, rgb(4 26 23 / 0.5), transparent);
  pointer-events: none;
}
.surface-inner {
  position: relative;
  display: grid;
  justify-items: center;
}

.word {
  display: grid;
  font: 500 clamp(2.6rem, 12vw, 10.5rem) / 1 var(--serif);
  letter-spacing: 0.46em;
  /* Tracking also adds space after the last letter; this balances it. */
  padding-left: 0.46em;
}
.word > span {
  grid-area: 1 / 1;
}
.word .foil {
  background-image: var(--foil-sweep);
  background-size: 200% 100%;
  animation:
    rise 1.8s var(--ease) both,
    sheen 3.6s ease-in-out 0.6s both;
}
/* Light moving across the letters, the way water throws it. */
.word-light {
  color: transparent;
  background: url("assets/caustics.webp") 0 0 / 240px 240px repeat;
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0.45;
  animation:
    rise 1.8s var(--ease) both,
    ripple 16s linear infinite;
}

.rule {
  display: block;
  width: 88px;
  height: 1px;
  margin: clamp(22px, 3vw, 36px) 0 clamp(16px, 2vw, 24px);
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
  animation: fade 1.4s var(--ease) 0.8s both;
}
.motto {
  font: italic 400 clamp(1.4rem, 4.6vw, 2.4rem) / 1.2 var(--serif);
  color: var(--gold-300);
  animation: fade 1.4s var(--ease) 1s both;
}

/* A thread of light, pointing down. */
.cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  width: 1px;
  height: 56px;
  background: linear-gradient(var(--gold-500), transparent);
  transform-origin: top;
  animation:
    fade 1.4s var(--ease) 1.6s both,
    drop 2.6s var(--ease) 2s infinite;
}

/* Opening moves start at .01, not 0: from 0 the wordmark would not count
   as painted and the first big paint would land late. */
@keyframes rise {
  from {
    opacity: 0.01;
    transform: translateY(14px);
  }
}
@keyframes fade {
  from {
    opacity: 0.01;
  }
}
@keyframes sheen {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}
@keyframes ripple {
  to {
    background-position: 240px 480px;
  }
}
@keyframes drop {
  0% {
    transform: scaleY(0);
  }
  50% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(1) translateY(24px);
    opacity: 0;
  }
}

/* ---------- The dive and the floor ---------- */

/* Its height is how long the dive lasts: longer = slower tumble. */
.descent {
  height: 320svh;
}

.floor {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  min-height: 70svh;
  padding: 0 16px 40px;
  text-align: center;
}
.floor-word {
  padding-left: 0.46em;
  font: 500 clamp(1.4rem, 5vw, 2.4rem) / 1 var(--serif);
  letter-spacing: 0.46em;
}
.floor-note {
  font: 400 13px/1 var(--serif);
  letter-spacing: 0.2em;
  color: var(--muted);
}

/* ---------- Calm ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
  }
  /* Still water: the poster frame only. */
  .deep video {
    display: none;
  }
}