/* Performance-optimized CSS for Ebenezer TV website */
/* Critical above-the-fold styles */

/* Base performance optimizations */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;line-height:1.5;overflow-x:hidden}

/* Hero section critical styles */
.hero{position:relative;height:100vh;overflow:hidden;will-change:transform}
.hero-slideshow{position:absolute;width:100%;height:100%;z-index:1}
.hero-slide{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0;transition:opacity 1.5s ease-in-out;will-change:opacity}
.hero-slide.active{opacity:1}
.hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgba(255,255,255,0.9) 0%,rgba(30,80,180,0.8) 100%);z-index:2;backdrop-filter:blur(1px)}

/* Content positioning */
.hero-content{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 1rem;color:white}

/* Navigation optimizations */
#floating-nav{position:fixed;top:1rem;right:1rem;z-index:50;background:rgba(59,130,246,0.85);backdrop-filter:blur(16px);border-radius:9999px;padding:0.5rem 1rem;transform:translateZ(0);will-change:transform}

/* Image loading optimizations */
img{max-width:100%;height:auto;image-rendering:optimizeSpeed}
.hd-image{image-rendering:high-quality;filter:contrast(1.1) saturate(1.1) brightness(1.05)}

/* Lazy loading states */
.lazy-bg{background-color:#f1f5f9;background-image:linear-gradient(45deg,#e2e8f0 25%,transparent 25%),linear-gradient(-45deg,#e2e8f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e2e8f0 75%),linear-gradient(-45deg,transparent 75%,#e2e8f0 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;animation:loading 1s linear infinite}
.lazy-bg.loaded{animation:none;background-image:none}

/* Loading animation */
@keyframes loading{0%{background-position:0 0,0 10px,10px -10px,-10px 0px}100%{background-position:20px 20px,20px 30px,30px 10px,10px 20px}}

/* Performance-first button styles */
.btn-primary{background:#2563eb;color:white;padding:0.75rem 1.5rem;border-radius:0.5rem;border:none;cursor:pointer;transition:all 0.2s ease;transform:translateZ(0)}
.btn-primary:hover{background:#3b82f6;transform:translateY(-1px)}

/* Mobile-first responsive optimizations */
@media (max-width: 768px) {
  .hero-content{padding:0 1rem}
  #floating-nav{top:0.5rem;right:0.5rem;padding:0.375rem 0.75rem}
}

/* Accessibility and performance */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
  .hero-slide{transition:none}
  html{scroll-behavior:auto}
}

/* GPU acceleration for smooth animations */
.hero-slide,.hero-overlay,.hero-content,#floating-nav{transform:translateZ(0);backface-visibility:hidden}

/* Optimize font loading */
@font-face{font-display:swap}