/* dayum — brand tokens come straight from the logo spec sheet:
   navy on white, Poppins Light, no gradients and no shadows. */

:root {
  --navy: #020E36;
  --ground: #FFFFFF;
  --hairline: rgba(2, 14, 54, 0.14);
  --muted: rgba(2, 14, 54, 0.45);

  /* The drifting background glyphs: a whisper, not a pattern. */
  --drift-opacity: 0.03;

  --font: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* The spec asks for a free zone around the mark. The logo file is
     trimmed to the ink, so the whole free zone is supplied here. */
  --free-zone: clamp(28px, 7vw, 88px);
}

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

html {
  height: 100%;
}

body {
  min-height: 100%;
  min-height: 100svh;
  margin: 0;
  display: flex;
  flex-direction: column;

  background: var(--ground);
  color: var(--navy);
  font-family: var(--font);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Ambient background: the mark taken apart. The chevron and the slash drift
   alone, never as the whole lockup — a repeated lockup reads as a watermark.
   Fixed behind everything, never interactive, and still under reduced motion. */
.drift {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Sized by height, so a chevron and a slash given the same number carry the
   same weight; the width follows from the artwork. */
.drift__mark {
  position: absolute;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: var(--drift-opacity);
  will-change: transform;
}

.drift__mark--chevron { background-image: url("assets/chevron.png"); aspect-ratio: 441 / 600; }
.drift__mark--slash   { background-image: url("assets/slash.png");   aspect-ratio: 421 / 599; }

/* Placed by pushing the glyphs apart until none overlap and none sit behind
   the lockup. One line each: where it sits, how big, which path. The negative
   delays start every glyph mid-path, so none of them set off together. */
.drift__pos--01 { top:  1.4%; left:  3.8%; height: 11vmin; animation: drift-a  68s ease-in-out  -4s infinite alternate; }
.drift__pos--02 { top:  8.0%; left: 13.6%; height:  7vmin; animation: drift-b  79s ease-in-out -21s infinite alternate; }
.drift__pos--03 { top:  0.4%; left: 22.6%; height: 15vmin; animation: drift-c  90s ease-in-out -38s infinite alternate; }
.drift__pos--04 { top:  4.3%; left: 35.3%; height:  6vmin; animation: drift-d 101s ease-in-out -55s infinite alternate; }
.drift__pos--05 { top:  2.0%; left: 43.5%; height: 10vmin; animation: drift-a 112s ease-in-out -72s infinite alternate; }
.drift__pos--06 { top:  4.9%; left: 53.2%; height:  6vmin; animation: drift-b 123s ease-in-out -17s infinite alternate; }
.drift__pos--07 { top:  3.8%; left: 61.9%; height:  9vmin; animation: drift-c 134s ease-in-out -34s infinite alternate; }
.drift__pos--08 { top:  4.5%; left: 73.2%; height:  8vmin; animation: drift-d  77s ease-in-out -51s infinite alternate; }
.drift__pos--09 { top:  2.8%; left: 82.7%; height:  9vmin; animation: drift-a  88s ease-in-out -68s infinite alternate; }
.drift__pos--10 { top:  6.7%; left: 92.5%; height:  5vmin; animation: drift-b  99s ease-in-out -13s infinite alternate; }
.drift__pos--11 { top: 26.8%; left:  3.7%; height: 12vmin; animation: drift-c 110s ease-in-out -30s infinite alternate; }
.drift__pos--12 { top: 28.8%; left: 12.9%; height:  7vmin; animation: drift-d 121s ease-in-out -47s infinite alternate; }
.drift__pos--13 { top: 23.5%; left: 22.3%; height: 13vmin; animation: drift-a 132s ease-in-out -64s infinite alternate; }
.drift__pos--14 { top: 25.0%; left: 34.4%; height:  4vmin; animation: drift-b  75s ease-in-out  -9s infinite alternate; }
.drift__pos--15 { top: 18.0%; left: 41.8%; height: 11vmin; animation: drift-c  86s ease-in-out -26s infinite alternate; }
.drift__pos--16 { top: 22.0%; left: 52.6%; height:  7vmin; animation: drift-d  97s ease-in-out -43s infinite alternate; }
.drift__pos--17 { top: 14.0%; left: 61.6%; height: 15vmin; animation: drift-a 108s ease-in-out -60s infinite alternate; }
.drift__pos--18 { top: 23.8%; left: 73.6%; height:  6vmin; animation: drift-b 119s ease-in-out  -5s infinite alternate; }
.drift__pos--19 { top: 27.3%; left: 82.6%; height: 10vmin; animation: drift-c 130s ease-in-out -22s infinite alternate; }
.drift__pos--20 { top: 27.0%; left: 92.5%; height:  6vmin; animation: drift-d  73s ease-in-out -39s infinite alternate; }
.drift__pos--21 { top: 43.3%; left:  2.9%; height:  9vmin; animation: drift-a  84s ease-in-out -56s infinite alternate; }
.drift__pos--22 { top: 49.0%; left: 15.1%; height:  8vmin; animation: drift-b  95s ease-in-out -73s infinite alternate; }
.drift__pos--23 { top: 43.1%; left: 25.0%; height:  9vmin; animation: drift-c 106s ease-in-out -18s infinite alternate; }
.drift__pos--24 { top: 56.0%; left: 34.8%; height:  5vmin; animation: drift-d 117s ease-in-out -35s infinite alternate; }
.drift__pos--25 { top: 56.0%; left: 42.8%; height: 12vmin; animation: drift-a 128s ease-in-out -52s infinite alternate; }
.drift__pos--26 { top: 56.0%; left: 54.5%; height:  7vmin; animation: drift-b  71s ease-in-out -69s infinite alternate; }
.drift__pos--27 { top: 40.5%; left: 68.0%; height: 13vmin; animation: drift-c  82s ease-in-out -14s infinite alternate; }
.drift__pos--28 { top: 46.9%; left: 74.7%; height:  4vmin; animation: drift-d  93s ease-in-out -31s infinite alternate; }
.drift__pos--29 { top: 44.6%; left: 81.3%; height: 11vmin; animation: drift-a 104s ease-in-out -48s infinite alternate; }
.drift__pos--30 { top: 49.1%; left: 93.9%; height:  7vmin; animation: drift-b 115s ease-in-out -65s infinite alternate; }
.drift__pos--31 { top: 60.9%; left:  0.5%; height: 15vmin; animation: drift-c 126s ease-in-out -10s infinite alternate; }
.drift__pos--32 { top: 70.2%; left: 12.3%; height:  6vmin; animation: drift-d  69s ease-in-out -27s infinite alternate; }
.drift__pos--33 { top: 66.2%; left: 22.1%; height: 10vmin; animation: drift-a  80s ease-in-out -44s infinite alternate; }
.drift__pos--34 { top: 65.4%; left: 33.0%; height:  6vmin; animation: drift-b  91s ease-in-out -61s infinite alternate; }
.drift__pos--35 { top: 68.2%; left: 44.9%; height:  9vmin; animation: drift-c 102s ease-in-out  -6s infinite alternate; }
.drift__pos--36 { top: 63.7%; left: 52.6%; height:  8vmin; animation: drift-d 113s ease-in-out -23s infinite alternate; }
.drift__pos--37 { top: 65.9%; left: 64.4%; height:  9vmin; animation: drift-a 124s ease-in-out -40s infinite alternate; }
.drift__pos--38 { top: 69.1%; left: 74.5%; height:  5vmin; animation: drift-b 135s ease-in-out -57s infinite alternate; }
.drift__pos--39 { top: 65.7%; left: 83.2%; height: 12vmin; animation: drift-c  78s ease-in-out -74s infinite alternate; }
.drift__pos--40 { top: 64.0%; left: 94.7%; height:  7vmin; animation: drift-d  89s ease-in-out -19s infinite alternate; }
.drift__pos--41 { top: 86.5%; left:  0.5%; height: 13vmin; animation: drift-a 100s ease-in-out -36s infinite alternate; }
.drift__pos--42 { top: 91.3%; left: 15.4%; height:  4vmin; animation: drift-b 111s ease-in-out -53s infinite alternate; }
.drift__pos--43 { top: 81.6%; left: 24.2%; height: 11vmin; animation: drift-c 122s ease-in-out -70s infinite alternate; }
.drift__pos--44 { top: 87.4%; left: 34.4%; height:  7vmin; animation: drift-d 133s ease-in-out -15s infinite alternate; }
.drift__pos--45 { top: 79.9%; left: 42.9%; height: 15vmin; animation: drift-a  76s ease-in-out -32s infinite alternate; }
.drift__pos--46 { top: 86.4%; left: 53.8%; height:  6vmin; animation: drift-b  87s ease-in-out -49s infinite alternate; }
.drift__pos--47 { top: 82.4%; left: 64.0%; height: 10vmin; animation: drift-c  98s ease-in-out -66s infinite alternate; }
.drift__pos--48 { top: 85.5%; left: 74.9%; height:  6vmin; animation: drift-d 109s ease-in-out -11s infinite alternate; }
.drift__pos--49 { top: 85.6%; left: 81.3%; height:  9vmin; animation: drift-a 120s ease-in-out -28s infinite alternate; }
.drift__pos--50 { top: 85.5%; left: 92.2%; height:  8vmin; animation: drift-b 131s ease-in-out -45s infinite alternate; }

/* The page content sits above the drift layer. */
.stage,
.foot {
  position: relative;
  z-index: 1;
}

/* The mark sits in the open space above the footer, which lifts it
   slightly off the true centre of the viewport — where the eye expects it. */
.stage {
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--free-zone);
}

.lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(26px, 5vh, 54px);
}

.lockup__mark {
  display: block;
  width: clamp(210px, 46vw, 470px);
  height: auto;
  animation: settle 900ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* A hairline the exact width of the mark: the one drawn element on the page,
   and the only thing that moves after the logo has landed. */
.lockup__rule {
  width: 100%;
  height: 1px;
  background: var(--hairline);
  transform-origin: center;
  animation: draw 800ms cubic-bezier(0.22, 0.61, 0.36, 1) 520ms both;
}

.foot {
  padding: var(--free-zone);
  padding-top: 0;
  text-align: center;
}

/* The animation sits on the line, not on .foot: translating the footer box
   itself would push past the bottom of the page and flash a scrollbar. */
.foot__line {
  margin: 0;
  animation: settle 800ms cubic-bezier(0.22, 0.61, 0.36, 1) 900ms both;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--muted);
}

/* Fifty glyphs crowd a phone; twenty-five is still a field. */
@media (max-width: 600px) {
  .drift__pos--02,
  .drift__pos--04,
  .drift__pos--06,
  .drift__pos--08,
  .drift__pos--10,
  .drift__pos--12,
  .drift__pos--14,
  .drift__pos--16,
  .drift__pos--18,
  .drift__pos--20,
  .drift__pos--22,
  .drift__pos--24,
  .drift__pos--26,
  .drift__pos--28,
  .drift__pos--30,
  .drift__pos--32,
  .drift__pos--34,
  .drift__pos--36,
  .drift__pos--38,
  .drift__pos--40,
  .drift__pos--42,
  .drift__pos--44,
  .drift__pos--46,
  .drift__pos--48,
  .drift__pos--50 {
    display: none;
  }
}

:focus-visible {
  outline: 1px solid var(--navy);
  outline-offset: 4px;
}

@keyframes settle {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes draw {
  from {
    transform: scaleX(0);
  }
}

/* Each mark wanders a short way and eases back, so there is no jump at the
   end of a cycle. */
@keyframes drift-a { to { transform: translate(7vw, 5vh); } }
@keyframes drift-b { to { transform: translate(-6vw, 7vh); } }
@keyframes drift-c { to { transform: translate(5vw, -6vh); } }
@keyframes drift-d { to { transform: translate(-4vw, -8vh); } }

/* Nothing here depends on motion, so it all simply arrives at rest. */
@media (prefers-reduced-motion: reduce) {
  .lockup__mark,
  .lockup__rule,
  .foot__line,
  .drift__mark {
    animation: none;
  }
}