:root {
  --emerald: #1e332a;
  --sage: #5c8770;
  --paper: #f5f7f3;
  --ink: #18231e;
  --hairline: rgba(30, 51, 42, .16);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
  overflow: hidden;
  background: #050706;
  color: var(--emerald);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.intro {
  position: relative;
  isolation: isolate;
  width: 100vw;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: #050706;
}

.aperture {
  position: absolute;
  z-index: -4;
  left: 50%; top: 50%;
  width: 225vmax; height: 225vmax;
  margin: -112.5vmax 0 0 -112.5vmax;
  border-radius: 50%;
  background: var(--paper);
  transform: scale(0);
  will-change: transform;
}

.grain {
  position: absolute; inset: 0; z-index: 8; pointer-events: none;
  opacity: .032;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.grid {
  position: absolute; inset: 0; z-index: -2; opacity: 0;
  background:
    linear-gradient(to right, transparent calc(50% - .5px), rgba(30,51,42,.08) 50%, transparent calc(50% + .5px)),
    linear-gradient(to bottom, transparent calc(50% - .5px), rgba(30,51,42,.08) 50%, transparent calc(50% + .5px));
  transition: opacity 900ms var(--ease);
}
.intro.is-ready .grid { opacity: 1; }

.stage {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  perspective: 1200px;
}

.canvas-shell {
  position: relative;
  width: min(63vmin, 700px);
  aspect-ratio: 1;
}
canvas, .fallback-badge {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.fallback-badge { object-fit: contain; opacity: 0; pointer-events: none; }
.no-three .fallback-badge { opacity: 1; }

.reference-layer {
  position: absolute; z-index: 6;
  width: min(63vmin, 700px); aspect-ratio: 1;
  opacity: 0; pointer-events: none;
}
.reference-layer img { width: 100%; height: 100%; object-fit: contain; }
.intro.show-reference .reference-layer { opacity: .48; mix-blend-mode: multiply; }
.intro.show-reference .canvas-shell { opacity: .55; }

.corner {
  position: absolute; z-index: 1; width: 45px; height: 45px;
  opacity: 0; transition: opacity 700ms ease;
}
.corner-a { top: 11%; left: 7%; border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
.corner-b { right: 7%; bottom: 12%; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.intro.is-ready .corner { opacity: 1; }

.status {
  position: absolute; z-index: 50; left: 50%; bottom: 18px; transform: translateX(-50%);
  font-size: 11px; color: rgba(245,247,243,.7); pointer-events: none;
}
.status:empty { display: none; }


@media (max-width: 700px) {
  .intro { min-height: 560px; }
  .canvas-shell, .reference-layer { width: min(82vw, 520px); }
  .corner { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aperture { transform: scale(1) !important; }
  .grid, .corner { transition: none !important; }
}