/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
}

body {
    background-color: #0A0A0F;
    color: #E8E4E0;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1rem, 1.15vw, 1.15rem);
    line-height: 1.7;
    letter-spacing: 0.015em;
    overflow-x: hidden;
}

/* Chamber Base Styles */
.chamber {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Chamber I: The Vestibule */
.chamber-vestibule {
    background-color: #16161E;
    background-image:
        radial-gradient(circle at center, rgba(0, 212, 255, 0.05) 0%, transparent 70%);
}

.vestibule-background {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    background: linear-gradient(135deg, #0A0A0F 0%, #16161E 50%, #0A0A0F 100%);
    z-index: 0;
}

.sunburst-pattern {
    position: absolute;
    width: 600px;
    height: 600px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.3;
    z-index: 1;
}

.sunburst-pattern::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg 10deg,
        #00D4FF 10deg 10.5deg,
        transparent 10.5deg 20deg,
        #00D4FF 20deg 20.5deg,
        transparent 20.5deg 30deg,
        #00D4FF 30deg 30.5deg,
        transparent 30.5deg 40deg,
        #00D4FF 40deg 40.5deg,
        transparent 40.5deg 50deg,
        #00D4FF 50deg 50.5deg,
        transparent 50.5deg 60deg,
        #00D4FF 60deg 60.5deg,
        transparent 60.5deg 70deg,
        #00D4FF 70deg 70.5deg,
        transparent 70.5deg 80deg,
        #00D4FF 80deg 80.5deg,
        transparent 80.5deg 90deg,
        #00D4FF 90deg 90.5deg,
        transparent 90.5deg 100deg,
        #00D4FF 100deg 100.5deg,
        transparent 100.5deg 110deg,
        #00D4FF 110deg 110.5deg,
        transparent 110.5deg 120deg,
        #00D4FF 120deg 120.5deg,
        transparent 120.5deg 130deg,
        #00D4FF 130deg 130.5deg,
        transparent 130.5deg 140deg,
        #00D4FF 140deg 140.5deg,
        transparent 140.5deg 150deg,
        #00D4FF 150deg 150.5deg,
        transparent 150.5deg 160deg,
        #00D4FF 160deg 160.5deg,
        transparent 160.5deg 170deg,
        #00D4FF 170deg 170.5deg,
        transparent 170.5deg 180deg,
        #00D4FF 180deg 180.5deg,
        transparent 180.5deg 190deg,
        #00D4FF 190deg 190.5deg,
        transparent 190.5deg 200deg,
        #00D4FF 200deg 200.5deg,
        transparent 200.5deg 210deg,
        #00D4FF 210deg 210.5deg,
        transparent 210.5deg 220deg,
        #00D4FF 220deg 220.5deg,
        transparent 220.5deg 230deg,
        #00D4FF 230deg 230.5deg,
        transparent 230.5deg 240deg,
        #00D4FF 240deg 240.5deg,
        transparent 240.5deg 250deg,
        #00D4FF 250deg 250.5deg,
        transparent 250.5deg 260deg,
        #00D4FF 260deg 260.5deg,
        transparent 260.5deg 270deg,
        #00D4FF 270deg 270.5deg,
        transparent 270.5deg 280deg,
        #00D4FF 280deg 280.5deg,
        transparent 280.5deg 290deg,
        #00D4FF 290deg 290.5deg,
        transparent 290.5deg 300deg,
        #00D4FF 300deg 300.5deg,
        transparent 300.5deg 310deg,
        #00D4FF 310deg 310.5deg,
        transparent 310.5deg 320deg,
        #00D4FF 320deg 320.5deg,
        transparent 320.5deg 330deg,
        #00D4FF 330deg 330.5deg,
        transparent 330.5deg 340deg,
        #00D4FF 340deg 340.5deg,
        transparent 340.5deg 350deg,
        #00D4FF 350deg 350.5deg,
        transparent 350.5deg 360deg
    );
}

.vestibule-content {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.monogram-container {
    font-family: 'Poiret One', sans-serif;
    font-weight: 400;
    font-size: clamp(4rem, 10vw, 8rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #00D4FF;
    text-shadow:
        0 0 10px #00D4FF40,
        0 0 20px #00D4FF20,
        0 0 40px #00D4FF10;
    animation: neon-glow 3s ease-in-out infinite;
}

.monogram {
    margin: 0;
}

@keyframes neon-glow {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}

.identification-counter {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: #FFB800;
    text-shadow:
        0 0 10px #FFB80040,
        0 0 20px #FFB80020;
    animation: neon-glow 3s ease-in-out infinite;
}

.counter-digit {
    display: inline-block;
    min-width: 1.2em;
    text-align: center;
}

/* Chamber II: The Registry */
.chamber-registry {
    background-color: #0A0A0F;
    padding: 60px 20px;
}

.registry-container {
    max-width: 900px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 40px;
    align-items: start;
}

.registry-column {
    flex: 1;
}

.registry-left,
.registry-right {
    animation: slide-in-column 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.registry-left {
    animation-delay: 0s;
}

.registry-right {
    animation-delay: 0.2s;
}

@keyframes slide-in-column {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bordered-block {
    border: 2px solid #8A8680;
    padding: 30px;
    position: relative;
    background-color: rgba(22, 22, 30, 0.5);
}

.bordered-block::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 20px;
    width: 16px;
    height: 16px;
    border: 2px solid #8A8680;
}

.bordered-block::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 20px;
    width: 16px;
    height: 16px;
    border: 2px solid #8A8680;
}

.content-heading {
    font-family: 'Poiret One', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #00D4FF;
    margin-bottom: 15px;
    text-shadow: 0 0 10px #00D4FF40;
}

.bordered-block p {
    color: #E8E4E0;
    line-height: 1.8;
}

.registry-pillar {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    animation: pillar-assemble 1s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pillar-assemble {
    from {
        opacity: 0;
        transform: scaleY(0);
    }
    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

.crystalline-container {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crystal {
    width: 100%;
    height: 100%;
    animation: crystal-rotate 30s linear infinite;
}

.crystal-facets line {
    animation: crystal-brighten 3s ease-in-out infinite;
}

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

@keyframes crystal-brighten {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}

/* Chamber III: The Vault */
.chamber-vault {
    background-color: #16161E;
    padding: 40px 20px;
}

.vault-container {
    max-width: 900px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.concentric-border {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #00D4FF;
    border-radius: 0;
    animation: border-expand 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.concentric-border-1 {
    width: 90%;
    aspect-ratio: 1 / 1;
    animation-delay: 0s;
    box-shadow:
        0 0 20px #00D4FF40,
        0 0 40px #00D4FF20,
        inset 0 0 20px #00D4FF10;
}

.concentric-border-2 {
    width: 80%;
    aspect-ratio: 1 / 1;
    animation-delay: 0.1s;
    border-color: #00D4FF;
    opacity: 0.8;
}

.concentric-border-3 {
    width: 70%;
    aspect-ratio: 1 / 1;
    animation-delay: 0.2s;
    border-color: #00D4FF;
    opacity: 0.6;
}

@keyframes border-expand {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.vault-content {
    padding: 40px;
    text-align: center;
}

.vault-heading {
    font-family: 'Poiret One', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #00D4FF;
    margin-bottom: 20px;
    text-shadow: 0 0 15px #00D4FF40;
}

.vault-content p {
    color: #E8E4E0;
    margin-bottom: 15px;
    font-size: 0.95rem;
}

/* Chamber IV: The Exit Seal */
.chamber-exit {
    background-color: #0A0A0F;
}

.exit-seal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    opacity: 0;
    animation: seal-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

@keyframes seal-reveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.seal-ornament-left,
.seal-ornament-right {
    width: 60px;
    height: 20px;
    flex-shrink: 0;
}

.seal-ornament-left svg,
.seal-ornament-right svg {
    width: 100%;
    height: 100%;
}

.monogram-exit {
    font-family: 'Poiret One', sans-serif;
    font-size: 2.5rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #00D4FF;
    text-shadow:
        0 0 15px #00D4FF40,
        0 0 25px #00D4FF20;
    animation: neon-glow 3s ease-in-out infinite;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .registry-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .registry-pillar {
        flex-direction: row;
        width: 100%;
        gap: 20px;
        justify-content: space-around;
    }

    .crystalline-container {
        width: 50px;
        height: 50px;
    }

    .monogram-container {
        font-size: clamp(3rem, 8vw, 6rem);
    }

    .content-heading {
        font-size: 1.2rem;
    }

    .vault-heading {
        font-size: 1.5rem;
    }

    .monogram-exit {
        font-size: 2rem;
    }

    .exit-seal {
        gap: 20px;
    }

    .seal-ornament-left,
    .seal-ornament-right {
        width: 40px;
    }
}

/* Utility classes */
.glow-text {
    text-shadow:
        0 0 10px #00D4FF40,
        0 0 20px #00D4FF20,
        0 0 40px #00D4FF10;
}

.uppercase {
    text-transform: uppercase;
}

.centered {
    text-align: center;
}