/* === HOME PAGE STYLES === */

/* HERO */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-dark);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at 20% 50%, rgba(108,63,229,0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(0,229,200,0.08) 0%, transparent 50%),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="400" height="400" filter="url(%23n)" opacity="0.03"/></svg>');
  z-index: 0;
}

/* Stars */
.stars {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 10%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 80%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 90%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(2px 2px at 90% 60%, rgba(108,63,229,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 50%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 60%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 85%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 15%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 25%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 75%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 45%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(2px 2px at 35% 15%, rgba(0,229,200,0.5) 0%, transparent 100%);
}

#matrixCanvas {
  position: absolute;
  inset: 0;
  opacity: 0.15;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 20px;
  animation: fadeUp 1s ease both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

/* GLITCH EFFECT */
.glitch {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2.5rem, 8vw, 6rem);
  font-weight: 900;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 6px;
  position: relative;
  animation: fadeUp 1s ease both;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
}
.glitch::before {
  color: #00e5c8;
  animation: glitch1 3s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
}
.glitch::after {
  color: #6c3fe5;
  animation: glitch2 3s infinite;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
}

@keyframes glitch1 {
  0%, 90%, 100% { transform: translate(0); opacity: 0; }
  92% { transform: translate(-3px, 1px); opacity: 0.8; }
  94% { transform: translate(3px, -1px); opacity: 0.8; }
  96% { transform: translate(0); opacity: 0; }
}
@keyframes glitch2 {
  0%, 90%, 100% { transform: translate(0); opacity: 0; }
  91% { transform: translate(3px, 2px); opacity: 0.8; }
  93% { transform: translate(-3px, -2px); opacity: 0.8; }
  95% { transform: translate(0); opacity: 0; }
}

.hero-sub {
  font-family: 'Share Tech Mono', monospace;
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  color: var(--gray);
  margin: 16px 0 36px;
  animation: fadeUp 1s 0.2s ease both;
}

.hero-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  animation: fadeUp 1s 0.4s ease both;
}

/* hero bottom fade — no wave, just a clean gradient into ghost section */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 180px;
  background: linear-gradient(to bottom, transparent 0%, var(--bg-dark) 100%);
  z-index: 2;
  pointer-events: none;
}

.hero-wave { display: none; }

/* GHOST SECTION */
.ghost-section {
  background: var(--bg-dark);
  padding: 0 40px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 100%;
  margin: 0 auto;
}

.ghost-section > * {
  max-width: 700px;
  width: 100%;
}

.ghost-img-wrap {
  position: relative;
  width: 100%;
  max-width: 600px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.ghost-img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  display: block;
  background: linear-gradient(135deg, #0a0a2e, #1a1a5e);
  min-height: 300px;
}

.img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(5,5,26,0.8));
}

/* Fallback ghost image using CSS */
.ghost-img-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at 50% 40%, rgba(0,200,180,0.3) 0%, transparent 60%),
    linear-gradient(135deg, #05051a, #0a1a3a);
  z-index: -1;
}

.ghost-text {
  text-align: center;
}

.ghost-text h2 {
  font-family: 'Share Tech Mono', monospace;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--white);
  margin-bottom: 12px;
}

.ghost-text p {
  color: var(--gray);
  font-size: 0.95rem;
  margin-bottom: 24px;
  max-width: 500px;
}

/* UPCOMING SECTION */
.upcoming-section {
  position: relative;
  background: linear-gradient(135deg, #070730, #0d0d50, #070730);
  padding: 80px 20px;
  overflow: hidden;
  text-align: center;
}

.upcoming-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at 50% 0%, rgba(108,63,229,0.2) 0%, transparent 70%),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.3" numOctaves="4" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="600" height="600" filter="url(%23n)" opacity="0.05"/></svg>');
  pointer-events: none;
}

.upcoming-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
}

.upcoming-content p {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 32px;
  text-align: justify;
}

@media (max-width: 768px) {
  .ghost-section { padding: 60px 20px; }
  .hero-btns { flex-direction: column; align-items: center; }
}