/* Enter the Realm 포탈 섹션 - 현실과 마법 세계의 경계 */

/* XR Demo 컨테이너 - 포탈 배경 */
.xr-demo-container {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(to bottom, #42346c 0%, #3a2d62 30%, #302654 60%, #251d46 100%);
}

/* 루시아 세계 배경 - 푸른 톤 강조 */
.lucia-realm-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: radial-gradient(ellipse at center, rgba(25, 30, 60, 0.2) 0%, rgba(30, 40, 80, 0.3) 40%, rgba(40, 50, 100, 0.1) 80%);
}

/* 수채화적 배경 효과 */
.watercolor-sky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/watercolor-blue.png');
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    mix-blend-mode: soft-light;
}

/* 오로라 빛 효과 */
.aurora-glow {
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    background: radial-gradient(ellipse at center, rgba(0, 20, 100, 0.1) 0%, rgba(60, 80, 200, 0.05) 30%, rgba(0, 10, 50, 0.02) 60%, transparent 80%);
    filter: blur(40px);
    opacity: 0.6;
    animation: aurora-flow 15s ease-in-out infinite alternate;
}

/* 별 입자 효과 - 우주 필드 */
.stars-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.9) 0.3px, transparent 1px),
        radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.8) 0.2px, transparent 1px),
        radial-gradient(circle at 40% 70%, rgba(255, 255, 255, 0.9) 0.3px, transparent 1px),
        radial-gradient(circle at 60% 80%, rgba(255, 255, 255, 0.7) 0.2px, transparent 1px);
    background-size: 250px 250px, 200px 200px, 300px 300px, 180px 180px;
    animation: stars-flow 30s linear infinite;
    opacity: 0.8;
}

/* 흐르는 룬 효과 */
.floating-runes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/floating-runes.png');
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    animation: runes-flow 50s linear infinite;
}

/* 우주적 빛 효과 */
.cosmic-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 40% 40%, rgba(100, 150, 255, 0.1) 0%, transparent 25%),
        radial-gradient(circle at 70% 30%, rgba(80, 100, 200, 0.08) 0%, transparent 25%),
        radial-gradient(circle at 30% 70%, rgba(120, 170, 255, 0.1) 0%, transparent 25%),
        radial-gradient(circle at 60% 60%, rgba(90, 120, 220, 0.08) 0%, transparent 25%);
    filter: blur(15px);
    opacity: 0.7;
    animation: cosmic-pulse 10s ease-in-out infinite alternate;
}

/* 마법 입자 효과 */
.magic-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 80% 20%, rgba(200, 220, 255, 0.8) 0.4px, transparent 1px),
        radial-gradient(circle at 20% 30%, rgba(180, 200, 255, 0.7) 0.3px, transparent 1px),
        radial-gradient(circle at 70% 70%, rgba(220, 240, 255, 0.8) 0.4px, transparent 1px),
        radial-gradient(circle at 30% 60%, rgba(160, 180, 255, 0.7) 0.3px, transparent 1px);
    background-size: 170px 170px, 150px 150px, 200px 200px, 130px 130px;
    animation: magic-particles-flow 25s linear infinite;
    opacity: 0.6;
}

/* 빛 광선 효과 - 중심으로 흘러들어가는 */
.light-beams {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        conic-gradient(
            transparent 0deg, 
            transparent 30deg, 
            rgba(120, 160, 255, 0.03) 40deg,
            transparent 50deg,
            transparent 80deg,
            rgba(100, 140, 235, 0.03) 90deg,
            transparent 100deg,
            transparent 130deg,
            rgba(80, 120, 215, 0.03) 140deg,
            transparent 150deg,
            transparent 180deg,
            rgba(140, 180, 255, 0.03) 190deg,
            transparent 200deg,
            transparent 230deg,
            rgba(120, 160, 235, 0.03) 240deg,
            transparent 250deg,
            transparent 280deg,
            rgba(100, 140, 215, 0.03) 290deg,
            transparent 300deg,
            transparent 330deg,
            rgba(140, 180, 255, 0.03) 340deg,
            transparent 350deg
        );
    opacity: 0.7;
    animation: beams-rotate 60s linear infinite;
}

/* XR 콘텐츠 - 중앙 정렬 */
.xr-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px;
    z-index: 2;
}

/* 타이틀 컨테이너 */
.realm-title-container {
    position: relative;
    margin-bottom: 30px;
    text-align: center;
}

/* 타이틀 - ENTER THE REALM */
.realm-title {
    font-family: 'Cinzel', serif;
    font-size: 3.5rem;
    font-weight: 400;
    letter-spacing: 6px;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 15px;
    text-shadow: 
        0 0 15px rgba(255, 255, 255, 0.4),
        0 0 30px rgba(150, 180, 255, 0.3);
    animation: title-glow 6s ease-in-out infinite alternate;
}

/* 타이틀 장식 요소 */
.title-decoration {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    gap: 20px;
    margin-top: 10px;
    width: 300px;
}

/* 좌우 장식선 */
.left-decoration, .right-decoration {
    height: 1px;
    flex: 1;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.7));
    opacity: 0.8;
}

.right-decoration {
    background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.7));
}

/* 서브타이틀 */
.realm-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: -0.01em; /* 글자 간격 줄임 */
    color: rgba(255, 255, 255, 0.8); /* 투명도 적용 */
    margin-bottom: 60px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    animation: subtitle-fade 5s ease-in-out infinite alternate;
}

/* 고래 요소 - 오른쪽 상단 */
.floating-whale {
    position: absolute;
    top: 20%;
    right: 10%;
    width: 220px;
    height: 110px;
    opacity: 0.8;
    z-index: 3;
    transform: rotate(-5deg);
    animation: whale-float 15s ease-in-out infinite alternate;
}

/* 포탈 컨테이너 - 중앙 메인 요소 */
.portal-container {
    position: relative;
    width: 350px;
    height: 350px;
    margin: 0 auto;
    margin-top: 30px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* 포탈 마우스 호버 효과 */
.portal-container:hover {
    transform: scale(1.03);
}

/* 포탈 마우스 액티브 효과 */
.portal-container:active {
    animation: portal-click 0.5s ease-out;
}

/* 포탈 외부 링 - 가장 바깥쪽 원 */
.portal-outer-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}

/* 포탈 외부 브러시 스트로크 효과 */
.brush-stroke {
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    background-image: url('../images/brush-circle.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.7;
    animation: rotate-very-slow 60s linear infinite;
}

/* 포탈 외부 룬 마크 */
.rune-marks {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/rune-circle.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.8;
    animation: rotate-slow 80s linear infinite;
}

/* 포탈 회전 심볼 */
.rotating-symbols {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    animation: rotate-very-slow 100s linear infinite;
}

/* 포탈 회전 심볼 - 내부 원 */
.rotating-symbols::before {
    content: '';
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: rotate-reverse 70s linear infinite;
}

/* 포탈 회전 심볼 - 외부 원 */
.rotating-symbols::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: rotate-slow 120s linear infinite;
}

/* 포탈 중간 링 */
.portal-middle-ring {
    position: absolute;
    top: 15%;
    left: 15%;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    overflow: hidden;
}

/* 포탈 중간 링 - 에너지 흐름 */
.energy-flow {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(170, 200, 255, 0.3) 0%, rgba(130, 170, 250, 0.15) 40%, rgba(100, 140, 240, 0.05) 70%, transparent 90%);
    mix-blend-mode: screen;
    opacity: 0.8;
    animation: energy-pulse 5s ease-in-out infinite alternate;
}

/* 포탈 중간 링 - 수채화 번짐 효과 */
.watercolor-bleed {
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    background-image: url('../images/watercolor-portal.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.4;
    mix-blend-mode: overlay;
    animation: rotate-slow 40s linear infinite;
}

/* 포탈 중간 링 - 마법적 입자 */
.magical-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 30% 30%, rgba(200, 220, 255, 0.9) 0.5px, transparent 1px),
        radial-gradient(circle at 70% 70%, rgba(180, 210, 255, 0.8) 0.4px, transparent 1px),
        radial-gradient(circle at 40% 60%, rgba(160, 200, 255, 0.7) 0.3px, transparent 1px),
        radial-gradient(circle at 60% 40%, rgba(140, 190, 255, 0.8) 0.4px, transparent 1px);
    background-size: 35px 35px, 25px 25px, 30px 30px, 20px 20px;
    opacity: 0.6;
    animation: particles-rotate 15s linear infinite;
}

/* 포탈 내부 링 */
.portal-inner-ring {
    position: absolute;
    top: 30%;
    left: 30%;
    width: 40%;
    height: 40%;
    border-radius: 50%;
    overflow: hidden;
}

/* 포탈 내부 빛 효과 */
.inner-glow {
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(200, 220, 255, 0.3) 50%, rgba(150, 180, 255, 0.1) 80%, transparent 100%);
    mix-blend-mode: screen;
    opacity: 0.9;
    animation: inner-pulse 4s ease-in-out infinite alternate;
}

/* 포탈 내부 별먼지 */
.star-dust {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background-image: 
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95) 0.3px, transparent 1px),
        radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.9) 0.2px, transparent 1px),
        radial-gradient(circle at 40% 60%, rgba(255, 255, 255, 0.85) 0.25px, transparent 1px),
        radial-gradient(circle at 60% 40%, rgba(255, 255, 255, 0.9) 0.3px, transparent 1px);
    background-size: 20px 20px, 15px 15px, 25px 25px, 18px 18px;
    opacity: 0.8;
    animation: stardust-rotate 10s linear infinite;
}

/* 포탈 내부 별자리 패턴 */
.constellation-pattern {
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    background-image: url('../images/constellation.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.6;
    animation: rotate-slow 30s linear infinite;
}

/* 포탈 심볼 및 룬 요소 */
.portal-symbols {
    position: absolute;
    top: 18%;
    left: 18%;
    width: 64%;
    height: 64%;
    border-radius: 50%;
    pointer-events: none;
}

/* 포탈 심볼 - 룬 서클 */
.rune-circle {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    background-image: url('../images/rune-circle-small.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.7;
    animation: rotate-very-slow 60s linear infinite;
}

/* 포탈 심볼 - 기하학 패턴 */
.geometric-patterns {
    position: absolute;
    top: 15%;
    left: 15%;
    width: 70%;
    height: 70%;
    background-image: url('../images/geometric-patterns.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.6;
    animation: rotate-reverse 40s linear infinite;
}

/* 포탈 링크 */
.portal-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    border-radius: 50%;
}

/* 포탈 중앙 */
.portal-center {
    position: absolute;
    top: 40%;
    left: 40%;
    width: 20%;
    height: 20%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(200, 220, 255, 0.6) 50%, rgba(150, 180, 255, 0.3) 80%, transparent 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    overflow: hidden;
    animation: center-pulse 4s ease-in-out infinite alternate;
}

/* 포탈 중앙 - 달 심볼 */
.moon-symbol {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('../images/moon-symbol.png');
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.95;
    animation: moon-float 5s ease-in-out infinite alternate;
}

/* 포탈 중앙 - 빛 효과 */
.center-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(200, 220, 255, 0.4) 30%, rgba(150, 180, 255, 0.2) 60%, transparent 100%);
    mix-blend-mode: screen;
    animation: center-glow-pulse 3s ease-in-out infinite alternate;
}

/* 포탈 중앙 콘텐츠 */
.portal-center-content {
    position: relative;
    text-align: center;
    z-index: 2;
}

/* 포탈 텍스트 */
.portal-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 300;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    opacity: 0; /* 일반 상태에서는 안 보임 */
    transition: opacity 0.3s ease;
}

/* 포탈 호버 시 텍스트 표시 */
.portal-link:hover .portal-text {
    opacity: 1;
}

/* 애니메이션 정의 */
@keyframes aurora-flow {
    0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.6; }
    50% { transform: rotate(180deg) scale(1.1); opacity: 0.7; }
}

@keyframes stars-flow {
    0% { background-position: 0 0, 0 0, 0 0, 0 0; }
    100% { background-position: 250px 250px, -200px 200px, 300px -300px, -180px 180px; }
}

@keyframes runes-flow {
    0% { background-position: 0 0; }
    100% { background-position: 100px 100px; }
}

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

@keyframes magic-particles-flow {
    0% { background-position: 0 0, 0 0, 0 0, 0 0; }
    100% { background-position: 170px 170px, -150px 150px, 200px -200px, -130px 130px; }
}

@keyframes beams-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes title-glow {
    0%, 100% { opacity: 0.9; text-shadow: 0 0 15px rgba(255, 255, 255, 0.4), 0 0 30px rgba(150, 180, 255, 0.3); }
    33% { opacity: 0.95; text-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 0 40px rgba(150, 180, 255, 0.4); }
    66% { opacity: 0.9; text-shadow: 0 0 15px rgba(255, 255, 255, 0.4), 0 0 30px rgba(150, 180, 255, 0.3); }
}

@keyframes subtitle-fade {
    0%, 100% { opacity: 0.8; transform: translateY(0); }
    50% { opacity: 0.9; transform: translateY(-2px); }
}

@keyframes whale-float {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-15px) rotate(-2deg); }
}

@keyframes portal-click {
    0% { transform: scale(1); }
    25% { transform: scale(0.97); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes rotate-very-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes rotate-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes rotate-reverse {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

@keyframes energy-pulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.05); }
}

@keyframes particles-rotate {
    0% { background-position: 0 0, 0 0, 0 0, 0 0; transform: rotate(0deg); }
    100% { background-position: 35px 35px, -25px 25px, 30px -30px, -20px 20px; transform: rotate(360deg); }
}

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

@keyframes stardust-rotate {
    0% { background-position: 0 0, 0 0, 0 0, 0 0; transform: rotate(0deg); }
    100% { background-position: 20px 20px, -15px 15px, 25px -25px, -18px 18px; transform: rotate(360deg); }
}

@keyframes center-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 15px rgba(255, 255, 255, 0.5), 0 0 30px rgba(150, 180, 255, 0.3); }
    50% { transform: scale(1.1); box-shadow: 0 0 20px rgba(255, 255, 255, 0.6), 0 0 40px rgba(150, 180, 255, 0.4); }
}

@keyframes moon-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-2px) scale(1.05); }
}

@keyframes center-glow-pulse {
    0%, 100% { opacity: 0.7; transform: scale(1) rotate(0deg); }
    50% { opacity: 0.9; transform: scale(1.1) rotate(180deg); }
}

/* 포탈 호버 시 적용되는 애니메이션 */
.portal-container:hover .inner-glow {
    animation: hover-inner-glow 1.5s ease-in-out infinite alternate;
}

.portal-container:hover .moon-symbol {
    animation: hover-moon-float 2s ease-in-out infinite alternate;
}

.portal-container:hover .energy-flow {
    animation: hover-energy-flow 2s ease-in-out infinite alternate;
}

@keyframes hover-inner-glow {
    0%, 100% { opacity: 0.9; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
}

@keyframes hover-moon-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.1); }
}

@keyframes hover-energy-flow {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}