/* Casa Ascendente - Divine Ascension Experience */
/* Golden Heaven • Light Rays • Transcendence */

/* ═══════════════════════════════════════════════════════════════
   GOLDEN HEAVEN BACKGROUND
   ═══════════════════════════════════════════════════════════════ */

.hero {
    background: 
        radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(26, 31, 60, 0.3) 0%, transparent 50%),
        linear-gradient(180deg, 
            rgba(30, 25, 15, 1) 0%, 
            rgba(15, 12, 8, 1) 30%,
            rgba(10, 10, 12, 1) 70%,
            rgba(5, 5, 8, 1) 100%
        );
}

/* Divine Light from Above */
.divine-light {
    position: fixed;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 200%;
    height: 100%;
    background: conic-gradient(
        from 180deg at 50% 0%,
        transparent 0deg,
        rgba(212, 175, 55, 0.03) 30deg,
        rgba(255, 215, 100, 0.08) 60deg,
        rgba(212, 175, 55, 0.03) 90deg,
        transparent 120deg,
        rgba(212, 175, 55, 0.03) 150deg,
        rgba(255, 215, 100, 0.08) 180deg,
        rgba(212, 175, 55, 0.03) 210deg,
        transparent 240deg,
        rgba(212, 175, 55, 0.03) 270deg,
        rgba(255, 215, 100, 0.08) 300deg,
        rgba(212, 175, 55, 0.03) 330deg,
        transparent 360deg
    );
    pointer-events: none;
    z-index: 0;
    animation: divineRotate 120s linear infinite;
}

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

/* Heavenly Rays */
.heaven-rays {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.heaven-ray {
    position: absolute;
    top: -10%;
    width: 3px;
    height: 120%;
    background: linear-gradient(
        to bottom,
        rgba(255, 223, 128, 0.4) 0%,
        rgba(212, 175, 55, 0.2) 20%,
        rgba(212, 175, 55, 0.05) 50%,
        transparent 100%
    );
    animation: rayDescend 8s ease-in-out infinite;
    opacity: 0;
}

.heaven-ray:nth-child(1) { left: 10%; animation-delay: 0s; }
.heaven-ray:nth-child(2) { left: 25%; animation-delay: 1.5s; width: 2px; }
.heaven-ray:nth-child(3) { left: 40%; animation-delay: 3s; }
.heaven-ray:nth-child(4) { left: 55%; animation-delay: 0.8s; width: 4px; }
.heaven-ray:nth-child(5) { left: 70%; animation-delay: 2.2s; width: 2px; }
.heaven-ray:nth-child(6) { left: 85%; animation-delay: 4s; }
.heaven-ray:nth-child(7) { left: 95%; animation-delay: 1s; width: 2px; }

@keyframes rayDescend {
    0%, 100% { 
        opacity: 0; 
        transform: translateY(-20%) scaleY(0.8);
    }
    10% { 
        opacity: 1; 
    }
    50% { 
        opacity: 0.6;
        transform: translateY(0%) scaleY(1);
    }
    90% {
        opacity: 0;
    }
}

/* Golden Mist */
.golden-mist {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(
        to top,
        rgba(212, 175, 55, 0.05) 0%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 1;
    animation: mistPulse 10s ease-in-out infinite;
}

@keyframes mistPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

/* ═══════════════════════════════════════════════════════════════
   CENTERED HERO HOLOGRAM - FIXED
   ═══════════════════════════════════════════════════════════════ */

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding: 0 1rem;
}

.holo-emblem-container {
    position: relative;
    width: 320px;
    height: 380px;
    margin: 0 auto 2rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1500px;
    transform-style: preserve-3d;
}

/* Emblem Centering Fix */
.holo-emblem {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 220px;
    height: auto;
    z-index: 10;
    filter: 
        drop-shadow(0 0 20px rgba(212, 175, 55, 0.6))
        drop-shadow(0 0 40px rgba(212, 175, 55, 0.4))
        drop-shadow(0 0 60px rgba(212, 175, 55, 0.2));
    animation: emblemAscend 6s ease-in-out infinite;
}

@keyframes emblemAscend {
    0%, 100% { 
        transform: translate(-50%, -50%) translateY(0) scale(1);
        filter: 
            drop-shadow(0 0 20px rgba(212, 175, 55, 0.6))
            drop-shadow(0 0 40px rgba(212, 175, 55, 0.4))
            drop-shadow(0 0 60px rgba(212, 175, 55, 0.2));
    }
    50% { 
        transform: translate(-50%, -50%) translateY(-20px) scale(1.02);
        filter: 
            drop-shadow(0 0 30px rgba(212, 175, 55, 0.8))
            drop-shadow(0 0 60px rgba(212, 175, 55, 0.5))
            drop-shadow(0 0 90px rgba(212, 175, 55, 0.3));
    }
}

/* Divine Aura Behind Emblem */
.divine-aura {
    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.2) 0%,
        rgba(212, 175, 55, 0.1) 30%,
        rgba(212, 175, 55, 0.05) 50%,
        transparent 70%
    );
    animation: auraPulse 4s ease-in-out infinite;
    z-index: 1;
}

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

/* Secondary Aura Ring */
.divine-aura-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    height: 350px;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.2);
    animation: auraRingExpand 6s ease-in-out infinite;
    z-index: 0;
}

@keyframes auraRingExpand {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0;
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.5;
    }
}

/* ═══════════════════════════════════════════════════════════════
   OFFICIAL LOGO STYLING
   ═══════════════════════════════════════════════════════════════ */

/* Nav Logo Official */
.nav-logo img {
    height: 32px;
    filter: 
        drop-shadow(0 0 8px rgba(212, 175, 55, 0.3))
        brightness(1.1);
    transition: all 0.4s ease;
}

.nav-logo:hover img {
    filter: 
        drop-shadow(0 0 15px rgba(212, 175, 55, 0.6))
        drop-shadow(0 0 30px rgba(212, 175, 55, 0.3))
        brightness(1.2);
    transform: scale(1.05);
}

/* Section Crest Official */
.emblem-main {
    max-width: 280px;
    filter: 
        drop-shadow(0 0 15px rgba(212, 175, 55, 0.5))
        drop-shadow(0 0 30px rgba(212, 175, 55, 0.3));
    transition: all 0.5s ease;
}

.section-crest:hover .emblem-main {
    filter: 
        drop-shadow(0 0 25px rgba(212, 175, 55, 0.7))
        drop-shadow(0 0 50px rgba(212, 175, 55, 0.4))
        drop-shadow(0 0 80px rgba(212, 175, 55, 0.2));
    transform: scale(1.05);
}

/* Footer Emblem Official */
.footer-emblem {
    width: 60px;
    filter: 
        drop-shadow(0 0 10px rgba(212, 175, 55, 0.4))
        brightness(1.1);
    transition: all 0.5s ease;
}

.footer-emblem-holo:hover .footer-emblem {
    filter: 
        drop-shadow(0 0 20px rgba(212, 175, 55, 0.6))
        drop-shadow(0 0 40px rgba(212, 175, 55, 0.3))
        brightness(1.2);
    transform: scale(1.1) rotateY(10deg);
}

/* ═══════════════════════════════════════════════════════════════
   AR SECTION ELEVATED
   ═══════════════════════════════════════════════════════════════ */

.ar-section {
    background: 
        radial-gradient(ellipse at 50% 30%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, var(--black) 0%, var(--navy) 50%, var(--black) 100%);
}

.ar-seraph-preview img {
    filter: 
        drop-shadow(0 0 20px rgba(212, 175, 55, 0.6))
        drop-shadow(0 0 40px rgba(212, 175, 55, 0.3));
    animation: arSeraphFloat 3s ease-in-out infinite;
}

@keyframes arSeraphFloat {
    0%, 100% { 
        transform: translateY(0) scale(1);
        filter: 
            drop-shadow(0 0 20px rgba(212, 175, 55, 0.6))
            drop-shadow(0 0 40px rgba(212, 175, 55, 0.3));
    }
    50% { 
        transform: translateY(-15px) scale(1.05);
        filter: 
            drop-shadow(0 0 30px rgba(212, 175, 55, 0.8))
            drop-shadow(0 0 60px rgba(212, 175, 55, 0.4));
    }
}

/* AR Phone Glow */
.ar-phone-mockup {
    box-shadow: 
        0 50px 100px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(212, 175, 55, 0.15),
        inset 0 0 0 2px rgba(212, 175, 55, 0.1);
}

/* ═══════════════════════════════════════════════════════════════
   GOLDEN HEAVEN TEXT
   ═══════════════════════════════════════════════════════════════ */

.family-name {
    font-size: clamp(1.8rem, 6vw, 3.5rem);
    background: linear-gradient(
        180deg,
        #FFE4A0 0%,
        #D4AF37 30%,
        #B8962E 60%,
        #D4AF37 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.5));
    animation: textGlow 4s ease-in-out infinite;
}

@keyframes textGlow {
    0%, 100% { filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.4)); }
    50% { filter: drop-shadow(0 0 40px rgba(212, 175, 55, 0.7)); }
}

.motto {
    color: #FFE4A0;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

.motto-translation {
    color: rgba(255, 228, 160, 0.7);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE FIXES - MOBILE CENTERING
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .holo-emblem-container {
        width: 280px;
        height: 340px;
        margin: 0 auto 1.5rem auto;
    }
    
    .holo-emblem {
        width: 180px;
    }
    
    .divine-aura {
        width: 240px;
        height: 240px;
    }
    
    .divine-aura-ring {
        width: 280px;
        height: 280px;
    }
    
    .holo-orbit.orbit-1 {
        width: 220px;
        height: 220px;
        margin: -110px 0 0 -110px;
    }
    
    .holo-orbit.orbit-2,
    .holo-orbit.orbit-3 {
        display: none;
    }
    
    .family-name {
        font-size: clamp(1.5rem, 8vw, 2.5rem);
        letter-spacing: 0.15em;
    }
    
    .hero-content {
        padding: 0 1rem;
    }
    
    .heaven-ray:nth-child(2),
    .heaven-ray:nth-child(5),
    .heaven-ray:nth-child(7) {
        display: none;
    }
}

@media (max-width: 480px) {
    .holo-emblem-container {
        width: 240px;
        height: 300px;
    }
    
    .holo-emblem {
        width: 150px;
    }
    
    .divine-aura {
        width: 200px;
        height: 200px;
    }
    
    .divine-aura-ring {
        width: 240px;
        height: 240px;
    }
    
    .holo-orbit.orbit-1 {
        width: 180px;
        height: 180px;
        margin: -90px 0 0 -90px;
    }
    
    .family-name {
        letter-spacing: 0.1em;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ASCENDING SCROLL EFFECT
   ═══════════════════════════════════════════════════════════════ */

.ascending-indicator {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 100;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.ascending-indicator:hover {
    opacity: 1;
}

.ascending-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.3);
    transition: all 0.3s ease;
}

.ascending-dot.active {
    background: var(--gold);
    box-shadow: 0 0 10px var(--gold);
    transform: scale(1.3);
}

@media (max-width: 768px) {
    .ascending-indicator {
        display: none;
    }
}