:root {
  --ink: #fbffe9;
  --ink-soft: #122204;
  --ink-muted: #142606;
  --night: #080a07;
  --charcoal: #333333;
  --charcoal-deep: #1f211e;
  --signal: #abd591;
  --signal-deep: #537c4d;
  --signal-dark: #223615;
  --signal-hot: #e3ffc8;
  --lcd-bg: #426105;
  --grid: rgba(171, 213, 145, 0.1);
  --shadow: rgba(246, 255, 218, 0.34);
  --space-1: clamp(0.5rem, 0.35rem + 0.4vw, 0.75rem);
  --space-2: clamp(0.8rem, 0.55rem + 0.7vw, 1.2rem);
  --space-3: clamp(1.25rem, 0.9rem + 1.1vw, 2rem);
  --space-4: clamp(2rem, 1.1rem + 3vw, 4.5rem);
  --radius: 0.375rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --move-x: 0px;
  --move-y: 0px;
  --scroll-y: 0px;
  --microcopy-gap: clamp(0.8rem, 2.3vh, 1.65rem);
  --microcopy-shift: 0px;
  --scene-width: 100%;
  --scene-top: 50%;
  --scene-back-width: calc(var(--scene-width) * 1.08);
  --scene-back-top: var(--scene-top);
  --frame-width: min(100vw, 177.7778svh);
  --frame-height: min(100svh, 56.25vw);
  --frame-top: 50%;
  --frame-edge: clamp(1.25rem, 4.2vw, 3.6rem);
  --frame-x: calc(var(--move-x) * -0.24);
  --frame-y: calc((var(--move-y) * -0.17) + (var(--scroll-y) * -0.036));
  --texture-x: calc(var(--move-x) * -0.045);
  --texture-y: calc((var(--move-y) * -0.035) + (var(--scroll-y) * -0.012));
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--night);
  color: var(--ink);
  font-family: Monaco, Menlo, "Lucida Console", "SFMono-Regular", Consolas, monospace;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--lcd-bg);
}

.site-shell {
  isolation: isolate;
}

.hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  overflow: hidden;
  place-items: center;
  padding: var(--space-4) clamp(1.25rem, 5vw, 5.25rem);
  perspective: 900px;
}

.depth-stage {
  position: fixed;
  inset: 0;
  z-index: -4;
  overflow: hidden;
  background: var(--lcd-bg);
  transform: translateZ(0);
  transform-origin: 50% 46%;
  transform-style: preserve-3d;
  transition: transform 160ms var(--ease);
  will-change: transform;
}

.depth-stage::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(rgba(251, 255, 233, 0.05) 0.8px, transparent 0.8px),
    linear-gradient(rgba(66, 97, 5, 0.5), rgba(66, 97, 5, 0.5));
  background-size: 5px 5px, auto;
}

.video-plane,
.image-plane {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.video-plane {
  object-fit: cover;
  object-position: 50% 50%;
}

.image-plane {
  background-image: url("assets/zen-poster.jpg?v=20260605b");
  background-position: 50% var(--scene-back-top);
  background-repeat: no-repeat;
  background-size: var(--scene-back-width) auto;
}

.image-plane-back {
  z-index: 0;
  display: block;
  opacity: 1;
  background-image:
    radial-gradient(rgba(92, 125, 10, 0.56) 0.65px, transparent 0.65px),
    radial-gradient(rgba(55, 82, 3, 0.36) 0.75px, transparent 0.75px),
    linear-gradient(90deg, rgba(78, 111, 5, 0.18), rgba(50, 76, 4, 0.1), rgba(80, 111, 6, 0.18)),
    linear-gradient(var(--lcd-bg), var(--lcd-bg));
  background-position: 0 0, 2px 3px, 0 0, 0 0;
  background-size: 5px 5px, 7px 7px, 100% 100%, 100% 100%;
  filter: none;
  transform:
    translate3d(var(--texture-x), var(--texture-y), 0)
    scale(1.02);
  transform-origin: 50% 50%;
  will-change: transform;
}

.scene-frame,
.image-plane-echo {
  position: absolute;
  inset: auto;
  left: 50%;
  top: var(--frame-top);
  width: var(--frame-width);
  height: var(--frame-height);
  aspect-ratio: 16 / 9;
  pointer-events: none;
}

.scene-frame {
  z-index: 3;
  overflow: hidden;
  box-shadow: 0 0 1.6rem 1.1rem rgba(66, 97, 5, 0.22);
  transform:
    translate3d(
      calc(-50% + var(--frame-x)),
      calc(-50% + var(--frame-y)),
      28px
    )
    scale(1);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 var(--frame-edge), #000 calc(100% - var(--frame-edge)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--frame-edge), #000 calc(100% - var(--frame-edge)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 var(--frame-edge), #000 calc(100% - var(--frame-edge)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--frame-edge), #000 calc(100% - var(--frame-edge)), transparent 100%);
  mask-composite: intersect;
  will-change: transform;
}

.scene-frame::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(to right, var(--lcd-bg) 0, rgba(66, 97, 5, 0.84) 0.8rem, rgba(66, 97, 5, 0) var(--frame-edge), rgba(66, 97, 5, 0) calc(100% - var(--frame-edge)), rgba(66, 97, 5, 0.84) calc(100% - 0.8rem), var(--lcd-bg) 100%),
    linear-gradient(to bottom, var(--lcd-bg) 0, rgba(66, 97, 5, 0.84) 0.8rem, rgba(66, 97, 5, 0) var(--frame-edge), rgba(66, 97, 5, 0) calc(100% - var(--frame-edge)), rgba(66, 97, 5, 0.84) calc(100% - 0.8rem), var(--lcd-bg) 100%),
    repeating-linear-gradient(90deg, rgba(93, 126, 8, 0.08) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(0deg, rgba(38, 61, 2, 0.05) 0 1px, transparent 1px 5px);
}

.video-plane-main {
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 1;
  filter: none;
}

.image-plane-echo {
  z-index: 2;
  display: block;
  opacity: 0.92;
  background-image:
    radial-gradient(rgba(95, 126, 9, 0.48) 0.8px, transparent 0.8px),
    radial-gradient(rgba(47, 73, 3, 0.32) 0.9px, transparent 0.9px),
    linear-gradient(var(--lcd-bg), var(--lcd-bg));
  background-position: 0 0, 3px 2px, 0 0;
  background-size: 5px 5px, 8px 8px, 100% 100%;
  filter: none;
  transform:
    translate3d(
      calc(-50% + var(--frame-x)),
      calc(-50% + var(--frame-y)),
      12px
    )
    scale(1.14);
  transform-origin: 50% 50%;
  will-change: transform;
}

.atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.atmosphere-vignette {
  z-index: -2;
  background: none;
}

.atmosphere-grain {
  z-index: -1;
  opacity: 0;
  background-image:
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(0deg, rgba(171, 213, 145, 0.08) 0 1px, transparent 1px 8px),
    radial-gradient(rgba(242, 240, 231, 0.16) 0.6px, transparent 0.6px);
  background-position: 0 0, 0 0, 0 0;
  background-size: 8px 8px, 8px 8px, 5px 5px;
  mix-blend-mode: overlay;
}

.atmosphere-scan {
  z-index: -1;
  opacity: 0;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(8, 10, 7, 0) 0 3px,
      rgba(8, 10, 7, 0.12) 3px 4px
    ),
    linear-gradient(90deg, transparent, rgba(171, 213, 145, 0.08), transparent);
  background-size: 100% 4px, 100% 100%;
}

.hero-copy {
  position: relative;
  width: min(100%, 66rem);
  margin-inline: auto;
  text-align: center;
  transform:
    translate3d(
      calc(var(--move-x) * 0.44),
      calc((var(--move-y) * 0.2) + (var(--scroll-y) * 0.075)),
      120px
    );
  transition: transform 180ms var(--ease);
  will-change: transform;
}

h1 {
  max-width: 13ch;
  margin: 0 auto;
  color: var(--signal-hot);
  font-family: Menlo, Monaco, "Lucida Console", "SFMono-Regular", Consolas, monospace;
  font-size: 2.7rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 0.92;
  text-transform: uppercase;
  text-wrap: balance;
  -webkit-font-smoothing: none;
  text-shadow: 2px 2px 0 rgba(18, 31, 8, 0.46);
}

.lede {
  max-width: 32rem;
  margin: clamp(0.6rem, 1.5vh, 1.05rem) auto 0;
  color: var(--signal);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  text-shadow:
    0 0.125rem 1.25rem rgba(0, 0, 0, 0.34),
    0 0 1rem rgba(171, 213, 145, 0.16);
}

.microcopy {
  max-width: 48ch;
  margin: var(--microcopy-gap) auto 0;
  color: var(--ink);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: clamp(0.72rem, 0.55rem + 0.32vw, 0.9rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.52;
  transform: translateX(var(--microcopy-shift));
  text-shadow:
    1px 1px 0 rgba(8, 10, 7, 0.72),
    0 0 0.45rem rgba(8, 10, 7, 0.18);
}

@media (hover: hover) and (pointer: fine) {
  .hero-copy:hover h1 {
    text-shadow: 2px 2px 0 rgba(18, 31, 8, 0.54);
  }
}

@media (min-width: 400px) {
  h1 {
    font-size: 3.15rem;
  }
}

@media (min-width: 720px) {
  h1 {
    font-size: 4.55rem;
  }

  .lede {
    font-size: 1.125rem;
  }

  .microcopy {
    font-size: 0.82rem;
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: 5.75rem;
  }

  .lede {
    font-size: 1.25rem;
  }
}

@media (min-width: 1440px) {
  h1 {
    font-size: 6.5rem;
  }
}

@media (max-width: 720px) {
  :root {
    --microcopy-gap: clamp(0.48rem, 1.2vh, 0.78rem);
    --microcopy-shift: 0px;
    --scene-width: 100%;
    --scene-top: 50%;
    --scene-back-width: calc(var(--scene-width) * 1.18);
    --scene-back-top: var(--scene-top);
    --frame-top: calc(28% + 12.375vw);
    --frame-edge: clamp(0.95rem, 7vw, 2rem);
    --frame-x: calc(var(--move-x) * -0.2);
    --frame-y: calc((var(--move-y) * -0.13) + (var(--scroll-y) * -0.026));
    --texture-x: calc(var(--move-x) * -0.035);
    --texture-y: calc((var(--move-y) * -0.028) + (var(--scroll-y) * -0.01));
  }

  .hero {
    align-items: end;
    min-height: 100dvh;
    padding: clamp(1rem, 3vh, 1.8rem) clamp(1rem, 5vw, 1.45rem) clamp(3.35rem, 9.5svh, 5.2rem);
  }

  .depth-stage {
    inset: 0;
    background: var(--lcd-bg);
    transform: translateZ(0);
  }

  .scene-frame {
    transform:
      translate3d(
        calc(-50% + var(--frame-x)),
        calc(-50% + var(--frame-y)),
        22px
      )
      scale(1);
  }

  .image-plane-echo {
    opacity: 0.94;
    filter: none;
    transform:
      translate3d(
        calc(-50% + var(--frame-x)),
        calc(-50% + var(--frame-y)),
        8px
      )
      scale(1.16);
  }

  .image-plane {
    background-position: 50% var(--scene-back-top);
  }

  .image-plane-back {
    opacity: 1;
    filter: none;
  }

  .hero-copy {
    width: min(100%, 28rem);
    text-align: left;
    transform:
      translate3d(
        calc(var(--move-x) * 0.16),
        calc((var(--move-y) * 0.055) + (var(--scroll-y) * 0.03)),
        0
      );
  }

  h1,
  .lede,
  .microcopy {
    margin-left: 0;
    margin-right: 0;
  }

  h1 {
    max-width: 11ch;
    font-size: clamp(2rem, 9vw, 2.72rem);
    line-height: 0.94;
  }

  .lede {
    max-width: 34ch;
    margin-top: clamp(0.38rem, 1.05vh, 0.62rem);
    font-size: clamp(0.78rem, 2.55vw, 0.92rem);
    line-height: 1.35;
  }

  .microcopy {
    max-width: 34ch;
    color: #fbffe9;
    font-size: clamp(0.66rem, 2.05vw, 0.76rem);
    line-height: 1.42;
  }
}

@media (min-width: 460px) and (max-width: 720px) {
  h1 {
    max-width: 13ch;
  }
}

@media (min-width: 721px) and (max-width: 900px) {
  :root {
    --microcopy-gap: clamp(1.5rem, 3.5vh, 2.4rem);
    --microcopy-shift: clamp(0rem, 4vw, 2rem);
    --scene-width: 100%;
    --scene-top: 50%;
    --frame-x: calc(var(--move-x) * -0.22);
    --frame-y: calc((var(--move-y) * -0.15) + (var(--scroll-y) * -0.032));
  }

  .scene-frame {
    transform:
      translate3d(
        calc(-50% + var(--frame-x)),
        calc(-50% + var(--frame-y)),
        30px
      )
      scale(1);
  }
}

@media (max-height: 520px) and (min-width: 721px) {
  :root {
    --microcopy-gap: clamp(0.55rem, 1.8vh, 0.9rem);
    --microcopy-shift: clamp(0rem, 3.5vw, 2.25rem);
    --scene-width: 100%;
    --scene-top: 50%;
    --frame-x: calc(var(--move-x) * -0.22);
    --frame-y: calc((var(--move-y) * -0.15) + (var(--scroll-y) * -0.03));
  }

  .scene-frame {
    transform:
      translate3d(
        calc(-50% + var(--frame-x)),
        calc(-50% + var(--frame-y)),
        26px
      )
      scale(1);
  }

  .lede {
    margin-top: var(--space-1);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }

  .depth-stage,
  .hero-copy,
  .image-plane-back {
    transform: none;
  }

  .scene-frame {
    transform: translate3d(-50%, -50%, 0) scale(1);
  }

  .image-plane-echo {
    transform: translate3d(-50%, -50%, 0) scale(1.04);
  }
}