/* Home page (index.html) */

* { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease; }

/* Hero + call-to-action banners with the moving photo behind them */
.hero, .cta { background: var(--hero-gradient); color: #fff; text-align: center; padding: 25px 0; position: relative; overflow: hidden; }
.cta { padding: 40px 0; }
.hero::before, .cta::before {
  content: ''; position: absolute; inset: 0;
  background: url('https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?ixlib=rb-4.0.3&auto=format&fit=crop&w=1473&q=80') center/cover;
  opacity: 0.15;
}
.hero::before { animation: slowZoom 20s infinite alternate; }
.cta::before { opacity: 0.1; animation: slowPan 30s infinite alternate; }
.hero .container, .cta .container { position: relative; z-index: 1; }
.cta h2 { font-size: 2rem; margin-bottom: 1rem; }
.cta p { font-size: 1rem; max-width: 700px; margin: 0 auto 1.5rem; }
.hero-buttons, .cta-buttons { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.btn-highlight { background: #ff9800; color: #fff; }
.btn-highlight:hover { background: #e68900; }

@keyframes slowPan { 0% { transform: scale(1) translateX(0); } 100% { transform: scale(1.1) translateX(-5%); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes floatPattern { 0% { transform: translate(0, 0) rotate(0deg); } 100% { transform: translate(-20px, -20px) rotate(360deg); } }
@keyframes float { 0% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-20px) rotate(90deg); } 50% { transform: translateY(-40px) rotate(180deg); } 75% { transform: translateY(-20px) rotate(270deg); } 100% { transform: translateY(0) rotate(360deg); } }

.hero h1 { animation: fadeInUp 1s ease-out; }
.hero p { animation: fadeInUp 1s ease-out 0.2s both; }
.hero-buttons, .cta-buttons { animation: fadeInUp 1s ease-out 0.4s both; }

/* Sections */
.features, .stats-section { background-color: var(--white); }
.info-section { background-color: var(--light-bg); }
.section-title { display: flex; flex-direction: column; align-items: center; }
.features-grid, .stats-grid, .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }

/* Cards */
.feature-card, .stat-card, .info-card { background-color: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; position: relative; }
.feature-card:hover, .stat-card:hover, .info-card:hover { transform: translateY(-5px); }

.feature-header { padding: 20px; text-align: center; background-color: var(--primary-light); color: #fff; position: relative; overflow: hidden; }
.feature-header::before {
  content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px); background-size: 20px 20px;
  opacity: 0.3; animation: floatPattern 20s linear infinite;
}
.feature-icon { font-size: 2.5rem; margin-bottom: 10px; position: relative; z-index: 1; }
.feature-title { font-size: 1.3rem; font-weight: 600; position: relative; z-index: 1; }
.feature-body { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
.feature-description { margin-bottom: 15px; flex-grow: 1; }
.feature-actions { margin-top: auto; }
.feature-actions .btn { width: 100%; }

.stat-card { padding: 30px; text-align: center; }
.stat-card::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s;
}
.stat-card:hover::after { left: 100%; }
.stat-value { font-size: 2.5rem; font-weight: 700; color: var(--primary-color); margin: 10px 0; }
.stat-label { font-size: 1.1rem; color: var(--text-color); }

.info-card { padding: 30px; }
.info-card h4 { font-size: 1.3rem; color: var(--primary-dark); margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.info-card ul { padding-left: 20px; }
.info-card li { margin-bottom: 10px; position: relative; padding-left: 25px; list-style: none; }
.info-card li::before { content: '♻️'; position: absolute; left: 0; font-size: 0.9rem; }
.info-image { height: 150px; background-size: cover; background-position: center; border-radius: var(--radius) var(--radius) 0 0; margin: -30px -30px 20px -30px; }
#why-recycle .info-image { background-image: url('https://images.unsplash.com/photo-1606718220923-fcb2abd9a778?w=600&auto=format&fit=crop&q=80'); background-position: center 30%; }
#where-recycle .info-image { background-image: url('https://images.unsplash.com/photo-1645520718652-9342896b0eec?w=600&auto=format&fit=crop&q=80'); }
#how-prep .info-image { background-image: url('https://images.unsplash.com/photo-1634592152842-e37375201078?w=600&auto=format&fit=crop&q=80'); }

/* Floating emoji in the hero, and scroll-in animation */
.floating-icons { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.1; }
.floating-icon { position: absolute; font-size: 2rem; opacity: 0.3; animation: float 15s infinite linear; }
.scroll-animate { opacity: 0; transform: translateY(30px); transition: all 0.6s ease; }
.scroll-animate.active { opacity: 1; transform: translateY(0); }

@media (max-width: 768px) {
  .cta h2 { font-size: 2rem; }
  .hero-buttons, .cta-buttons { flex-direction: column; align-items: center; }
  .hero-buttons .btn, .cta-buttons .btn { width: 100%; max-width: 300px; }
  .floating-icons { display: none; }
}

@media (max-width: 480px) {
  .info-image { height: 120px; }
}