/* ========================================
   NextShift.dev - Coming Soon Page
   ======================================== */

/* ---------- Base ---------- */
:root {
  --bg-1: #070b12;
  --bg-2: #0b0f1a;
  --neon: #2bd8ff;
  --neon-2: #4e6bff;
  --neon-3: #ff006e;
  --text: #eaf3ff;
  --muted: #94a3b8;
  --success: #00ff88;
  --purple: #a855f7;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Outfit', 'Space Grotesk', sans-serif;
  color: var(--text);
  background: radial-gradient(circle at 30% 20%, #05121e 0%, #03080f 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 70% 40%, rgba(43, 216, 255, 0.08), transparent 70%);
  animation: pulseBG 6s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes pulseBG {
  0% { opacity: 0.4; transform: scale(1); }
  100% { opacity: 0.8; transform: scale(1.1); }
}


/* Canvas Background */
#bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  filter: contrast(120%) saturate(120%);
}

/* ========================================
   HOLOGRAPHIC SCAN LINES
   ======================================== */

.scan-lines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(43, 216, 255, 0.03) 2px,
    rgba(43, 216, 255, 0.03) 4px
  );
  animation: scanMove 8s linear infinite;
}

@keyframes scanMove {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(80px);
  }
}

/* ========================================
   SHOOTING STARS
   ======================================== */

.stars-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.8);
  animation: shootingStar 3s linear;
}

@keyframes shootingStar {
  0% {
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translateX(-300px) translateY(300px);
    opacity: 0;
  }
}

/* ========================================
   HERO SECTION
   ======================================== */

.hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  position: relative;
  padding: 6rem 1.25rem 4rem;
  isolation: isolate;
}

/* Glow Ring */
.glow-ring {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(68vw, 780px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(43, 216, 255, 0.18), transparent 60%);
  filter: blur(20px);
  z-index: -1;
  animation: float 6s ease-in-out infinite alternate;
}

@keyframes float {
  to {
    transform: translateY(10px) scale(1.02);
  }
}

/* ========================================
   BRAND & LOGO
   ======================================== */

.brand {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 20px rgba(43, 216, 255, 0.25));
}

.logo-container {
  transition: transform 0.1s ease-out;
  transform-style: preserve-3d;
}

.logo {
  width: min(16vw, 84px);
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(43, 216, 255, 0.3);
  transform: translateZ(0);
  transition: all 0.3s ease;
  filter: drop-shadow(0 0 20px rgba(43, 216, 255, 0.4));
}

/* Vision 2044 Badge */
.vision-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  background: linear-gradient(135deg, rgba(43, 216, 255, 0.1), rgba(78, 107, 255, 0.1));
  border: 1px solid rgba(43, 216, 255, 0.3);
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neon);
  box-shadow: 0 0 30px rgba(43, 216, 255, 0.3), inset 0 0 20px rgba(43, 216, 255, 0.05);
  animation: badgePulse 3s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

.vision-badge::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(43, 216, 255, 0.2), transparent);
  animation: badgeShine 3s infinite;
}

@keyframes badgePulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(43, 216, 255, 0.3), inset 0 0 20px rgba(43, 216, 255, 0.05);
  }
  50% {
    box-shadow: 0 0 40px rgba(43, 216, 255, 0.5), inset 0 0 30px rgba(43, 216, 255, 0.1);
  }
}

@keyframes badgeShine {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.vision-icon {
  font-size: 1rem;
}

.title {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.95;
  letter-spacing: 0.4px;
  margin: 0;
  font-weight: 800;
  text-shadow: 0 2px 30px rgba(78, 107, 255, 0.35), 0 0 2px rgba(78, 107, 255, 0.7);
}

.accent {
  background: linear-gradient(90deg, var(--neon), var(--neon-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ========================================
   COMING SOON TEXT WITH GLITCH
   ======================================== */

.coming {
  margin: 0.25rem 0 0;
  font-weight: 700;
  font-size: clamp(1.25rem, 2.8vw, 2rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.95;
  position: relative;
}

.prefix {
  color: var(--neon);
  margin-right: 0.5rem;
}

.glitch-text {
  position: relative;
  display: inline-block;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.glitch-text::before {
  color: var(--neon);
  animation: glitch1 2.5s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}

.glitch-text::after {
  color: var(--neon-3);
  animation: glitch2 2.5s infinite;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
}

@keyframes glitch1 {
  0%, 96%, 100% {
    opacity: 0;
    transform: translate(0);
  }
  97% {
    opacity: 0.8;
    transform: translate(-2px, 2px);
  }
  98% {
    opacity: 0.8;
    transform: translate(2px, -2px);
  }
  99% {
    opacity: 0.8;
    transform: translate(-2px, 2px);
  }
}

@keyframes glitch2 {
  0%, 96%, 100% {
    opacity: 0;
    transform: translate(0);
  }
  97% {
    opacity: 0.8;
    transform: translate(2px, -2px);
  }
  98% {
    opacity: 0.8;
    transform: translate(-2px, 2px);
  }
  99% {
    opacity: 0.8;
    transform: translate(2px, -2px);
  }
}

.cursor {
  display: inline-block;
  width: 1ch;
  translate: 0 0.1ch;
  border-right: 2px solid var(--neon);
  animation: blink 1.2s steps(1, end) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.tagline {
  margin: 0.85rem auto 2rem;
  color: var(--muted);
  max-width: 60ch;
  font-weight: 400;
}

/* ========================================
   PROGRESS BAR
   ======================================== */

.progress-section {
  margin: 2rem auto 2.5rem;
  max-width: 500px;
  width: 90%;
}

.progress-bar {
  position: relative;
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(43, 216, 255, 0.2);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--neon), var(--neon-2));
  border-radius: 10px;
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.progress-glow {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 0;
  width: 0;
  background: var(--neon);
  filter: blur(10px);
  opacity: 0.6;
  transition: width 0.3s ease;
  pointer-events: none;
}

.progress-text {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--neon);
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ========================================
   COUNTDOWN TIMER
   ======================================== */

.countdown {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  justify-content: center;
  align-items: center;
  margin: 2rem auto;
  flex-wrap: wrap;
}

.countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-width: clamp(60px, 10vw, 90px);
}

.countdown-value {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  background: linear-gradient(180deg, var(--neon), var(--neon-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: 'Space Grotesk', monospace;
  line-height: 1;
  text-shadow: 0 0 30px rgba(43, 216, 255, 0.5);
  padding: 0.5rem;
  border-radius: 8px;
  background-color: rgba(43, 216, 255, 0.05);
  border: 1px solid rgba(43, 216, 255, 0.2);
  min-width: 100%;
  position: relative;
  overflow: hidden;
}

.countdown-value::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(43, 216, 255, 0.1));
  pointer-events: none;
}

.countdown-label {
  font-size: clamp(0.7rem, 1.5vw, 0.85rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 600;
}

.countdown-divider {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--neon);
  font-weight: 300;
  opacity: 0.5;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
}

/* ========================================
   EMAIL NOTIFY FORM
   ======================================== */

.notify-section {
  margin: 3rem auto 2rem;
  max-width: 500px;
  width: 90%;
}

.notify-title {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  margin-bottom: 1rem;
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.notify-form {
  width: 100%;
}

.input-wrapper {
  display: flex;
  gap: 0.5rem;
  position: relative;
}

.input-wrapper input {
  flex: 1;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(43, 216, 255, 0.3);
  border-radius: 12px;
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  transition: all 0.3s ease;
}

.input-wrapper input:focus {
  outline: none;
  border-color: var(--neon);
  background: rgba(43, 216, 255, 0.05);
  box-shadow: 0 0 20px rgba(43, 216, 255, 0.2);
}

.input-wrapper input::placeholder {
  color: var(--muted);
  opacity: 0.6;
}

.notify-btn {
  padding: 1rem 1.75rem;
  background: linear-gradient(135deg, var(--purple), #d946ef);
  border: none;
  border-radius: 12px;
  color: white;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(168, 85, 247, 0.3);
}

.notify-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(168, 85, 247, 0.5);
}

.notify-btn:active {
  transform: translateY(0);
}

.btn-icon {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.notify-btn:hover .btn-icon {
  transform: translateX(4px);
}

.form-message {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  text-align: center;
  min-height: 1.5rem;
}

.form-message.success {
  color: var(--success);
  animation: slideDown 0.3s ease;
}

.form-message.error {
  color: var(--neon-3);
  animation: shake 0.5s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

/* ========================================
   SOCIAL ICONS
   ======================================== */

.social {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  margin: 2rem 0 2.5rem;
}

.icon {
  --size: 46px;
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
}

.icon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(43, 216, 255, 0.3), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.icon:hover::before {
  opacity: 1;
}

.icon:hover {
  transform: translateY(-3px);
  border-color: rgba(43, 216, 255, 0.5);
  box-shadow: 0 18px 60px rgba(43, 216, 255, 0.15);
}

.icon:active {
  transform: translateY(0) scale(0.98);
}

/* Scroll Hint */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  translate: -50% 0;
  color: var(--muted);
  font-size: 0.9rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  opacity: 0.8;
}

.scroll-hint .chev {
  animation: bob 1.8s ease-in-out infinite;
}

@keyframes bob {
  50% { transform: translateY(6px); }
}

/* ========================================
   VISION 2044 SPOTLIGHT
   ======================================== */

.vision-spotlight {
  padding: 8rem 1rem;
  background: linear-gradient(180deg, transparent, rgba(43, 216, 255, 0.02));
  position: relative;
}

.vision-card {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  background: linear-gradient(135deg, rgba(43, 216, 255, 0.08), rgba(78, 107, 255, 0.05));
  border-radius: 24px;
  padding: 3.5rem 3rem;
  overflow: hidden;
  backdrop-filter: blur(20px);
  box-shadow: 
    0 20px 60px rgba(43, 216, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: visionFloat 6s ease-in-out infinite;
}
/* Matrix Data Stream Background */
.matrix-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.15;
  background-image: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(43, 216, 255, 0.1) 2px,
      rgba(43, 216, 255, 0.1) 4px
    );
  animation: matrixScroll 20s linear infinite;
  font-family: 'Space Grotesk', monospace;
  font-size: 10px;
  line-height: 12px;
  color: rgba(43, 216, 255, 0.3);
  overflow: hidden;
}

.matrix-bg::before {
  content: '01001110 01100101 01111000 01110100 01010011 01101000 01101001 01100110 01110100 00100000 00110010 00110000 00110100 00110100 00100000 01010110 01101001 01110011 01101001 01101111 01101110 00100000 01000110 01110101 01110100 01110101 01110010 01100101 00100000 01000100 01101001 01100111 01101001 01110100 01100001 01101100 00100000';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  word-wrap: break-word;
  padding: 1rem;
  opacity: 0.5;
}

@keyframes matrixScroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(20px);
  }
}

/* Scanning Line */
.scan-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(43, 216, 255, 0.8),
    transparent
  );
  box-shadow: 0 0 10px rgba(43, 216, 255, 0.8);
  z-index: 1;
  pointer-events: none;
  animation: scanLineMove 4s ease-in-out infinite;
}

@keyframes scanLineMove {
  0%, 100% {
    top: 0;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

.vision-content {
  position: relative;
  z-index: 10;
  text-align: center;
}

.vision-year {
  display: inline-block;
  font-size: clamp(4rem, 10vw, 7rem);
  font-weight: 800;
  font-family: 'Space Grotesk', monospace;
  background: linear-gradient(135deg, var(--neon), var(--neon-2), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin-bottom: 1rem;
  text-shadow: 0 0 60px rgba(43, 216, 255, 0.5);
  position: relative;
  filter: drop-shadow(0 0 30px rgba(43, 216, 255, 0.6));
}



.vision-heading {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  font-family: 'Space Grotesk', system-ui;
  margin: 0 0 1.5rem;
  background: linear-gradient(90deg, var(--text), var(--neon));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
}

.vision-description {
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.8;
  color: var(--muted);
  max-width: 700px;
  margin: 0 auto 3rem;
  font-weight: 400;
}

.vision-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stat-number {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  font-family: 'Space Grotesk', monospace;
  background: linear-gradient(180deg, var(--neon), var(--neon-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}

.stat-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 600;
}

.stat-divider {
  width: 1px;
  height: 50px;
  background: linear-gradient(180deg, transparent, rgba(43, 216, 255, 0.5), transparent);
}

.vision-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem;
  background: rgba(43, 216, 255, 0.05);
  border: 1px solid rgba(43, 216, 255, 0.2);
  border-radius: 16px;
  transition: all 0.3s ease;
}

.pillar:hover {
  background: rgba(43, 216, 255, 0.1);
  border-color: rgba(43, 216, 255, 0.4);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(43, 216, 255, 0.2);
}

.pillar-icon {
  font-size: 2rem;
  filter: drop-shadow(0 0 10px rgba(43, 216, 255, 0.5));
}

.pillar-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  letter-spacing: 0.02em;
}

/* ========================================
   ABOUT SECTION
   ======================================== */

.about {
  position: relative;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.02));
  padding: 6rem 1rem 8rem;
}

.container {
  max-width: 1000px;
  margin-inline: auto;
}

.about h3 {
  font-family: 'Space Grotesk', system-ui;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  margin: 0 0 0.5rem;
}

.about p {
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.05rem);
  line-height: 1.75;
  margin: 0;
}

/* ========================================
   FOOTER
   ======================================== */

.footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), transparent);
  padding: 2rem 1rem 3rem;
  color: var(--muted);
  text-align: center;
}


/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
  .input-wrapper {
    flex-direction: column;
  }

  .notify-btn {
    width: 100%;
    justify-content: center;
  }

  .countdown {
    gap: 0.5rem;
  }

  .countdown-item {
    min-width: 70px;
  }

  .countdown-value {
    font-size: 2rem;
  }

  .vision-card {
    padding: 2.5rem 1.5rem;
  }

  .vision-stats {
    gap: 1rem;
  }

  .stat-divider {
    height: 40px;
  }

  .vision-pillars {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@media (max-width: 560px) {
  .icon {
    --size: 42px;
  }

  .tagline {
    padding: 0 0.5rem;
  }

  .countdown {
    gap: 0.25rem;
    font-size: 0.9em;
  }

  .countdown-divider {
    display: none;
  }

  .vision-card {
    padding: 2rem 1rem;
  }

  .vision-year {
    font-size: 3.5rem;
  }

  .stat-divider {
    display: none;
  }
}