/* ===== URTHGROUNDS — Cinematic canvas, Gothic title, 3D hero ===== */
:root{
  --bg:#050607;
  --fg:#e9eee9;
  --ink:#98ff86;         /* herbal neon */
  --blood:#ff2444;       /* crimson */
  --gold:#e0c57d;        /* candle gold */
  --vibrant:#9aff3a;     /* vibrant accent for @urthground */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--fg);
  font:16px/1.65 ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial;
  background:var(--bg);
  overflow-x:hidden;
}

/* Very slow Matrix canvas */
#matrix{
  position:fixed; inset:0; z-index:-3; display:block;
  background:
    radial-gradient(120vmax 80vmax at 30% 20%, rgba(0,80,0,.10), transparent 60%),
    radial-gradient(90vmax 60vmax at 70% 80%, rgba(80,0,0,.06), transparent 65%),
    #050607;
}

/* Header */
.nav{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  background:rgba(5,6,7,.45); backdrop-filter:saturate(1.1) blur(10px);
}
.nav-right{ display:flex; align-items:center; gap:12px }
.nav a{ color:var(--ink); text-decoration:none; opacity:.95 }
.nav a:hover{ opacity:1; text-decoration:underline }

/* Gothic, readable, animated title */
.logo{
  font-family: "Cinzel", serif;
  font-size: clamp(30px, 7vw, 72px);
  line-height:1; text-decoration:none; letter-spacing:.02em;
  background: conic-gradient(from 0deg, var(--gold), var(--blood), var(--gold), var(--ink), var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 0 14px rgba(224,197,125,.28)) drop-shadow(0 0 10px rgba(152,255,134,.16));
  animation: titleSweep 20s linear infinite;
  transition: transform .15s ease;
}
@keyframes titleSweep{ 0%{background-position:0 50%} 100%{background-position:400% 50%} }

/* Layout */
.center{ min-height:74vh; display:grid; place-items:center; padding:36px 16px }
.wrap{ max-width:1200px; width:min(96vw,1200px); margin-inline:auto; text-align:center }

/* Centered Global Consciousness Dot */
.dot-center{ display:flex; justify-content:center; margin:8px 0 10px }

/* 3D canvases (no frames) */
#reaper3d, #ig3d{ background:transparent; border:none; outline:none }
#reaper3d{ position:relative; display:block; margin-inline:auto; width:min(1080px, 96vw); height:min(600px, 68vh) }
.ig3d-link{ display:inline-block; width:44px; height:44px } /* clickable wrapper */
#ig3d{ width:44px; height:44px }

/* Steam puffs over cup */
.steam{
  position:absolute; left:50%; top:48%;
  transform:translateX(-50%); width:180px; height:140px; pointer-events:none
}
.steam span{
  position:absolute; left:50%; width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.82), rgba(255,255,255,0) 60%);
  animation:puff 4.6s linear infinite; opacity:.78; filter: blur(.6px)
}
.steam span:nth-child(2){ animation-delay:1.1s; transform:translateX(-18px) }
.steam span:nth-child(3){ animation-delay:2.2s; transform:translateX(18px) }
@keyframes puff{
  0%{ transform:translate(-50%,16px) scale(.6); opacity:0 }
  25%{ opacity:.92 }
  100%{ transform:translate(-50%,-96px) scale(1.45); opacity:0 }
}

.caption{ margin:14px 0 0; font-size:clamp(18px,3vw,26px) }

/* CTA row (Tip a dolla!) */
.cta-row{ margin-top:18px; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap }
.btn{
  appearance:none; border:none; cursor:pointer;
  padding:12px 16px; border-radius:999px;
  color:var(--bg); background:linear-gradient(90deg,var(--ink),var(--gold));
  font-weight:700;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  transition: transform .12s ease, filter .12s ease
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.05) }

/* Mission & Coming-soon */
.mission{ margin-top:26px; font-size:18px; opacity:.9 }
.coming{ margin-top:10px; font-size:18px; opacity:.9 }
.vibrant{ color:var(--vibrant) }
.vibrant:hover{ text-decoration:underline }
.footer{ padding:28px 16px; text-align:center; opacity:.85 }
/* Ensure Global Consciousness Dot is always visible */
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 10;
  filter: drop-shadow(0 0 6px #00ffcc) brightness(1.2);
  transition: opacity 0.4s ease, filter 0.4s ease;
}
  filter: drop-shadow(0 0 12px #00ffee) brightness(1.4);
  opacity: 1;
}
/* Live GCP-style dot (replacement for iframe) */
  display: block;
  margin: 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #00ffcc 0%, #007755 80%);
  box-shadow: 0 0 12px #00ffcc, 0 0 24px #00ffcc80, 0 0 48px #00ffaa40;
  animation: pulseDot 6s ease-in-out infinite;
  cursor: pointer;
  transition: transform .3s ease;
  z-index: 10;
  position: relative;
}
  transform: scale(1.15);
}
@keyframes pulseDot {
  0%,100% { box-shadow: 0 0 12px #00ffcc, 0 0 24px #00ffcc80, 0 0 48px #00ffaa40; opacity: 1; }
  50% { box-shadow: 0 0 18px #00ffee, 0 0 36px #00ffee99, 0 0 72px #00ffee33; opacity: .85; }
}
/* Simple clickable GCP Dot */
.gcp-dot-min {
  width: 14px;
  height: 14px;
  background-color: #00ff88;
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
  top: 10px;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}
.gcp-dot-min:hover {
  opacity: 1;
}
iframe {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}
/* GCP Dot Centering */
.gcp-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: -20px; /* adjust this to move it closer/further from Reaper */
  z-index: 5;
}

.gcp-container iframe {
  border: none;
  width: 48px;
  height: 48px;
  pointer-events: auto;
  background: transparent;
}
/* Centered Global Consciousness Dot above the hero */
.gcp-container{
  display:flex;
  justify-content:center;
  align-items:center;
  margin: 8px 0 6px;
  position: relative;
  z-index: 6;            /* above 3D canvas */
}
.gcp-container iframe{
  border:none;
  width:48px;
  height:48px;
  background:transparent;
  pointer-events:auto;
}