@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500&display=swap");

:root {
  --bg: #f2f2f2;

  --a1: #c1caa2;
  --a2: #b99198;
  --a3: #706a65;

  --radius: 26px;

  --mx: 50vw;
  --my: 50vh;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  overflow-x: hidden;
  font-family: "Hanken Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

/* Torch / spotlight layer */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  background: radial-gradient(
    circle 200px at var(--mx) var(--my),
    rgba(255, 255, 255, 0.37) 0%,
    rgba(255, 255, 255, 0.10) 38%,
    rgba(255, 255, 255, 0.0) 72%
  );
  mix-blend-mode: screen;
}

.page {
  position: relative;
  min-height: 250vh;
  z-index: 1;
}

/* Header */
.hero {
  position: relative;
  height: 26vh;
  min-height: 180px;
  display: grid;
  place-items: start center;
  padding: 18px 20px 0;
  z-index: 5;
}

.hero-link {
  display: inline-block;
  margin-top: 6px;
  text-decoration: none;
  border-radius: 14px;
  outline: none;
  transform-origin: center;
}

.hero-logo {
  width: min(460px, 70vw);
  height: auto;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.18));
  transform: scale(1);
  transition:
    transform 900ms cubic-bezier(.2,.8,.2,1),
    filter 900ms cubic-bezier(.2,.8,.2,1);
}

.hero-link:hover .hero-logo {
  transform: scale(1.25);
  filter: drop-shadow(0 14px 44px rgba(0,0,0,0.18));
}

.hero-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(112, 106, 101, 0.22);
}

/* Scroll hint */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: grid;
  gap: 10px;
  align-items: center;
  justify-items: center;
  color: rgba(20, 20, 20, 0.58);
  letter-spacing: 0.18em;
  font-size: 12px;
  text-transform: uppercase;
  user-select: none;
  pointer-events: none;
}

.hint-line {
  width: 1px;
  height: 24px;
  background: rgba(20, 20, 20, 0.35);
  transform-origin: top;
  animation: hint 1.35s ease-in-out infinite;
}

@keyframes hint {
  0%, 100% { transform: scaleY(0.45); opacity: 0.45; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* Stage */
.stage {
  position: relative;
  padding: 18px 20px 0;
  z-index: 6;
}

/* Ethereum */
.eth-wrap {
  position: sticky;
  top: 36vh;
  display: grid;
  place-items: center;
  z-index: 8;
  pointer-events: none;
}

.eth-logo {
  width: min(220px, 38vw);
  height: auto;
  user-select: none;
  filter: drop-shadow(0 18px 60px rgba(0,0,0,0.18));
  transform-origin: center;
  will-change: transform, opacity;
}

/* Grid */
.grid {
  width: min(1160px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(22px, 4vw, 64px);
  align-items: start;
  min-height: 135vh;
}

/* Wrappers */
.logo-wrap {
  position: relative;
  will-change: transform, opacity;
  opacity: 0;
}

.logo-wrap-1 { grid-column: 1; }
.logo-wrap-2 { grid-column: 2; }

/* Clickable logo */
.logo-card {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  outline: none;
  position: relative;
}

/* WebGL logo */
.webgl-logo {
  width: min(630px, 62vw);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: visible;
  position: relative;
  opacity: 1;
}

.logo-wrap-2 .webgl-logo { width: min(700px, 68vw); }

.webgl-logo canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* CLICK hints — tighter + hide/show */
.click-hint {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: rgba(20, 20, 20, 0.58);
  letter-spacing: 0.18em;
  font-size: 12px;
  text-transform: uppercase;
  user-select: none;
  pointer-events: none;

  transition: opacity 320ms cubic-bezier(.2,.8,.2,1);
}
.click-hint.is-hidden { opacity: 0; }

/* as close as possible */
.click-hint-right { left: calc(100% + 6px); }
.click-hint-left  { right: calc(100% + 6px); }

.hint-line-x {
  height: 1px;
  width: 34px;
  background: rgba(20, 20, 20, 0.35);
  animation: hintx 1.35s ease-in-out infinite;
  opacity: 0.8;
}

.hint-line-x-right { transform-origin: left; }
.hint-line-x-left  { transform-origin: right; }

@keyframes hintx {
  0%, 100% { transform: scaleX(0.45); opacity: 0.45; }
  50% { transform: scaleX(1); opacity: 1; }
}

/* Pop text */
.pop {
  position: absolute;
  font-family: "Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 30px;
  line-height: 1.25;
  font-weight: 400;
  color: rgba(112, 106, 101, 0.95);
  width: clamp(320px, 34vw, 720px);

  opacity: 0;
  transform: translateY(-50%) translate3d(0, 12px, 0);
  transition:
    opacity 520ms cubic-bezier(.2,.8,.2,1),
    transform 520ms cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}

.pop.is-open {
  opacity: 1;
  transform: translateY(-50%) translate3d(0, 0px, 0);
}

.pop-right { left: calc(100% + 22px); top: 50%; }
.pop-left  { right: calc(100% + 22px); top: 50%; }

/* Overlay */
.overlay {
  position: fixed;
  pointer-events: none;
  z-index: 50;
  opacity: 0.5;
  mix-blend-mode: normal;
  will-change: transform;
}

.overlay-center {
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%) rotate(20deg);
}

.overlay-center img {
  width: 2083px;
  max-width: none;
  height: auto;
  user-select: none;
}

/* Aura trail */
.aura-trail {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.aura-dot {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  transform: translate(-9999px, -9999px);
  will-change: transform;
  opacity: 1;
  mix-blend-mode: multiply;
  filter: url(#liquid) blur(10px);

  background:
    radial-gradient(circle at 30% 30%, rgba(193, 202, 162, 0.95), transparent 60%),
    radial-gradient(circle at 70% 40%, rgba(185, 145, 152, 0.85), transparent 62%),
    radial-gradient(circle at 45% 75%, rgba(112, 106, 101, 0.78), transparent 65%);
}

.spacer { height: 90vh; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

@media (max-width: 860px) {
  .grid { grid-template-columns: 1fr; min-height: auto; }
  .logo-wrap-1, .logo-wrap-2 { grid-column: 1; }

  .logo-wrap-2 .webgl-logo { width: min(760px, 92vw); }
  .webgl-logo { width: min(680px, 90vw); }

  .overlay-center img { width: 1400px; }
  .overlay-center { top: 58%; }

  .click-hint-right, .click-hint-left {
    position: relative;
    left: auto; right: auto;
    top: auto;
    transform: none;
    margin-top: 12px;
    justify-content: center;
  }

  .pop, .pop-left, .pop-right {
    position: relative;
    left: auto; right: auto; top: auto;
    margin-top: 14px;
    width: min(92vw, 720px);
    transform: translate3d(0, 12px, 0);
  }
  .pop.is-open { transform: translate3d(0, 0px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hint-line, .hint-line-x { animation: none; }
  body::before { display: none; }
  .aura-trail { display: none; }
}