:root{
  --glow: 130, 110, 255;
  --bg-dim: rgba(6, 6, 12, .55);
  --letterbox-height: 8vh;
}

*{margin:0;padding:0;box-sizing:border-box;}

html,body{
  height:100%;
  overflow:hidden;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background:#050508;
  cursor:default;
}

/* ---------- background video layers ---------- */
#bg-layer{
  position:fixed; inset:0;
  z-index:0;
}
.bg-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.1s ease;
  background:#0a0a12;
}
.bg-video.active{ opacity:1; }

/* animated gradient fallback when a video file hasn't been added yet */
.bg-video.fallback{
  background:linear-gradient(135deg, #1b1030, #0a0a16, #1a0f2e);
  background-size:400% 400%;
  animation: driftGradient 12s ease infinite;
}
.bg-video.fallback:nth-of-type(2){ background-image:linear-gradient(135deg,#0f1830,#0a0a16,#101a2e); }
.bg-video.fallback:nth-of-type(3){ background-image:linear-gradient(135deg,#2a0f1e,#0a0a16,#20101a); }
.bg-video.fallback:nth-of-type(4){ background-image:linear-gradient(135deg,#0f2a20,#0a0a16,#0f2018); }

@keyframes driftGradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

#bg-overlay{
  position:fixed; inset:0; z-index:1;
  background:
    radial-gradient(circle at 50% 45%, rgba(0,0,0,.25), rgba(0,0,0,.75) 75%),
    var(--bg-dim);
  backdrop-filter: blur(1px);
  transition: background .15s ease;
}

#particles{
  position:fixed; inset:0; z-index:2;
  pointer-events:none;
}

/* ---------- cinematic letterbox bars ---------- */
#letterbox-top,
#letterbox-bottom{
  position:fixed;
  left:0; right:0;
  height:var(--letterbox-height);
  background:#000;
  z-index:5;
  pointer-events:none;
}
#letterbox-top{
  top:0;
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 1px 12px rgba(0,0,0,.9);
}
#letterbox-bottom{
  bottom:0;
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 -1px 12px rgba(0,0,0,.9);
}

/* ---------- click-to-enter gate ---------- */
#gate{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  background:#000;
  cursor:pointer;
  transition:opacity .6s ease, visibility .6s ease;
}
#gate.hidden{ opacity:0; visibility:hidden; pointer-events:none; }

#gate-inner{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.gate-ring{
  width:64px; height:64px;
  border-radius:50%;
  border:2px solid rgba(var(--glow), .6);
  box-shadow:0 0 24px rgba(var(--glow), .5);
  animation:pulseRing 1.8s ease-in-out infinite;
}
@keyframes pulseRing{
  0%,100%{ transform:scale(1); opacity:.7; }
  50%{ transform:scale(1.15); opacity:1; }
}
#gate-inner p{
  color:rgba(255,255,255,.6);
  letter-spacing:.2em;
  text-transform:uppercase;
  font-size:.75rem;
}

/* ---------- top-right icon row ---------- */
#topbar{
  position:fixed;
  top:20px; right:20px;
  z-index:20;
  display:flex; align-items:center; gap:10px;
  opacity:0;
  transform:translateY(-10px);
  transition:opacity .8s ease, transform .8s ease;
}
#topbar.visible{ opacity:1; transform:translateY(0); }

.icon-btn{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  background:transparent;
  border:none;
  color:rgba(255,255,255,.75);
  cursor:pointer;
  transition:color .2s ease, transform .2s ease;
}
.icon-btn svg{ width:20px; height:20px; filter:drop-shadow(0 1px 6px rgba(0,0,0,.6)); }
.icon-btn:hover{ color:#fff; transform:translateY(-2px); }