/* ============================================
   archetype.boo - Surreal Jungian Gothic
   Palette: Void #0f0d15, Shadow #1a1625,
   Candlelight #e8c170, Ghost #d4d0e0,
   Ectoplasm #7b6ba5, Blood #8b3a3a, Cobweb #9e9bb3
   ============================================ */

:root {
    --void: #0f0d15;
    --shadow: #1a1625;
    --candle: #e8c170;
    --ghost: #d4d0e0;
    --ecto: #7b6ba5;
    --blood: #8b3a3a;
    --cobweb: #9e9bb3;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--void);
    color: var(--ghost);
    font-family: 'Lora', serif;
    font-weight: 400;
    line-height: 1.7;
    overflow-x: hidden;
}

/* ============================================
   SHADOW FIGURES - Drifting Archetypes
   ============================================ */
.shadow-figure {
    position: fixed;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
}

.sf-1 {
    width: 100px;
    height: 320px;
    left: -30px;
    top: 15%;
    background: radial-gradient(ellipse at 50% 30%, rgba(123, 107, 165, 0.08), transparent 70%);
    border-radius: 40% 40% 20% 20%;
    animation: driftRight 28s ease-in-out infinite, fadeInShadow 3s ease forwards;
}

.sf-2 {
    width: 80px;
    height: 280px;
    right: -20px;
    top: 55%;
    background: radial-gradient(ellipse at 50% 25%, rgba(123, 107, 165, 0.06), transparent 70%);
    border-radius: 35% 35% 25% 25%;
    animation: driftLeft 32s ease-in-out infinite, fadeInShadow 3s 1s ease forwards;
}

.sf-3 {
    width: 60px;
    height: 220px;
    left: 20%;
    top: 40%;
    background: radial-gradient(ellipse at 50% 20%, rgba(139, 58, 58, 0.04), transparent 70%);
    border-radius: 45% 45% 15% 15%;
    animation: driftSlow 40s ease-in-out infinite, fadeInShadow 3s 2s ease forwards;
}

@keyframes fadeInShadow {
    to { opacity: 1; }
}

@keyframes driftRight {
    0%, 100% { transform: translateX(0) translateY(0); opacity: 0.3; }
    25% { transform: translateX(50px) translateY(-15px); opacity: 0.5; }
    50% { transform: translateX(90px) translateY(10px); opacity: 0.6; }
    75% { transform: translateX(40px) translateY(-5px); opacity: 0.4; }
}

@keyframes driftLeft {
    0%, 100% { transform: translateX(0) translateY(0); opacity: 0.2; }
    30% { transform: translateX(-70px) translateY(20px); opacity: 0.4; }
    60% { transform: translateX(-40px) translateY(-10px); opacity: 0.5; }
}

@keyframes driftSlow {
    0%, 100% { transform: translateX(0) translateY(0); opacity: 0.15; }
    50% { transform: translateX(30px) translateY(40px); opacity: 0.3; }
}

/* ============================================
   SCROLL-TRACKING CANDLELIGHT
   ============================================ */
.candlelight-tracker {
    position: fixed;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 193, 112, 0.08) 0%, rgba(232, 193, 112, 0.03) 40%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.8s ease;
}

/* ============================================
   DEPTH SECTIONS - Base Styles
   ============================================ */
.depth-section {
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 2rem;
    gap: 3rem;
    z-index: 1;
}

/* ============================================
   SECTION 1: THE THRESHOLD
   ============================================ */
#threshold {
    min-height: 100vh;
    overflow: hidden;
}

/* Bookshelf shapes */
.bookshelf {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    pointer-events: none;
    z-index: 1;
}

.bookshelf-left {
    left: 0;
    background: linear-gradient(to right,
        rgba(26, 22, 37, 0.8) 0%,
        rgba(26, 22, 37, 0.6) 40%,
        transparent 100%
    );
    border-right: 1px solid rgba(123, 107, 165, 0.05);
}

.bookshelf-right {
    right: 0;
    background: linear-gradient(to left,
        rgba(26, 22, 37, 0.8) 0%,
        rgba(26, 22, 37, 0.6) 40%,
        transparent 100%
    );
    border-left: 1px solid rgba(123, 107, 165, 0.05);
}

/* Cobwebs */
.cobweb {
    position: absolute;
    width: 120px;
    height: 120px;
    z-index: 2;
    opacity: 0;
    transition: opacity 2s ease;
    pointer-events: none;
}

.cobweb.visible {
    opacity: 1;
}

.cobweb-tl {
    top: 0;
    left: 0;
}

.cobweb-tr {
    top: 0;
    right: 0;
}

.cobweb-bl {
    bottom: 0;
    left: 0;
}

.cobweb-small {
    width: 80px;
    height: 80px;
}

/* Hero candlelight */
.candlelight {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.candle-hero {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(232, 193, 112, 0.15) 0%, rgba(232, 193, 112, 0.05) 40%, transparent 70%);
    animation: flicker 4s ease-in-out infinite;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes flicker {
    0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
    30% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
    70% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.97); }
}

/* Brand name */
.threshold-content {
    position: relative;
    z-index: 3;
    text-align: center;
}

.brand-name {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(2.5rem, 8vw, 5.5rem);
    display: inline-flex;
    letter-spacing: 0.02em;
}

.letter {
    display: inline-block;
    transform: translateY(var(--offset, 0));
    color: var(--ghost);
    opacity: 0;
    transition: opacity 0.6s ease;
}

.letter.revealed {
    opacity: 1;
}

.letter.dot {
    color: var(--candle);
    opacity: 0;
}

.letter.dot.revealed {
    opacity: 0.7;
}

.letter.boo {
    color: var(--ecto);
}

.letter.boo.revealed {
    opacity: 0.7;
}

.threshold-sub {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 1rem;
    color: var(--ecto);
    margin-top: 1.5rem;
    opacity: 0;
    transition: opacity 1.5s ease 0.5s;
}

.threshold-sub.revealed {
    opacity: 0.6;
}

/* Scroll hint */
.scroll-hint {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 3;
}

.scroll-hint.visible {
    opacity: 0.4;
}

.scroll-hint-text {
    font-family: 'Caveat', cursive;
    font-size: 0.85rem;
    color: var(--ecto);
    letter-spacing: 0.15em;
}

.scroll-hint-line {
    width: 1px;
    height: 30px;
    background: linear-gradient(to bottom, var(--ecto), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { opacity: 0.3; transform: scaleY(1); }
    50% { opacity: 0.7; transform: scaleY(1.3); }
}

/* ============================================
   SECTION 2: GALLERY OF ARCHETYPES
   ============================================ */
.gallery-section {
    min-height: 200vh;
    padding: 8rem 2rem;
    gap: 4rem;
}

/* Tarot Cards */
.tarot-card {
    background: linear-gradient(to right, transparent, var(--shadow) 15%, var(--shadow) 85%, transparent);
    padding: 2.5rem 3rem;
    max-width: 520px;
    width: 100%;
    position: relative;
    opacity: 0;
    transform: translateY(30px) rotate(-1.5deg);
    transition: opacity 1s ease, transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tarot-card.visible {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

.tarot-card::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(232, 193, 112, 0.08);
    pointer-events: none;
}

.card-ornament {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--candle), transparent);
    margin-bottom: 1.5rem;
    opacity: 0.35;
}

.card-ornament-bottom {
    margin-bottom: 0;
    margin-top: 1.5rem;
}

.card-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    font-size: 1.6rem;
    color: var(--candle);
    margin-bottom: 0.75rem;
    text-align: center;
}

.card-text {
    font-family: 'Lora', serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(212, 208, 224, 0.65);
    text-align: center;
}

/* Ink Blots (Rorschach) */
.ink-blot {
    width: 70px;
    height: 70px;
    margin: 1rem auto;
    opacity: 0.15;
}

.blot-shadow {
    background: var(--ecto);
    clip-path: polygon(50% 0%, 70% 15%, 85% 10%, 80% 35%, 100% 50%, 85% 65%, 70% 85%, 60% 100%, 50% 85%, 40% 100%, 30% 85%, 15% 65%, 0% 50%, 20% 35%, 15% 10%, 30% 15%);
}

.blot-anima {
    background: var(--blood);
    clip-path: polygon(50% 5%, 65% 12%, 90% 8%, 85% 35%, 95% 55%, 75% 60%, 60% 90%, 50% 75%, 40% 90%, 25% 60%, 5% 55%, 15% 35%, 10% 8%, 35% 12%);
}

.blot-wise {
    background: var(--ecto);
    clip-path: polygon(50% 0%, 75% 18%, 100% 25%, 82% 48%, 92% 75%, 65% 68%, 55% 100%, 50% 80%, 45% 100%, 35% 68%, 8% 75%, 18% 48%, 0% 25%, 25% 18%);
}

.blot-mother {
    background: var(--blood);
    clip-path: polygon(50% 2%, 68% 10%, 88% 5%, 82% 30%, 98% 48%, 80% 60%, 68% 92%, 50% 78%, 32% 92%, 20% 60%, 2% 48%, 18% 30%, 12% 5%, 32% 10%);
}

.blot-trickster {
    background: var(--ecto);
    clip-path: polygon(50% 0%, 72% 22%, 95% 12%, 78% 42%, 100% 58%, 72% 72%, 58% 98%, 50% 82%, 42% 98%, 28% 72%, 0% 58%, 22% 42%, 5% 12%, 28% 22%);
}

/* Floating Fragments */
.floating-fragment {
    position: relative;
    max-width: 520px;
    width: 100%;
}

.ff-left {
    align-self: flex-start;
    padding-left: 4rem;
}

.ff-right {
    align-self: flex-end;
    padding-right: 4rem;
    text-align: right;
}

.ff-center {
    text-align: center;
}

.caveat-note {
    font-family: 'Caveat', cursive;
    font-size: 1.1rem;
    color: var(--ecto);
    opacity: 0.4;
}

.caveat-mirror {
    color: var(--candle);
    opacity: 0.3;
}

/* Fade In */
.fade-in {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 1s ease, transform 1s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   SECTION 3: THE MIRROR ROOM
   ============================================ */
.mirror-section {
    min-height: 80vh;
    padding: 8rem 2rem;
    gap: 2.5rem;
    overflow: hidden;
}

.mirror-bg-pulse {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(123, 107, 165, 0.04), transparent 60%);
    animation: mirrorPulse 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes mirrorPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

.mirror-title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    color: var(--ecto);
    text-align: center;
    position: relative;
    z-index: 2;
}

.mirror-sub {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.9rem;
    color: rgba(123, 107, 165, 0.5);
    text-align: center;
    position: relative;
    z-index: 2;
}

.mirror-container {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 800px;
    width: 100%;
    position: relative;
    z-index: 2;
}

.mirror-side {
    flex: 1;
    padding: 2rem;
}

.mirror-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
}

.mirror-line {
    width: 1px;
    height: 100%;
    min-height: 200px;
    background: linear-gradient(to bottom, transparent, var(--ecto), transparent);
    opacity: 0.3;
}

.mirror-card {
    background: linear-gradient(to bottom, transparent, rgba(26, 22, 37, 0.6) 20%, rgba(26, 22, 37, 0.6) 80%, transparent);
    padding: 2rem;
}

.mirror-card-reflected {
    transform: scaleX(-1);
}

.mirror-card-reflected .mirror-card-heading,
.mirror-card-reflected .mirror-card-text {
    transform: scaleX(-1);
}

.mirror-card-heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    font-size: 1.3rem;
    color: var(--ecto);
    margin-bottom: 1rem;
}

.mirror-card-text {
    font-family: 'Lora', serif;
    font-size: 0.9rem;
    line-height: 1.7;
    color: rgba(212, 208, 224, 0.5);
}

.ink-blot-large {
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 0.04;
    z-index: 0;
    pointer-events: none;
}

.blot-mirror-bg {
    background: var(--ecto);
    clip-path: polygon(50% 0%, 72% 15%, 92% 8%, 85% 38%, 100% 52%, 82% 68%, 65% 95%, 50% 80%, 35% 95%, 18% 68%, 0% 52%, 15% 38%, 8% 8%, 28% 15%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: blotPulse 5s ease-in-out infinite;
}

@keyframes blotPulse {
    0%, 100% { opacity: 0.04; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.07; transform: translate(-50%, -50%) scale(1.08); }
}

/* ============================================
   SECTION 4: EMERGENCE
   ============================================ */
.emergence-section {
    min-height: 70vh;
    padding: 8rem 2rem;
    position: relative;
}

.candle-emergence {
    width: 600px;
    height: 600px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(232, 193, 112, 0.12) 0%, rgba(232, 193, 112, 0.04) 40%, transparent 70%);
    animation: flickerWarm 5s ease-in-out infinite;
}

@keyframes flickerWarm {
    0%, 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
    30% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
    60% { opacity: 0.85; transform: translate(-50%, -50%) scale(0.98); }
}

/* Spirit Board */
.spirit-board {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    pointer-events: none;
    z-index: 0;
    width: 80%;
    flex-wrap: wrap;
}

.spirit-board span {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    color: var(--cobweb);
    opacity: 0.03;
}

/* Moth */
.moth {
    position: absolute;
    top: 30%;
    right: 30%;
    width: 16px;
    height: 12px;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 2s ease;
}

.moth.visible {
    opacity: 0.35;
}

.moth::before,
.moth::after {
    content: '';
    position: absolute;
    top: 0;
    width: 8px;
    height: 10px;
    background: var(--cobweb);
    border-radius: 50% 50% 30% 30%;
}

.moth::before {
    left: 0;
    transform-origin: right center;
    animation: wingLeft 1.5s ease-in-out infinite;
}

.moth::after {
    right: 0;
    transform-origin: left center;
    animation: wingRight 1.5s ease-in-out infinite;
}

@keyframes wingLeft {
    0%, 100% { transform: rotateY(0deg); }
    50% { transform: rotateY(50deg); }
}

@keyframes wingRight {
    0%, 100% { transform: rotateY(0deg); }
    50% { transform: rotateY(-50deg); }
}

/* Emergence content */
.emergence-content {
    max-width: 480px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.emergence-text {
    font-family: 'Lora', serif;
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(212, 208, 224, 0.75);
}

.caveat-closing {
    font-family: 'Caveat', cursive;
    font-size: 1.1rem;
    color: var(--candle);
    opacity: 0.5;
    margin-top: 2rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .floating-fragment {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .ff-right {
        padding-right: 1.5rem;
    }

    .shadow-figure {
        display: none;
    }

    .bookshelf {
        width: 30px;
    }

    .mirror-container {
        flex-direction: column;
    }

    .mirror-divider {
        padding: 1rem 0;
    }

    .mirror-line {
        width: 100%;
        height: 1px;
        min-height: auto;
    }

    .mirror-card-reflected {
        transform: scaleY(-1);
    }

    .mirror-card-reflected .mirror-card-heading,
    .mirror-card-reflected .mirror-card-text {
        transform: scaleY(-1);
    }

    .cobweb {
        width: 80px;
        height: 80px;
    }

    .tarot-card {
        padding: 2rem 1.5rem;
    }

    .spirit-board {
        gap: 0.4rem;
    }

    .spirit-board span {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .brand-name {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .gallery-section {
        padding: 6rem 1rem;
        gap: 3rem;
    }

    .tarot-card {
        padding: 1.5rem 1rem;
    }
}