/* ========================================
   SPIRITUAL SHAPE DESIGN SYSTEM
   Grace and Praise Bangladeshi Church
   
   Philosophy: ONE SHAPE = ONE PURPOSE
   Each shape carries spiritual meaning and functional purpose
   ======================================== */

/* ========================================
   DESIGN TOKENS - SHAPE SYSTEM
   ======================================== */

:root {
    /* Shape System Colors */
    --shape-circle-primary: var(--brand-primary);
    /* Community Blue - Unity */
    --shape-circle-glow: rgba(59, 130, 246, 0.3);
    --shape-circle-gradient: linear-gradient(135deg, var(--brand-primary) 0%, #6366f1 100%);

    --shape-rectangle-primary: var(--brand-primary);
    /* Teaching Gray - Stability */
    --shape-rectangle-accent: var(--text-muted);
    --shape-rectangle-light: var(--bg-section);

    --shape-trapezoid-primary: var(--brand-secondary);
    /* Growth Teal - Movement */
    --shape-trapezoid-gradient: linear-gradient(120deg, var(--brand-secondary) 0%, #06b6d4 100%);
    --shape-trapezoid-glow: rgba(20, 184, 166, 0.25);

    --shape-square-primary: var(--brand-accent);
    /* Service Gold - Action */
    --shape-square-shadow: var(--shadow-soft);
    --shape-square-hover: var(--border-highlight);

    --shape-heptagon-primary: #7c3aed;
    /* Sacred Purple - Holy */
    --shape-heptagon-gradient: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    --shape-heptagon-glow: rgba(124, 58, 237, 0.4);

    /* Motion Speeds - Worship-like, Gentle */
    --motion-slow: 1200ms cubic-bezier(0.4, 0, 0.2, 1);
    --motion-medium: 800ms cubic-bezier(0.4, 0, 0.2, 1);
    --motion-gentle: 600ms cubic-bezier(0.33, 1, 0.68, 1);

    /* Spiritual Spacing */
    --sacred-space: 4rem;
    --breath-space: 2.5rem;
    --rest-space: 1.5rem;
}

/* ========================================
   ACCESSIBILITY - REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================
   SHAPE #1: CIRCLE (EVOLVED: THE COMMUNITY HALO)
   Purpose: Community & God's Eternity
   Usage: Hero carousel, testimonies, worship moments
   Emotion: Warm, safe, inclusive, PREMIUM
   ======================================== */

.shape-circle-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0 !important;
    /* Full bleed potential */
    overflow: hidden;
}

/* Modern Carousel Viewport */
.circle-carousel {
    position: relative;
    width: 100%;
    height: 700px;
    overflow: hidden;
    background: var(--bg-hero-soft-gradient);
}

.circle-carousel-item {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* FIX: Shorter crossfade (400ms) prevents dual-slide composite overlap */
    transition: opacity 400ms ease-out, visibility 0ms linear 400ms;
    display: flex;
    align-items: center;
    justify-content: center;
    /* FIX: Contain each slide to its own layer without over-promoting */
    contain: layout style paint;
}

.circle-carousel-item.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* FIX: visibility snaps immediately on IN, opacity fades 400ms */
    transition: opacity 400ms ease-in, visibility 0ms linear 0ms;
}

/* Slide Backdrop with authentic imagery */
.slide-backdrop {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    /* FIX: Removed transform:scale from static state to prevent
       ancestor-transform + descendant-backdrop-filter conflict on iOS.
       Ken Burns effect now applied ONLY on active slide. */
}

.circle-carousel-item.active .slide-backdrop {
    /* FIX: Use a gentler scale to reduce GPU recomposition burden */
    transform: scale(1.03);
    transition: transform 8s ease-out;
}

.slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(15, 23, 42, 0.4) 0%,
            rgba(15, 23, 42, 0.7) 100%);
}

/* The "Halo" Glass Card */
.glass-halo-card {
    position: relative;
    z-index: 10;
    width: 90%;
    max-width: 800px;
    padding: 4rem;
    /* FIX: backdrop-filter moved to ::before pseudo-element to isolate
       it from the slideUpHalo animation (transform + backdrop-filter
       on same element causes dual GPU composite layers on iOS Safari) */
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 40px;
    text-align: center;
    color: white;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
    /* FIX: Animation preserved but uses opacity-only entrance
       (no transform) to avoid promoting this element to a GPU
       layer that conflicts with ::before backdrop-filter layer */
    animation: slideUpHalo 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* FIX: Isolated backdrop-filter on a STATIC pseudo-element.
   This element has NO transform, NO animation — purely static.
   Result: single GPU layer for blur, no compositor conflict. */
.glass-halo-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: -1;
    /* No transform, no animation, no will-change */
}

/* FIX: Changed from transform-based to opacity-only animation.
   Transform during animation on a backdrop-filter parent chain
   causes iOS Safari to create duplicate composite layers → ghost text.
   Opacity-only is GPU-efficient and doesn't create layer conflicts. */
@keyframes slideUpHalo {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Subtle Unity Ring (Internal to card)
   FIX: Added isolation:isolate and containment to prevent
   the infinite rotation from forcing recomposition of the
   backdrop-filter on the parent glass-halo-card every frame.
   Also reduced opacity so the ring doesn't fight the blur layer. */
.unity-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 50%;
    pointer-events: none;
    z-index: -2;
    /* FIX: Below the ::before backdrop layer (-1) */
    animation: rotateRing 20s linear infinite;
    /* FIX: Isolate into own stacking context so rotation
       doesn't trigger backdrop-filter recomposition */
    isolation: isolate;
    contain: layout style;
}

@keyframes rotateRing {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.shape-content-wrapper h2 {
    color: white !important;
    font-size: clamp(2rem, 5vw, 3.5rem) !important;
    margin-bottom: 1.5rem;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
}

.shape-scripture {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 2rem 0;
    padding: 1.5rem;
    border-left: none !important;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    font-style: italic;
}

/* Navigation Overlays */
.circle-nav-dots {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    gap: 1rem;
}

.circle-dot {
    width: 10px;
    height: 10px;
    border: none;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.circle-dot.active {
    background: white;
    width: 30px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
    .circle-carousel {
        height: 600px;
    }

    .glass-halo-card {
        padding: 2.5rem 1.5rem;
        border-radius: 30px;
    }

    .unity-ring {
        display: none;
    }
}

/* ========================================
   SHAPE #2: RECTANGLE
   Purpose: Teaching & Stability
   Usage: Sermons, Bible studies, navigation, footer
   Emotion: Trust, clarity, order
   ======================================== */

.shape-rectangle-container {
    width: 100%;
    background: var(--shape-rectangle-light);
    padding: var(--sacred-space) 0;
}

.shape-rectangle {
    background: var(--bg-card-surface);
    border-radius: 8px;
    padding: 2.5rem;
    box-shadow: var(--shadow-soft);
    border-left: 4px solid var(--shape-rectangle-primary);
    transition: transform var(--motion-gentle), box-shadow var(--motion-gentle);
}

.shape-rectangle:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
}

/* Rectangle Grid - Teaching Layout */
.rectangle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    padding: 2rem 0;
}

/* Rectangle Header - Sermon/Teaching */
.rectangle-header {
    background: var(--shape-rectangle-primary);
    color: var(--text-inverse);
    padding: 1.5rem 2rem;
    border-radius: 0;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ========================================
   SHAPE #3: TRAPEZOID
   Purpose: Growth & Movement
   Usage: Youth ministry, outreach, missions
   Emotion: Progress, energy, momentum
   ======================================== */

.shape-trapezoid-container {
    position: relative;
    width: 100%;
    padding: var(--sacred-space) 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(20, 184, 166, 0.05) 100%);
}

.shape-trapezoid {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 3rem 2rem;
    background: var(--shape-trapezoid-gradient);
    clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);
    box-shadow: 0 20px 50px var(--shape-trapezoid-glow);
    transition: clip-path var(--motion-medium), transform var(--motion-medium);
}

.shape-trapezoid:hover {
    clip-path: polygon(3% 0%, 97% 0%, 100% 100%, 0% 100%);
    transform: translateY(-6px);
}

/* Trapezoid Slider - Youth Energy */
.trapezoid-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    clip-path: polygon(8% 0%, 92% 0%, 100% 100%, 0% 100%);
}

.trapezoid-slide {
    width: 100%;
    padding: 3rem;
    color: white;
    text-align: center;
}

.trapezoid-slide h3 {
    color: white;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    animation: slideUpFade var(--motion-gentle) ease-out;
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Trapezoid Navigation Arrows */
.trapezoid-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    color: white;
    width: 50px;
    height: 50px;
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--motion-gentle);
    z-index: 10;
}

.trapezoid-arrow:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(-50%) scale(1.1);
}

.trapezoid-arrow.left {
    left: 2rem;
}

.trapezoid-arrow.right {
    right: 2rem;
}

/* ========================================
   SHAPE #4: SQUARE
   Purpose: Service & Structure
   Usage: Volunteer sign-ups, ministry grids, giving
   Emotion: Confidence, responsibility
   ======================================== */

.shape-square-container {
    width: 100%;
    padding: var(--sacred-space) 0;
}

.shape-square-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    align-items: stretch;
}

.shape-square {
    background: var(--bg-card-surface) !important;
    color: var(--text-heading);
    text-decoration: none;
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    box-shadow: var(--shadow-soft);
    border: 3px solid var(--shape-square-primary);
    transition: all var(--motion-gentle);
    cursor: pointer;
    height: 100%;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}

/* Ensure anchor-based cards (Give) don't inherit link styling */
a.shape-square,
a.shape-square:visited,
a.shape-square:hover,
a.shape-square:active {
    text-decoration: none;
    color: var(--text-heading);
}

a.shape-square h3 {
    color: var(--text-heading) !important;
    text-decoration: none !important;
}

a.shape-square p {
    color: var(--text-body) !important;
    text-decoration: none !important;
}

.shape-square:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: var(--shadow-card);
    border-color: var(--shape-square-hover);
}

.shape-square-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    color: var(--shape-square-primary);
}

.shape-square h3 {
    color: var(--text-heading) !important;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}

.shape-square p {
    color: var(--text-body) !important;
    line-height: 1.7;
    font-size: 0.95rem;
    flex-grow: 1;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}

.shape-square a,
.shape-square .shape-square-link {
    color: var(--brand-accent) !important;
    font-weight: 700;
    margin-top: auto;
    padding-top: 1rem;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}

/* ========================================
   SHAPE #5: HEPTAGON (7-sided)
   Purpose: Spiritual Depth & Sacred Focus
   Usage: Annual theme, special sermon series, conferences
   Emotion: Sacred, special, intentional
   RULE: Maximum ONE per page
   ======================================== */

.shape-heptagon-container {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: var(--sacred-space) 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.shape-heptagon {
    position: relative;
    width: 400px;
    height: 400px;
    background: var(--shape-heptagon-gradient);
    clip-path: polygon(50% 0%,
            90% 20%,
            100% 60%,
            75% 100%,
            25% 100%,
            0% 60%,
            10% 20%);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 30px 80px var(--shape-heptagon-glow);
    transition: all var(--motion-slow);
    animation: sacredPulse 4s ease-in-out infinite;
}

@keyframes sacredPulse {

    0%,
    100% {
        filter: brightness(1);
        transform: scale(1);
    }

    50% {
        filter: brightness(1.1);
        transform: scale(1.02);
    }
}

.shape-heptagon:hover {
    transform: scale(1.05);
    box-shadow: 0 40px 100px var(--shape-heptagon-glow);
}

.shape-heptagon-content {
    text-align: center;
    color: white;
    padding: 3rem;
    z-index: 2;
}

.shape-heptagon-content h2 {
    color: white;
    font-size: 2rem;
    margin-bottom: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.shape-heptagon-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    opacity: 0.95;
}

/* Heptagon Label - "Biblical Number 7" */
.heptagon-badge {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    color: var(--shape-heptagon-primary);
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
    letter-spacing: 0.5px;
}

/* ========================================
   PAGE RHYTHM LAYOUTS
   ======================================== */

/* Homepage Layout: Circle → Trapezoid → Square → Rectangle */
.page-home .hero-section {
    /* Circle dominant */
}

.page-home .youth-section {
    /* Trapezoid primary */
}

.page-home .service-section {
    /* Square grid */
}

.page-home .teaching-section {
    /* Rectangle cards */
}

/* Youth Page Layout: Trapezoid → Heptagon → Rectangle */
.page-youth .youth-hero {
    /* Trapezoid slider */
}

.page-youth .series-highlight {
    /* Heptagon (ONE only) */
}

.page-youth .youth-content {
    /* Rectangle content blocks */
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    .shape-circle {
        aspect-ratio: 1 / 1;
        max-height: 500px;
    }

    .circle-carousel {
        height: 400px;
    }

    .shape-trapezoid {
        clip-path: polygon(8% 0%, 92% 0%, 100% 100%, 0% 100%);
        padding: 2rem 1.5rem;
    }

    .shape-square-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .shape-heptagon {
        width: 300px;
        height: 300px;
    }

    .trapezoid-arrow {
        width: 40px;
        height: 40px;
    }

    .trapezoid-arrow.left {
        left: 1rem;
    }

    .trapezoid-arrow.right {
        right: 1rem;
    }
}

@media (max-width: 480px) {
    .shape-circle-content {
        padding: 2rem;
    }

    .shape-heptagon {
        width: 250px;
        height: 250px;
    }

    .shape-heptagon-content h2 {
        font-size: 1.5rem;
    }
}

/* ========================================
   MOTION UTILITIES
   ======================================== */

.gentle-fade-in {
    animation: gentleFadeIn var(--motion-slow) ease-out;
}

@keyframes gentleFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slow-parallax {
    transition: transform var(--motion-slow);
}

.worship-hover {
    transition: all var(--motion-gentle);
}

.worship-hover:hover {
    transform: translateY(-5px);
}

/* ========================================
   SPIRITUAL SYMBOLISM HELPERS
   ======================================== */

/* Unity Ring - Circle decorative element */
.unity-ring {
    position: absolute;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    pointer-events: none;
}

/* Growth Arrow - Trapezoid directional indicator */
.growth-arrow {
    display: inline-block;
    color: var(--shape-trapezoid-primary);
    font-size: 1.5rem;
    animation: upwardCall 2s ease-in-out infinite;
}

@keyframes upwardCall {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Sacred Number Badge */
.sacred-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--shape-heptagon-primary);
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1.2rem;
    box-shadow: 0 4px 15px var(--shape-heptagon-glow);
}

/* ========================================
   CONTENT FRAMING RULES
   ======================================== */

/* Never let shapes overpower text */
.shape-content-wrapper {
    position: relative;
    z-index: 10;
}

.shape-background {
    position: absolute;
    z-index: 1;
    opacity: 0.15;
}

/* Scripture emphasis within shapes */
.shape-scripture {
    font-style: italic;
    font-weight: 500;
    color: inherit;
    opacity: 0.9;
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    border-left: 3px solid currentColor;
}

/* ========================================
   DARK MODE SUPPORT
   ======================================== */

/* SQUARE (Service) - Dark Mode */
body.dark .shape-square-container,
body[data-theme="dark"] .shape-square-container {
    background: var(--bg-section);
    isolation: isolate;
}

body.dark .shape-square-container h2,
body[data-theme="dark"] .shape-square-container h2 {
    color: var(--brand-accent) !important;
    opacity: 1 !important;
    text-shadow: none !important;
    filter: none !important;
}

body.dark .shape-square,
body[data-theme="dark"] .shape-square {
    background: var(--bg-card-surface) !important;
    border-color: var(--border-highlight) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    isolation: isolate;
}

body.dark .shape-square:hover,
body[data-theme="dark"] .shape-square:hover {
    border-color: var(--shape-square-hover) !important;
    box-shadow: var(--shadow-soft) !important;
}

body.dark .shape-square-icon,
body[data-theme="dark"] .shape-square-icon {
    color: var(--brand-accent) !important;
    opacity: 1 !important;
    filter: none !important;
}

body.dark .shape-square h3,
body[data-theme="dark"] .shape-square h3 {
    color: var(--text-heading) !important;
    opacity: 1 !important;
    text-shadow: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}

body.dark .shape-square p,
body[data-theme="dark"] .shape-square p {
    color: var(--text-body) !important;
    opacity: 1 !important;
    text-shadow: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}

body.dark .shape-square a,
body.dark .shape-square .shape-square-link,
body[data-theme="dark"] .shape-square a,
body[data-theme="dark"] .shape-square .shape-square-link {
    color: var(--brand-accent) !important;
    opacity: 1 !important;
    text-shadow: none !important;
    filter: none !important;
    font-weight: 700 !important;
    mix-blend-mode: normal !important;
}

body.dark .shape-square a:hover,
body.dark .shape-square .shape-square-link:hover,
body[data-theme="dark"] .shape-square a:hover,
body[data-theme="dark"] .shape-square .shape-square-link:hover {
    color: var(--brand-accent) !important;
}