@font-face {
  font-family: "Basteleur";
  src: url("assets/fonts/basteleur-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Basteleur Moonlight";
  src: url("assets/fonts/basteleur-moonlight.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --canopy-black: #090a09;
  --forest-ink: #0c0d0e;
  --parchment: #e9e0c9;
  --root-umber: #55452f;
  --firefly-gold: #d1bf5d;
  --bellflower-light: #8fa4c8;
  --font-display: "Basteleur", Georgia, "Times New Roman", serif;
  --font-story: "Basteleur Moonlight", "Basteleur", Georgia, "Times New Roman", serif;
  --font-utility: Arial, "Helvetica Neue", sans-serif;
}

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

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--canopy-black);
}

body {
  min-width: 320px;
  color: var(--parchment);
  font-family: var(--font-utility);
}

.scene {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--canopy-black);
}

.artwork {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--canopy-black);
}

/*
 * Every art layer shares one 16:9 artboard. The cover-sized artboard prevents
 * independently positioned glow bugs from drifting out of alignment when the
 * viewport crops the approved landscape composition.
 */
.artboard {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100vw, 177.7778svh);
  height: max(100svh, 56.25vw);
  transform: translate(-50%, -50%);
  user-select: none;
  pointer-events: none;
}

.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.layer-background { z-index: 1; }
.layer-roots { z-index: 2; }
.layer-mascot { z-index: 3; }
.layer-lantern { z-index: 4; }
.layer-moss { z-index: 5; }
.layer-branch { z-index: 6; }

.layer-branch {
  animation: branch-breath 17.3s ease-in-out -6.4s infinite alternate;
  will-change: transform;
}

.layer-shadow {
  z-index: 7;
  opacity: 0.02;
  mix-blend-mode: multiply;
  animation: shadow-breath 15.4s cubic-bezier(0.44, 0.05, 0.56, 0.95) -8.1s infinite;
  will-change: opacity;
}

.layer-lantern-light {
  z-index: 8;
  opacity: 0.04;
  mix-blend-mode: screen;
  animation: lantern-breath 11.6s cubic-bezier(0.42, 0.02, 0.58, 0.98) -4.7s infinite;
  will-change: opacity;
}

.bug-layer {
  position: absolute;
  inset: 0;
  z-index: 9;
}

.bug {
  --bug-duration: 20s;
  --bug-delay: 0s;
  --bug-from-x: -2px;
  --bug-from-y: 2px;
  --bug-to-x: 3px;
  --bug-to-y: -4px;
  --bug-low: 0.22;
  --bug-high: 0.58;
  position: absolute;
  width: 3.333333%;
  aspect-ratio: 1;
  opacity: 0.44;
  transform: translate(-50%, -50%);
  animation: bug-drift var(--bug-duration) ease-in-out var(--bug-delay) infinite alternate;
  will-change: opacity, transform;
}

.bug-01 {
  --bug-duration: 17s;
  --bug-delay: -3s;
  --bug-from-x: -2px;
  --bug-from-y: 2px;
  --bug-to-x: 3px;
  --bug-to-y: -4px;
  --bug-low: 0.23;
  --bug-high: 0.61;
  left: 45.1562%;
  top: 29.7685%;
}

.bug-02 {
  --bug-duration: 21s;
  --bug-delay: -11s;
  --bug-from-x: 1px;
  --bug-from-y: -3px;
  --bug-to-x: -4px;
  --bug-to-y: 1px;
  --bug-low: 0.18;
  --bug-high: 0.55;
  left: 59.5052%;
  top: 44.6296%;
}

.bug-03 {
  --bug-duration: 19s;
  --bug-delay: -6s;
  --bug-from-x: -1px;
  --bug-from-y: -2px;
  --bug-to-x: 4px;
  --bug-to-y: 3px;
  --bug-low: 0.2;
  --bug-high: 0.59;
  left: 91.7969%;
  top: 40.9259%;
}

.bug-04 {
  --bug-duration: 24s;
  --bug-delay: -14s;
  --bug-from-x: 2px;
  --bug-from-y: 1px;
  --bug-to-x: -3px;
  --bug-to-y: -4px;
  --bug-low: 0.16;
  --bug-high: 0.5;
  left: 81.3281%;
  top: 62.1759%;
}

.bug-05 {
  --bug-duration: 15s;
  --bug-delay: -8s;
  --bug-from-x: -3px;
  --bug-from-y: 1px;
  --bug-to-x: 2px;
  --bug-to-y: -3px;
  --bug-low: 0.25;
  --bug-high: 0.62;
  left: 72.6562%;
  top: 72.2685%;
}

.bug-06 {
  --bug-duration: 22s;
  --bug-delay: -4s;
  --bug-from-x: 2px;
  --bug-from-y: -2px;
  --bug-to-x: -3px;
  --bug-to-y: 3px;
  --bug-low: 0.22;
  --bug-high: 0.57;
  left: 19.8438%;
  top: 48.3333%;
}

.bug-07 {
  --bug-duration: 18s;
  --bug-delay: -13s;
  --bug-from-x: -2px;
  --bug-from-y: -1px;
  --bug-to-x: 3px;
  --bug-to-y: 4px;
  --bug-low: 0.19;
  --bug-high: 0.54;
  left: 66.3802%;
  top: 74.3981%;
}

.bug-08 {
  --bug-duration: 25s;
  --bug-delay: -9s;
  --bug-from-x: 1px;
  --bug-from-y: 3px;
  --bug-to-x: -4px;
  --bug-to-y: -2px;
  --bug-low: 0.15;
  --bug-high: 0.48;
  left: 89.7135%;
  top: 74.3981%;
}

@keyframes lantern-breath {
  0%,
  100% { opacity: 0.04; }
  17% { opacity: 0.072; }
  29% { opacity: 0.058; }
  52% { opacity: 0.093; }
  64% { opacity: 0.11; }
  79% { opacity: 0.067; }
  91% { opacity: 0.082; }
}

@keyframes shadow-breath {
  0%,
  100% { opacity: 0.02; }
  24% { opacity: 0.036; }
  41% { opacity: 0.029; }
  63% { opacity: 0.055; }
  82% { opacity: 0.033; }
}

@keyframes branch-breath {
  from { transform: translate3d(-1px, 0, 0); }
  to { transform: translate3d(1px, -1px, 0); }
}

@keyframes bug-drift {
  from {
    opacity: var(--bug-low);
    transform: translate(
      calc(-50% + var(--bug-from-x)),
      calc(-50% + var(--bug-from-y))
    );
  }
  to {
    opacity: var(--bug-high);
    transform: translate(
      calc(-50% + var(--bug-to-x)),
      calc(-50% + var(--bug-to-y))
    );
  }
}

.reduced-motion-art {
  display: none;
  object-fit: fill;
}

.copy {
  position: absolute;
  z-index: 20;
  top: 50%;
  right: clamp(2rem, 7vw, 8rem);
  width: min(43vw, 42rem);
  transform: translateY(-50%);
  text-wrap: balance;
  text-shadow: 0 2px 18px rgb(0 0 0 / 0.82), 0 1px 2px rgb(0 0 0 / 0.95);
}

.eyebrow {
  margin: 0 0 0.85rem;
  color: var(--firefly-gold);
  font: 700 clamp(0.72rem, 0.7rem + 0.2vw, 0.92rem) / 1 var(--font-utility);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  max-width: 9ch;
  color: var(--parchment);
  font: 700 clamp(2.8rem, 2rem + 3.5vw, 6.4rem) / 0.92 var(--font-display);
  letter-spacing: -0.035em;
}

.tagline {
  max-width: 35ch;
  margin: clamp(1rem, 2.2vh, 1.6rem) 0 0;
  color: rgb(233 224 201 / 0.9);
  font: 400 clamp(1rem, 0.9rem + 0.45vw, 1.4rem) / 1.5 var(--font-story);
}

.contact {
  display: inline-block;
  margin-top: clamp(1.5rem, 4vh, 2.8rem);
  color: var(--bellflower-light);
  font-size: clamp(0.84rem, 0.8rem + 0.2vw, 1rem);
  letter-spacing: 0.025em;
  text-decoration-color: rgb(143 164 200 / 0.45);
  text-underline-offset: 0.28em;
}

.contact:hover,
.contact:focus-visible {
  color: var(--parchment);
  text-decoration-color: var(--firefly-gold);
}

.contact:focus-visible {
  border-radius: 0.15rem;
  outline: 2px solid var(--firefly-gold);
  outline-offset: 0.35rem;
}

@media (max-aspect-ratio: 3 / 4) {
  .artboard {
    left: 22%;
    transform: translate(-22%, -50%);
  }

  .copy {
    top: clamp(2.75rem, 8svh, 5rem);
    right: 6vw;
    left: 6vw;
    width: auto;
    transform: none;
    text-align: center;
  }

  h1 {
    max-width: none;
    font-size: clamp(2.35rem, 12vw, 4rem);
  }

  .tagline {
    max-width: 27ch;
    margin-right: auto;
    margin-left: auto;
    font-size: clamp(0.98rem, 4vw, 1.2rem);
  }

  .contact {
    margin-top: clamp(1rem, 3svh, 1.75rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .artwork-stack {
    display: none;
  }

  .reduced-motion-art {
    display: block;
  }

  .layer-branch,
  .layer-shadow,
  .layer-lantern-light,
  .bug {
    animation: none;
  }
}

@media (forced-colors: active) {
  .copy {
    padding: 1rem;
    background: Canvas;
    color: CanvasText;
    text-shadow: none;
  }
}