/* ============================================================
   MasqueradeProtocol.com - Styles
   Colors: #0b0a12, #c9a84c, #f4efe6, #2a1f3d, #8b1a1a, #3d3a50, #d4af37
   Fonts: Playfair Display, DM Sans, Victor Mono
   ============================================================ */

/* --- CSS Custom Properties --- */
:root {
    --midnight-velvet: #0b0a12;
    --tarnished-gold: #c9a84c;
    --parchment: #f4efe6;
    --bruised-plum: #2a1f3d;
    --dried-blood: #8b1a1a;
    --mask-shadow: #3d3a50;
    --candlelight: #d4af37;

    --bg: var(--midnight-velvet);
    --text: var(--parchment);
    --accent: var(--tarnished-gold);

    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'DM Sans', 'Helvetica Neue', sans-serif;
    --font-cipher: 'Victor Mono', 'Courier New', monospace;

    --mask-x: 50%;
    --mask-y: 50%;
}

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.75;
    letter-spacing: -0.01em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Velvet Texture Overlay --- */
#velvet-texture {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.025;
}

#velvet-texture svg {
    width: 100%;
    height: 100%;
}

/* --- Candle Flicker Particles --- */
#candle-particles {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
}

.candle-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--candlelight);
    animation: candleFlicker var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes candleFlicker {
    0%, 100% { opacity: 0; transform: scale(0.8); }
    20% { opacity: 0.9; transform: scale(1.2); }
    40% { opacity: 0.4; transform: scale(0.9); }
    60% { opacity: 0.85; transform: scale(1.1); }
    80% { opacity: 0.3; transform: scale(1); }
}

/* --- Navigation --- */
#mask-nav {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 10000;
}

#mask-nav-toggle {
    background: none;
    border: 1px solid var(--tarnished-gold);
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--tarnished-gold);
    transition: border-color 0.3s, color 0.3s, transform 0.3s;
}

#mask-nav-toggle:hover {
    border-color: var(--candlelight);
    color: var(--candlelight);
    transform: scale(1.08);
}

#mask-nav-links {
    position: absolute;
    top: 50%;
    right: 50%;
    transform-origin: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

#mask-nav.open #mask-nav-links {
    pointer-events: all;
    opacity: 1;
}

.nav-link {
    position: absolute;
    white-space: nowrap;
    font-family: var(--font-cipher);
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--tarnished-gold);
    text-decoration: none;
    padding: 6px 14px;
    border: 1px solid transparent;
    transition: color 0.3s, border-color 0.3s, transform 0.3s;
    transform: translate(0, 0) scale(0.7);
    opacity: 0;
}

#mask-nav.open .nav-link {
    opacity: 1;
    transform: translate(var(--tx), var(--ty)) scale(1);
    transition: color 0.3s, border-color 0.3s, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s;
}

.nav-link:nth-child(1) { --tx: -180px; --ty: -60px; transition-delay: 0.05s; }
.nav-link:nth-child(2) { --tx: -200px; --ty: -10px; transition-delay: 0.1s; }
.nav-link:nth-child(3) { --tx: -190px; --ty: 40px; transition-delay: 0.15s; }
.nav-link:nth-child(4) { --tx: -160px; --ty: 85px; transition-delay: 0.2s; }
.nav-link:nth-child(5) { --tx: -120px; --ty: 125px; transition-delay: 0.25s; }

.nav-link:hover {
    color: var(--candlelight);
    border-color: var(--dried-blood);
}

.nav-link.nav-link--active {
    color: var(--candlelight);
    animation: navPulse 2s ease-in-out infinite;
}

@keyframes navPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* --- Sections Common --- */
.section {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

/* --- SVG Draw Animation --- */
.svg-draw {
    stroke-dasharray: var(--path-length, 2000);
    stroke-dashoffset: var(--path-length, 2000);
    transition: stroke-dashoffset 1.5s ease-in-out;
}

.svg-draw.svg-draw--visible {
    stroke-dashoffset: 0;
}

/* ============================================================
   SECTION 1: THE THRESHOLD
   ============================================================ */
.section--threshold {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--midnight-velvet);
    clip-path: ellipse(100% 100% at 50% 50%);
    transition: clip-path 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.threshold__mask-viewport {
    position: absolute;
    inset: 0;
    clip-path: polygon(
        20% 25%, 25% 18%, 32% 16%, 38% 18%, 42% 22%,
        45% 28%, 42% 35%, 38% 38%, 32% 39%, 25% 37%,
        20% 32%, 20% 25%,
        58% 25%, 62% 18%, 68% 16%, 75% 18%, 80% 22%,
        83% 28%, 80% 35%, 75% 38%, 68% 39%, 62% 37%,
        58% 32%, 58% 25%
    );
    transform: rotate(calc((var(--mask-x, 50%) - 50%) * 0.06deg)) translate(
        calc((var(--mask-x, 50%) - 50%) * 0.3px),
        calc((var(--mask-y, 50%) - 50%) * 0.3px)
    );
    transition: transform 0.15s ease-out;
}

.threshold__mask-viewport.expanded {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    transition: clip-path 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.threshold__scene {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: sceneRotate 30s linear infinite;
}

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

.threshold__orb {
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--tarnished-gold);
    opacity: 0.3;
}

.threshold__orb--1 {
    width: 300px;
    height: 300px;
    border-color: var(--tarnished-gold);
    animation: orbFloat1 8s ease-in-out infinite;
}

.threshold__orb--2 {
    width: 200px;
    height: 200px;
    border-color: var(--candlelight);
    animation: orbFloat2 12s ease-in-out infinite;
    top: 20%;
    left: 30%;
}

.threshold__orb--3 {
    width: 150px;
    height: 150px;
    border-color: var(--mask-shadow);
    animation: orbFloat3 10s ease-in-out infinite;
    bottom: 25%;
    right: 25%;
}

.threshold__orb--4 {
    width: 400px;
    height: 400px;
    border-color: var(--bruised-plum);
    animation: orbFloat4 15s ease-in-out infinite;
    opacity: 0.15;
}

@keyframes orbFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -20px) scale(1.05); }
    50% { transform: translate(-15px, 25px) scale(0.95); }
    75% { transform: translate(20px, 10px) scale(1.02); }
}

@keyframes orbFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-25px, 15px) scale(1.08); }
    66% { transform: translate(20px, -20px) scale(0.92); }
}

@keyframes orbFloat3 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(15px, -30px) rotate(180deg); }
}

@keyframes orbFloat4 {
    0%, 100% { transform: scale(1); opacity: 0.15; }
    50% { transform: scale(1.1); opacity: 0.08; }
}

.threshold__enter {
    position: relative;
    z-index: 10;
    width: 80%;
    max-width: 600px;
    margin-top: 20vh;
}

.threshold__enter-svg {
    width: 100%;
    height: auto;
}

.enter-text {
    font-family: var(--font-display);
    font-size: 24px;
    font-style: italic;
    fill: var(--tarnished-gold);
    letter-spacing: 0.1em;
    animation: enterTextGlow 3s ease-in-out infinite;
}

@keyframes enterTextGlow {
    0%, 100% { fill: var(--tarnished-gold); }
    50% { fill: var(--candlelight); }
}

/* ============================================================
   SECTION 2: THE ANTEROOM
   ============================================================ */
.section--anteroom {
    min-height: 100vh;
    background: var(--midnight-velvet);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
    position: relative;
}

.anteroom__diagonal-split {
    position: relative;
    width: 100%;
    max-width: 1200px;
    min-height: 70vh;
    display: flex;
    align-items: stretch;
}

.anteroom__text-zone {
    position: relative;
    z-index: 2;
    flex: 0 0 45%;
    max-width: 28ch;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
    background: linear-gradient(145deg, var(--bruised-plum), transparent);
}

.anteroom__heading {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    color: var(--parchment);
    margin-bottom: 1.5rem;
    font-feature-settings: 'liga' 1, 'onum' 1;
    line-height: 1.15;
}

.anteroom__body {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.75;
    color: var(--parchment);
    margin-bottom: 1.25rem;
    letter-spacing: -0.01em;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.anteroom__body.visible {
    opacity: 1;
    transform: translateY(0);
}

.anteroom__cipher {
    font-family: var(--font-cipher);
    font-size: 13px;
    color: var(--tarnished-gold);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-top: 1rem;
    opacity: 0;
    transition: opacity 1s ease 0.5s;
}

.anteroom__cipher.visible {
    opacity: 1;
}

.anteroom__shape-zone {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.anteroom__morph-shape {
    width: 320px;
    height: 320px;
    background: linear-gradient(135deg, var(--bruised-plum), var(--mask-shadow));
    border: 1px solid var(--tarnished-gold);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: morphBlob 12s ease-in-out infinite;
    opacity: 0.6;
}

@keyframes morphBlob {
    0%, 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transform: rotate(0deg); }
    25% { border-radius: 58% 42% 28% 72% / 45% 65% 35% 55%; transform: rotate(5deg); }
    50% { border-radius: 50% 50% 40% 60% / 60% 40% 60% 40%; transform: rotate(-3deg); }
    75% { border-radius: 40% 60% 65% 35% / 35% 55% 45% 65%; transform: rotate(7deg); }
}

.anteroom__frame-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ============================================================
   SECTION 3: THE HALL OF MIRRORS
   ============================================================ */
.section--hall {
    min-height: 100vh;
    background: var(--midnight-velvet);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 40px;
}

.hall__frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hall__frame--outer {
    width: 90%;
    max-width: 900px;
    min-height: 60vh;
    border: 2px solid var(--tarnished-gold);
    padding: 40px;
    transform: rotate(-1deg);
    position: relative;
}

.hall__frame-border {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hall__frame--middle {
    width: 100%;
    min-height: 45vh;
    border: 1px solid var(--tarnished-gold);
    padding: 35px;
    transform: rotate(2deg);
    background: rgba(42, 31, 61, 0.2);
}

.hall__frame--inner {
    width: 100%;
    min-height: 30vh;
    border: 1px solid var(--mask-shadow);
    padding: 30px;
    transform: rotate(-1.5deg);
    background: rgba(11, 10, 18, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hall__content {
    max-width: 55ch;
    text-align: center;
}

.hall__heading {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 900;
    color: var(--parchment);
    margin-bottom: 2rem;
    font-feature-settings: 'liga' 1, 'onum' 1;
    line-height: 1.1;
}

.hall__body {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.75;
    color: var(--parchment);
    margin-bottom: 1.25rem;
    letter-spacing: -0.01em;
}

.hall__cipher {
    font-family: var(--font-cipher);
    font-size: 13px;
    color: var(--tarnished-gold);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-top: 1.5rem;
}

/* Typewriter animation */
.typewriter-text {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.typewriter-text.typewriter-active {
    opacity: 1;
}

.typewriter-text .typewriter-char {
    opacity: 0;
    display: inline;
    transition: opacity 0.05s ease;
}

.typewriter-text .typewriter-char.visible {
    opacity: 1;
}

/* ============================================================
   SECTION 4: THE UNMASKING
   ============================================================ */
.section--unmasking {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: var(--midnight-velvet);
    transition: background-color 0.8s ease, color 0.8s ease;
}

.section--unmasking.inverted {
    background: var(--parchment);
}

.unmasking__content {
    text-align: center;
    position: relative;
    z-index: 5;
    padding: 40px;
}

.unmasking__heading {
    font-family: var(--font-display);
    font-size: clamp(4rem, 10vw, 12rem);
    font-weight: 900;
    color: var(--parchment);
    font-feature-settings: 'liga' 1, 'onum' 1;
    line-height: 1;
    transition: color 0.8s ease;
}

.section--unmasking.inverted .unmasking__heading {
    color: var(--midnight-velvet);
}

.unmasking__subtext {
    font-family: var(--font-cipher);
    font-size: 14px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--tarnished-gold);
    margin-top: 2rem;
    transition: color 0.8s ease;
}

.section--unmasking.inverted .unmasking__subtext {
    color: var(--dried-blood);
}

/* Mask Fragments */
.unmasking__mask-fragments {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.mask-fragment {
    position: absolute;
    width: 80px;
    height: 55px;
    opacity: 0.25;
}

.mask-fragment--1 {
    top: 10%;
    left: 5%;
    animation: fragmentDrift1 25s linear infinite;
}

.mask-fragment--2 {
    top: 65%;
    right: 8%;
    animation: fragmentDrift2 32s linear infinite;
}

.mask-fragment--3 {
    top: 30%;
    right: 15%;
    animation: fragmentDrift3 18s linear infinite;
    width: 60px;
    height: 40px;
}

.mask-fragment--4 {
    bottom: 20%;
    left: 20%;
    animation: fragmentDrift4 38s linear infinite;
}

.mask-fragment--5 {
    top: 45%;
    left: 35%;
    animation: fragmentDrift5 22s linear infinite;
    width: 65px;
    height: 45px;
}

.mask-fragment--6 {
    top: 15%;
    right: 40%;
    animation: fragmentDrift6 28s linear infinite;
    width: 55px;
    height: 38px;
}

.mask-fragment--7 {
    bottom: 35%;
    right: 30%;
    animation: fragmentDrift7 35s linear infinite;
}

.mask-fragment--8 {
    bottom: 10%;
    left: 45%;
    animation: fragmentDrift8 20s linear infinite;
    width: 60px;
    height: 42px;
}

@keyframes fragmentDrift1 {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(80px, 60px) rotate(45deg); }
    50% { transform: translate(20px, 120px) rotate(90deg); }
    75% { transform: translate(-40px, 60px) rotate(135deg); }
    100% { transform: translate(0, 0) rotate(180deg); }
}

@keyframes fragmentDrift2 {
    0% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(-100px, -40px) rotate(-60deg); }
    66% { transform: translate(-50px, 80px) rotate(-120deg); }
    100% { transform: translate(0, 0) rotate(-180deg); }
}

@keyframes fragmentDrift3 {
    0% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-70px, 90px) rotate(90deg); }
    100% { transform: translate(0, 0) rotate(180deg); }
}

@keyframes fragmentDrift4 {
    0% { transform: translate(0, 0) rotate(10deg); }
    30% { transform: translate(60px, -80px) rotate(70deg); }
    60% { transform: translate(120px, -20px) rotate(130deg); }
    100% { transform: translate(0, 0) rotate(190deg); }
}

@keyframes fragmentDrift5 {
    0% { transform: translate(0, 0) rotate(-15deg); }
    50% { transform: translate(-90px, -60px) rotate(75deg); }
    100% { transform: translate(0, 0) rotate(165deg); }
}

@keyframes fragmentDrift6 {
    0% { transform: translate(0, 0) rotate(0deg); }
    40% { transform: translate(50px, 100px) rotate(-50deg); }
    80% { transform: translate(-30px, 50px) rotate(-100deg); }
    100% { transform: translate(0, 0) rotate(-130deg); }
}

@keyframes fragmentDrift7 {
    0% { transform: translate(0, 0) rotate(5deg); }
    25% { transform: translate(-60px, -50px) rotate(45deg); }
    50% { transform: translate(-120px, 10px) rotate(95deg); }
    75% { transform: translate(-60px, 70px) rotate(145deg); }
    100% { transform: translate(0, 0) rotate(185deg); }
}

@keyframes fragmentDrift8 {
    0% { transform: translate(0, 0) rotate(-10deg); }
    50% { transform: translate(70px, -80px) rotate(80deg); }
    100% { transform: translate(0, 0) rotate(170deg); }
}

/* ============================================================
   SECTION 5: THE PROTOCOL
   ============================================================ */
.section--protocol {
    min-height: 100vh;
    background: var(--midnight-velvet);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 100px 40px;
}

/* Cipher Grid Background */
.protocol__cipher-grid {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.cipher-char {
    position: absolute;
    font-family: var(--font-cipher);
    font-size: 14px;
    color: var(--mask-shadow);
    opacity: 0;
    will-change: opacity;
    animation: cipherFade var(--cipher-duration, 6s) ease-in-out infinite;
    animation-delay: var(--cipher-delay, 0s);
    user-select: none;
}

@keyframes cipherFade {
    0%, 100% { opacity: 0; }
    30%, 70% { opacity: 0.08; }
}

/* HUD Overlay */
.protocol__hud {
    position: absolute;
    inset: 30px;
    pointer-events: none;
    z-index: 1;
}

.protocol__hud-line {
    position: absolute;
    background: var(--mask-shadow);
}

.protocol__hud-line--top {
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    opacity: 0.4;
}

.protocol__hud-line--bottom {
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    opacity: 0.4;
}

.protocol__hud-line--left {
    left: 0;
    top: 10%;
    bottom: 10%;
    width: 1px;
    opacity: 0.4;
}

.protocol__hud-line--right {
    right: 0;
    top: 10%;
    bottom: 10%;
    width: 1px;
    opacity: 0.4;
}

.protocol__coord {
    position: absolute;
    font-family: var(--font-cipher);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mask-shadow);
    opacity: 0.6;
}

.protocol__coord--tl { top: 8px; left: 8px; }
.protocol__coord--tr { top: 8px; right: 8px; }
.protocol__coord--bl { bottom: 8px; left: 8px; }
.protocol__coord--br { bottom: 8px; right: 8px; }

/* Protocol Content */
.protocol__content {
    position: relative;
    z-index: 2;
    max-width: 650px;
    text-align: center;
}

.protocol__heading {
    font-family: var(--font-display);
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 900;
    color: var(--parchment);
    margin-bottom: 2rem;
    font-feature-settings: 'liga' 1, 'onum' 1;
    line-height: 1.1;
}

.protocol__body {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.75;
    color: var(--parchment);
    margin-bottom: 1.25rem;
    letter-spacing: -0.01em;
}

.protocol__cipher {
    font-family: var(--font-cipher);
    font-size: 13px;
    color: var(--tarnished-gold);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-top: 1.5rem;
}

/* Protocol Key SVG */
.protocol__key-svg-container {
    position: relative;
    z-index: 2;
    margin-top: 60px;
    width: 120px;
    height: 240px;
}

.protocol__key-svg {
    width: 100%;
    height: 100%;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .anteroom__diagonal-split {
        flex-direction: column;
    }

    .anteroom__text-zone {
        flex: none;
        max-width: 100%;
        clip-path: none;
        padding: 40px 20px;
    }

    .anteroom__morph-shape {
        width: 200px;
        height: 200px;
    }

    .hall__frame--outer {
        width: 95%;
        padding: 20px;
    }

    .hall__frame--middle {
        padding: 18px;
    }

    .hall__frame--inner {
        padding: 16px;
    }

    .nav-link:nth-child(1) { --tx: -150px; --ty: -50px; }
    .nav-link:nth-child(2) { --tx: -165px; --ty: -5px; }
    .nav-link:nth-child(3) { --tx: -155px; --ty: 35px; }
    .nav-link:nth-child(4) { --tx: -130px; --ty: 72px; }
    .nav-link:nth-child(5) { --tx: -100px; --ty: 105px; }

    .mask-fragment {
        width: 50px;
        height: 35px;
    }

    .section--protocol {
        padding: 60px 20px;
    }
}