/* Crop Dust · placeholder page
   Plain CSS, no JavaScript. Light and dark via light-dark(), which follows
   prefers-color-scheme. Motion is off under prefers-reduced-motion. */

@font-face {
  font-family: "Fugaz One";
  src: url("/fonts/fugaz-one-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Azeret Mono";
  src: url("/fonts/azeret-mono-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --sky-top: light-dark(#cfe0e4, #070b16);
  --sky-hz:  light-dark(#f4dfa6, #2c2717);
  --sun:     light-dark(#fff6d2, #e6dfc4);
  --row-a:   light-dark(#ecc85f, #1f2a18);
  --row-b:   light-dark(#b58e2a, #0d130b);
  --row-c:   light-dark(#f3d98e, #27331c);
  --ink:     light-dark(#1d2716, #f3dc8e);
  --ink-2:   light-dark(#5f5536, #b3a97f);
  --accent:  light-dark(#ee4b1f, #ff6a3a);
  --glass:   light-dark(#1d2716, #ffe9a8);
  --dust:    light-dark(#f8ebc0, #857a55);
  --paper:   light-dark(#fcf4dc, #10150c);

  --hz: 60vh;                 /* where the field meets the sky */
  --sun-x: 86%;
  --sun-y: calc(var(--hz) - 17vmin);
  --sun-r: 26vmin;
  --t0: .35s;                 /* page-load offset for every animation */
  --lap: 16s;                 /* one full circuit of the plane */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --fs: clamp(4.5rem, 16vw, 16rem);
}

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

html, body { overflow-x: clip; }

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  font-family: "Azeret Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--ink);
  background: var(--sky-top);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: #fff; }

a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }

/* ---------- backdrop ---------- */

.sky {
  position: fixed; inset: 0; z-index: -3;
  background:
    radial-gradient(var(--sun-r) var(--sun-r) at var(--sun-x) var(--sun-y), var(--sun) 0 46%, transparent 52%),
    linear-gradient(to bottom, var(--sky-top) 0, var(--sky-top) 18%, var(--sky-hz) var(--hz), var(--sky-hz) 100%);
}

.field {
  position: fixed; z-index: -2;
  left: -40vw; right: -40vw;
  top: var(--hz); height: 160vh;
  transform-origin: 50% 0;
  transform: perspective(55vh) rotateX(58deg);
  background:
    repeating-linear-gradient(90deg,
      transparent 0 21.5vw, var(--row-c) 21.5vw 22.5vw),
    repeating-linear-gradient(90deg,
      var(--row-a) 0 2.4vw, var(--row-b) 2.4vw 3.3vw);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
}

.grain {
  position: fixed; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  opacity: .16;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.cropmarks {
  --len: 1.4rem; --thick: 1.5px; --pad: 1.1rem;
  position: fixed; inset: var(--pad); z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) top    left  / var(--len)   var(--thick) no-repeat,
    linear-gradient(var(--ink), var(--ink)) top    left  / var(--thick) var(--len)   no-repeat,
    linear-gradient(var(--ink), var(--ink)) top    right / var(--len)   var(--thick) no-repeat,
    linear-gradient(var(--ink), var(--ink)) top    right / var(--thick) var(--len)   no-repeat,
    linear-gradient(var(--ink), var(--ink)) bottom left  / var(--len)   var(--thick) no-repeat,
    linear-gradient(var(--ink), var(--ink)) bottom left  / var(--thick) var(--len)   no-repeat,
    linear-gradient(var(--ink), var(--ink)) bottom right / var(--len)   var(--thick) no-repeat,
    linear-gradient(var(--ink), var(--ink)) bottom right / var(--thick) var(--len)   no-repeat;
  opacity: .8;
}

/* ---------- footer ---------- */

.bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 2rem 2.4rem;
  text-transform: uppercase;
  position: relative; z-index: 2;
}

.bottom { justify-content: center; gap: .9rem; font-size: .72rem; color: var(--ink-2); }
.bottom a { color: var(--ink); border-bottom: 1.5px solid currentColor; padding-bottom: .1em; }
.bottom a:hover { color: var(--accent); }
.sep { opacity: .6; }

/* ---------- stage ---------- */

.stage {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2.6rem;
  padding: 0 1rem 4vh;
  position: relative; z-index: 2;
}

.wordmark {
  position: relative;
  margin: 0;
  font-family: "Fugaz One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-size: var(--fs);
  line-height: .9;
  letter-spacing: -.015em;
  text-transform: uppercase;
  display: flex; flex-wrap: wrap; justify-content: center;
  column-gap: .22em;
  color: var(--ink);
  text-shadow: .035em .035em 0 var(--accent);
}
.w { display: flex; }

.l {
  position: relative; z-index: 0;
  display: inline-block;
  opacity: 0;
  animation: settle 1.1s var(--ease) both;
  animation-delay: calc(var(--t0) + var(--d));
}
.l::after {              /* the puff of dust each letter lands in */
  content: "";
  position: absolute; z-index: -1;
  inset: -.15em -.2em;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--dust) 0 40%, transparent 100%);
  opacity: 0;
  animation: puff 1.5s ease-out both;
  animation-delay: inherit;
}

/* Reveal order follows the plane's first low pass, left to right. */
.w1 .l:nth-child(1) { --d: .58s; }
.w1 .l:nth-child(2) { --d: 1.2s; }
.w1 .l:nth-child(3) { --d: 1.82s; }
.w1 .l:nth-child(4) { --d: 2.44s; }
.w2 .l:nth-child(1) { --d: 3.68s; }
.w2 .l:nth-child(2) { --d: 4.3s; }
.w2 .l:nth-child(3) { --d: 4.92s; }
.w2 .l:nth-child(4) { --d: 5.54s; }

@keyframes settle {
  from { opacity: 0; transform: translateY(-.28em) scale(1.06); filter: blur(10px); }
  to   { opacity: 1; transform: none;                            filter: blur(0);   }
}
@keyframes puff {
  0%   { opacity: .8; transform: scale(.4); }
  100% { opacity: 0;  transform: scale(1.9) translateY(.08em); }
}

/* ---------- the plane ---------- */

.flight {
  position: absolute; left: 50%; top: 0;
  width: 0; height: 0;
  pointer-events: none;
}

.plane {
  --low:  -.42em;
  --high: -16vh;
  position: absolute;
  width: 1.05em; height: .49em;
  left: -.525em; top: -.245em;
  transform: translate(-46vw, var(--low));
  animation: fly var(--lap) linear infinite;
  animation-delay: var(--t0);
  will-change: transform;
}
.craft { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.craft .body  { fill: var(--accent); }
.craft .glass { fill: var(--glass); }
.craft .dark  { fill: var(--glass); }
.craft .strut { fill: none; stroke: var(--glass); stroke-width: 2.2; stroke-linecap: round; }
.craft .prop  { fill: var(--glass); opacity: .55; animation: prop .12s steps(2) infinite; }

.trail {
  position: absolute;
  right: 45%; top: 22%;
  width: 3.4em; height: .7em;
  background:
    radial-gradient(14% 40% at 93% 40%, var(--dust) 0 45%, transparent 100%),
    radial-gradient(16% 50% at 80% 60%, var(--dust) 0 40%, transparent 100%),
    radial-gradient(18% 55% at 64% 42%, var(--dust) 0 35%, transparent 100%),
    radial-gradient(20% 62% at 46% 62%, var(--dust) 0 30%, transparent 100%),
    radial-gradient(24% 70% at 26% 48%, var(--dust) 0 25%, transparent 100%),
    radial-gradient(26% 74% at 8% 58%, var(--dust) 0 20%, transparent 100%);
  filter: blur(7px);
  opacity: .85;
  -webkit-mask-image: radial-gradient(46% 50% at 56% 50%, #000 25%, transparent 100%);
          mask-image: radial-gradient(46% 50% at 56% 50%, #000 25%, transparent 100%);
  animation: trail var(--lap) linear infinite;
  animation-delay: var(--t0);
}

/* One lap: low pass left→right over the letters, climb and bank at the
   right edge, a smaller high pass back the other way, dive at the left
   edge, and straight into the next low pass. The turns stay on screen. */
@keyframes fly {
  0%    { transform: translate(-46vw, var(--low))  scaleX(1)  scale(1);  }
  38%   { transform: translate( 46vw, var(--low))  scaleX(1)  scale(1);  animation-timing-function: ease-in-out; }
  44%   { transform: translate( 50vw, var(--high)) scaleX(-1) scale(.7); animation-timing-function: linear; }
  88%   { transform: translate(-50vw, var(--high)) scaleX(-1) scale(.7); animation-timing-function: ease-in-out; }
  100%  { transform: translate(-46vw, var(--low))  scaleX(1)  scale(1);  }
}
@keyframes trail {
  0%, 36% { opacity: .85; }
  41%, 97% { opacity: 0; }
  100% { opacity: .85; }
}
@keyframes prop { to { transform: scaleY(.35); transform-origin: 50% 50%; } }

/* ---------- status ---------- */

.status {
  margin: 0;
  display: inline-flex; align-items: center; gap: .75em;
  padding: .7em 1.15em .65em;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-weight: 600;
  box-shadow: .25em .25em 0 var(--accent);
  opacity: 0;
  animation: rise .8s var(--ease) both;
  animation-delay: calc(var(--t0) + 3s);
}
.beacon {
  width: .55em; height: .55em; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 .2em color-mix(in srgb, var(--accent) 22%, transparent);
  animation: blink 1.4s steps(2, jump-none) infinite;
}
@keyframes rise  { from { opacity: 0; transform: translateY(.6rem); } to { opacity: 1; transform: none; } }
@keyframes blink { to { opacity: .25; } }

/* ---------- narrow screens: two lines, two low passes ---------- */

@media (max-width: 640px) {
  :root { --fs: clamp(4rem, 22vw, 9rem); --sun-x: 74%; --sun-y: 18vh; }
  .bottom { padding: 1.4rem 1rem; gap: .6rem; font-size: .62rem; letter-spacing: .03em; white-space: nowrap; }
  .wordmark { flex-direction: column; align-items: center; row-gap: .5em; }
  .stage { gap: 2rem; }

  .plane { --low: -.36em; --low2: calc(1.4em + var(--low)); }

  /* Line 1 left→right, bank, line 2 right→left, then a high pass. */
  @keyframes fly {
    0%     { transform: translate(-72vw, var(--low))  scaleX(1)  scale(1); }
    30%    { transform: translate( 72vw, var(--low))  scaleX(1)  scale(1); animation-timing-function: ease-in-out; }
    36%    { transform: translate( 72vw, var(--low2)) scaleX(-1) scale(1); animation-timing-function: linear; }
    66%    { transform: translate(-72vw, var(--low2)) scaleX(-1) scale(1); animation-timing-function: ease-in-out; }
    72%    { transform: translate(-78vw, var(--high)) scaleX(1)  scale(.55); animation-timing-function: linear; }
    94%    { transform: translate( 78vw, var(--high)) scaleX(1)  scale(.55); }
    94.01% { transform: translate(-72vw, var(--low))  scaleX(1)  scale(1); }
    100%   { transform: translate(-72vw, var(--low))  scaleX(1)  scale(1); }
  }
  @keyframes trail {
    0%, 64%  { opacity: 1; }
    70%, 100% { opacity: 0; }
  }

  .w1 .l:nth-child(1) { --d: 1.6s; }
  .w1 .l:nth-child(2) { --d: 2.05s; }
  .w1 .l:nth-child(3) { --d: 2.5s; }
  .w1 .l:nth-child(4) { --d: 2.95s; }
  .w2 .l:nth-child(4) { --d: 6.9s; }
  .w2 .l:nth-child(3) { --d: 7.45s; }
  .w2 .l:nth-child(2) { --d: 8s; }
  .w2 .l:nth-child(1) { --d: 8.55s; }
  .status { animation-delay: calc(var(--t0) + 3.4s); }
}

@media (max-height: 520px) {
  :root { --fs: clamp(3rem, 12vh, 15rem); }
}

/* ---------- dark: grain blends the other way ---------- */

@media (prefers-color-scheme: dark) {
  .grain { mix-blend-mode: screen; opacity: .09; }
  :root { --sun-x: 84%; --sun-y: calc(var(--hz) - 34vmin); --sun-r: 18vmin; }
  .sky { background:
    radial-gradient(var(--sun-r) var(--sun-r) at var(--sun-x) var(--sun-y), var(--sun) 0 46%, transparent 52%),
    linear-gradient(to bottom, var(--sky-top) 0, var(--sky-top) 25%, var(--sky-hz) var(--hz), var(--sky-hz) 100%); }
}

/* ---------- reduced motion: everything parked, everything visible ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .l, .status { opacity: 1; }
  .plane { transform: translate(30vw, var(--low)); }
  .trail { opacity: .85; }
  .beacon { opacity: 1; }
}