/* Casa Ascendente - Dimensional Portal Experience */
/* Another World • Living Seraph • VR Immersion */

/* ═══════════════════════════════════════════════════════════════
   DIMENSIONAL PORTAL - ANOTHER WORLD INSIDE
   ═══════════════════════════════════════════════════════════════ */

/* Portal Vortex Behind Crest */
.portal-vortex {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: 
        conic-gradient(
            from 0deg,
            transparent 0deg,
            rgba(212, 175, 55, 0.1) 30deg,
            transparent 60deg,
            rgba(212, 175, 55, 0.08) 90deg,
            transparent 120deg,
            rgba(212, 175, 55, 0.1) 150deg,
            transparent 180deg,
            rgba(212, 175, 55, 0.08) 210deg,
            transparent 240deg,
            rgba(212, 175, 55, 0.1) 270deg,
            transparent 300deg,
            rgba(212, 175, 55, 0.08) 330deg,
            transparent 360deg
        );
    animation: vortexSpin 30s linear infinite;
    pointer-events: none;
    z-index: 1;
}

.portal-vortex::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 10%;
    right: 10%;
    bottom: 10%;
    border-radius: 50%;
    background: 
        conic-gradient(
            from 180deg,
            transparent 0deg,
            rgba(255, 223, 128, 0.15) 45deg,
            transparent 90deg,
            rgba(255, 223, 128, 0.1) 135deg,
            transparent 180deg,
            rgba(255, 223, 128, 0.15) 225deg,
            transparent 270deg,
            rgba(255, 223, 128, 0.1) 315deg,
            transparent 360deg
        );
    animation: vortexSpin 20s linear infinite reverse;
}

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

/* Inner Dimension Glow */
.dimension-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 223, 128, 0.3) 0%,
        rgba(212, 175, 55, 0.2) 20%,
        rgba(212, 175, 55, 0.1) 40%,
        transparent 70%
    );
    animation: dimensionPulse 4s ease-in-out infinite;
    z-index: 2;
}

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

/* ═══════════════════════════════════════════════════════════════
   ORBITING SERAPH SPIRITS
   ═══════════════════════════════════════════════════════════════ */

.orbit-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    height: 350px;
    pointer-events: none;
    z-index: 3;
}

/* Small Orbiting Light Spirits */
.spirit-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    animation: spiritOrbit 12s linear infinite;
}

.spirit-orbit:nth-child(2) { animation-duration: 18s; animation-direction: reverse; }
.spirit-orbit:nth-child(3) { animation-duration: 25s; }

.spirit {
    position: absolute;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(212, 175, 55, 0.6), transparent);
    border-radius: 50%;
    box-shadow: 
        0 0 10px rgba(255, 223, 128, 0.8),
        0 0 20px rgba(212, 175, 55, 0.6),
        0 0 40px rgba(212, 175, 55, 0.4);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.spirit::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
}

/* Spirit Trail */
.spirit::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    width: 40px;
    height: 2px;
    background: linear-gradient(to left, rgba(212, 175, 55, 0.6), transparent);
    transform: translateY(-50%);
}

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

/* ═══════════════════════════════════════════════════════════════
   FLYING WING PARTICLES
   ═══════════════════════════════════════════════════════════════ */

.wing-particle {
    position: absolute;
    font-size: 20px;
    color: rgba(212, 175, 55, 0.6);
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.8);
    animation: wingFloat 8s ease-in-out infinite;
    pointer-events: none;
}

.wing-particle:nth-child(1) { top: 10%; left: 15%; animation-delay: 0s; }
.wing-particle:nth-child(2) { top: 20%; right: 10%; animation-delay: 2s; font-size: 16px; }
.wing-particle:nth-child(3) { bottom: 25%; left: 5%; animation-delay: 4s; font-size: 14px; }
.wing-particle:nth-child(4) { bottom: 15%; right: 20%; animation-delay: 6s; }

@keyframes wingFloat {
    0%, 100% { 
        transform: translateY(0) rotate(0deg);
        opacity: 0.3;
    }
    25% {
        transform: translateY(-20px) rotate(10deg);
        opacity: 0.7;
    }
    50% { 
        transform: translateY(-30px) rotate(0deg);
        opacity: 0.5;
    }
    75% {
        transform: translateY(-15px) rotate(-10deg);
        opacity: 0.8;
    }
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT RAYS FROM WITHIN
   ═══════════════════════════════════════════════════════════════ */

.inner-light-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    pointer-events: none;
    z-index: 0;
}

.inner-ray {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 250px;
    background: linear-gradient(
        to top,
        rgba(255, 223, 128, 0.4) 0%,
        rgba(212, 175, 55, 0.2) 30%,
        transparent 100%
    );
    transform-origin: bottom center;
    animation: innerRayPulse 5s ease-in-out infinite;
}

.inner-ray:nth-child(1) { transform: rotate(0deg); animation-delay: 0s; }
.inner-ray:nth-child(2) { transform: rotate(30deg); animation-delay: 0.4s; }
.inner-ray:nth-child(3) { transform: rotate(60deg); animation-delay: 0.8s; }
.inner-ray:nth-child(4) { transform: rotate(90deg); animation-delay: 1.2s; }
.inner-ray:nth-child(5) { transform: rotate(120deg); animation-delay: 1.6s; }
.inner-ray:nth-child(6) { transform: rotate(150deg); animation-delay: 2s; }
.inner-ray:nth-child(7) { transform: rotate(180deg); animation-delay: 2.4s; }
.inner-ray:nth-child(8) { transform: rotate(210deg); animation-delay: 2.8s; }
.inner-ray:nth-child(9) { transform: rotate(240deg); animation-delay: 3.2s; }
.inner-ray:nth-child(10) { transform: rotate(270deg); animation-delay: 3.6s; }
.inner-ray:nth-child(11) { transform: rotate(300deg); animation-delay: 4s; }
.inner-ray:nth-child(12) { transform: rotate(330deg); animation-delay: 4.4s; }

@keyframes innerRayPulse {
    0%, 100% { opacity: 0.2; height: 200px; }
    50% { opacity: 0.6; height: 280px; }
}

/* ═══════════════════════════════════════════════════════════════
   DEPTH DIMENSION LAYERS
   ═══════════════════════════════════════════════════════════════ */

.depth-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.1);
    animation: depthExpand 6s ease-in-out infinite;
}

.depth-layer:nth-child(1) { width: 200px; height: 200px; animation-delay: 0s; }
.depth-layer:nth-child(2) { width: 250px; height: 250px; animation-delay: 1s; }
.depth-layer:nth-child(3) { width: 300px; height: 300px; animation-delay: 2s; }
.depth-layer:nth-child(4) { width: 350px; height: 350px; animation-delay: 3s; }
.depth-layer:nth-child(5) { width: 400px; height: 400px; animation-delay: 4s; }

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

/* ═══════════════════════════════════════════════════════════════
   LIVING SERAPH - THE CREST BREATHES
   ═══════════════════════════════════════════════════════════════ */

.living-seraph {
    animation: seraphBreathe 4s ease-in-out infinite;
    filter: 
        drop-shadow(0 0 15px rgba(212, 175, 55, 0.8))
        drop-shadow(0 0 30px rgba(212, 175, 55, 0.6))
        drop-shadow(0 0 50px rgba(212, 175, 55, 0.4))
        drop-shadow(0 0 80px rgba(212, 175, 55, 0.2));
}

@keyframes seraphBreathe {
    0%, 100% { 
        transform: scale(1) translateY(0);
        filter: 
            drop-shadow(0 0 15px rgba(212, 175, 55, 0.8))
            drop-shadow(0 0 30px rgba(212, 175, 55, 0.6))
            drop-shadow(0 0 50px rgba(212, 175, 55, 0.4));
    }
    50% { 
        transform: scale(1.03) translateY(-10px);
        filter: 
            drop-shadow(0 0 25px rgba(255, 223, 128, 1))
            drop-shadow(0 0 50px rgba(212, 175, 55, 0.8))
            drop-shadow(0 0 80px rgba(212, 175, 55, 0.5))
            drop-shadow(0 0 120px rgba(212, 175, 55, 0.3));
    }
}

/* ═══════════════════════════════════════════════════════════════
   VR IMMERSION - FULL SCREEN ATMOSPHERE
   ═══════════════════════════════════════════════════════════════ */

.vr-atmosphere {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background: 
        radial-gradient(ellipse at 50% 30%, rgba(255, 215, 100, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 70%, rgba(212, 175, 55, 0.05) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 60%, rgba(212, 175, 55, 0.05) 0%, transparent 40%);
    animation: atmosphereShift 30s ease-in-out infinite;
}

@keyframes atmosphereShift {
    0%, 100% { 
        background-position: 0% 0%, 0% 0%, 100% 0%;
    }
    33% {
        background-position: 100% 50%, 50% 100%, 0% 50%;
    }
    66% {
        background-position: 50% 100%, 100% 0%, 50% 100%;
    }
}

/* Stars in the Dimension */
.dimension-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.dimension-star {
    position: absolute;
    width: 3px;
    height: 3px;
    background: white;
    border-radius: 50%;
    animation: starTwinkle 3s ease-in-out infinite;
}

.dimension-star:nth-child(1) { top: 15%; left: 20%; animation-delay: 0s; }
.dimension-star:nth-child(2) { top: 25%; left: 80%; animation-delay: 0.5s; }
.dimension-star:nth-child(3) { top: 45%; left: 10%; animation-delay: 1s; }
.dimension-star:nth-child(4) { top: 60%; left: 90%; animation-delay: 1.5s; }
.dimension-star:nth-child(5) { top: 75%; left: 30%; animation-delay: 2s; }
.dimension-star:nth-child(6) { top: 85%; left: 70%; animation-delay: 2.5s; }

@keyframes starTwinkle {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.5); }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .portal-vortex {
        width: 300px;
        height: 300px;
    }
    
    .dimension-glow {
        width: 220px;
        height: 220px;
    }
    
    .orbit-container {
        width: 280px;
        height: 280px;
    }
    
    .inner-light-rays {
        width: 350px;
        height: 350px;
    }
    
    .inner-ray {
        height: 175px;
    }
    
    @keyframes innerRayPulse {
        0%, 100% { opacity: 0.2; height: 150px; }
        50% { opacity: 0.6; height: 200px; }
    }
}

@media (max-width: 480px) {
    .portal-vortex {
        width: 250px;
        height: 250px;
    }
    
    .orbit-container {
        width: 220px;
        height: 220px;
    }
    
    .spirit {
        width: 8px;
        height: 8px;
    }
    
    .wing-particle {
        display: none;
    }
}