/* ===================================
   CSS Custom Properties
   =================================== */
:root {
  /* Brand Colors */
  --color-purple: #6815FE;
  --color-blue: #0D91FF;
  --color-white: #ffffff;

  /* Timing */
  --timing-fast: 0.3s;
  --timing-medium: 0.6s;
  --timing-slow: 1s;
  --timing-very-slow: 1.5s;
  --easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Typography */
  --font-headline: 'Bebas Neue', sans-serif;
  --font-body: 'Montserrat', sans-serif;

  /* Spacing */
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
}

/* ===================================
   Reset and Base Styles
   =================================== */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-body);
  color: var(--color-white);
  overflow: hidden;
}

/* Safe area support for notched devices */
body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ===================================
   Animations
   =================================== */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes logoReveal {
  from {
    opacity: 0;
    transform: scale(0.9);
    filter: brightness(1.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes logoGlow {
  0%, 100% {
    filter: drop-shadow(0 0 20px rgba(104, 21, 254, 0.4))
            drop-shadow(0 0 40px rgba(13, 145, 255, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 30px rgba(104, 21, 254, 0.6))
            drop-shadow(0 0 60px rgba(13, 145, 255, 0.4));
  }
}

@keyframes thunderFlash {
  0% { opacity: 0; }
  10% { opacity: 0.8; }
  20% { opacity: 0.1; }
  30% { opacity: 0.6; }
  50% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes textShimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

@keyframes dividerExpand {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* ===================================
   Thunder Flash Effect
   =================================== */
.thunder-flash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(104, 21, 254, 0.3) 0%,
    rgba(13, 145, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.6) 100%
  );
  z-index: 100;
  pointer-events: none;
  animation: thunderFlash 0.8s ease-out forwards;
}

/* ===================================
   Video Background
   =================================== */
#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  background-size: cover;
}

/* ===================================
   Gradient Overlay
   =================================== */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background:
    /* Corner accent gradients */
    radial-gradient(ellipse at 0% 0%, rgba(104, 21, 254, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(13, 145, 255, 0.15) 0%, transparent 50%),
    /* Main gradient overlay */
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.5) 0%,
      rgba(0, 0, 0, 0.3) 50%,
      rgba(0, 0, 0, 0.6) 100%
    );
}

/* Edge vignette effect */
.overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(0, 0, 0, 0.4) 100%
  );
  pointer-events: none;
}

/* ===================================
   Content Layout
   =================================== */
.content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
  padding: var(--spacing-md);
}

.content header {
  margin-bottom: var(--spacing-lg);
}

/* ===================================
   Logo Styles
   =================================== */
.logo {
  width: 65%;
  max-width: 700px;
  min-width: 280px;
  height: auto;
  opacity: 0;
  animation:
    logoReveal var(--timing-slow) var(--easing-smooth) 0.2s forwards,
    logoGlow 3s ease-in-out 1.2s infinite;
  will-change: transform, opacity, filter;
}

/* ===================================
   Divider Line
   =================================== */
.divider {
  width: 120px;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--color-purple) 0%,
    var(--color-blue) 100%
  );
  margin: var(--spacing-md) 0;
  opacity: 0;
  animation: dividerExpand var(--timing-medium) var(--easing-smooth) 0.8s forwards;
  will-change: transform, opacity;
}

/* ===================================
   Typography
   =================================== */
.coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.coming-soon h1 {
  font-family: var(--font-headline);
  font-size: clamp(2.5rem, 10vw, 5rem);
  letter-spacing: 0.05em;
  margin: var(--spacing-sm) 0;
  text-transform: uppercase;

  /* Enhanced text shadow with brand color glow */
  text-shadow:
    0 0 20px rgba(104, 21, 254, 0.5),
    0 0 40px rgba(13, 145, 255, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.5);

  /* Shimmer effect */
  background: linear-gradient(
    90deg,
    var(--color-white) 0%,
    var(--color-white) 45%,
    rgba(104, 21, 254, 0.8) 50%,
    rgba(13, 145, 255, 0.8) 55%,
    var(--color-white) 100%
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShimmer 4s linear 1s infinite;

  opacity: 0;
  transform: translateY(40px);
  animation:
    slideUp var(--timing-slow) var(--easing-smooth) 1s forwards,
    textShimmer 4s linear 2s infinite;
  will-change: transform, opacity;
}

.coming-soon p {
  font-family: var(--font-body);
  font-size: clamp(1rem, 3vw, 1.5rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: var(--spacing-sm) 0;
  color: rgba(255, 255, 255, 0.9);
  text-shadow:
    0 0 15px rgba(13, 145, 255, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.5);

  opacity: 0;
  animation: slideUp var(--timing-slow) var(--easing-smooth) 1.3s forwards;
  will-change: transform, opacity;
}

/* ===================================
   Reduced Motion Preferences
   =================================== */
@media (prefers-reduced-motion: reduce) {
  .logo,
  .coming-soon h1,
  .coming-soon p,
  .divider {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }

  .logo {
    filter: drop-shadow(0 0 20px rgba(104, 21, 254, 0.4));
  }

  .coming-soon h1 {
    background: var(--color-white);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .thunder-flash {
    display: none;
  }
}

/* ===================================
   Responsive Styles
   =================================== */
@media (max-width: 768px) {
  #bg-video {
    object-fit: cover;
  }

  .logo {
    width: 70%;
    max-width: 450px;
  }

  .divider {
    width: 100px;
  }
}

@media (max-width: 600px) {
  .logo {
    width: 75%;
    max-width: 350px;
  }

  .divider {
    width: 80px;
    margin: var(--spacing-sm) 0;
  }

  .content {
    padding: var(--spacing-md);
  }

  .content header {
    margin-bottom: var(--spacing-md);
  }
}

/* Landscape orientation on short viewports */
@media (max-height: 500px) and (orientation: landscape) {
  .logo {
    width: 40%;
    max-width: 280px;
    min-width: 150px;
  }

  .divider {
    width: 60px;
    margin: var(--spacing-sm) 0;
  }

  .content header {
    margin-bottom: var(--spacing-sm);
  }

  .coming-soon h1 {
    margin: 0.25rem 0;
  }

  .coming-soon p {
    margin: 0.25rem 0;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Ensure good tap targets if interactive elements are added later */
  .logo {
    -webkit-tap-highlight-color: transparent;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .overlay {
    background: rgba(0, 0, 0, 0.7);
  }

  .coming-soon h1,
  .coming-soon p {
    text-shadow: none;
  }
}