/* ============================================================
   THEMED PAGE HEROES
   Each hero has a vibrant gradient theme + an optional photo slot.
   Drop photos into /assets/images/hero/ (see README-IMAGES.txt)
   and they appear automatically behind the tinted gradient.
   Without photos, the gradients stand on their own.
   ============================================================ */

/* ---------- Shared hero polish ---------- */

.page-hero {
    overflow: hidden;
}

.page-hero .hero-content {
    animation: heroFadeUp 0.8s ease both;
}

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Floating decorative shapes (per-theme colors below) */
.page-hero::before,
.page-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

/* ============================================================
   CHILDREN - fun, bright, playful
   ============================================================ */
.children-hero {
    background-color: #F76B8A;
    background-image:
        linear-gradient(135deg, rgba(247, 107, 138, 0.88) 0%, rgba(254, 193, 99, 0.85) 50%, rgba(78, 205, 196, 0.88) 100%),
        url('/assets/images/hero/hero-children.jpg');
    background-size: cover;
    background-position: center;
}

.children-hero .hero-overlay {
    background: linear-gradient(180deg, rgba(45, 20, 60, 0.18), rgba(45, 20, 60, 0.38));
}

/* Bouncing bubbles */
.children-hero::before {
    width: 26px;
    height: 26px;
    left: 8%;
    top: 30%;
    background: rgba(255, 255, 255, 0.35);
    box-shadow:
        14vw 22vh 0 -4px rgba(255, 255, 255, 0.30),
        30vw -6vh 0 6px rgba(255, 235, 130, 0.35),
        55vw 18vh 0 -2px rgba(255, 255, 255, 0.28),
        72vw -2vh 0 10px rgba(130, 255, 220, 0.30),
        86vw 24vh 0 0 rgba(255, 255, 255, 0.32);
    animation: floatBubbles 7s ease-in-out infinite;
}

.children-hero::after {
    width: 18px;
    height: 18px;
    right: 10%;
    bottom: 22%;
    background: rgba(255, 235, 130, 0.4);
    box-shadow:
        -18vw -10vh 0 4px rgba(255, 255, 255, 0.3),
        -42vw 6vh 0 -3px rgba(130, 255, 220, 0.35),
        -60vw -14vh 0 8px rgba(255, 255, 255, 0.25);
    animation: floatBubbles 9s ease-in-out infinite reverse;
}

@keyframes floatBubbles {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-22px) scale(1.06); }
}

.children-hero .hero-icon {
    background: rgba(255, 255, 255, 0.3);
    animation: iconWiggle 3.5s ease-in-out infinite;
}

@keyframes iconWiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-6deg); }
    75% { transform: rotate(6deg); }
}

/* ============================================================
   YOUTH - energetic, electric
   ============================================================ */
.youth-hero {
    background-color: #651FFF;
    background-image:
        linear-gradient(120deg, rgba(101, 31, 255, 0.9) 0%, rgba(0, 200, 255, 0.82) 52%, rgba(255, 64, 129, 0.88) 100%),
        url('/assets/images/hero/hero-youth.jpg');
    background-size: 220% 220%, cover;
    background-position: center;
    animation: gradientPan 12s ease infinite;
}

@keyframes gradientPan {
    0%, 100% { background-position: 0% 50%, center; }
    50% { background-position: 100% 50%, center; }
}

.youth-hero .hero-overlay {
    background: linear-gradient(180deg, rgba(20, 10, 50, 0.22), rgba(20, 10, 50, 0.42));
}

/* Tilted floating squares */
.youth-hero::before {
    width: 90px;
    height: 90px;
    border-radius: 22px;
    left: 6%;
    top: 22%;
    background: rgba(255, 255, 255, 0.10);
    border: 2px solid rgba(255, 255, 255, 0.25);
    transform: rotate(18deg);
    animation: floatTilt 8s ease-in-out infinite;
}

.youth-hero::after {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    right: 8%;
    bottom: 20%;
    background: rgba(0, 229, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.2);
    transform: rotate(-14deg);
    animation: floatTilt 10s ease-in-out infinite reverse;
}

@keyframes floatTilt {
    0%, 100% { transform: translateY(0) rotate(18deg); }
    50% { transform: translateY(-26px) rotate(26deg); }
}

/* ============================================================
   MEN - strong, steel
   ============================================================ */
.men-hero {
    background-color: #1F2A44;
    background-image:
        linear-gradient(135deg, rgba(31, 42, 68, 0.92) 0%, rgba(52, 85, 126, 0.88) 55%, rgba(91, 44, 111, 0.85) 100%),
        url('/assets/images/hero/hero-men.jpg');
    background-size: cover;
    background-position: center;
}

.men-hero .hero-overlay {
    background: linear-gradient(180deg, rgba(15, 20, 35, 0.25), rgba(15, 20, 35, 0.45));
}

.men-hero::before {
    width: 300px;
    height: 300px;
    left: -80px;
    top: -60px;
    background: radial-gradient(circle, rgba(120, 160, 210, 0.18), transparent 70%);
}

.men-hero::after {
    width: 380px;
    height: 380px;
    right: -100px;
    bottom: -120px;
    background: radial-gradient(circle, rgba(91, 44, 111, 0.35), transparent 70%);
}

/* ============================================================
   WOMEN - elegant rose & plum
   ============================================================ */
.women-hero {
    background-color: #7B2D6E;
    background-image:
        linear-gradient(135deg, rgba(123, 45, 110, 0.9) 0%, rgba(194, 85, 157, 0.85) 55%, rgba(232, 160, 191, 0.82) 100%),
        url('/assets/images/hero/hero-women.jpg');
    background-size: cover;
    background-position: center;
}

.women-hero .hero-overlay {
    background: linear-gradient(180deg, rgba(60, 15, 55, 0.22), rgba(60, 15, 55, 0.42));
}

.women-hero::before {
    width: 260px;
    height: 260px;
    left: -60px;
    bottom: -80px;
    background: radial-gradient(circle, rgba(255, 210, 235, 0.25), transparent 70%);
    animation: softGlow 8s ease-in-out infinite;
}

.women-hero::after {
    width: 200px;
    height: 200px;
    right: -40px;
    top: -40px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 70%);
    animation: softGlow 10s ease-in-out infinite reverse;
}

@keyframes softGlow {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.12); }
}

/* ============================================================
   ABOUT - warm purple glow
   ============================================================ */
.hero-about {
    background-color: #5B2C6F;
    background-image:
        linear-gradient(135deg, rgba(91, 44, 111, 0.92) 0%, rgba(142, 68, 173, 0.85) 60%, rgba(61, 27, 77, 0.92) 100%),
        url('/assets/images/hero/hero-about.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
}

.hero-about::before {
    width: 420px;
    height: 420px;
    left: -120px;
    top: -140px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 70%);
    animation: softGlow 9s ease-in-out infinite;
}

.hero-about::after {
    width: 320px;
    height: 320px;
    right: -80px;
    bottom: -100px;
    background: radial-gradient(circle, rgba(179, 136, 255, 0.25), transparent 70%);
    animation: softGlow 11s ease-in-out infinite reverse;
}

/* ============================================================
   MINISTRIES LISTING - deep violet
   ============================================================ */
.hero-ministries {
    background-color: #4A148C;
    background-image:
        linear-gradient(135deg, rgba(74, 20, 140, 0.92) 0%, rgba(142, 36, 170, 0.85) 55%, rgba(61, 27, 77, 0.92) 100%),
        url('/assets/images/hero/hero-ministries.jpg');
    background-size: cover;
    background-position: center;
}

.hero-ministries::before {
    width: 340px;
    height: 340px;
    right: -90px;
    top: -110px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.10), transparent 70%);
    animation: softGlow 10s ease-in-out infinite;
}

.hero-ministries::after {
    width: 260px;
    height: 260px;
    left: -70px;
    bottom: -80px;
    background: radial-gradient(circle, rgba(179, 136, 255, 0.22), transparent 70%);
    animation: softGlow 8s ease-in-out infinite reverse;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .page-hero .hero-content,
    .page-hero::before,
    .page-hero::after,
    .children-hero .hero-icon,
    .youth-hero {
        animation: none !important;
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .youth-hero::before,
    .youth-hero::after {
        display: none;
    }

    .men-hero::before,
    .hero-about::before {
        width: 220px;
        height: 220px;
    }
}