@font-face {
  font-family: "Pinyon Script";
  src: url("PinyonScript-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --fg: #f6f0e6;
  --overlay: rgba(4, 9, 12, 0.5);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--fg);
  background: #0b0b0b;
  overflow-x: hidden;
}

.has-firefly-cursor,
.has-firefly-cursor * {
  cursor: none !important;
}

@media (pointer: fine) {
  html,
  body,
  body *,
  body *::before,
  body *::after {
    cursor: none !important;
  }
}

.video-shell {
  position: fixed;
  inset: 0;
  z-index: -2;
}

.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 4000ms ease-in-out;
}

.bg-video.active {
  opacity: 1;
}

.overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 38% 62%, rgba(92, 220, 132, 0.16), transparent 46%),
    radial-gradient(circle at 68% 22%, rgba(130, 250, 170, 0.13), transparent 42%),
    radial-gradient(circle at 20% 72%, rgba(70, 220, 255, 0.14), transparent 44%),
    radial-gradient(circle at 74% 30%, rgba(104, 255, 180, 0.1), transparent 40%),
    linear-gradient(to bottom, rgba(0, 8, 14, 0.18), var(--overlay));
}

.green-nebula-top {
  position: absolute;
  inset: -8% -10% 36% -10%;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(44% 62% at 20% 26%, rgba(102, 234, 138, 0.26), transparent 72%),
    radial-gradient(40% 56% at 52% 18%, rgba(133, 248, 171, 0.2), transparent 74%),
    radial-gradient(42% 60% at 82% 28%, rgba(84, 214, 141, 0.24), transparent 74%);
  filter: blur(16px) saturate(1.2);
  opacity: 0.72;
  animation: greenNebulaTopPulse 9s ease-in-out infinite;
}


.willow-curtain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  display: none;
}

.willow-curtain::before,
.willow-curtain::after {
  content: "";
  position: absolute;
  top: -6%;
  width: 30%;
  height: 44%;
  background-image: url("WEEPINGWILLOW2.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
  opacity: 0.46;
  filter: saturate(1.1) contrast(1.05);
  z-index: 1;
  animation: willowCornerSway 11s ease-in-out infinite;
}

.willow-curtain::before {
  left: -8%;
  --corner-transform: rotate(-14deg) scale(0.86);
  transform: var(--corner-transform);
}

.willow-curtain::after {
  right: -8%;
  --corner-transform: scaleX(-1) rotate(-14deg) scale(0.86);
  transform: var(--corner-transform);
  animation-delay: -5.5s;
}

.willow-top {
  position: absolute;
  background-image: url("WEEPINGWILLOW2.png");
  background-size: contain;
  filter: saturate(1.08) contrast(1.04) brightness(1.02);
}

.liana-thread {
  position: absolute;
  top: -3%;
  width: 8%;
  height: 44%;
  z-index: 2;
  pointer-events: none;
  background-image: url("WEEPINGWILLOW2.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
  opacity: 0.48;
  filter: saturate(1.12) contrast(1.08) brightness(1.04);
  transform-origin: top center;
  animation: lianaThreadSway var(--thread-dur, 9s) ease-in-out infinite;
}

.side-branch {
  position: absolute;
  top: 38%;
  width: 44%;
  height: 18%;
  z-index: 2;
  pointer-events: none;
  background-image: url("lianas2.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.48;
  filter: saturate(1.06) contrast(1.04) brightness(1.02);
  transform-origin: center;
  animation: sideBranchSway 9.5s ease-in-out infinite;
}

.sb-left-1 {
  left: -18%;
  --sb-transform: rotate(5deg) scale(0.88);
  transform: var(--sb-transform);
  animation-delay: -1.6s;
}

.sb-left-2 {
  left: -22%;
  top: 50%;
  --sb-transform: rotate(-2deg) scale(0.72);
  transform: var(--sb-transform);
  animation-delay: -4.2s;
  opacity: 0.35;
}

.sb-right-1 {
  right: -18%;
  --sb-transform: scaleX(-1) rotate(5deg) scale(0.88);
  transform: var(--sb-transform);
  animation-delay: -2.8s;
}

.sb-right-2 {
  right: -22%;
  top: 50%;
  --sb-transform: scaleX(-1) rotate(-2deg) scale(0.72);
  transform: var(--sb-transform);
  animation-delay: -5.4s;
  opacity: 0.35;
}

.lt-1 { left: 9%; --thread-dur: 8.6s; --thread-rot: -6deg; --thread-sway: 5deg; animation-delay: -1.3s; }
.lt-2 { left: 17%; --thread-dur: 9.8s; --thread-rot: -3deg; --thread-sway: 4deg; animation-delay: -2.5s; }
.lt-3 { left: 28%; --thread-dur: 8.2s; --thread-rot: 2deg; --thread-sway: 5deg; animation-delay: -3.4s; }
.lt-4 { left: 43%; --thread-dur: 10.4s; --thread-rot: 5deg; --thread-sway: 6deg; animation-delay: -4.1s; opacity: 0.4; }
.lt-5 { right: 43%; --thread-dur: 10.4s; --thread-rot: -5deg; --thread-sway: 6deg; animation-delay: -5.4s; opacity: 0.4; transform: scaleX(-1); }
.lt-6 { right: 28%; --thread-dur: 8.2s; --thread-rot: -2deg; --thread-sway: 5deg; animation-delay: -6.2s; transform: scaleX(-1); }
.lt-7 { right: 17%; --thread-dur: 9.8s; --thread-rot: 3deg; --thread-sway: 4deg; animation-delay: -7.1s; transform: scaleX(-1); }
.lt-8 { right: 9%; --thread-dur: 8.6s; --thread-rot: 6deg; --thread-sway: 5deg; animation-delay: -8s; transform: scaleX(-1); }

.willow-top {
  top: -9%;
  width: 28%;
  height: 24%;
  background-image: url("WEEPINGWILLOW2.png");
  background-repeat: no-repeat;
  background-position: top center;
  opacity: 0.62;
  transform-origin: top center;
  animation:
    willowTopSway var(--sway-dur, 10s) ease-in-out infinite,
    willowTopPulse var(--pulse-dur, 6.5s) ease-in-out infinite;
}

.willow-curtain .willow-top:nth-child(3n) {
  --sway-dur: 8.6s;
  --pulse-dur: 5.4s;
}

.willow-curtain .willow-top:nth-child(4n) {
  --sway-dur: 11.8s;
  --pulse-dur: 7.8s;
}

.willow-curtain .willow-top:nth-child(5n) {
  --sway-dur: 9.4s;
  --pulse-dur: 6.2s;
}

.willow-top-long {
  height: 32%;
  opacity: 0.42;
}

.willow-top-very-long {
  height: 48%;
  opacity: 0.34;
}

.willow-border-long {
  height: 92%;
  opacity: 0.3;
}

.willow-side-out {
  height: 56%;
  opacity: 0.62;
  z-index: 2;
}

.wt-left {
  left: -4%;
  --base-transform: rotate(-8deg) scale(0.68);
  transform: var(--base-transform);
}

.wt-left-mid {
  left: 12%;
  --base-transform: rotate(-3deg) scale(0.58);
  transform: var(--base-transform);
  opacity: 0.46;
  animation-delay: -2s;
}

.wt-center {
  left: 29%;
  --base-transform: rotate(2deg) scale(0.62);
  transform: var(--base-transform);
  opacity: 0.5;
  animation-delay: -4.2s;
}

.wt-right-mid {
  right: 12%;
  --base-transform: scaleX(-1) rotate(-3deg) scale(0.58);
  transform: var(--base-transform);
  opacity: 0.46;
  animation-delay: -5.1s;
}

.wt-right {
  right: -4%;
  --base-transform: scaleX(-1) rotate(-8deg) scale(0.68);
  transform: var(--base-transform);
  animation-delay: -6.1s;
}

.wt-far-left {
  left: -10%;
  --base-transform: rotate(-10deg) scale(0.54);
  transform: var(--base-transform);
  opacity: 0.42;
  animation-delay: -3.4s;
}

.wt-far-right {
  right: -10%;
  --base-transform: scaleX(-1) rotate(-10deg) scale(0.54);
  transform: var(--base-transform);
  opacity: 0.42;
  animation-delay: -6.8s;
}

.wt-1 {
  left: -1%;
  --base-transform: rotate(-6deg) scale(0.5);
  transform: var(--base-transform);
  opacity: 0.4;
  animation-delay: -1.2s;
}

.wt-2 {
  left: 18%;
  --base-transform: rotate(-1deg) scale(0.48);
  transform: var(--base-transform);
  opacity: 0.38;
  animation-delay: -2.9s;
}

.wt-3 {
  left: 36%;
  --base-transform: rotate(3deg) scale(0.46);
  transform: var(--base-transform);
  opacity: 0.36;
  animation-delay: -4.7s;
}

.wt-4 {
  right: 36%;
  --base-transform: scaleX(-1) rotate(3deg) scale(0.46);
  transform: var(--base-transform);
  opacity: 0.36;
  animation-delay: -5.5s;
}

.wt-5 {
  right: 18%;
  --base-transform: scaleX(-1) rotate(-1deg) scale(0.48);
  transform: var(--base-transform);
  opacity: 0.38;
  animation-delay: -6.3s;
}

.wt-6 {
  right: -1%;
  --base-transform: scaleX(-1) rotate(-6deg) scale(0.5);
  transform: var(--base-transform);
  opacity: 0.4;
  animation-delay: -7.2s;
}

.wt-7 {
  left: 6%;
  --base-transform: rotate(-4deg) scale(0.42);
  transform: var(--base-transform);
  opacity: 0.3;
  animation-delay: -0.8s;
}

.wt-8 {
  left: 23%;
  --base-transform: rotate(0deg) scale(0.4);
  transform: var(--base-transform);
  opacity: 0.28;
  animation-delay: -2.1s;
}

.wt-9 {
  left: 42%;
  --base-transform: rotate(4deg) scale(0.4);
  transform: var(--base-transform);
  opacity: 0.28;
  animation-delay: -3.9s;
}

.wt-10 {
  right: 42%;
  --base-transform: scaleX(-1) rotate(4deg) scale(0.4);
  transform: var(--base-transform);
  opacity: 0.28;
  animation-delay: -5.3s;
}

.wt-11 {
  right: 23%;
  --base-transform: scaleX(-1) rotate(0deg) scale(0.4);
  transform: var(--base-transform);
  opacity: 0.28;
  animation-delay: -6.2s;
}

.wt-12 {
  right: 6%;
  --base-transform: scaleX(-1) rotate(-4deg) scale(0.42);
  transform: var(--base-transform);
  opacity: 0.3;
  animation-delay: -7.6s;
}

.wtl-1 {
  left: 47%;
  --base-transform: rotate(5deg) scale(0.52);
  transform: var(--base-transform);
  animation-delay: -1.9s;
}

.wtl-2 {
  right: 47%;
  --base-transform: scaleX(-1) rotate(5deg) scale(0.52);
  transform: var(--base-transform);
  animation-delay: -4.8s;
}

.wtl-3 {
  right: 30%;
  --base-transform: scaleX(-1) rotate(2deg) scale(0.5);
  transform: var(--base-transform);
  animation-delay: -6.6s;
}

.wtl-4 {
  left: 3%;
  --base-transform: rotate(-7deg) scale(0.5);
  transform: var(--base-transform);
  animation-delay: -0.9s;
}

.wtl-5 {
  left: 20%;
  --base-transform: rotate(-1deg) scale(0.47);
  transform: var(--base-transform);
  animation-delay: -2.4s;
}

.wtl-6 {
  left: 34%;
  --base-transform: rotate(2deg) scale(0.49);
  transform: var(--base-transform);
  animation-delay: -3.3s;
}

.wtl-7 {
  left: 56%;
  --base-transform: scaleX(-1) rotate(2deg) scale(0.48);
  transform: var(--base-transform);
  animation-delay: -4.1s;
}

.wtl-8 {
  left: 66%;
  --base-transform: scaleX(-1) rotate(1deg) scale(0.46);
  transform: var(--base-transform);
  animation-delay: -5.2s;
}

.wtl-9 {
  right: 14%;
  --base-transform: scaleX(-1) rotate(-2deg) scale(0.5);
  transform: var(--base-transform);
  animation-delay: -6.9s;
}

.wtl-10 {
  right: 2%;
  --base-transform: scaleX(-1) rotate(-6deg) scale(0.5);
  transform: var(--base-transform);
  animation-delay: -7.8s;
}

.wtl-11 {
  right: 38%;
  --base-transform: scaleX(-1) rotate(4deg) scale(0.45);
  transform: var(--base-transform);
  animation-delay: -2.8s;
}

.wtl-12 {
  left: -8%;
  --base-transform: rotate(-10deg) scale(0.52);
  transform: var(--base-transform);
  animation-delay: -1.4s;
}

.wtl-13 {
  left: 44%;
  --base-transform: rotate(6deg) scale(0.44);
  transform: var(--base-transform);
  animation-delay: -3.7s;
}

.wtl-14 {
  right: 52%;
  --base-transform: scaleX(-1) rotate(6deg) scale(0.44);
  transform: var(--base-transform);
  animation-delay: -5.9s;
}

.wtl-15 {
  right: -8%;
  --base-transform: scaleX(-1) rotate(-10deg) scale(0.52);
  transform: var(--base-transform);
  animation-delay: -7.1s;
}

.wtl-16 {
  left: -6%;
  --base-transform: rotate(-11deg) scale(0.56);
  transform: var(--base-transform);
  animation-delay: -0.7s;
}

.wtl-17 {
  left: 5%;
  --base-transform: rotate(-7deg) scale(0.52);
  transform: var(--base-transform);
  animation-delay: -1.6s;
}

.wtl-18 {
  left: 14%;
  --base-transform: rotate(-3deg) scale(0.5);
  transform: var(--base-transform);
  animation-delay: -2.2s;
}

.wtl-19 {
  left: 24%;
  --base-transform: rotate(0deg) scale(0.48);
  transform: var(--base-transform);
  animation-delay: -3.1s;
}

.wtl-20 {
  left: 34%;
  --base-transform: rotate(3deg) scale(0.5);
  transform: var(--base-transform);
  animation-delay: -4s;
}

.wtl-21 {
  left: 44%;
  --base-transform: rotate(6deg) scale(0.52);
  transform: var(--base-transform);
  animation-delay: -4.9s;
}

.wtl-22 {
  right: 44%;
  --base-transform: scaleX(-1) rotate(6deg) scale(0.52);
  transform: var(--base-transform);
  animation-delay: -5.6s;
}

.wtl-23 {
  right: 34%;
  --base-transform: scaleX(-1) rotate(3deg) scale(0.5);
  transform: var(--base-transform);
  animation-delay: -6.2s;
}

.wtl-24 {
  right: 24%;
  --base-transform: scaleX(-1) rotate(0deg) scale(0.48);
  transform: var(--base-transform);
  animation-delay: -6.8s;
}

.wtl-25 {
  right: 14%;
  --base-transform: scaleX(-1) rotate(-3deg) scale(0.5);
  transform: var(--base-transform);
  animation-delay: -7.3s;
}

.wtl-26 {
  right: 5%;
  --base-transform: scaleX(-1) rotate(-7deg) scale(0.52);
  transform: var(--base-transform);
  animation-delay: -7.9s;
}

.wtl-27 {
  right: -6%;
  --base-transform: scaleX(-1) rotate(-11deg) scale(0.56);
  transform: var(--base-transform);
  animation-delay: -8.4s;
}

.wtl-28 { left: -12%; --base-transform: rotate(-12deg) scale(0.58); transform: var(--base-transform); animation-delay: -0.5s; }
.wtl-29 { left: -8%; --base-transform: rotate(-10deg) scale(0.54); transform: var(--base-transform); animation-delay: -1.1s; }
.wtl-30 { left: -2%; --base-transform: rotate(-8deg) scale(0.52); transform: var(--base-transform); animation-delay: -1.8s; }
.wtl-31 { left: 2%; --base-transform: rotate(-6deg) scale(0.5); transform: var(--base-transform); animation-delay: -2.5s; }
.wtl-32 { left: 8%; --base-transform: rotate(-4deg) scale(0.49); transform: var(--base-transform); animation-delay: -3.2s; }
.wtl-33 { left: 12%; --base-transform: rotate(-2deg) scale(0.48); transform: var(--base-transform); animation-delay: -3.9s; }
.wtl-34 { left: 18%; --base-transform: rotate(0deg) scale(0.47); transform: var(--base-transform); animation-delay: -4.6s; }
.wtl-35 { left: 22%; --base-transform: rotate(2deg) scale(0.48); transform: var(--base-transform); animation-delay: -5.3s; }
.wtl-36 { left: 28%; --base-transform: rotate(4deg) scale(0.49); transform: var(--base-transform); animation-delay: -6s; }
.wtl-37 { left: 32%; --base-transform: rotate(6deg) scale(0.5); transform: var(--base-transform); animation-delay: -6.7s; }
.wtl-38 { left: 38%; --base-transform: rotate(8deg) scale(0.52); transform: var(--base-transform); animation-delay: -7.2s; }
.wtl-39 { left: 42%; --base-transform: rotate(10deg) scale(0.54); transform: var(--base-transform); animation-delay: -7.8s; }

.wtl-40 { right: 42%; --base-transform: scaleX(-1) rotate(10deg) scale(0.54); transform: var(--base-transform); animation-delay: -8.3s; }
.wtl-41 { right: 38%; --base-transform: scaleX(-1) rotate(8deg) scale(0.52); transform: var(--base-transform); animation-delay: -8.8s; }
.wtl-42 { right: 32%; --base-transform: scaleX(-1) rotate(6deg) scale(0.5); transform: var(--base-transform); animation-delay: -9.3s; }
.wtl-43 { right: 28%; --base-transform: scaleX(-1) rotate(4deg) scale(0.49); transform: var(--base-transform); animation-delay: -9.8s; }
.wtl-44 { right: 22%; --base-transform: scaleX(-1) rotate(2deg) scale(0.48); transform: var(--base-transform); animation-delay: -10.2s; }
.wtl-45 { right: 18%; --base-transform: scaleX(-1) rotate(0deg) scale(0.47); transform: var(--base-transform); animation-delay: -10.7s; }
.wtl-46 { right: 12%; --base-transform: scaleX(-1) rotate(-2deg) scale(0.48); transform: var(--base-transform); animation-delay: -11.1s; }
.wtl-47 { right: 8%; --base-transform: scaleX(-1) rotate(-4deg) scale(0.49); transform: var(--base-transform); animation-delay: -11.5s; }
.wtl-48 { right: 2%; --base-transform: scaleX(-1) rotate(-6deg) scale(0.5); transform: var(--base-transform); animation-delay: -11.9s; }
.wtl-49 { right: -2%; --base-transform: scaleX(-1) rotate(-8deg) scale(0.52); transform: var(--base-transform); animation-delay: -12.3s; }
.wtl-50 { right: -8%; --base-transform: scaleX(-1) rotate(-10deg) scale(0.54); transform: var(--base-transform); animation-delay: -12.7s; }
.wtl-51 { right: -12%; --base-transform: scaleX(-1) rotate(-12deg) scale(0.58); transform: var(--base-transform); animation-delay: -13.1s; }

.wbl-1 {
  left: -14%;
  --base-transform: rotate(-14deg) scale(0.64);
  transform: var(--base-transform);
  animation-delay: -1.4s;
}

.wbl-2 {
  left: -9%;
  --base-transform: rotate(-11deg) scale(0.58);
  transform: var(--base-transform);
  animation-delay: -3.2s;
}

.wbl-3 {
  right: -9%;
  --base-transform: scaleX(-1) rotate(-11deg) scale(0.58);
  transform: var(--base-transform);
  animation-delay: -5.5s;
}

.wbl-4 {
  right: -14%;
  --base-transform: scaleX(-1) rotate(-14deg) scale(0.64);
  transform: var(--base-transform);
  animation-delay: -7.6s;
}

.wso-1 {
  left: -10%;
  --base-transform: rotate(52deg) scale(0.78);
  transform: var(--base-transform);
  animation-delay: -2s;
}

.wso-2 {
  left: -7%;
  --base-transform: rotate(44deg) scale(0.72);
  transform: var(--base-transform);
  animation-delay: -4.4s;
}

.wso-3 {
  right: -7%;
  --base-transform: scaleX(-1) rotate(44deg) scale(0.72);
  transform: var(--base-transform);
  animation-delay: -6.1s;
}

.wso-4 {
  right: -10%;
  --base-transform: scaleX(-1) rotate(52deg) scale(0.78);
  transform: var(--base-transform);
  animation-delay: -8.2s;
}

.wso-5 {
  left: -12%;
  --base-transform: rotate(58deg) scale(0.74);
  transform: var(--base-transform);
  animation-delay: -1.1s;
}

.wso-6 {
  left: -9%;
  --base-transform: rotate(48deg) scale(0.68);
  transform: var(--base-transform);
  animation-delay: -3s;
}

.wso-7 {
  left: -5%;
  --base-transform: rotate(38deg) scale(0.64);
  transform: var(--base-transform);
  animation-delay: -4.9s;
}

.wso-8 {
  right: -5%;
  --base-transform: scaleX(-1) rotate(38deg) scale(0.64);
  transform: var(--base-transform);
  animation-delay: -5.8s;
}

.wso-9 {
  right: -9%;
  --base-transform: scaleX(-1) rotate(48deg) scale(0.68);
  transform: var(--base-transform);
  animation-delay: -7.1s;
}

.wso-10 {
  right: -12%;
  --base-transform: scaleX(-1) rotate(58deg) scale(0.74);
  transform: var(--base-transform);
  animation-delay: -8.7s;
}

/* Open up the middle area */
.wt-center,
.wt-3,
.wt-4,
.wt-9,
.wt-10,
.wtl-1,
.wtl-2,
.wtl-4,
.wtl-5,
.wtl-13,
.wtl-14,
.wtl-20,
.wtl-21,
.wtl-22,
.wtl-23,
.wtl-34,
.wtl-35,
.wtl-40,
.wtl-41 {
  display: none;
}


.hero {
  min-height: 100vh;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 4vw;
}

.title-wrap {
  position: relative;
  width: min(92vw, 1200px);
  user-select: none;
  -webkit-user-select: none;
}

.glyph-hotspot {
  position: absolute;
  z-index: 8;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.glyph-hotspot:focus-visible {
  outline: 2px solid rgba(208, 244, 255, 0.9);
  outline-offset: 2px;
}

.glyph-down-triangle {
  left: calc(54% + 43.7px);
  top: calc(46% + 19.9px);
  width: calc(8.4% - 3.5px);
  height: calc(11.6% + 17.6px);
  transform: translate(-50%, -50%);
  clip-path: polygon(50% calc(100% - 1px), 2px 1px, calc(100% - 1px) 1px);
  background: transparent;
  outline: none;
  animation: letter1Pulse 2.5s ease-in-out infinite;
  backdrop-filter: brightness(1) saturate(1);
  -webkit-backdrop-filter: brightness(1) saturate(1);
}

.glyph-down-triangle::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(239, 255, 255, 0.96), rgba(115, 240, 255, 0.82));
  opacity: 0.9;
  filter: drop-shadow(0 0 8px rgba(176, 250, 255, 0.9)) drop-shadow(0 0 20px rgba(92, 221, 255, 0.65));
  pointer-events: none;
}

.letter1-main-light {
  position: absolute;
  z-index: 5;
  left: calc(54% + 41.2px);
  top: calc(46% - 3.1px);
  width: 16%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 58%, rgba(255, 255, 255, 0.86) 0 8%, rgba(236, 253, 255, 0.42) 24%, rgba(185, 239, 255, 0.2) 42%, rgba(128, 221, 255, 0.08) 62%, transparent 92%);
  mix-blend-mode: screen;
  filter: blur(16px);
  animation: mainPageLightPulse 2s ease-in-out infinite;
}

.triangle-zoom-layer {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(2, 12, 20, 0.46);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1200ms ease;
}

.triangle-zoom-shape {
  --from-x: 0px;
  --from-y: 0px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(44vw, 520px);
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 50% 36%, rgba(158, 245, 255, 0.62), transparent 56%),
    linear-gradient(145deg, rgba(27, 109, 161, 0.96), rgba(3, 31, 56, 0.98));
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  filter:
    drop-shadow(0 0 16px rgba(124, 224, 255, 0.38))
    drop-shadow(0 0 36px rgba(84, 152, 255, 0.22));
  opacity: 0.96;
  transform: translate(calc(-50% + var(--from-x)), calc(-50% + var(--from-y))) scale(0.09);
  transition:
    transform 6200ms cubic-bezier(0.22, 0.72, 0.16, 1),
    opacity 2400ms ease-out;
  display: grid;
  place-items: center;
  overflow: hidden;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.triangle-zoom-layer.is-open {
  opacity: 1;
  pointer-events: auto;
}

.triangle-zoom-layer.is-open .triangle-zoom-shape {
  transform: translate(-50%, -50%) scale(3.4);
  opacity: 1;
}

.triangle-zoom-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  border: 1px solid rgba(145, 219, 255, 0.35);
  background: rgba(5, 17, 30, 0.52);
  color: #d1f6ff;
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
  font: 600 0.86rem/1 Arial, Helvetica, sans-serif;
}

.triangle-page-content {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  text-align: center;
  width: min(76vw, 760px);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -46%);
  transition:
    opacity 500ms ease,
    transform 650ms ease;
}

.triangle-zoom-layer.is-open .triangle-page-content {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.triangle-page-content .excavation-notice {
  margin: 0;
  font-family: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;
  font-size: clamp(2.25rem, 4.6vw, 4rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: auto;
  text-rendering: geometricPrecision;
}

.triangle-page-content .excavation-notice > span {
  position: relative;
  isolation: isolate;
  display: block;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.86);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.86);
  -webkit-text-stroke: 0.06px rgba(255, 255, 255, 0.34);
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.28);
  animation: fissureCore 6.4s ease-in-out infinite;
  will-change: opacity;
}

.triangle-page-content .excavation-notice > span::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: rgba(255, 255, 255, 0.9);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9);
  -webkit-text-stroke: 0;
  text-shadow: none;
  filter: blur(6px);
  opacity: 0.18;
  animation: fissureDepth 6.4s ease-in-out infinite;
  pointer-events: none;
}

.triangle-page-content .excavation-notice > span + span {
  margin-top: 0.38em;
  font-size: 1.08em;
  letter-spacing: 0.015em;
  animation-delay: -2.1s;
}

.triangle-page-content .excavation-notice > span + span::before {
  animation-delay: -2.1s;
}

.triangle-page-content .calligraphic-initial {
  display: inline-block;
  margin-right: 0.015em;
  font-size: 1.42em;
  line-height: 0.74;
  vertical-align: -0.03em;
  color: rgba(255, 255, 255, 0.92);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.92);
  -webkit-text-stroke: 0.06px rgba(255, 255, 255, 0.36);
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.18);
}

.triangle-page-content .fissure-star {
  position: absolute;
  z-index: 2;
  display: block;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 3px rgba(255, 255, 255, 0.9),
    0 0 8px rgba(255, 255, 255, 0.42);
  opacity: 0;
  animation: fissureStar 3.7s ease-in-out infinite;
  pointer-events: none;
}

.triangle-page-content .fissure-star-one {
  left: 17%;
  top: 44%;
}

.triangle-page-content .fissure-star-two {
  left: 58%;
  top: 67%;
  animation-delay: -1.5s;
}

.triangle-page-content .fissure-star-three {
  right: 12%;
  top: 37%;
  animation-delay: -2.6s;
}

.triangle-page-content .fissure-star-four {
  left: 42%;
  top: 56%;
  animation-delay: -0.8s;
}

.triangle-page-content .fissure-star-five {
  right: 42%;
  top: 34%;
  animation-delay: -2.2s;
}

.title-glow {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: url("title 1.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("title 1.png");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  background:
    radial-gradient(40% 38% at 26% 56%, rgba(148, 255, 196, 0.9), transparent 72%),
    radial-gradient(34% 30% at 67% 46%, rgba(122, 244, 255, 0.78), transparent 74%),
    linear-gradient(115deg, rgba(102, 255, 150, 0.55), rgba(79, 255, 216, 0.4), rgba(116, 255, 177, 0.5));
  filter: blur(11px) saturate(1.45);
  opacity: 0.72;
  mix-blend-mode: screen;
  animation: titleGlowReveal 9s ease-out forwards;
}

.title-wrap::after {
  display: none;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  -webkit-mask-image: url("title 1.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("title 1.png");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  background:
    radial-gradient(34% 34% at 28% 55%, rgba(187, 255, 216, 0.55), transparent 72%),
    radial-gradient(30% 28% at 68% 45%, rgba(140, 248, 255, 0.4), transparent 74%),
    linear-gradient(115deg, rgba(134, 255, 173, 0.62), rgba(46, 214, 126, 0.78) 52%, rgba(170, 255, 221, 0.66));
  filter: saturate(1.35) brightness(1.18) drop-shadow(0 0 8px rgba(109, 255, 175, 0.35)) drop-shadow(0 0 18px rgba(93, 245, 255, 0.2));
  mix-blend-mode: screen;
  opacity: 0.15;
  animation: titleTintReveal 9s ease-out forwards;
}

.nebula {
  position: absolute;
  inset: -18% -14%;
  z-index: 0;
  pointer-events: none;
  filter: blur(18px) saturate(1.65);
  opacity: 0.68;
}

.nebula::before,
.nebula::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.nebula::before {
  background:
    radial-gradient(46% 48% at 18% 58%, rgba(91, 232, 255, 0.68), transparent 76%),
    radial-gradient(38% 40% at 37% 49%, rgba(126, 255, 198, 0.3), transparent 76%),
    radial-gradient(48% 50% at 67% 44%, rgba(58, 160, 255, 0.58), transparent 78%),
    radial-gradient(34% 36% at 84% 54%, rgba(180, 132, 255, 0.34), transparent 74%),
    radial-gradient(26% 30% at 52% 63%, rgba(105, 255, 223, 0.22), transparent 72%);
  animation: nebulaFloat 16s ease-in-out infinite alternate;
}

.nebula::after {
  background:
    radial-gradient(30% 24% at 30% 60%, rgba(255, 255, 255, 0.1), transparent 76%),
    radial-gradient(26% 20% at 72% 47%, rgba(176, 255, 247, 0.11), transparent 76%),
    radial-gradient(20% 16% at 57% 38%, rgba(176, 211, 255, 0.08), transparent 78%),
    repeating-linear-gradient(112deg, rgba(125, 236, 255, 0.08) 0 2px, rgba(125, 236, 255, 0) 2px 10px);
  opacity: 0.7;
  animation: nebulaPulse 10s ease-in-out infinite;
}

.sparkles {
  position: absolute;
  inset: -8% -6%;
  z-index: 2;
  pointer-events: none;
}

.spark {
  position: absolute;
  width: clamp(8px, 1vw, 14px);
  aspect-ratio: 1;
  opacity: 0.8;
  filter: drop-shadow(0 0 8px rgba(150, 255, 236, 0.45));
  animation: twinkle 3.8s ease-in-out infinite;
}

.spark::before,
.spark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(to bottom, rgba(230, 255, 250, 0), rgba(230, 255, 250, 0.95) 48%, rgba(230, 255, 250, 0));
}

.spark::before { transform: scaleX(0.28); }
.spark::after { transform: rotate(90deg) scaleX(0.28); }

.s1 { top: 16%; left: 8%; animation-delay: -0.4s; }
.s2 { top: 5%; left: 32%; width: 12px; animation-delay: -2.1s; }
.s3 { top: 13%; right: 14%; width: 10px; animation-delay: -1.7s; }
.s4 { top: 44%; left: 3%; width: 9px; animation-delay: -3s; }
.s5 { top: 53%; right: 4%; width: 13px; animation-delay: -1s; }
.s6 { bottom: 9%; left: 22%; width: 11px; animation-delay: -2.8s; }
.s7 { bottom: 15%; right: 27%; width: 8px; animation-delay: -1.2s; }
.s8 { top: 28%; right: 37%; width: 9px; animation-delay: -2.5s; }

.title-art {
  display: block;
  position: relative;
  z-index: 3;
  width: min(92vw, 1200px);
  height: auto;
  object-fit: contain;
  opacity: 0.08;
  mix-blend-mode: multiply;
  filter: contrast(1.08) brightness(0.92);
  animation: titleImageReveal 9s ease-out forwards;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.firefly-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 48px;
  height: 44px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0);
  transition: opacity 180ms ease;
}

.firefly-cursor.is-visible { opacity: 1; }

.pleiades-mist,
.pleiades-haze,
.cluster-star { position: absolute; inset: 0; }

.pleiades-mist {
  inset: -10px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 54%, rgba(92, 232, 255, 0.34), transparent 45%),
    radial-gradient(circle at 68% 35%, rgba(90, 147, 255, 0.3), transparent 52%),
    radial-gradient(circle at 27% 38%, rgba(157, 237, 255, 0.24), transparent 50%);
  filter: blur(6px);
  animation: pleiadesPulse 2.2s ease-in-out infinite;
}

.pleiades-haze {
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(104, 198, 255, 0.14), rgba(104, 198, 255, 0) 65%);
  filter: blur(3px);
}

.cluster-star {
  inset: auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(235, 252, 255, 1) 0 28%, rgba(136, 230, 255, 0.95) 45%, rgba(94, 169, 255, 0.5) 70%, transparent 75%);
  box-shadow: 0 0 6px rgba(166, 242, 255, 0.95), 0 0 14px rgba(95, 176, 255, 0.5);
  animation: starTwinkle 2.8s ease-in-out infinite;
}

.cluster-star::before,
.cluster-star::after {
  content: "";
  position: absolute;
  inset: -4px;
  background: linear-gradient(to bottom, transparent, rgba(220, 248, 255, 0.75), transparent);
  border-radius: 999px;
  opacity: 0.8;
}

.cluster-star::before { transform: scaleX(0.12); }
.cluster-star::after { transform: rotate(90deg) scaleX(0.12); }

.st1 { top: 7px; left: 8px; width: 7px; height: 7px; animation-delay: -0.2s; }
.st2 { top: 3px; left: 20px; width: 6px; height: 6px; animation-delay: -1.1s; }
.st3 { top: 12px; left: 26px; width: 5px; height: 5px; animation-delay: -0.7s; }
.st4 { top: 17px; left: 15px; width: 6px; height: 6px; animation-delay: -1.6s; }
.st5 { top: 20px; left: 29px; width: 5px; height: 5px; animation-delay: -2s; }
.st6 { top: 11px; left: 35px; width: 7px; height: 7px; animation-delay: -0.9s; }
.st7 { top: 25px; left: 22px; width: 4px; height: 4px; animation-delay: -2.4s; }

@keyframes nebulaFloat {
  0% { transform: translate(-1%, 1%) scale(0.98); opacity: 0.9; }
  50% { transform: translate(1.4%, -1.2%) scale(1.02); opacity: 1; }
  100% { transform: translate(-0.6%, 0.4%) scale(1); opacity: 0.95; }
}

@keyframes nebulaPulse {
  0%, 100% { transform: scale(0.99); opacity: 0.75; }
  50% { transform: scale(1.03); opacity: 1; }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.16; transform: scale(0.7) rotate(0deg); }
  30% { opacity: 0.95; transform: scale(1.05) rotate(6deg); }
  55% { opacity: 0.4; transform: scale(0.85) rotate(-5deg); }
}

@keyframes titleImageReveal {
  0% { opacity: 0.08; }
  100% { opacity: 0.32; }
}

@keyframes titleTintReveal {
  0% { opacity: 0.15; }
  100% { opacity: 1; }
}

@keyframes titleGlowReveal {
  0% { opacity: 0.12; filter: blur(14px) saturate(1.25); }
  100% { opacity: 0.72; filter: blur(11px) saturate(1.45); }
}

@keyframes pleiadesPulse {
  0%, 100% { transform: scale(0.94); opacity: 0.72; }
  50% { transform: scale(1.06); opacity: 1; }
}

@keyframes starTwinkle {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  45% { opacity: 1; transform: scale(1.18); }
  65% { opacity: 0.7; transform: scale(1); }
}

@keyframes fissureCore {
  0%, 100% {
    opacity: 0.72;
  }
  43% {
    opacity: 0.98;
  }
  68% {
    opacity: 0.84;
  }
}

@keyframes fissureDepth {
  0%, 100% {
    opacity: 0.1;
    filter: blur(7px);
  }
  43% {
    opacity: 0.38;
    filter: blur(4px);
  }
  68% {
    opacity: 0.2;
    filter: blur(5.5px);
  }
}

@keyframes fissureStar {
  0%, 100% {
    opacity: 0.08;
    transform: scale(0.55);
  }
  38% {
    opacity: 0.9;
    transform: scale(1.2);
  }
  55% {
    opacity: 0.24;
    transform: scale(0.72);
  }
}

@keyframes mainPageLightPulse {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.9); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

@keyframes letter1Pulse {
  0%, 100% {
    backdrop-filter: brightness(1) saturate(1);
    -webkit-backdrop-filter: brightness(1) saturate(1);
  }
  50% {
    backdrop-filter: brightness(1.42) saturate(1.3);
    -webkit-backdrop-filter: brightness(1.42) saturate(1.3);
  }
}

@keyframes willowTopSway {
  0%, 100% {
    opacity: 0.52;
    transform: var(--base-transform) translateY(0) rotate(-2.4deg);
  }
  50% {
    opacity: 0.74;
    transform: var(--base-transform) translateY(3.6%) rotate(3.2deg);
  }
}

@keyframes willowTopPulse {
  0%, 100% {
    filter: saturate(1.02) brightness(0.98);
  }
  50% {
    filter: saturate(1.2) brightness(1.1);
  }
}

@keyframes lianaThreadSway {
  0%, 100% {
    transform: rotate(var(--thread-rot, 0deg));
    opacity: 0.42;
  }
  50% {
    transform: rotate(calc(var(--thread-rot, 0deg) + var(--thread-sway, 4deg)));
    opacity: 0.58;
  }
}

@keyframes sideBranchSway {
  0%, 100% {
    transform: var(--sb-transform) translateX(0);
  }
  50% {
    transform: var(--sb-transform) translateX(2.8%);
  }
}

@keyframes willowCornerSway {
  0%, 100% {
    opacity: 0.4;
    transform: var(--corner-transform) translateY(0);
  }
  50% {
    opacity: 0.58;
    transform: var(--corner-transform) translateY(2.2%);
  }
}

@keyframes greenNebulaTopPulse {
  0%, 100% { opacity: 0.62; transform: scale(0.98); }
  50% { opacity: 0.86; transform: scale(1.04); }
}

@media (max-width: 600px) {
  /* Keep LETTER 1 registered to the title artwork as it scales down. */
  .glyph-down-triangle {
    left: 57.642%;
    top: 49.595%;
    width: 8.108%;
    height: 14.78%;
    clip-path: polygon(50% 98.78%, 2.06% 1.22%, 98.97% 1.22%);
  }

  .letter1-main-light {
    left: 57.433%;
    top: 45.44%;
    filter: blur(5px);
  }

  .triangle-page-content {
    width: 92vw;
  }

  .triangle-page-content .excavation-notice {
    font-size: clamp(1.75rem, 7.5vw, 2.25rem);
  }
}


@media (prefers-reduced-motion: reduce) {
  .nebula::before,
  .nebula::after,
  .spark,
  .title-glow,
  .title-wrap::after,
  .title-art,
  .pleiades-mist,
  .cluster-star,
  .triangle-page-content .excavation-notice > span,
  .triangle-page-content .excavation-notice > span::before,
  .triangle-page-content .fissure-star,
  .letter1-main-light,
  .glyph-down-triangle {
    animation: none;
  }

  .glyph-down-triangle {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .willow-top {
    animation: none;
  }

  .liana-thread {
    animation: none;
  }

  .side-branch {
    animation: none;
  }

  .willow-curtain::before,
  .willow-curtain::after {
    animation: none;
  }

  .green-nebula-top {
    animation: none;
  }

  .triangle-zoom-layer,
  .triangle-page-content,
  .triangle-zoom-shape {
    transition: none;
  }

  .bg-video { display: none; }

  .video-shell {
    background:
      radial-gradient(circle at 22% 72%, rgba(70, 220, 255, 0.14), transparent 42%),
      radial-gradient(circle at 76% 28%, rgba(104, 255, 180, 0.1), transparent 38%),
      #0b0b0b;
  }
}