/**
 * CoursHub Creator - Splash Screen Styles
 * Uses theme tokens from theme.css
 */

/* Global resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  background: var(--color-bg-primary);
}

body {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Splash Screen Container */
.splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gradient-bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal-backdrop);
  transition: var(--transition-opacity);
}

.splash-screen::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-radial-ambient);
  z-index: var(--z-base);
}

.splash-screen::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: var(--pattern-opacity);
  background-image: var(--pattern-conic-primary);
  background-size: var(--pattern-size-primary);
  z-index: var(--z-base);
  pointer-events: none;
}

.splash-content {
  text-align: center;
  animation: fadeIn var(--duration-moderate) ease-in-out;
  z-index: var(--z-elevated);
  position: relative;
}

.logo-container {
  width: var(--size-icon-xl);
  height: var(--size-icon-xl);
  margin: 0 auto var(--space-8);
  position: relative;
}

.logo-animation {
  width: 100%;
  height: 100%;
  animation: smoothRotate var(--duration-splash-fade) linear;
  animation-fill-mode: forwards;
}

.logo-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  transform: translate(-50%, -50%);
  background: var(--gradient-radial-glow);
  animation: glow var(--duration-splash-fade) ease-in-out;
  animation-fill-mode: forwards;
  pointer-events: none;
}

.logo-image {
  width: 100%;
  height: 100%;
  position: relative;
}

.splash-logo-svg {
  width: 100%;
  height: 100%;
}

.splash-title {
  color: var(--color-text-primary);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-light);
  margin-bottom: var(--space-8);
  letter-spacing: var(--letter-spacing-widest);
  text-shadow: var(--shadow-glow-md);
  opacity: 0;
  animation: titleFade 0.5s ease-in-out 0.3s forwards;
}

.loading-container {
  width: 250px;
  margin: 0 auto;
  opacity: 0;
  animation: titleFade 0.5s ease-in-out 0.5s forwards;
}

.loading-text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  margin-bottom: var(--space-2);
  height: var(--size-icon-sm);
}

.loading-bar {
  width: 100%;
  height: 6px;
  background: var(--white-10);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--white-05);
}

.loading-progress {
  height: 100%;
  background: var(--gradient-loading-bar);
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  width: 0;
  animation:
    loading var(--duration-splash-fade) linear forwards,
    shimmer 1s linear infinite;
  box-shadow: var(--shadow-glow-sm);
}

.version-info {
  position: absolute;
  bottom: var(--space-5);
  left: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-mono);
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(var(--space-5));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes titleFade {
  to {
    opacity: 1;
  }
}

@keyframes smoothRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes glow {
  0% {
    opacity: 0.1;
    transform: translate(-50%, -50%) scale(0.8);
  }
  50% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    opacity: 0.1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes loading {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

@keyframes shimmer {
  from {
    background-position: -100% 0;
  }
  to {
    background-position: 100% 0;
  }
}

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

.fade-out {
  animation: fadeOut var(--duration-slow) ease-in-out forwards;
}

/* Dashboard container hidden initially */
.dashboard-container {
  opacity: 0;
  visibility: hidden;
  min-height: 100vh;
  transition:
    var(--transition-opacity),
    visibility 0s linear var(--duration-slow);
}

.dashboard-container.visible {
  opacity: 1;
  visibility: visible;
  transition:
    var(--transition-opacity),
    visibility 0s linear 0s;
}

/* Hide splash screen when done */
.splash-screen.hidden {
  display: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  .logo-container {
    width: 150px;
    height: 150px;
  }

  .splash-title {
    font-size: var(--font-size-4xl);
  }

  .loading-container {
    width: 200px;
  }
}

/* Center titles in the "Saved Projects" cards only */
.recent-section .modules-grid .module-card > h3 {
  text-align: center;
}