/* ============================================
   HOME-SPECIFIC.CSS - Home Page Enhancements
   ============================================
   
   Contains:
   - Dark mode background animation
   - Enhanced hero verse styling
   - Improved verse rotation transitions
   - Theme-aware animations
*/

/* ==========================================
   HOME PAGE THEME TOGGLE - BOTTOM LEFT
   ========================================== */

/* Home page content positioning */
.home-content {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* Home page main wrapper */
body.page-home .main-wrapper {
  position: relative;
  z-index: 1;
  background: transparent;
  margin: 0;
  padding: 0;
}

.home-theme-toggle {
  position: fixed;
  bottom: 30px;
  left: 30px;
  z-index: 1000;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.home-theme-toggle:hover {
  opacity: 1;
}

.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: var(--bible-verse-text-selected);
  border: 2px solid var(--bible-border-verse-text-selected);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--bible-shadow-verse-text);
}

.theme-toggle-btn:hover {
  background: var(--bible-verse-hover-bg);
  border-color: var(--bible-border-verse-hover);
  transform: scale(1.1);
  box-shadow: var(--bible-shadow-verse-text-selected);
}

.theme-icon {
  color: var(--bible-text-primary);
  transition: opacity 0.3s ease;
}

/* Light theme toggle styling */
[data-theme="light"] .theme-toggle-btn {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-color: #d2691e;
  color: #8b4513;
}

[data-theme="light"] .theme-toggle-btn:hover {
  background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
  border-color: #ea580c;
}

/* Dark theme toggle styling */
[data-theme="dark"] .theme-toggle-btn {
  background: rgba(212, 175, 55, 0.25);
  border-color: #d4af37;
  color: #e2e8f0;
}

[data-theme="dark"] .theme-toggle-btn:hover {
  background: rgba(212, 175, 55, 0.4);
  border-color: #f59e0b;
}

/* Hide scrollbar on home page for mobile (touch scroll still works) */
@media screen and (max-width: 768px) {
  /* Override safari-address-bar.css specifically for home page */
  html:has(body.page-home),
  .page-home,
  body.page-home {
    overflow-y: scroll !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }
  
  /* Webkit browsers - hide scrollbar */
  html:has(body.page-home)::-webkit-scrollbar,
  .page-home::-webkit-scrollbar,
  body.page-home::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
  }
  
  body.page-home::-webkit-scrollbar-track {
    display: none !important;
  }
  
  body.page-home::-webkit-scrollbar-thumb {
    display: none !important;
  }
  
  /* Also hide on safari wrapper */
  body.page-home .safari-page-wrapper::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
  }
}

/* Mobile responsiveness for theme toggle */
@media (max-width: 768px) {
  .home-theme-toggle {
    bottom: 20px;
    left: 20px;
  }
  
  .theme-toggle-btn {
    width: 45px;
    height: 45px;
  }
  
  .theme-icon {
    width: 18px;
    height: 18px;
  }
}

/* ==========================================
   ENHANCED HERO VERSE STYLING
   ========================================== */

/* Enhanced hero verse styling - smaller, more elegant */
.hero-verse {
  font-family: 'EB Garamond', serif !important;
  font-size: 1.6rem !important;
  color: var(--text-primary);
  opacity: 1;
  text-align: center;
  margin-top: var(--spacing-lg);
  transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  font-weight: 400;
  line-height: 1.5;
  max-width: clamp(320px, 75vw, 700px);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--spacing-md);
  white-space: normal;
  overflow: visible;
  word-wrap: break-word;
  -webkit-hyphens: auto; /* Safari */
  -ms-hyphens: auto;     /* IE */
  hyphens: auto;         /* Standard */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.02em;
}

/* Enhanced hero verse reference - smaller, more elegant */
.hero-verse-ref {
  font-family: 'Georgia', serif !important;
  font-size: 1rem !important;
  color: var(--text-secondary);
  opacity: 0.8;
  text-align: center;
  margin-top: var(--spacing-xs);
  transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  font-style: italic;
  font-weight: 300;
  max-width: clamp(320px, 75vw, 600px);
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.01em;
}

/* Fade out state for verse transitions - slower and more elegant */
.hero-verse.fade-out,
.hero-verse-ref.fade-out {
  opacity: 0 !important;
  transform: translateY(-15px);
}

/* Fade in state for verse transitions - slower and more elegant */
.hero-verse.fade-in,
.hero-verse-ref.fade-in {
  opacity: 1 !important;
  transform: translateY(0);
}

/* ==========================================
   DARK MODE BACKGROUND ANIMATION
   ========================================== */

/* Light theme finisher header - allow FinisherHeader animation to show */
[data-theme="light"] .finisher-header,
.finisher-header {
  position: relative;
  background: transparent; /* Let FinisherHeader animation show through */
  overflow: hidden;
  border-radius: 0;
  margin: 0;
  height: 100vh;
  width: 100%;
  box-shadow: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  transition: 
    transform 0.3s ease, 
    box-shadow 0.3s ease;
}

/* Dark theme finisher header - allow FinisherHeader animation to show */
[data-theme="dark"] .finisher-header {
  background: transparent; /* Let FinisherHeader animation show through */
  position: relative;
  border-radius: 0;
  margin: 0;
  height: 100vh;
  width: 100%;
  box-shadow: none;
  color: #e2e8f0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

/* ==========================================
   SECTION ANIMATIONS - SECOND & FOURTH SECTIONS
   ========================================== */

/* Animated sections positioning */
.animated-section {
  position: relative;
  overflow: hidden;
}

/* Fix for light mode animation disappearing - override layout.css backgrounds */
[data-theme="light"] .animated-section.split-section {
  background: transparent !important; /* Override layout.css background to show animation */
}

[data-theme="dark"] .animated-section.split-section {
  background: transparent !important; /* Override layout.css background to show animation */
}

/* Section animation styling for FinisherHeader */
.second-section-animation,
.fourth-section-animation {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden; /* Prevent any canvas overflow */
}

/* Light theme - use same background as main header for proper animation */
[data-theme="light"] .second-section-animation,
[data-theme="light"] .fourth-section-animation {
  background: #9138e5; /* Match main header background for light theme */
}

/* Dark theme section animations - matches main finisher-header background */
[data-theme="dark"] .second-section-animation,
[data-theme="dark"] .fourth-section-animation {
  background: #0f172a; /* Match main header background for dark theme */
}

/* Special styling for fourth section (final section) in dark mode */
[data-theme="dark"] .fourth-section-animation {
  /* Cool blue and indigo blend effect for dark mode only */
  background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 25%, #1e1b4b 50%, #312e81 75%, #1e3a8a 100%);
  box-shadow: inset 0 0 100px rgba(59, 130, 246, 0.3), 0 8px 32px rgba(37, 99, 235, 0.2);
}

/* Dark mode final section text styling with indigo glow */
[data-theme="dark"] .animated-section.final-section .quote-left h2,
[data-theme="dark"] .animated-section.final-section .quote-left span {
  color: #a78bfa !important; /* Indigo color */
  text-shadow: 
    0 0 10px rgba(167, 139, 250, 0.8),
    0 0 20px rgba(167, 139, 250, 0.6),
    0 0 30px rgba(167, 139, 250, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.3) !important; /* Strong glow effect */
}

[data-theme="dark"] .animated-section.final-section .description-right h3 {
  color: #a78bfa !important; /* Indigo color */
  text-shadow: 
    0 0 10px rgba(167, 139, 250, 0.8),
    0 0 20px rgba(167, 139, 250, 0.6),
    0 0 30px rgba(167, 139, 250, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.3) !important; /* Strong glow effect */
}

/* Ensure content appears above animation */
.animated-section .split-container {
  position: relative;
  z-index: 1;
}

/* Light theme header shine animation */
[data-theme="light"] .finisher-header::before,
.finisher-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.4), 
    transparent
  );
  transition: left 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
  z-index: 1;
}

/* Dark theme header shine animation */
[data-theme="dark"] .finisher-header::before {
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.15), 
    transparent
  );
}

/* Light theme hover effects */
[data-theme="light"] .finisher-header:hover,
.finisher-header:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 15px 40px rgba(255, 182, 62, 0.5), 
    inset 0 1px 3px rgba(255, 255, 255, 0.4);
}

/* Dark theme hover effects */
[data-theme="dark"] .finisher-header:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 15px 40px rgba(50, 130, 184, 0.4), 
    inset 0 1px 3px rgba(255, 255, 255, 0.15);
}

/* Hover shine effect for both themes */
[data-theme="light"] .finisher-header:hover::before,
[data-theme="dark"] .finisher-header:hover::before,
.finisher-header:hover::before {
  left: 100%;
}

/* Fullscreen animation variants - let FinisherHeader animation show through */
[data-theme="light"] .finisher-header.fullscreen-animation,
.finisher-header.fullscreen-animation {
  background: transparent; /* Let FinisherHeader animation show through */
  box-shadow: none;
}

[data-theme="dark"] .finisher-header.fullscreen-animation {
  background: transparent; /* Let FinisherHeader animation show through */
  box-shadow: none;
  color: #e2e8f0;
}

/* ==========================================
   THEME-AWARE HERO VERSE COLORS
   ========================================== */

/* Light theme hero verse colors */
[data-theme="light"] .hero-verse {
  color: var(--text-primary);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .hero-verse-ref {
  color: var(--text-secondary);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Dark theme hero verse colors */
[data-theme="dark"] .hero-verse {
  color: #e2e8f0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .hero-verse-ref {
  color: #a0aec0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ==========================================
   RESPONSIVE IMPROVEMENTS
   ========================================== */

/* Mobile adjustments for hero verses */
@media (max-width: 768px) {
  .hero-verse {
    font-size: 1rem !important;
    max-width: clamp(260px, 88vw, 500px);
    line-height: 1.35;
    padding: 0 0.5rem;
  }
  
  .hero-verse-ref {
    font-size: 0.8rem !important;
    max-width: clamp(260px, 88vw, 400px);
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 480px) {
  .hero-verse {
    font-size: 0.9rem !important;
    max-width: clamp(240px, 92vw, 400px);
    padding: 0 0.4rem;
  }
  
  .hero-verse-ref {
    font-size: 0.75rem !important;
    max-width: clamp(240px, 92vw, 350px);
    margin-bottom: 1.2rem;
  }
}

/* ==========================================
   ANIMATION PERFORMANCE OPTIMIZATIONS
   ========================================== */

/* GPU acceleration for smooth animations */
.hero-verse,
.hero-verse-ref,
.finisher-header,
.finisher-header::before {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .hero-verse,
  .hero-verse-ref {
    transition: opacity 0.5s ease;
  }
  
  .finisher-header {
    transition: none;
  }
  
  .finisher-header::before {
    transition: none;
  }
  
  /* Disable transform animations for reduced motion */
  .hero-verse.fade-out,
  .hero-verse-ref.fade-out,
  .hero-verse.fade-in,
  .hero-verse-ref.fade-in {
    transform: none;
  }
}

/* ==========================================
   PAGE TRANSITION OVERLAY
   Smooth transition from Home to Bible page
   ========================================== */

.page-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e6dcf8 0%, #d1c4f5 100%);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Dark mode transition overlay */
[data-theme="dark"] .page-transition-overlay {
  background: linear-gradient(135deg, #0e1324 0%, #1c2235 100%);
}

.page-transition-overlay.active {
  opacity: 1;
  visibility: visible;
}

.page-transition-content {
  text-align: center;
  color: #1a365d;
}

[data-theme="dark"] .page-transition-content {
  color: #d4e4ff;
}

.page-transition-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(26, 54, 93, 0.2);
  border-top-color: #1a365d;
  border-radius: 50%;
  animation: page-transition-spin 0.8s linear infinite;
  margin: 0 auto 16px;
}

[data-theme="dark"] .page-transition-spinner {
  border-color: rgba(212, 228, 255, 0.2);
  border-top-color: #d4e4ff;
}

@keyframes page-transition-spin {
  to {
    transform: rotate(360deg);
  }
}

.page-transition-text {
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  opacity: 0.9;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .page-transition-overlay {
    transition: opacity 0.2s ease;
  }
  
  .page-transition-spinner {
    animation: none;
    border-top-color: transparent;
    border-left-color: #1a365d;
  }
  
  [data-theme="dark"] .page-transition-spinner {
    border-left-color: #d4e4ff;
  }
}