:root {
  --cyan: #00f2ff;
  --magenta: #ff0066;
  --dark: #0a0a1f;
  --glass: rgba(10, 10, 40, 0.65);
}
* { margin:0; padding:0; box-sizing:border-box; }
body, html { 
  height:100%; 
  background: radial-gradient(circle at 50% 50%, #1a0033 0%, #000 70%);
  background-attachment: fixed;
  color:#fff; 
  font-family:'Inter', sans-serif; 
  overflow-x: hidden;
}

.grid {
  position: fixed; inset: 0;
  background-image: 
    linear-gradient(rgba(0,242,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,242,255,0.06) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: drift 40s linear infinite;
}
@keyframes drift { from { background-position: 0 0; } to { background-position: 100px 100px; } }

/* ENTER SCREEN */
#enterScreen {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2rem; text-align: center; z-index: 10;
  background: rgba(10, 10, 40, 0.85);     /* fallback - slightly more opaque */
  gap: 2.5rem;
}

/* Safe backdrop-filter only where supported */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  #enterScreen {
    background: rgba(10, 10, 40, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .enter-btn, .skip-btn {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

/* LOGO - replaced conic-gradient ring with SVG fallback for Edge */
.ed-logo {
  position: relative;
  width: clamp(140px, 35vw, 280px);
  aspect-ratio: 1;
  animation: float 6s ease-in-out infinite;
  border-radius: 50%;
  overflow: hidden;
  filter: drop-shadow(0 0 40px var(--cyan));
}

/* Simple solid + pseudo-element glow ring that works everywhere */
.ed-logo::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 6px solid transparent;
  background: linear-gradient(90deg, #00f2ff, #ff0066, #00ff99, #ff3399) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
  animation: spin 15s linear infinite;
}

/* Fallback for very old browsers that don't understand mask-composite */
@supports not (mask-composite: exclude) {
  .ed-logo::before {
    background: conic-gradient(#00f2ff, #ff0066, #00ff99, #ff3399, #00f2ff);
  }
}

.ed-image {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}

/* Title & button - no more inline @supports */
h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.4rem, 4vw, 3.25rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, #00f2ff 0%, #ff0066 50%, #00ff99 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 60px rgba(0,242,255,0.5);
  white-space: nowrap;
  margin: 0;
}

.tagline {
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  opacity: 0.9;
  letter-spacing: 0.05em;
  max-width: 90%;
}

.enter-btn {
  padding: 1.2rem 3.5rem;
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  color: white;
  background: rgba(255,0,102,0.25);
  border: 2px solid var(--cyan);
  border-radius: 60px;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 40px rgba(0,242,255,0.4);
  transition: all 0.4s cubic-bezier(0.25,0.8,0.25,1);
}
.enter-btn:hover {
  transform: translateY(-8px) scale(1.05);
  background: rgba(255,0,102,0.45);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 80px var(--cyan);
}

/* VIDEO SCREEN */
#videoScreen {
  position: fixed; inset: 0; background: var(--dark);
  display: none; align-items: center; justify-content: center;
  padding: 1rem;
}
.video-container {
  position: relative; width: 100%; max-width: 1100px;
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 0 80px rgba(0,242,255,0.6), 0 0 140px rgba(255,0,102,0.4);
}
#introVideo { width: 100%; height: auto; display: block; }

.skip-btn {
  position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%);
  padding: 0.9rem 2.5rem; background: rgba(255,0,102,0.3);
  border: 2px solid var(--cyan); border-radius: 50px;
  color: white; font-weight: 900; font-size: 1.1rem;
  letter-spacing: 0.1em; cursor: pointer;
  transition: all 0.3s;
}
.skip-btn:hover {
  background: rgba(255,0,102,0.6);
  transform: translateX(-50%) translateY(-5px);
}

.fade-out { opacity: 0; transition: opacity 1s ease; }