/* Base/Common CSS - Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #0a0e1c;
    color: #fff;
    overflow-x: hidden;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Floating Elements */
.floating-elements {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.cosmic-dust {
    position: absolute;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
    border-radius: 50%;
    animation: floatElement 15s ease-in-out infinite;
}

.cosmic-dust:nth-child(1) { width: 15px; height: 15px; top: 20%; left: 10%; animation-delay: 0s; animation-duration: 12s; }
.cosmic-dust:nth-child(2) { width: 8px;  height: 8px;  top: 30%; right: 15%; animation-delay: 2s; animation-duration: 10s; }
.cosmic-dust:nth-child(3) { width: 20px; height: 20px; bottom: 30%; left: 20%; animation-delay: 4s; animation-duration: 8s;  }
.cosmic-dust:nth-child(4) { width: 12px; height: 12px; bottom: 20%; right: 10%; animation-delay: 1s; animation-duration: 15s; }
.cosmic-dust:nth-child(5) { width: 7px;  height: 7px;  top: 10%; right: 30%; animation-delay: 3s; animation-duration: 9s;  }
.cosmic-dust:nth-child(6) { width: 18px; height: 18px; bottom: 10%; right: 40%; animation-delay: 5s; animation-duration: 11s; }

@keyframes floatElement {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-40px); }
}

/* Cosmic Portal Entry */
.cosmic-portal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at center, #0a0a2e 0%, #1a1a3a 50%, #000 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    overflow: hidden;
}

.portal-rings {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
}

.ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: portal-ring-pulse 4s ease-in-out infinite, portal-ring-rotate 60s linear infinite;
}

@keyframes portal-ring-rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.ring-1 {
    width: 100%;
    height: 100%;
}
.ring-2 {
    width: 80%;
    height: 80%;
    animation-delay: 0.5s;
    animation-direction: reverse, normal;
}
.ring-3 {
    width: 60%;
    height: 60%;
    animation-delay: 1s;
}

@keyframes portal-ring-pulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 255, 255, 0.5);
    }
}

.portal-text {
    text-align: center;
    color: white;
    z-index: 10;
}

.portal-text h1 {
    font-size: 3rem;
    margin-bottom: 2rem;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.intention-choices {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 2rem;
}

.intention-orb {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50px;
    padding: 15px 30px;
    font-family: 'Crimson Text', serif;
    font-size: 1.2rem;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
    animation: orb-pulse 3s ease-in-out infinite;
}

.intention-orb.visible {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

@keyframes orb-pulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.5);
    }
}

.intention-orb:hover {
    background: rgba(255, 215, 0, 0.3);
    border-color: #ffd700;
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation-play-state: paused;
}

.portal-text p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

.enter-portal-btn {
    background: linear-gradient(45deg, #ffd700, #ff69b4);
    border: none;
    padding: 15px 30px;
    border-radius: 50px;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: buttonPulse 2s ease-in-out infinite;
}

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

.enter-portal-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
}

/* Main Experience */
.experience-container {
    display: none;
    opacity: 0;
    transition: opacity 1s ease-out;
    position: relative;
    overflow-x: hidden;
}

.experience-container.visible {
    opacity: 1;
}

/* Floating Navigation */
.floating-nav {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.nav-orb {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.8), rgba(255, 105, 180, 0.8));
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.nav-orb::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
}

.nav-orb:hover::before {
    left: 100%;
}

.nav-orb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

.orb-text {
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav-orb:hover .orb-text {
    opacity: 1;
}

/* Hero Section - Dynamic Living Canvas */
.hero {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cosmic-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.nebula {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.3;
    animation: nebulaFloat 20s ease-in-out infinite;
}

.nebula-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #ffd700, transparent);
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.nebula-2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #ff69b4, transparent);
    top: 60%;
    right: 20%;
    animation-delay: -7s;
}

.nebula-3 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #87ceeb, transparent);
    bottom: 10%;
    left: 50%;
    animation-delay: -14s;
}

@keyframes nebulaFloat {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-30px) scale(1.1); }
}

.shooting-stars {
    position: absolute;
    width: 100%;
    height: 100%;
}

.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    animation: shootingStar 4s linear infinite;
}

.star-1 {
    top: 20%;
    left: 0;
    animation-delay: 0s;
}

.star-2 {
    top: 40%;
    left: 0;
    animation-delay: 1.5s;
}

.star-3 {
    top: 60%;
    left: 0;
    animation-delay: 3s;
}

@keyframes shootingStar {
    0% {
        transform: translateX(0) translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100vw) translateY(100px);
        opacity: 0;
    }
}

.hero-content {
    text-align: center;
    z-index: 10;
    max-width: 800px;
    padding: 0 20px;
}

.magical-title {
    font-family: 'Playfair Display', serif;
    font-size: 4rem;
    margin-bottom: 2rem;
    line-height: 1.2;
    color: white;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.title-word {
    display: inline-block;
    animation: titleFloat 4s ease-in-out infinite;
    margin: 0 10px;
}

.title-word-1 { animation-delay: 0s; }
.title-word-2 { animation-delay: 1s; }
.title-word-3 { animation-delay: 2s; }

@keyframes titleFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.title-subtitle {
    font-family: 'Dancing Script', cursive;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 3rem;
}

.hero-interaction {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3rem;
    position: relative;
}

/* Breathing Circle Animations */
@keyframes breatheIn {
    0% { transform: scale(1); }
    100% { transform: scale(1.3); }
}

@keyframes breatheOut {
    0% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

@keyframes hold {
    0% { transform: scale(1.3); }
    50% { transform: scale(1.25); }
    100% { transform: scale(1.3); }
}

.breathing-circle {
    width: 280px;
    height: 280px;
    border: 3px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: breatheIn 4s ease-in-out infinite;
    animation-play-state: paused;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.breath-text {
    font-family: 'Dancing Script', cursive;
    font-size: 1.8rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    line-height: 1.2;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    max-width: 200px;
    word-wrap: break-word;
}

.breath-text:hover {
    color: rgba(255, 255, 255, 1);
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.breathing-circle:hover .breath-text {
    transform: scale(1.1);
}

.breath-pulse {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, rgba(255, 105, 180, 0) 70%);
    animation: breathPulse 4s ease-in-out infinite;
    z-index: 1;
}

@keyframes breathPulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.1); opacity: 0.6; }
}

.breath-ripples {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(255, 215, 0, 0.5);
    opacity: 0;
    animation: ripple-effect 4s ease-out infinite;
}

.ripple-2 { animation-delay: 1.3s; }
.ripple-3 { animation-delay: 2.6s; }

@keyframes ripple-effect {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0;
    }
}

/* Story Section - Celestial Path */
.celestial-path {
    padding: 120px 0;
    background-color: #0a0e1c;
    background-image: radial-gradient(ellipse at top, #1b2735 0%, #0a0e1c 80%);
    color: #e0e0e0;
    position: relative;
    overflow: hidden;
}

.path-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

.path-step {
    display: flex;
    align-items: center;
    margin-bottom: 120px;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.path-step.visible {
    opacity: 1;
    transform: translateY(0);
}

.path-step:nth-child(even) {
    flex-direction: row-reverse;
}

.step-content {
    flex: 1.5;
    padding: 2rem;
}

.step-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    color: #ffffff;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5), 0 0 5px rgba(174, 218, 255, 0.8);
}

.step-content p {
    font-family: 'Crimson Text', serif;
    font-size: 1.2rem;
    line-height: 1.8;
    color: #c0c8d1;
    max-width: 50ch;
}

.calm-prompt {
    margin-top: 2rem;
    font-family: 'Dancing Script', cursive;
    font-size: 1.3rem;
    color: #aedaff;
    opacity: 0.8;
    position: relative;
    padding-left: 30px;
}

.calm-prompt::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: #aedaff;
    border-radius: 50%;
    opacity: 0.5;
    animation: soft-pulse 4s ease-in-out infinite;
}

@keyframes soft-pulse {
    0%, 100% { transform: translateY(-50%) scale(1); box-shadow: 0 0 5px #aedaff; }
    50% { transform: translateY(-50%) scale(1.2); box-shadow: 0 0 15px #aedaff; }
}

.step-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 250px;
    position: relative; /* Add this for positioning context */
}

.phenomenon {
    width: 180px;
    height: 180px;
    position: relative;
    margin: 1rem auto;
}

/* 1. Richer, more complex Nebula */
.phenomenon-nebula {
    background: radial-gradient(ellipse at 50% 50%, rgba(102, 126, 234, 0.3) 0%, transparent 70%);
    border-radius: 50%;
}

.phenomenon-nebula::before, .phenomenon-nebula::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    animation: nebula-swirl 30s linear infinite;
}

.phenomenon-nebula::before {
    top: -20px; left: -30px; right: -10px; bottom: 10px;
    background: radial-gradient(ellipse at 40% 40%, rgba(255, 179, 109, 0.25) 0%, transparent 60%);
}

.phenomenon-nebula::after {
    top: 10px; left: 10px; right: -20px; bottom: -30px;
    background: radial-gradient(ellipse at 60% 60%, rgba(174, 218, 255, 0.2) 0%, transparent 50%);
    animation-direction: reverse;
    animation-duration: 25s;
}

@keyframes nebula-swirl {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 3. Dynamic Twinkling Constellation */
.phenomenon-constellation {
    /* Container, no direct style needed */
}

.constellation-star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: twinkle 4s ease-in-out infinite, swing 8s ease-in-out infinite;
    transform-origin: 50% -100px; /* Swing from a point far above */
}

.constellation-star:nth-child(1) { top: 10%; left: 20%; width: 3px; height: 3px; animation-delay: 0.5s, -2s; }
.constellation-star:nth-child(2) { top: 30%; left: 80%; width: 2px; height: 2px; animation-delay: 1.2s, -0.5s; }
.constellation-star:nth-child(3) { top: 50%; left: 50%; width: 4px; height: 4px; animation-delay: 0.2s, -1s; }
.constellation-star:nth-child(4) { top: 80%; left: 30%; width: 2px; height: 2px; animation-delay: 2.1s, -3s; }
.constellation-star:nth-child(5) { top: 60%; left: 10%; width: 3px; height: 3px; animation-delay: 1.8s, -1.5s; }

@keyframes twinkle {
    0%, 100% { opacity: 0.5; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.1); }
}

@keyframes swing {
    0%, 100% {
        transform: rotate(5deg);
    }
    50% {
        transform: rotate(-5deg);
    }
}

/* 4. Mystical Soul Compass */
.phenomenon-compass {
    animation: slow-rotate 40s linear infinite;
}

.phenomenon-compass::before, .phenomenon-compass::after, .soul-compass-core {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(174, 218, 255, 0.4);
    border-radius: 50%;
}

.phenomenon-compass::before {
    width: 150px; height: 150px;
    animation: pulse-compass 5s ease-in-out infinite;
}

.phenomenon-compass::after {
    width: 100px; height: 100px;
    animation: pulse-compass 5s ease-in-out infinite -2.5s;
    transform-origin: center;
}

.soul-compass-core {
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, white, rgba(174, 218, 255, 0.3));
    box-shadow: 0 0 20px #aedaff, 0 0 30px #fff;
    border: none;
}

@keyframes pulse-compass {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
}

/* About Author Section */
.about-author {
    padding: 100px 0;
    background: linear-gradient(135deg, #4c3d5a 0%, #3e314b 100%);
    color: #f0e7f9;
    position: relative;
    overflow: hidden;
}

.author-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 50px;
    align-items: center;
}

.author-image-wrapper {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}

.author-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2;
}

.author-image-glow {
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    background: linear-gradient(135deg, #ffd700, #ff69b4);
    border-radius: 50%;
    filter: blur(25px);
    z-index: 1;
    animation: authorGlow 4s ease-in-out infinite alternate;
}

@keyframes authorGlow {
    from { opacity: 0.3; transform: scale(1); }
    to { opacity: 0.6; transform: scale(1.05); }
}

.author-bio {
    color: white;
}

.author-bio h2 {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #f7d8a7, #e9a3b9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.author-bio h3 {
    font-family: 'Dancing Script', cursive;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: rgba(240, 231, 249, 0.9);
}

.author-bio p {
    font-family: 'Crimson Text', serif;
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(240, 231, 249, 0.85);
}

/* Living Book */
.living-book {
    padding: 5rem 2rem;
    background: linear-gradient(135deg, #ffafcc 0%, #ff89aa 100%);
    position: relative;
    overflow: hidden;
}

.book-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3rem 6rem;
    align-items: center;
}

.book-cover {
    position: relative;
    width: clamp(260px, 60vw, 300px);
    aspect-ratio: 300 / 450;
    height: auto;
    margin: 0;
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
    transform: perspective(1000px) rotateY(-10deg) rotateX(4deg);
    flex-shrink: 0;
    animation: bookFloat 6s ease-in-out infinite -3s;
}

@keyframes bookFloat {
    0%, 100% {
        transform: perspective(1000px) rotateY(-10deg) rotateX(4deg) translateY(0px);
    }
    50% {
        transform: perspective(1000px) rotateY(-10deg) rotateX(4deg) translateY(-10px);
    }
}

.book-cover:hover {
    transform: perspective(1000px) rotateY(-5deg) rotateX(2deg) scale(1.05);
    animation-play-state: paused;
}

.book-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 25px 50px rgba(220, 150, 170, 0.25);
    transition: box-shadow 0.4s ease;
}

.book-cover:hover .book-image {
    box-shadow: 0 35px 60px rgba(220, 150, 170, 0.3);
}

.book-spine {
    position: absolute;
    top: 0;
    left: -10px;
    width: 20px;
    height: 100%;
    background: linear-gradient(135deg, #ff69b4, #ffd700);
    border-radius: 5px;
    transform: translateZ(-10px);
}

.book-pages {
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    background: white;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    transform: translateZ(-1px);
}

.page {
    flex: 1;
    border-bottom: 1px solid #eee;
    background: linear-gradient(45deg, #f8f9fa, #e9ecef);
}

.feature-card p {
    font-family: 'Crimson Text', serif;
    line-height: 1.6;
    color: #666;
}

/* Amazon Marketplaces */
.amazon-marketplaces {
    padding: 100px 0;
    background: linear-gradient(135deg, #f0f9f8 0%, #e6f4f1 100%);
    position: relative;
}

.purchase-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.purchase-container h2 {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #333;
}

.purchase-intro {
    font-family: 'Crimson Text', serif;
    font-size: 1.2rem;
    margin-bottom: 3rem;
    color: #666;
}

.marketplace-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 3rem;
}

.marketplace-card {
    background: rgba(255, 255, 255, 0.95);
    padding: 2rem;
    border-radius: 20px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.marketplace-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.2), transparent);
    transition: left 0.5s ease;
}

.marketplace-card:hover::before {
    left: 100%;
}

.marketplace-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.marketplace-flag {
    font-size: 3rem;
    margin-bottom: 1rem;
    line-height: 1;
}

.marketplace-card h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    color: #333;
}

.marketplace-card p {
    font-family: 'Crimson Text', serif;
    font-size: 1rem;
    color: #666;
    margin-bottom: 1rem;
}

.marketplace-arrow {
    font-size: 1.5rem;
    color: #764ba2;
    transition: transform 0.3s ease;
}

.marketplace-card:hover .marketplace-arrow {
    transform: translateX(10px);
}

.purchase-note {
    text-align: center;
    margin-top: 4rem;
    font-family: 'Dancing Script', cursive;
    font-size: 1.5rem;
    color: #4a5a6a;
}

/* Contact Section */
.contact.sacred-space {
    padding: 100px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #f0e7f9;
}

.space-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.space-container h2 {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    margin-bottom: 1rem;
}

.space-container p {
    font-family: 'Crimson Text', serif;
    font-size: 1.2rem;
    margin-bottom: 3rem;
    opacity: 0.9;
}

.connection-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    text-align: left;
}

.connection-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.card-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.connection-card h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.connection-card p {
    font-family: 'Crimson Text', serif;
    font-size: 1rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.signup-form {
    display: flex;
}

.signup-form input {
    flex-grow: 1;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px 0 0 10px;
    color: white;
    font-family: 'Crimson Text', serif;
}

.signup-form input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.signup-form button {
    padding: 0.8rem 1.5rem;
    border: none;
    background: #ffd700;
    color: #333;
    border-radius: 0 10px 10px 0;
    font-family: 'Playfair Display', serif;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease;
}

.signup-form button:hover {
    background: #ffca00;
}

.gratitude-wall {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gratitude-note {
    background: rgba(0, 0, 0, 0.2);
    padding: 1rem;
    border-radius: 10px;
}

.gratitude-note p {
    margin: 0 0 0.5rem 0;
    font-style: italic;
}

.note-author {
    font-family: 'Dancing Script', cursive;
    font-size: 1.1rem;
    text-align: right;
    display: block;
    opacity: 0.8;
}

/* Footer */
.gratitude-garden {
    padding: 80px 0 40px;
    background: linear-gradient(135deg, #4c3d5a, #3e314b);
    color: #f0e7f9;
}

.garden-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

.garden-section h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.garden-section p {
    font-family: 'Crimson Text', serif;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

.garden-footer {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-family: 'Dancing Script', cursive;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Gratitude Captures */
.gratitude-captures {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    max-width: 300px;
}

.captures-container {
    background: rgba(255, 255, 255, 0.95);
    padding: 1rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    display: none;
}

.captures-container.show {
    display: block;
}

.captures-container h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #333;
}

.captures-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gratitude-capture {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 0.8rem;
    border-radius: 10px;
    border-left: 3px solid #ffd700;
    font-size: 0.9rem;
    color: #333;
}

/* Responsive Design */
@media (max-width: 768px) {
    .magical-title {
        font-size: 2.5rem;
    }
    
    .book-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .connection-options {
        grid-template-columns: 1fr;
    }
    
    .floating-nav {
        right: 10px;
    }
    
    .nav-orb {
        width: 50px;
        height: 50px;
}

.signup-form {
        flex-direction: column;
    }
    
    .gratitude-captures {
        position: static;
        margin: 20px;
    }
    
    .marketplace-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    
    .path-step {
        flex-direction: column;
        text-align: center;
    }
    
    .path-step:nth-child(even) {
        flex-direction: column;
    }
}

/* Scroll Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease forwards;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #ffd700, #ff69b4);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #ff69b4, #ffd700);
}

/* Floating Gratitude Bubble */
.gratitude-bubble {
    position: fixed;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.9), rgba(255, 105, 180, 0.9));
    color: white;
    padding: 15px 25px;
    border-radius: 50px;
    font-family: 'Dancing Script', cursive;
    font-size: 1.3rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    z-index: 10001;
    pointer-events: none;
    animation: floatUpAndAway 5s ease-out forwards;
}

@keyframes floatUpAndAway {
    0% {
        transform: translateX(-50%) translateY(0) scale(0.5);
        opacity: 0;
    }
    20% {
        transform: translateX(-50%) translateY(-50px) scale(1.1);
        opacity: 1;
    }
    80% {
        transform: translateX(-50%) translateY(-400px) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) translateY(-600px) scale(0.8);
        opacity: 0;
    }
}

/* Coming Soon Section */
.coming-soon {
    padding: 120px 0;
    background: linear-gradient(135deg, #2c3e50, #4ca1af);
    color: #f0f4f8;
    position: relative;
    overflow: hidden;
}

.coming-soon-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 50px;
    position: relative;
    z-index: 2;
}

.coming-soon-content {
    flex: 2;
}

.coming-soon-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

.coming-soon-content h3 {
    font-family: 'Dancing Script', cursive;
    font-size: 1.8rem;
    color: #aedaff;
    margin-bottom: 1.5rem;
}

.coming-soon-content p {
    font-family: 'Crimson Text', serif;
    font-size: 1.1rem;
    line-height: 1.8;
    max-width: 60ch;
    margin-bottom: 2rem;
}

.coming-soon-quote {
    font-family: 'Dancing Script', cursive;
    font-size: 1.5rem;
    padding: 1.5rem;
    border-left: 3px solid #aedaff;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0 15px 15px 0;
}

.coming-soon-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}

.prayer-star {
    width: 80px;
    height: 80px;
    position: relative;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, #aedaff 50%, transparent 70%);
    box-shadow: 0 0 15px #fff, 0 0 30px #aedaff, 0 0 50px #667eea;
    animation: pulse-star 4s ease-in-out infinite alternate;
}

.prayer-star::before, .prayer-star::after {
    content: '';
    position: absolute;
    border-radius: 50%;
}

.prayer-star::before {
    top: 15%;
    left: -20px;
    width: 15px;
    height: 15px;
    background: #fff;
    filter: blur(2px);
    animation: orbit 8s linear infinite;
}

.prayer-star::after {
    bottom: 20%;
    right: -30px;
    width: 10px;
    height: 10px;
    background: #fff;
    filter: blur(3px);
    animation: orbit 12s linear infinite -4s;
}

@keyframes pulse-star {
    from {
        transform: scale(0.95);
        box-shadow: 0 0 15px #fff, 0 0 30px #aedaff, 0 0 50px #667eea;
    }
    to {
        transform: scale(1.05);
        box-shadow: 0 0 25px #fff, 0 0 50px #aedaff, 0 0 75px #667eea;
    }
}

@keyframes orbit {
    from { transform: rotate(0deg) translateX(50px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(50px) rotate(-360deg); }
}

/* Seed Journey Entry */
.seed-journey-entry {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-image: radial-gradient(ellipse at center, #1b2735 0%, #0a0e1c 80%);
    z-index: 100;
    transition: opacity 1s ease-in-out;
}

.star-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle fill="%23fff" cx="50" cy="50" r="0.5" opacity="0.5" /></svg>');
    background-size: 100px 100px;
    opacity: 0.3;
}

.seed-container {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s ease;
}

/* Living Sun - Replaces seed-of-light */
.living-sun {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
}

/* Solar Core */
.solar-core {
    position: absolute;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, 
        #fff 0%, 
        #ffd700 20%, 
        #ff8c00 40%, 
        #ff4500 60%, 
        #ff0000 80%, 
        #8b0000 100%);
    border-radius: 50%;
    box-shadow: 
        0 0 30px #fff,
        0 0 60px #ffd700,
        0 0 90px #ff8c00,
        0 0 120px #ff4500,
        0 0 150px #ff0000;
    animation: core-pulse 3s ease-in-out infinite;
    z-index: 10;
}

@keyframes core-pulse {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 
            0 0 30px #fff,
            0 0 60px #ffd700,
            0 0 90px #ff8c00,
            0 0 120px #ff4500,
            0 0 150px #ff0000;
    }
    50% { 
        transform: scale(1.1); 
        box-shadow: 
            0 0 40px #fff,
            0 0 80px #ffd700,
            0 0 120px #ff8c00,
            0 0 160px #ff4500,
            0 0 200px #ff0000;
    }
}

/* Corona Layers */
.corona {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, 
        rgba(255, 215, 0, 0.8) 0%, 
        rgba(255, 140, 0, 0.6) 30%, 
        rgba(255, 69, 0, 0.4) 60%, 
        rgba(255, 0, 0, 0.2) 80%, 
        transparent 100%);
    animation: corona-rotate 20s linear infinite;
}

.corona-inner {
    width: 120px;
    height: 120px;
    animation: corona-rotate 15s linear infinite reverse;
}

.corona-outer {
    width: 160px;
    height: 160px;
    animation: corona-rotate 25s linear infinite;
}

@keyframes corona-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Solar Flares */
.solar-flare {
    position: absolute;
    width: 4px;
    height: 60px;
    background: linear-gradient(to top, 
        rgba(255, 215, 0, 0.9) 0%, 
        rgba(255, 140, 0, 0.7) 50%, 
        rgba(255, 69, 0, 0.5) 100%);
    border-radius: 2px;
    transform-origin: center bottom;
    animation: flare-dance 4s ease-in-out infinite;
}

.flare-1 { transform: rotate(0deg) translateY(-100px); animation-delay: 0s; }
.flare-2 { transform: rotate(60deg) translateY(-100px); animation-delay: 0.7s; }
.flare-3 { transform: rotate(120deg) translateY(-100px); animation-delay: 1.4s; }
.flare-4 { transform: rotate(180deg) translateY(-100px); animation-delay: 2.1s; }
.flare-5 { transform: rotate(240deg) translateY(-100px); animation-delay: 2.8s; }
.flare-6 { transform: rotate(300deg) translateY(-100px); animation-delay: 3.5s; }

@keyframes flare-dance {
    0%, 100% { 
        height: 60px; 
        opacity: 0.7; 
        filter: blur(1px);
    }
    50% { 
        height: 80px; 
        opacity: 1; 
        filter: blur(0);
    }
}

/* Orbiting Particles */
.orbit-ring {
    position: absolute;
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 50%;
    animation: orbit-rotate 12s linear infinite;
}

.orbit-1 {
    width: 140px;
    height: 140px;
    animation: orbit-rotate 8s linear infinite;
}

.orbit-2 {
    width: 180px;
    height: 180px;
    animation: orbit-rotate 15s linear infinite reverse;
}

@keyframes orbit-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, #fff, #ffd700);
    border-radius: 50%;
    box-shadow: 0 0 10px #ffd700;
    animation: particle-pulse 2s ease-in-out infinite;
}

.particle-1 { top: -3px; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
.particle-2 { top: 50%; right: -3px; transform: translateY(-50%); animation-delay: 0.5s; }
.particle-3 { bottom: -3px; left: 50%; transform: translateX(-50%); animation-delay: 1s; }
.particle-4 { top: 50%; left: -3px; transform: translateY(-50%); animation-delay: 1.5s; }
.particle-5 { top: 15%; right: 15%; animation-delay: 0.3s; }
.particle-6 { bottom: 15%; left: 15%; animation-delay: 0.8s; }
.particle-7 { top: 15%; left: 15%; animation-delay: 1.3s; }

@keyframes particle-pulse {
    0%, 100% { 
        transform: scale(1); 
        opacity: 0.8; 
    }
    50% { 
        transform: scale(1.5); 
        opacity: 1; 
    }
}

/* Energy Waves */
.energy-wave {
    position: absolute;
    border: 2px solid rgba(255, 215, 0, 0.6);
    border-radius: 50%;
    animation: wave-expand 4s ease-out infinite;
}

.wave-1 {
    width: 200px;
    height: 200px;
    animation-delay: 0s;
}

.wave-2 {
    width: 200px;
    height: 200px;
    animation-delay: 1.3s;
}

.wave-3 {
    width: 200px;
    height: 200px;
    animation-delay: 2.6s;
}

@keyframes wave-expand {
    0% {
        transform: scale(0.8);
        opacity: 1;
        border-width: 2px;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
        border-width: 1px;
    }
}

/* Sunspots */
.sunspot {
    position: absolute;
    background: radial-gradient(circle, 
        rgba(139, 0, 0, 0.8) 0%, 
        rgba(139, 0, 0, 0.4) 70%, 
        transparent 100%);
    border-radius: 50%;
    animation: sunspot-drift 8s ease-in-out infinite;
}

.sunspot-1 {
    width: 12px;
    height: 12px;
    top: 20%;
    left: 25%;
    animation-delay: 0s;
}

.sunspot-2 {
    width: 8px;
    height: 8px;
    bottom: 30%;
    right: 20%;
    animation-delay: 2.7s;
}

.sunspot-3 {
    width: 10px;
    height: 10px;
    top: 60%;
    left: 15%;
    animation-delay: 5.3s;
}

@keyframes sunspot-drift {
    0%, 100% { 
        transform: translate(0, 0) scale(1); 
        opacity: 0.6; 
    }
    33% { 
        transform: translate(5px, -3px) scale(1.1); 
        opacity: 0.8; 
    }
    66% { 
        transform: translate(-3px, 4px) scale(0.9); 
        opacity: 0.7; 
    }
}

/* Active state enhancements */
.seed-container.active .living-sun {
    transform: scale(1.3);
}

.seed-container.active .solar-core {
    animation: core-pulse 2s ease-in-out infinite;
    box-shadow: 
        0 0 40px #fff,
        0 0 80px #ffd700,
        0 0 120px #ff8c00,
        0 0 160px #ff4500,
        0 0 200px #ff0000,
        0 0 240px rgba(255, 0, 0, 0.5);
}

.seed-container.active .solar-flare {
    animation: flare-dance 3s ease-in-out infinite;
    height: 80px;
}

.seed-container.active .particle {
    animation: particle-pulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 15px #ffd700, 0 0 25px #fff;
}

.seed-container.active .energy-wave {
    animation: wave-expand 3s ease-out infinite;
    border-color: rgba(255, 215, 0, 0.8);
}

/* Bloom Animation */
.bloom-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.petal {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 150px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffd700);
    border-radius: 50%;
    transform-origin: center bottom;
    opacity: 0;
}

.seed-container.blooming .petal {
    animation: bloom-petal 1.5s ease-out forwards;
}

@keyframes bloom-petal {
    0% {
        transform: translate(-50%, -100%) rotate(var(--r)) scaleY(0);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -100%) rotate(var(--r)) scaleY(1.2);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -100%) rotate(var(--r)) scaleY(0);
        opacity: 0;
    }
}

/* Audio Controls */
.audio-control {
    position: fixed;
    top: 25px;
    right: 30px;
    z-index: 1001;
    cursor: pointer;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.8), rgba(255, 105, 180, 0.8));
    backdrop-filter: blur(10px);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    overflow: hidden;
}

.audio-control::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
}

.audio-control:hover::before {
    left: 100%;
}

.audio-control:hover {
    transform: scale(1.2);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

.audio-control svg {
    width: 24px;
    height: 24px;
    color: white;
    z-index: 1;
}

/* Intention Orbit */
.intention-orbit {
    position: absolute;
    width: 100%;
    height: 100%;
}

.intention-word {
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: 'Dancing Script', cursive;
    font-size: 1.5rem;
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: all 0.5s ease;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

.seed-container.active .intention-word {
    opacity: 1;
}

.intention-word:hover {
    color: #ffd700;
    text-shadow: 0 0 15px #ffd700, 0 0 25px #fff;
    transform: translate(-50%, -50%) scale(1.1);
}

.seed-prompt {
    font-family: 'Dancing Script', cursive;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 3rem;
    letter-spacing: 1px;
    text-align: center;
}

/* Sacred Portal - Gaudí-Inspired Spiritual Experience */
.sacred-portal {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.8s ease;
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.3));
}

/* Sacred Core - The Heart of Light */
.sacred-core {
    position: absolute;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.divine-spark {
    position: absolute;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(255, 215, 0, 0.8) 30%, 
        rgba(255, 182, 193, 0.6) 60%, 
        rgba(138, 43, 226, 0.4) 100%);
    border-radius: 50%;
    box-shadow: 
        0 0 20px rgba(255, 255, 255, 0.8),
        0 0 40px rgba(255, 215, 0, 0.6),
        0 0 60px rgba(255, 182, 193, 0.4);
    animation: divine-pulse 4s ease-in-out infinite;
}

.soul-essence {
    position: absolute;
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 1) 0%, 
        rgba(255, 215, 0, 0.9) 50%, 
        rgba(255, 182, 193, 0.7) 100%);
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.9);
    animation: soul-float 6s ease-in-out infinite;
}

@keyframes divine-pulse {
    0%, 100% { 
        transform: scale(1); 
        opacity: 0.8; 
    }
    50% { 
        transform: scale(1.2); 
        opacity: 1; 
    }
}

@keyframes soul-float {
    0%, 100% { 
        transform: translateY(0px) scale(1); 
    }
    33% { 
        transform: translateY(-5px) scale(1.1); 
    }
    66% { 
        transform: translateY(3px) scale(0.95); 
    }
}

/* Organic Flowing Arches - Gaudí's Sagrada Inspiration */
.flowing-arches {
    position: absolute;
    width: 100%;
    height: 100%;
}

.arch {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 120px;
    background: linear-gradient(to top, 
        rgba(255, 215, 0, 0.8) 0%, 
        rgba(255, 182, 193, 0.6) 50%, 
        rgba(138, 43, 226, 0.4) 100%);
    border-radius: 50px;
    transform-origin: center bottom;
    animation: arch-flow 8s ease-in-out infinite;
}

.arch-1 { transform: rotate(0deg) translateY(-60px); animation-delay: 0s; }
.arch-2 { transform: rotate(60deg) translateY(-60px); animation-delay: 1.3s; }
.arch-3 { transform: rotate(120deg) translateY(-60px); animation-delay: 2.6s; }
.arch-4 { transform: rotate(180deg) translateY(-60px); animation-delay: 3.9s; }
.arch-5 { transform: rotate(240deg) translateY(-60px); animation-delay: 5.2s; }
.arch-6 { transform: rotate(300deg) translateY(-60px); animation-delay: 6.5s; }

@keyframes arch-flow {
    0%, 100% { 
        height: 120px; 
        opacity: 0.6; 
        filter: blur(1px);
    }
    50% { 
        height: 140px; 
        opacity: 1; 
        filter: blur(0);
    }
}

/* Sacred Geometry */
.sacred-geometry {
    position: absolute;
    width: 100%;
    height: 100%;
}

.flower-of-life {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    border: 2px solid rgba(255, 215, 0, 0.4);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: geometry-rotate 20s linear infinite;
}

.flower-of-life::before,
.flower-of-life::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    border: 2px solid rgba(255, 182, 193, 0.4);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.flower-of-life::before {
    transform: translate(-50%, -50%) rotate(60deg);
}

.flower-of-life::after {
    transform: translate(-50%, -50%) rotate(-60deg);
}

.metatron-cube {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    border: 1px solid rgba(138, 43, 226, 0.3);
    transform: translate(-50%, -50%) rotate(45deg);
    animation: geometry-rotate 15s linear infinite reverse;
}

.seed-of-life {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: geometry-rotate 25s linear infinite;
}

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

/* Divine Light Rays */
.divine-rays {
    position: absolute;
    width: 100%;
    height: 100%;
}

.ray {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 100px;
    background: linear-gradient(to top, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(255, 215, 0, 0.7) 50%, 
        transparent 100%);
    border-radius: 2px;
    transform-origin: center bottom;
    animation: ray-glow 5s ease-in-out infinite;
}

.ray-1 { transform: rotate(0deg) translateY(-50px); animation-delay: 0s; }
.ray-2 { transform: rotate(45deg) translateY(-50px); animation-delay: 0.6s; }
.ray-3 { transform: rotate(90deg) translateY(-50px); animation-delay: 1.2s; }
.ray-4 { transform: rotate(135deg) translateY(-50px); animation-delay: 1.8s; }
.ray-5 { transform: rotate(180deg) translateY(-50px); animation-delay: 2.4s; }
.ray-6 { transform: rotate(225deg) translateY(-50px); animation-delay: 3.0s; }
.ray-7 { transform: rotate(270deg) translateY(-50px); animation-delay: 3.6s; }
.ray-8 { transform: rotate(315deg) translateY(-50px); animation-delay: 4.2s; }

@keyframes ray-glow {
    0%, 100% { 
        opacity: 0.4; 
        filter: blur(1px);
    }
    50% { 
        opacity: 1; 
        filter: blur(0);
    }
}

/* Floating Prayer Beads */
.prayer-beads {
    position: absolute;
    width: 100%;
    height: 100%;
}

.bead {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(255, 215, 0, 0.7) 100%);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
    animation: bead-float 6s ease-in-out infinite;
}

.bead-1 { top: 10%; left: 50%; animation-delay: 0s; }
.bead-2 { top: 20%; right: 20%; animation-delay: 0.8s; }
.bead-3 { top: 50%; right: 10%; animation-delay: 1.6s; }
.bead-4 { bottom: 20%; right: 20%; animation-delay: 2.4s; }
.bead-5 { bottom: 10%; left: 50%; animation-delay: 3.2s; }
.bead-6 { bottom: 20%; left: 20%; animation-delay: 4.0s; }
.bead-7 { top: 50%; left: 10%; animation-delay: 4.8s; }
.bead-8 { top: 20%; left: 20%; animation-delay: 5.6s; }

@keyframes bead-float {
    0%, 100% { 
        transform: translateY(0px) scale(1); 
        opacity: 0.7; 
    }
    50% { 
        transform: translateY(-10px) scale(1.2); 
        opacity: 1; 
    }
}

/* Sacred Symbols */
.sacred-symbols {
    position: absolute;
    width: 100%;
    height: 100%;
}

.symbol {
    position: absolute;
    font-size: 24px;
    color: rgba(255, 215, 0, 0.8);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
    animation: symbol-glow 4s ease-in-out infinite;
}

.symbol-om { top: 15%; left: 15%; animation-delay: 0s; }
.symbol-ankh { top: 15%; right: 15%; animation-delay: 1s; }
.symbol-yin-yang { bottom: 15%; left: 15%; animation-delay: 2s; }
.symbol-star { bottom: 15%; right: 15%; animation-delay: 3s; }

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

/* Ethereal Mist */
.ethereal-mist {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.mist-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: mist-drift 12s ease-in-out infinite;
}

.mist-1 {
    width: 200px;
    height: 200px;
    animation-delay: 0s;
}

.mist-2 {
    width: 180px;
    height: 180px;
    animation-delay: 4s;
}

.mist-3 {
    width: 160px;
    height: 160px;
    animation-delay: 8s;
}

@keyframes mist-drift {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1) rotate(0deg); 
        opacity: 0.3; 
    }
    33% { 
        transform: translate(-50%, -50%) scale(1.1) rotate(120deg); 
        opacity: 0.5; 
    }
    66% { 
        transform: translate(-50%, -50%) scale(0.9) rotate(240deg); 
        opacity: 0.4; 
    }
}

/* Active state enhancements */
.seed-container.active .sacred-portal {
    transform: scale(1.2);
    filter: drop-shadow(0 0 50px rgba(255, 215, 0, 0.5));
}

.seed-container.active .divine-spark {
    animation: divine-pulse 3s ease-in-out infinite;
    box-shadow: 
        0 0 30px rgba(255, 255, 255, 0.9),
        0 0 60px rgba(255, 215, 0, 0.7),
        0 0 90px rgba(255, 182, 193, 0.5);
}

.seed-container.active .arch {
    animation: arch-flow 6s ease-in-out infinite;
    height: 150px;
}

.seed-container.active .bead {
    animation: bead-float 4s ease-in-out infinite;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 0 25px rgba(255, 255, 255, 0.6);
}