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

/* GPU Acceleration for all animated elements */
.hero-title,
.hero-description,
.section-title,
.section-description,
.coaching-card,
.product-card,
.btn,
.modal-container,
.swiper-slide,
[class*="sparkle"],
[class*="glow"],
[class*="pulse"],
.logo-container,
.logo-glow,
.hero-glow,
.section-divider,
.gradient-animation,
.aurora-effect {
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Reduce animations on low-power devices */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Disable heavy animations on mobile to prevent overheating */
@media (max-width: 768px) {
    /* Disable logo rotation on mobile */
    .logo-container.rotate .nav-logo {
        animation: none !important;
    }
    
    /* Reduce glow pulse frequency on mobile */
    .logo-glow,
    .hero-logo-glow,
    .section-divider::before {
        animation-duration: 6s !important; /* Slower = less CPU */
    }
    
    /* Disable shimmer effects on mobile */
    .hero-title::after,
    .btn::before,
    [class*="shimmer"]::after {
        animation: none !important;
        display: none !important;
    }
    
    /* Keep sparkles ONLY in header and hero, hide everywhere else */
    .sparkle-products,
    .sparkle-stories,
    .sparkle-socials {
        display: none !important;
    }
    
    /* Disable particle animations on mobile */
    [class*="particle"] {
        animation: none !important;
        display: none !important;
    }
    
    /* Simplify gradient animations */
    .gradient-animation,
    .aurora-effect {
        animation: none !important;
        background: none !important;
    }
}

/* ========================================
   MYSTICAL HEADER ENHANCEMENTS
   ======================================== */

/* Navigation Mystical Background */
.nav-mystical-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.navbar .container {
    position: relative;
    z-index: 1;
}



/* Gradient Animation Background - REMOVED UNUSED ANIMATIONS */
.gradient-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, 
        rgba(95, 49, 121, 0.08) 0%, 
        rgba(139, 93, 167, 0.12) 25%,
        rgba(238, 201, 253, 0.08) 50%,
        rgba(139, 93, 167, 0.12) 75%,
        rgba(95, 49, 121, 0.08) 100%);
    background-size: 400% 400%;
    opacity: 1;
    transition: opacity 0.5s ease;
    display: none;
}

.gradient-animation.active {
    display: block;
}

/* Aurora Effect - REMOVED UNUSED ANIMATIONS */
.aurora-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity 0.5s ease;
    background: linear-gradient(90deg,
        rgba(95, 49, 121, 0.12) 0%,
        rgba(139, 93, 167, 0.18) 20%,
        rgba(238, 201, 253, 0.12) 40%,
        rgba(139, 93, 167, 0.18) 60%,
        rgba(95, 49, 121, 0.12) 80%,
        rgba(139, 93, 167, 0.18) 100%);
    background-size: 200% 100%;
    display: none;
}

.aurora-effect.active {
    display: block;
}

/* Logo Container */
.nav-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    grid-column: 1;
}

.logo-container {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eec9fd;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16) !important;
    transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-logo {
    width: 90%;
    height: 90%;
    object-fit: contain;
    object-position: center;
    position: relative;
    z-index: 2;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar.scrolled .logo-container {
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.16) !important;
}

/* Scrolled state scaling handled by animation */

/* Logo Glow Effect - Optimized */
.logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%) translateZ(0);
    border-radius: 50%;
    background: radial-gradient(circle, 
        rgba(95, 49, 121, 0.5) 0%, 
        rgba(139, 93, 167, 0.3) 30%,
        transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    filter: blur(10px);
    animation: logoGlowPulse 3s ease-in-out infinite;
    will-change: transform, opacity;
}

.logo-glow.active {
    opacity: 1;
}

@keyframes logoGlowPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.9; }
}



/* Logo Rotation Effect - Optimized */
.logo-container.rotate .nav-logo {
    animation: logoRotate 30s linear infinite;
    will-change: transform;
    transform: translateZ(0);
}

@keyframes logoRotate {
    from { transform: rotate(0deg) translateZ(0); }
    to { transform: rotate(360deg) translateZ(0); }
}

/* Logo Pulse Effect */
.logo-container.pulse {
    animation: containerPulse 3s ease-in-out infinite !important;
}

.logo-container.pulse .nav-logo {
    animation: logoPulse 3s ease-in-out infinite !important;
}

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

@keyframes logoPulse {
    0%, 100% { 
        transform: scale(1); 
        opacity: 1;
    }
    50% { 
        transform: scale(1.08); 
        opacity: 0.95;
    }
}

/* Logo Link Styles */
.logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: relative;
    z-index: 3;
}

/* Ensure logo image maintains proper sizing within flex container */
.logo-link .nav-logo {
    width: 90%;
    height: 90%;
    object-fit: contain;
    object-position: center;
}

.logo-link:hover {
    /* Ensure link doesn't interfere with logo animations */
    transform: none;
}



/* Brand Text Gradient */
.brand-text {
    position: relative;
    margin: 0;
}

.gradient-text {
    background: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    transition: all 0.3s ease;
}

.gradient-text.active {
    animation: gradientText 5s ease infinite;
}

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

/* Text Shimmer Effect - Subtle and Always Active */
.brand-text .gradient-text {
    position: relative;
}

.brand-text .gradient-text::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%);
    animation: shimmerSweep 4s ease-in-out infinite;
    will-change: transform;
    transform: translateZ(0);
}

@keyframes shimmerSweep {
    0% { left: -100%; transform: translateZ(0); }
    50%, 100% { left: 100%; transform: translateZ(0); }
}



/* Hero Logo Enhancements */
.hero-image {
    position: relative;
}

.hero-logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, 
        rgba(238, 201, 253, 0.6) 0%, 
        rgba(139, 93, 167, 0.3) 30%,
        transparent 70%);
    filter: blur(20px);
    animation: heroGlowPulse 4s ease-in-out infinite;
    z-index: 0;
}

@keyframes heroGlowPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

.hero-image img {
    position: relative;
    z-index: 1;
}



/* Scroll Effects */
.navbar.scrolled {
    padding: 0.75rem 0 !important;
    background: #eec9fd !important;
    box-shadow: none !important;
}

/* Removed transition gradient - seamless now with matching backgrounds */

/* ========================================
   BUTTON ANIMATION STYLES
   ======================================== */

/* Button Enhancement - Gradient Hover Effect */
.btn-primary,
.btn-secondary,
.btn-emergency {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    isolation: isolate;
}



.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(95, 49, 121, 0.4);
}

.btn-secondary:hover {
    background: var(--primary-color);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(95, 49, 121, 0.3);
}

.btn-emergency:hover {
    background: var(--emergency-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(248, 175, 11, 0.4);
}

/* Style 1: Mystical Glow */
.btn-mystical-glow {
    position: relative;
    overflow: hidden;
}

.btn-mystical-glow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn-mystical-glow:hover::before {
    width: 300px;
    height: 300px;
}

.btn-mystical-glow:hover {
    box-shadow: 0 0 20px rgba(139, 93, 167, 0.6),
                0 0 40px rgba(201, 184, 228, 0.4),
                0 4px 16px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

/* Style 2: Cosmic Shimmer */
.btn-cosmic-shimmer {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #8b5da7 0%, #c9b8e4 100%);
    background-size: 200% 200%;
}

.btn-cosmic-shimmer::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 70%);
    transform: rotate(45deg);
    transition: all 0.6s ease;
}

.btn-cosmic-shimmer:hover {
    background-position: 100% 100%;
    transform: translateY(-2px);
}

.btn-cosmic-shimmer:hover::before {
    left: 100%;
}

/* Style 3: Ethereal Float */
.btn-ethereal-float {
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-ethereal-float::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 10%;
    width: 80%;
    height: 10px;
    background: radial-gradient(ellipse, rgba(139, 93, 167, 0.4) 0%, transparent 70%);
    filter: blur(8px);
    opacity: 0;
    transition: all 0.4s ease;
}

.btn-ethereal-float:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 24px rgba(139, 93, 167, 0.3);
}

.btn-ethereal-float:hover::after {
    opacity: 1;
    bottom: -15px;
}

/* Style 4: Particle Burst */
.btn-particle-burst {
    position: relative;
    overflow: hidden;
}

.btn-particle-burst::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(201, 184, 228, 0.4) 50%,
        transparent 100%);
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
    opacity: 0;
}

.btn-particle-burst:hover::before {
    width: 400px;
    height: 400px;
    opacity: 1;
}

.btn-particle-burst:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(139, 93, 167, 0.5);
}

/* Style 5: Sacred Geometry */
.btn-sacred-geometry {
    position: relative;
    overflow: hidden;
}

.btn-sacred-geometry::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(45deg, transparent 45%, rgba(255, 255, 255, 0.1) 50%, transparent 55%),
        linear-gradient(-45deg, transparent 45%, rgba(255, 255, 255, 0.1) 50%, transparent 55%);
    background-size: 20px 20px;
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 0;
    transition: all 0.6s ease;
}

.btn-sacred-geometry:hover::before {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(90deg);
}

.btn-sacred-geometry:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 93, 167, 0.4);
}

/* Style 6: Starlight Trail */
.btn-starlight-trail {
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.btn-starlight-trail::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg,
        #8b5da7 0%,
        #c9b8e4 25%,
        #e8d5f2 50%,
        #c9b8e4 75%,
        #8b5da7 100%);
    background-size: 300% 300%;
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.btn-starlight-trail::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%);
    transition: left 0.7s ease;
}

.btn-starlight-trail:hover::before {
    opacity: 1;
    animation: borderGlow 2s linear infinite;
}

.btn-starlight-trail:hover::after {
    left: 100%;
}

.btn-starlight-trail:hover {
    transform: translateY(-2px);
}

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

/* ========================================
   ANIMATION TEST SECTION
   ======================================== */

.animation-test {
    background: linear-gradient(135deg, #f8f5fc 0%, #ffffff 100%);
    padding: 4rem 0;
}

.logo-upload-section {
    background: white;
    padding: 2rem;
    border-radius: var(--border-radius-lg);
    margin: 2rem 0;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.logo-upload-section h3 {
    color: var(--dark-color);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.upload-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 1rem 0;
}

.upload-status {
    color: var(--success-color);
    font-weight: 500;
}

.upload-note {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-top: 1rem;
}

.upload-note i {
    color: var(--primary-color);
    margin-right: 0.5rem;
}

.effect-controls {
    background: white;
    padding: 2rem;
    border-radius: var(--border-radius-lg);
    margin: 2rem 0;
    box-shadow: var(--shadow-sm);
}

.effect-controls h3 {
    color: var(--dark-color);
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

.toggle-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.toggle-switch {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.toggle-switch input {
    display: none;
}

.slider {
    position: relative;
    width: 50px;
    height: 26px;
    background-color: #ccc;
    border-radius: 26px;
    transition: background-color 0.3s ease;
}

.slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.toggle-switch input:checked + .slider {
    background-color: var(--primary-color);
}

.toggle-switch input:checked + .slider::before {
    transform: translateX(24px);
}

.label-text {
    color: var(--text-dark);
    font-weight: 500;
    font-size: 1rem;
}

.button-test-section {
    background: white;
    padding: 2rem;
    border-radius: var(--border-radius-lg);
    margin: 2rem 0;
    box-shadow: var(--shadow-sm);
}

.button-test-section h3 {
    color: var(--dark-color);
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.button-test-section > p {
    color: var(--text-light);
    margin-bottom: 2rem;
}

.button-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.button-demo {
    text-align: center;
    padding: 1.5rem;
    background: var(--light-color);
    border-radius: var(--border-radius);
}

.button-demo h4 {
    color: var(--dark-color);
    margin-bottom: 1rem;
    font-size: 1.1rem;
}





/* Mobile Adjustments for Mystical Effects */
@media (max-width: 768px) {
    .logo-container {
        width: 50px;
        height: 50px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16) !important;
    }
    
    /* Adjust logo image to fill container properly on mobile */
    .nav-logo {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    /* Disable pulse animation on mobile */
    .logo-container.pulse,
    .logo-container.pulse .nav-logo {
        animation: none !important;
    }
    
    .nav-brand h2 {
        font-size: 1.3rem;
    }
    
    /* Disable heavy animations on mobile for performance */
    .gradient-animation.active,
    .aurora-effect.active {
        animation: none;
    }
    
    .logo-container.rotate .nav-logo {
        animation: none;
    }
    
    .cursor-trail {
        display: none !important;
    }
    
    .button-grid {
        grid-template-columns: 1fr;
    }
    
    .font-preview-grid {
        grid-template-columns: 1fr;
    }
    
    .elegant-font h1,
    .handwritten-font h1,
    .fantasy-font h1 {
        font-size: 2rem;
    }
}

/* ========================================
   MYSTICAL ENHANCEMENTS - PROFESSIONAL
   ======================================== */

/* Floating Particles Around Hero Logo */
.mystical-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: visible;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(95, 49, 121, 0.8) 0%, transparent 70%);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(95, 49, 121, 0.5);
    animation: floatParticle 6s ease-in-out infinite;
}

.particle:nth-child(1) {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
    animation-duration: 8s;
}

.particle:nth-child(2) {
    top: 20%;
    left: 80%;
    animation-delay: 1s;
    animation-duration: 7s;
}

.particle:nth-child(3) {
    top: 70%;
    left: 15%;
    animation-delay: 2s;
    animation-duration: 9s;
}

.particle:nth-child(4) {
    top: 80%;
    left: 85%;
    animation-delay: 3s;
    animation-duration: 7.5s;
}

.particle:nth-child(5) {
    top: 50%;
    left: 5%;
    animation-delay: 4s;
    animation-duration: 8.5s;
}

.particle:nth-child(6) {
    top: 30%;
    left: 90%;
    animation-delay: 5s;
    animation-duration: 8s;
}

@keyframes floatParticle {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }
    25% {
        transform: translate(10px, -15px) scale(1.2);
        opacity: 0.7;
    }
    50% {
        transform: translate(-5px, -25px) scale(0.9);
        opacity: 0.5;
    }
    75% {
        transform: translate(15px, -10px) scale(1.1);
        opacity: 0.6;
    }
}

/* Hero Title Text Shimmer */
.hero-title {
    position: relative;
    background: linear-gradient(90deg, 
        var(--dark-color) 0%, 
        var(--primary-color) 25%,
        var(--secondary-color) 50%,
        var(--primary-color) 75%,
        var(--dark-color) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: textShimmer 4s linear infinite;
}

@keyframes textShimmer {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* Enhanced Mystical Button Effects */
.btn-primary,
.btn-secondary,
.btn-emergency {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    isolation: isolate;
}

/* White overlay removed - keeping only the diagonal shine effect */
/*
.btn-primary::before,
.btn-secondary::before,
.btn-emergency::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.45);
    opacity: 0;
    transition: opacity 0.2s ease;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
}

.btn-primary:hover::before,
.btn-secondary:hover::before,
.btn-emergency:hover::before {
    opacity: 1;
}
*/

.btn-primary::after,
.btn-secondary::after,
.btn-emergency::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        transparent 0%, 
        transparent 35%,
        rgba(255, 255, 255, 0.25) 50%, 
        transparent 65%,
        transparent 100%);
    background-size: 300% 300%;
    animation: diagonalShine 4.2s linear infinite;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

@keyframes diagonalShine {
    0% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

/* Ensure animation continues smoothly on hover */
.btn-primary:hover::after,
.btn-secondary:hover::after,
.btn-emergency:hover::after {
    animation: diagonalShine 4.2s linear infinite;
}

/* Navigation Hover Effects */
.nav-menu a {
    position: relative;
    transition: all 0.3s ease;
}

.nav-menu a::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--primary-color) 50%, 
        transparent 100%);
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.nav-menu a:hover::before {
    width: 100%;
}

.nav-menu a:hover {
    color: var(--primary-color);
    text-shadow: 0 0 10px rgba(95, 49, 121, 0.5);
}

/* Scroll-Triggered Reveal Animations - Optimized for Performance */
.section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, 
                transform 0.6s ease-out;
}

.section.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered reveal for child elements - Simplified */
.section.revealed .section-title {
    animation: fadeInUp 0.4s ease-out 0.05s both;
}

.section.revealed .section-description {
    animation: fadeInUp 0.4s ease-out 0.1s both;
}

.section.revealed .coaching-grid > *,
.section.revealed .products-grid > *,
.section.revealed .values-grid > * {
    animation: fadeInUp 0.4s ease-out both;
}

/* Stagger delay for grid items - Reduced for better performance */
.section.revealed .coaching-grid > *:nth-child(1),
.section.revealed .products-grid > *:nth-child(1),
.section.revealed .values-grid > *:nth-child(1) { animation-delay: 0.15s; }
.section.revealed .coaching-grid > *:nth-child(2),
.section.revealed .products-grid > *:nth-child(2),
.section.revealed .values-grid > *:nth-child(2) { animation-delay: 0.25s; }
.section.revealed .coaching-grid > *:nth-child(3),
.section.revealed .products-grid > *:nth-child(3),
.section.revealed .values-grid > *:nth-child(3) { animation-delay: 0.35s; }
.section.revealed .coaching-grid > *:nth-child(4),
.section.revealed .products-grid > *:nth-child(4),
.section.revealed .values-grid > *:nth-child(4) { animation-delay: 0.45s; }
.section.revealed .coaching-grid > *:nth-child(5),
.section.revealed .products-grid > *:nth-child(5),
.section.revealed .values-grid > *:nth-child(5) { animation-delay: 0.55s; }
.section.revealed .coaching-grid > *:nth-child(6),
.section.revealed .products-grid > *:nth-child(6),
.section.revealed .values-grid > *:nth-child(6) { animation-delay: 0.65s; }

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

/* Mystical Section Dividers - Enhanced */
.section-divider {
    height: 50px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(95, 49, 121, 0.15) 30%,
        rgba(139, 93, 167, 0.2) 50%,
        rgba(95, 49, 121, 0.15) 70%,
        transparent 100%);
}

.section-divider::before {
    content: '✦';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    color: var(--primary-color);
    text-shadow: 
        0 0 10px rgba(95, 49, 121, 0.6),
        0 0 20px rgba(139, 93, 167, 0.4),
        0 0 30px rgba(238, 201, 253, 0.3);
    animation: dividerPulseEnhanced 3s ease-in-out infinite;
}

@keyframes dividerPulseEnhanced {
    0%, 100% { 
        opacity: 0.5; 
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        text-shadow: 
            0 0 10px rgba(95, 49, 121, 0.4),
            0 0 20px rgba(139, 93, 167, 0.2);
    }
    50% { 
        opacity: 1; 
        transform: translate(-50%, -50%) scale(1.3) rotate(90deg);
        text-shadow: 
            0 0 20px rgba(95, 49, 121, 0.8),
            0 0 40px rgba(139, 93, 167, 0.6),
            0 0 60px rgba(238, 201, 253, 0.4);
    }
}

/* Coaching Card Hover Effects */
.coaching-card {
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.coaching-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, 
        #eec9fd, 
        #8b5da7, 
        rgba(248, 175, 11, 0.5),
        #8b5da7,
        #eec9fd);
    background-size: 300% 300%;
    background-position: 0% 50%;
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease, background-position 2s ease;
}

.coaching-card:hover::before {
    opacity: 1;
    background-position: 100% 50%;
}

.coaching-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(95, 49, 121, 0.3);
}

/* ========================================
   COACHING CARD HOVER TEXT COLORS
   Improves text contrast against gradient background on hover
   TO DISABLE: Comment out or delete lines below until next section
   ======================================== */

/* Description text only - darken for better contrast against purple background */
.coaching-card:hover > p {
    color: #333333 !important; /* Darker gray/near black for better contrast */
    transition: color 0.3s ease;
}

/* All other elements (title, checklist, price, icons, tags) remain unchanged */

/* END COACHING CARD HOVER TEXT COLORS */
/* ======================================== */

/* Animated Icons in My Approach */
.value-item i {
    transition: all 0.4s ease;
    display: inline-block;
}

.value-item:hover i {
    transform: translateY(-5px) scale(1.15);
    text-shadow: 0 5px 15px rgba(95, 49, 121, 0.5);
    animation: iconBounce 0.6s ease;
}

@keyframes iconBounce {
    0%, 100% { transform: translateY(-5px) scale(1.15); }
    50% { transform: translateY(-10px) scale(1.2); }
}

/* Product Cards - Static Layout */
.products-grid {
    /* 3D effects removed for cleaner, more professional appearance */
}

.product-card {
    position: relative;
    /* Transition removed for static appearance */
}

/* Simple Static Hover Effect - No 3D Movement */
/* Hover effects removed for static, professional appearance */

/* Gradient Overlay removed - No longer needed for static cards */

/* Gradient Fade-ins Between Sections */
.section::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(95, 49, 121, 0.03) 100%);
    pointer-events: none;
}

/* Emergency Section Special Effects */
.emergency-icon {
    animation: emergencyPulse 2s ease-in-out infinite;
}

@keyframes emergencyPulse {
    0%, 100% { 
        transform: scale(1); 
        filter: drop-shadow(0 0 10px rgba(248, 175, 11, 0.3));
    }
    50% { 
        transform: scale(1.1); 
        filter: drop-shadow(0 0 20px rgba(248, 175, 11, 0.6));
    }
}

/* ========================================
   MYSTICAL SPARKLE SYSTEM
   ======================================== */

/* Sparkle Container */
.sparkle-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Changed from visible to hidden to contain sparkles */
    pointer-events: none;
    z-index: -1; /* Behind section content */
}

/* Unified Sparkle Container (REMOVED - Using separate containers instead) */

/* Products Sparkle Container */
.sparkle-products {
    /* Inherits from .sparkle-container base styles */
}

/* Client Stories Sparkle Container */
.sparkle-stories {
    /* Inherits from .sparkle-container base styles */
}

/* Socials/Connect Sparkle Container */
.sparkle-socials {
    /* Inherits from .sparkle-container base styles */
}

/* Header Sparkle Container */
.sparkle-header {
    /* Header-specific positioning */
    height: 100%; /* Full height of navbar */
}

/* Hero Sparkle Container */
.sparkle-hero {
    /* Hero-specific positioning */
    height: 100%; /* Full height of hero section */
}

/* Base Sparkle Styles - Optimized for Teleportation */
.sparkle {
    position: absolute;
    pointer-events: none;
    opacity: 1; /* Full opacity for visibility */
    transition: opacity 0.15s ease;
    filter: blur(0.5px); /* Subtle blur for softer appearance */
}

/* Four-Pointed Star Shape (Matching Divider Shape) */
.sparkle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: #4a2561;
    transform: translate(-50%, -50%);
    -webkit-clip-path: polygon(
        50% 0%,    /* Top point */
        68% 32%,   /* Top-right curve start */
        100% 50%,  /* Right point */
        68% 68%,   /* Bottom-right curve start */
        50% 100%,  /* Bottom point */
        32% 68%,   /* Bottom-left curve start */
        0% 50%,    /* Left point */
        32% 32%    /* Top-left curve start */
    );
    clip-path: polygon(
        50% 0%,    /* Top point */
        68% 32%,   /* Top-right curve start */
        100% 50%,  /* Right point */
        68% 68%,   /* Bottom-right curve start */
        50% 100%,  /* Bottom point */
        32% 68%,   /* Bottom-left curve start */
        0% 50%,    /* Left point */
        32% 32%    /* Top-left curve start */
    );
    filter: 
        blur(0.8px)
        drop-shadow(0 0 4px rgba(74, 37, 97, 0.9))
        drop-shadow(0 0 8px rgba(74, 37, 97, 0.7))
        drop-shadow(0 0 12px rgba(74, 37, 97, 0.5));
    animation: sparkle-twinkle 2s ease-in-out infinite;
}

/* Smaller Size Variations */
.sparkle[data-size="small"]::before { 
    width: 6px;
    height: 6px;
    filter: 
        blur(0.5px)
        drop-shadow(0 0 3px rgba(74, 37, 97, 0.8))
        drop-shadow(0 0 6px rgba(74, 37, 97, 0.6))
        drop-shadow(0 0 9px rgba(74, 37, 97, 0.4));
}
.sparkle[data-size="medium"]::before { 
    width: 10px;
    height: 10px;
    filter: 
        blur(0.8px)
        drop-shadow(0 0 5px rgba(74, 37, 97, 1))
        drop-shadow(0 0 10px rgba(74, 37, 97, 0.8))
        drop-shadow(0 0 15px rgba(74, 37, 97, 0.6));
}
.sparkle[data-size="large"]::before { 
    width: 14px;
    height: 14px;
    filter: 
        blur(1.2px)
        drop-shadow(0 0 7px rgba(74, 37, 97, 1.2))
        drop-shadow(0 0 14px rgba(74, 37, 97, 1))
        drop-shadow(0 0 21px rgba(74, 37, 97, 0.8));
}

/* Simple Sparkle Pulse Animation for Teleportation Effect */
@keyframes sparkle-pulse {
    0%, 100% { 
        transform: scale(0.8); 
        opacity: 0.6; 
    }
    50% { 
        transform: scale(1.1); 
        opacity: 1; 
    }
}

/* Enhanced Twinkling Effect - Simplified for Performance */
@keyframes sparkle-twinkle {
    0%, 100% { 
        opacity: 0.9;
    }
    50% { 
        opacity: 1;
    }
}

/* Sparkle Animation Classes - Used during teleportation */
.sparkle.teleporting {
    animation: sparkle-pulse 2s ease-in-out infinite, sparkle-twinkle 2s ease-in-out infinite;
}

/* Sparkle positioning now handled by JavaScript for dynamic distribution */

/* Mobile Optimization */
@media (max-width: 768px) {
    .mystical-particles { display: none; }
    .particle { display: none; }
    
    /* Increase sparkles on mobile - show more! */
    .sparkle-container {
        opacity: 0.5 !important; /* More visible sparkles */
    }
    
    /* Show more sparkles - hide only beyond 20 */
    .sparkle:nth-child(n+21) {
        display: none !important;
    }
    
    /* Simplify sparkle animations for mobile */
    .sparkle {
        animation-duration: 3s !important;
    }
    
    /* Nice sized sparkles that are visible but not overwhelming */
    .sparkle::before {
        filter: 
            blur(0.5px)
            drop-shadow(0 0 3px rgba(74, 37, 97, 0.7))
            drop-shadow(0 0 6px rgba(74, 37, 97, 0.5))
            drop-shadow(0 0 9px rgba(74, 37, 97, 0.3));
    }
    
    .sparkle[data-size="small"]::before { 
        width: 5px;
        height: 5px;
        filter: blur(0.4px) drop-shadow(0 0 2px rgba(74, 37, 97, 0.7)) drop-shadow(0 0 4px rgba(74, 37, 97, 0.5)); 
    }
    .sparkle[data-size="medium"]::before { 
        width: 8px;
        height: 8px;
        filter: blur(0.6px) drop-shadow(0 0 4px rgba(74, 37, 97, 0.8)) drop-shadow(0 0 7px rgba(74, 37, 97, 0.6)); 
    }
    .sparkle[data-size="large"]::before { 
        width: 11px;
        height: 11px;
        filter: blur(0.8px) drop-shadow(0 0 5px rgba(74, 37, 97, 0.9)) drop-shadow(0 0 10px rgba(74, 37, 97, 0.7)); 
    }
    
    .hero-title {
        animation: none;
        background: none;
        -webkit-background-clip: unset;
        -webkit-text-fill-color: var(--dark-color);
        background-clip: unset;
        color: var(--dark-color);
    }
    
    .coaching-card:hover {
        transform: translateY(-5px) scale(1.01);
    }
    
    .section::before {
        display: none;
    }
    
    /* Adjust unified sparkle container for mobile */
    .sparkle-unified {
        height: calc(100vh + 120px); /* Full viewport + header height (60px) + extra space */
        top: -60px;
    }
}


"/* ========================================\n   LOGO ERROR HANDLING\n   ======================================== */\n\n/* Logo error handling - when JPG fails, show fallback styling */\n.nav-logo.logo-error,\n.hero-image img.logo-error {\n    background: linear-gradient(135deg, #8b5da7 0%, #c9b8e4 100%);\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    font-family: 'Cormorant Garamond', serif;\n    font-weight: bold;\n    font-size: 24px;\n    text-align: center;\n}\n\n.nav-logo.logo-error::before,\n.hero-image img.logo-error::before {\n    content: \"MH\";\n    display: block;\n}\n\n.nav-logo.logo-loaded,\n.hero-image img.logo-loaded {\n    background: transparent;\n}"