/* ==========================================================================
   HERO COMPONENT
   Immersiver Full-Screen Hero mit Premium-Design
   ========================================================================== */

/* ========================================================================
   HERO BASE
   ======================================================================== */

.hero {
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport height für mobile */
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--header-height);
  position: relative;
  overflow: hidden;
}

/* Hero für Pages (kleiner) */
.hero--page {
  min-height: 70vh;
  min-height: 70dvh;
}

@media (min-width: 768px) {
  .hero--page {
    min-height: 60vh;
  }
}

/* ========================================================================
   HERO BACKGROUND
   ======================================================================== */

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

/* Theme-based image switching */
.hero__picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s ease;
}

.hero__picture--dark {
  opacity: 1;
  z-index: 0;
}

.hero__picture--light {
  opacity: 0;
  z-index: 0;
}

/* Light theme: swap images */
html.light-theme .hero__picture--dark {
  opacity: 0;
}

html.light-theme .hero__picture--light {
  opacity: 1;
}

/* Light Mode: Sehr dezenter Overlay für helles Hero-Bild */
html.light-theme .hero__overlay {
  background: linear-gradient(
    135deg,
    rgba(2, 8, 23, 0.5) 0%,
    rgba(2, 8, 23, 0.25) 40%,
    rgba(2, 8, 23, 0.1) 100%
  );
}

/* Light Mode: Sehr dezentere Vignette */
html.light-theme .hero__overlay::after {
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    rgba(2, 8, 23, 0.1) 100%
  );
}

/* Light Mode: Hero Text - Premium White with Shadow for readability */
html.light-theme .hero__tagline {
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

html.light-theme .hero__description {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Mobile First: Hochformat = Bild füllt Bereich (cover), Querformat = vollständig (contain) */
.hero .hero__bg picture,
.hero .hero__bg img,
.hero .hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Querformat (Landscape): Bild vollständig anzeigen */
@media (orientation: landscape) and (max-width: 1023px) {
  .hero .hero__bg picture,
  .hero .hero__bg img,
  .hero .hero__image {
    object-fit: contain;
    object-position: center top;
  }
}

/* Desktop: Immer Cover für immersive Darstellung */
@media (min-width: 1024px) {
  .hero .hero__bg picture,
  .hero .hero__bg img,
  .hero .hero__image {
    object-fit: cover;
    object-position: center;
    /* Subtle zoom animation on load */
    animation: heroZoom 20s ease-out forwards;
  }
}

@keyframes heroZoom {
  from {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
  }
}

/* Gradient Overlay für bessere Lesbarkeit */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(2, 8, 23, 0.85) 0%,
    rgba(2, 8, 23, 0.6) 40%,
    rgba(2, 8, 23, 0.4) 100%
  );
  z-index: 1;
}

/* Page Hero: Lighter overlay for better image visibility */
.hero--page .hero__overlay {
  background: linear-gradient(
    135deg,
    rgba(2, 8, 23, 0.7) 0%,
    rgba(2, 8, 23, 0.5) 40%,
    rgba(2, 8, 23, 0.3) 100%
  );
}

/* Additional vignette effect */
.hero__overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    rgba(2, 8, 23, 0.4) 100%
  );
}

/* Page Hero: Lighter vignette */
.hero--page .hero__overlay::after {
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    rgba(2, 8, 23, 0.25) 100%
  );
}

/* ========================================================================
   HERO CONTENT - Always Dark Mode Style (independent of theme)
   ======================================================================== */

.hero {
  /* Force dark mode colors in hero regardless of theme */
  --text-primary: #f8fafc;
  --text-secondary: #e2e8f0;
  --text-muted: #94a3b8;
  --accent-primary: #58a6ff;
  --accent-violet: #8b5cf6;
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 1000px;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  color: #f8fafc;
  gap: var(--space-4);
  margin-top: -2vh;
}

/* ========================================================================
   HERO BADGE
   ======================================================================== */

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.badge-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.badge-divider {
  width: 4px;
  height: 4px;
  background: var(--text-muted);
  border-radius: 50%;
}

.badge-text {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ========================================================================
   HERO TITLE
   ======================================================================== */

.hero__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

.title-line {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #f8fafc;
  text-transform: uppercase;
}

.title-line--gradient {
  background: linear-gradient(
    135deg,
    var(--accent-primary) 0%,
    #a78bfa 50%,
    var(--accent-violet) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  z-index: 1;
}

/* Glow effect behind gradient text */
.title-line--gradient .glow {
  position: absolute;
  inset: -20px;
  background: linear-gradient(
    135deg,
    var(--accent-primary) 0%,
    #a78bfa 40%,
    var(--accent-violet) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: blur(40px);
  opacity: 1;
  z-index: -1;
  pointer-events: none;
  animation: glowPulse 2s ease-in-out infinite;
}

/* Second glow layer for more intensity */
.title-line--gradient::after {
  content: 'LEARNING UNIVERSE';
  position: absolute;
  inset: -30px;
  background: linear-gradient(
    135deg,
    var(--accent-primary) 0%,
    transparent 60%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: blur(60px);
  opacity: 0.5;
  z-index: -2;
  pointer-events: none;
  animation: glowPulse 2s ease-in-out infinite reverse;
}

@keyframes glowPulse {
  0%, 100% { 
    opacity: 0.7; 
    filter: blur(40px);
  }
  50% { 
    opacity: 1; 
    filter: blur(50px);
  }
}

/* ========================================================================
   HERO TAGLINE
   ======================================================================== */

.hero__tagline {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 500;
  color: #e2e8f0;
  margin: 0;
  animation: fadeInUp 0.8s ease-out 0.6s both;
}

/* ========================================================================
   HERO DESCRIPTION
   ======================================================================== */

.hero__description {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: #94a3b8;
  line-height: 1.7;
  max-width: 600px;
  margin: 0;
  animation: fadeInUp 0.8s ease-out 0.8s both;
}

/* ========================================================================
   HERO ACTIONS
   ======================================================================== */

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-2);
  animation: fadeInUp 0.8s ease-out 1s both;
}

/* Primary Button - Glow Effect */
.hero__actions .btn--primary {
  position: relative;
  background: linear-gradient(135deg, var(--accent-primary) 0%, #7c3aed 100%);
  border: none;
  color: #ffffff;
  box-shadow: 
    0 0 20px rgba(139, 92, 246, 0.3),
    0 0 40px rgba(139, 92, 246, 0.2),
    0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.hero__actions .btn--primary::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.5), 
    rgba(88, 166, 255, 0.5)
  );
  border-radius: inherit;
  z-index: -1;
  filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hero__actions .btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 0 30px rgba(139, 92, 246, 0.4),
    0 0 60px rgba(139, 92, 246, 0.3);
}

.hero__actions .btn--primary:hover::before {
  opacity: 1;
}

/* ========================================================================
   SCROLL INDICATOR - Desktop only
   ======================================================================== */

.scroll-indicator {
  display: none; /* Mobile first: hidden */
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  
  animation: fadeInUp 0.8s ease-out 1.2s both, bounce 2s ease-in-out infinite;
  transition: all 0.3s ease;
}

@media (min-width: 768px) {
  .scroll-indicator {
    display: flex; /* Desktop: visible */
  }
}

.scroll-indicator:hover {
  color: white;
  transform: translateX(-50%) translateY(-4px);
}

.scroll-indicator i {
  font-size: 1.5rem;
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

/* ========================================================================
   CONTENT BLOCK - Für Page Content
   ======================================================================== */

.content-block {
  margin-bottom: var(--space-16);
}

.content-block--center {
  text-align: center;
}

.content-block:last-child {
  margin-bottom: 0;
}

/* Content Navigation */
.content-nav {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-primary);
}

/* Large Text */
.text-large {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.text-large strong {
  color: var(--text-primary);
}

/* ========================================================================
   MOBILE OPTIMIZATIONS
   ======================================================================== */

@media (max-width: 767px) {
  .hero__badge {
    padding: var(--space-1) var(--space-3);
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: rgba(255, 255, 255, 0.08);
  }
  
  .badge-tag {
    font-size: 10px;
    letter-spacing: 0.08em;
  }
  
  .badge-divider {
    width: 3px;
    height: 3px;
  }
  
  .badge-text {
    display: none;
  }
}

/* Keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}