/* ===================================
   Diamantbestattung Page Styles
   Gold colors + crystal sparkle particles
   =================================== */

/* ===================================
   Hero Section with Crystal Sparkles
   =================================== */

/* Crystal particles container */
#crystalParticles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* Crystal/diamond shimmer overlay - white/silver/light blue */
#crystalParticles::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.12) 20%, transparent 40%),
        linear-gradient(60deg, transparent 30%, rgba(173, 216, 230, 0.10) 50%, transparent 70%),
        linear-gradient(150deg, transparent 60%, rgba(192, 192, 192, 0.08) 80%, transparent 100%);
    animation: crystalShimmer 9s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Gentle sparkle gradient at bottom */
#crystalParticles::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.15) 0%, transparent 100%);
    animation: sparkleGlow 7s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

/* Crystal shimmer animation */
@keyframes crystalShimmer {
    0%, 100% {
        opacity: 0.6;
        transform: translateX(0) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translateX(10px) scale(1.02);
    }
}

/* Sparkle glow animation */
@keyframes sparkleGlow {
    0%, 100% {
        opacity: 0.4;
        transform: translateY(0) scaleY(1);
    }
    50% {
        opacity: 0.5;
        transform: translateY(-10px) scaleY(1.08);
    }
}

.hero-content {
    position: relative;
    z-index: 2;
}

/* ===================================
   Introduction Section
   =================================== */

.intro-section {
    background: var(--color-bg-secondary);
    padding: 4rem 0;
}

.intro-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--spacing-12);
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.intro-image {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(212, 175, 55, 0.25);
}

.intro-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 4/3;
}

.intro-lead {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.intro-content p {
    margin-bottom: 1.25rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

/* ===================================
   Benefits Grid
   =================================== */

.benefits-section {
    padding: 4rem 0;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Service icons - GOLD colors */
.service-icon {
    width: 48px;
    height: 48px;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-4);
}

.service-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--color-accent-gold);
    stroke-width: 2;
}

/* ===================================
   Process Timeline
   =================================== */

.process-section {
    background: linear-gradient(135deg,
        var(--color-bg-secondary) 0%,
        var(--color-bg-primary) 100%
    );
    padding: var(--spacing-20) 0;
}

.process-timeline {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

.process-step {
    display: flex;
    gap: var(--spacing-6);
    align-items: flex-start;
    position: relative;
}

.process-step::before {
    content: '';
    position: absolute;
    left: 35px;
    top: 80px;
    bottom: -32px;
    width: 2px;
    background: linear-gradient(180deg,
        var(--color-accent-gold) 0%,
        rgba(212, 175, 55, 0.3) 100%
    );
}

.process-step:last-child::before {
    display: none;
}

/* Step numbers - GOLD gradient */
.step-number {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg,
        var(--color-accent-gold),
        var(--color-accent-gold-light)
    );
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-bg-primary);
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.4);
}

.step-content h3 {
    font-size: var(--font-size-xl);
    font-family: var(--font-serif);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-3);
}

.step-content p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

/* ===================================
   Burial Options Grid
   =================================== */

.burial-options-section {
    background: var(--color-bg-secondary);
    padding: 4rem 0;
}

.burial-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Icons - GOLD colors */
.why-icon {
    width: 48px;
    height: 48px;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-4);
}

.why-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--color-accent-gold);
    stroke-width: 2;
}

.burial-note {
    margin-top: 3rem;
    padding: 2rem;
    background: rgba(212, 175, 55, 0.1);
    border-left: 4px solid var(--color-accent-gold);
    border-radius: 8px;
}

.burial-note strong {
    color: var(--color-accent-gold);
}

/* ===================================
   Phoenix Logo Particles - Crystal Sparkle
   =================================== */

/* Phoenix particles container */
.phoenix-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

/* Individual phoenix particle - sparkle effect */
.phoenix-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
    animation: sparkleOut var(--sparkle-duration) ease-out forwards;
    will-change: transform, opacity;
}

/* Phoenix particle appearance - crystal sparkle */
.phoenix-particle::before {
    content: '';
    position: absolute;
    width: var(--particle-size, 4px);
    height: var(--particle-size, 4px);
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(173, 216, 230, 0.6) 30%,
        rgba(212, 175, 55, 0.4) 60%,
        rgba(255, 255, 255, 0.2) 100%
    );
    border-radius: 50%;
    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.6),
        0 0 12px rgba(173, 216, 230, 0.4);
    filter: blur(0.3px);
}

/* Sparkle outward animation */
@keyframes sparkleOut {
    0% {
        transform: translate(-50%, -50%) translate(0, 0) scale(0.2);
        opacity: 0;
    }
    15% {
        opacity: 0.8;
    }
    50% {
        opacity: 0.6;
    }
    85% {
        opacity: 0.2;
    }
    100% {
        transform: translate(-50%, -50%)
                   translate(var(--sparkle-x), var(--sparkle-y))
                   scale(1.5);
        opacity: 0;
    }
}

/* ===================================
   Diamond Crystal Particles - SVG Shapes
   =================================== */

/* Diamond particle container */
.crystal-particle {
    position: absolute;
    pointer-events: none;
    animation: diamondFloat var(--crystal-duration, 7000ms) ease-in-out forwards;
    will-change: transform, opacity;
    z-index: 2;
}

/* Diamond SVG styling */
.crystal-particle .diamond-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8))
            drop-shadow(0 0 15px rgba(173, 216, 230, 0.6))
            drop-shadow(0 0 25px rgba(212, 175, 55, 0.4));
}

/* Diamond shape - prismatic fill with animation */
.crystal-particle .diamond-shape {
    fill: url(#diamondGradient);
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 0.5;
    animation: prismaticShift 3s ease-in-out infinite;
    animation-delay: var(--prismatic-delay, 0s);
}

/* Fallback fill for diamonds (gradient defined inline or via CSS) */
.crystal-particle .diamond-shape {
    fill: rgba(255, 255, 255, 0.3);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(173, 216, 230, 0.7) 25%,
        rgba(255, 182, 193, 0.5) 50%,
        rgba(144, 238, 144, 0.4) 75%,
        rgba(212, 175, 55, 0.6) 100%
    );
}

/* Diamond facet lines - subtle inner detail */
.crystal-particle .diamond-facet {
    fill: none;
    stroke: rgba(255, 255, 255, 0.4);
    stroke-width: 0.3;
    stroke-linecap: round;
}

/* Prismatic color shift animation */
@keyframes prismaticShift {
    0%, 100% {
        fill: rgba(255, 255, 255, 0.4);
        filter: hue-rotate(0deg) brightness(1);
    }
    25% {
        fill: rgba(173, 216, 230, 0.5);
        filter: hue-rotate(60deg) brightness(1.1);
    }
    50% {
        fill: rgba(255, 182, 193, 0.5);
        filter: hue-rotate(120deg) brightness(1.2);
    }
    75% {
        fill: rgba(144, 238, 144, 0.4);
        filter: hue-rotate(240deg) brightness(1.1);
    }
}

/* Diamond floating animation */
@keyframes diamondFloat {
    0% {
        transform: translateY(0) translateX(0) scale(0.2) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    25% {
        transform: translateY(var(--float-y-1)) translateX(var(--float-x-1)) scale(0.8) rotate(45deg);
        opacity: 0.9;
    }
    50% {
        transform: translateY(var(--float-y-2)) translateX(var(--float-x-2)) scale(1) rotate(90deg);
        opacity: 0.8;
    }
    75% {
        transform: translateY(var(--float-y-3)) translateX(var(--float-x-3)) scale(0.9) rotate(135deg);
        opacity: 0.5;
    }
    90% {
        opacity: 0.2;
    }
    100% {
        transform: translateY(var(--float-y-4)) translateX(var(--float-x-4)) scale(0.3) rotate(180deg);
        opacity: 0;
    }
}

/* Sparkle burst effect - extra bright with light rays */
.crystal-particle.sparkle-burst .diamond-svg {
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 1))
            drop-shadow(0 0 20px rgba(173, 216, 230, 0.8))
            drop-shadow(0 0 35px rgba(212, 175, 55, 0.6));
    animation: sparkleGlitter 1.5s ease-in-out infinite;
}

@keyframes sparkleGlitter {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8))
                drop-shadow(0 0 15px rgba(173, 216, 230, 0.5));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 18px rgba(255, 255, 255, 1))
                drop-shadow(0 0 28px rgba(173, 216, 230, 0.9))
                drop-shadow(0 0 40px rgba(255, 215, 0, 0.7));
        transform: scale(1.15);
    }
}

/* Light ray effect behind sparkle diamonds */
.crystal-particle.sparkle-burst::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 255, 255, 0.3) 10deg,
        transparent 20deg,
        transparent 70deg,
        rgba(173, 216, 230, 0.2) 80deg,
        transparent 90deg,
        transparent 160deg,
        rgba(255, 215, 0, 0.2) 170deg,
        transparent 180deg,
        transparent 250deg,
        rgba(255, 182, 193, 0.2) 260deg,
        transparent 270deg,
        transparent 340deg,
        rgba(144, 238, 144, 0.2) 350deg,
        transparent 360deg
    );
    animation: lightRays 4s linear infinite;
    pointer-events: none;
    opacity: 0.6;
}

@keyframes lightRays {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ===================================
   Golden CTA Section
   =================================== */

.golden-cta-section h2,
.golden-cta-section p {
    color: var(--color-bg-primary) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.golden-cta-features .golden-feature {
    color: var(--color-bg-primary);
}

/* ===================================
   WhatsApp Button
   =================================== */

.whatsapp-float {
    position: fixed;
    bottom: var(--spacing-8);
    right: var(--spacing-8);
    width: 60px;
    height: 60px;
    background: #25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
    z-index: 1000;
    transition: all var(--transition-base);
    animation: whatsappPulse 2s infinite;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.6);
}

.whatsapp-float svg {
    width: 35px;
    height: 35px;
    fill: white;
}

@keyframes whatsappPulse {
    0%, 100% {
        box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
    }
    50% {
        box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
    }
}

/* ===================================
   Responsive Design
   =================================== */

@media (max-width: 968px) {
    .benefits-grid,
    .burial-options-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .intro-layout {
        grid-template-columns: 1fr;
    }

    .intro-lead {
        font-size: 1.1rem;
    }

    .burial-note {
        padding: 1.5rem;
        margin-top: 2rem;
    }

    .process-section {
        padding: var(--spacing-16) 0;
    }

    .process-step {
        flex-direction: column;
        text-align: center;
    }

    .process-step::before {
        display: none;
    }

    .step-number {
        margin: 0 auto var(--spacing-4);
    }

    .whatsapp-float {
        bottom: var(--spacing-4);
        right: var(--spacing-4);
        width: 50px;
        height: 50px;
    }

    .whatsapp-float svg {
        width: 28px;
        height: 28px;
    }

    /* Reduce particles on tablet */
    .crystal-particle:nth-child(3n) {
        display: none;
    }

    /* Simplify sparkle burst on tablet */
    .crystal-particle.sparkle-burst::before {
        display: none;
    }
}

@media (max-width: 640px) {
    .intro-section {
        padding: 3rem 0;
    }

    .benefits-section,
    .burial-options-section {
        padding: 3rem 0;
    }

    .intro-lead {
        font-size: 1rem;
    }

    /* Minimal particles on mobile */
    .crystal-particle:nth-child(2n) {
        display: none;
    }

    /* Hide light rays on mobile for performance */
    .crystal-particle.sparkle-burst::before {
        display: none;
    }

    .burial-note {
        padding: 1rem;
        font-size: 0.95rem;
    }
}

/* ===================================
   Light Theme Support
   =================================== */

[data-theme="light"] .intro-section,
[data-theme="light"] .burial-options-section {
    background: #f8f9fa;
}

[data-theme="light"] .burial-note {
    background: rgba(212, 175, 55, 0.08);
    border-left-color: var(--color-accent-gold);
}

[data-theme="light"] .burial-note strong {
    color: var(--color-accent-gold);
}

[data-theme="light"] .golden-cta-section h2,
[data-theme="light"] .golden-cta-section p {
    color: var(--color-bg-primary) !important;
}

/* Light theme particles - more vibrant */
[data-theme="light"] .crystal-particle::before {
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 1) 0%,
        rgba(173, 216, 230, 0.8) 25%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(212, 175, 55, 0.4) 75%,
        rgba(255, 255, 255, 0) 100%
    );
}

/* ===================================
   Print Styles
   =================================== */

@media print {
    .crystal-particle,
    .phoenix-particle {
        display: none;
    }

    .hero-section {
        background: white;
        color: black;
    }
}

/* ===================================
   Accessibility - Reduced Motion
   =================================== */

@media (prefers-reduced-motion: reduce) {
    .crystal-particle,
    .phoenix-particle {
        animation: none;
        opacity: 0.2;
    }

    .crystal-particle .diamond-svg {
        animation: none;
    }

    .crystal-particle .diamond-shape {
        animation: none;
        fill: rgba(255, 255, 255, 0.3);
    }

    .crystal-particle.sparkle-burst .diamond-svg {
        animation: none;
    }

    .crystal-particle.sparkle-burst::before {
        animation: none;
        display: none;
    }

    .whatsapp-float {
        animation: none;
    }

    #crystalParticles::before,
    #crystalParticles::after {
        animation: none;
    }
}