:root{ --bg:#000; --fg:#f7f7f7; --gold:#e8c97a; --muted:#9aa0a6; }
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; background:#000; color:var(--fg);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  display:flex; align-items:center; justify-content:center;
}
#gate{
  width:min(940px,92vw); padding:48px 28px; text-align:center;
  background:rgba(12,14,20,.65); border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 60px rgba(0,0,0,.6); border-radius:16px; backdrop-filter:blur(6px);
}
h1{margin:0 0 8px; font-weight:700; font-size:clamp(28px,5vw,48px); color:#fff}
.caption{margin:0 0 26px; color:var(--muted); font-size:clamp(14px,2.2vw,18px)}
#countdown{display:inline-flex; gap:14px; padding:14px 18px; border:1px solid rgba(232,201,122,.25); border-radius:12px}
.time{display:grid; place-items:center; min-width:78px; padding:10px 8px; border-radius:10px; background:rgba(0,0,0,.55)}
.value{font-weight:800; font-size:clamp(26px,6vw,40px); color:var(--gold)}
.label{margin-top:6px; font-size:12px; text-transform:uppercase; letter-spacing:.18em; color:#d6d6d6}
.note{margin-top:28px; font-size:12px; color:var(--muted)}
.bg-glyph{
  position:absolute;
  inset:-20%;
  background:center/contain no-repeat url("../images/ancient-wisdom.png");
  opacity:.25;          /* adjust 0.03–0.10 to taste */
  filter:blur(1px);
  pointer-events:none;
}
#gate {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    overflow: hidden;
}

#gate .glyph {
    position: absolute;
    width: 80%;
    height: auto;
    opacity: 0.15;
    animation: pulse 8s infinite alternate;
}

@keyframes pulse {
    0% { opacity: 0.1; transform: scale(1); }
    100% { opacity: 0.25; transform: scale(1.05); }
  #bg{
  position: absolute;
  inset: 0;
  background: url('../images/ancient-wisdom.png') no-repeat center/contain;
  opacity: 0.25; /* brightness */
  filter: blur(1px) drop-shadow(0 0 12px gold);
  pointer-events: none;
  animation: glow 6s ease-in-out infinite alternate;
}

/* subtle breathing glow */
@keyframes glow{
  from{ opacity: .20; filter: blur(1px) drop-shadow(0 0 8px gold); }
  to  { opacity: .35; filter: blur(1px) drop-shadow(0 0 18px gold); }
}  #bg {
  position: absolute;
  inset: 0;
  background: url('../images/ancient-wisdom.png') no-repeat center/contain;
  opacity: 0.25; /* brightness */
  filter: blur(1px) drop-shadow(0 0 12px gold);
  pointer-events: none;
  animation: glow 6s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    opacity: 0.2;
    filter: blur(1px) drop-shadow(0 0 8px gold);
  }
  to {
    opacity: 0.35;
    filter: blur(1px) drop-shadow(0 0 18px gold);
  }
}
    
}