/* ==========================================================================
   archetypic.dev — Styles
   Surreal dreamscape / Jungian archetypes / De Chirico midnight palette
   ========================================================================== */

/* ---- Tokens ---- */
:root {
    --void: #0B1026;
    --void-deep: #0D0A1F;
    --midnight-1: #0F1433;
    --midnight-2: #101538;
    --midnight-3: #12163A;
    --midnight-4: #141842;
    --midnight-5: #1A1040;
    --midnight-hover: #1C2255;
    --ghost-violet: #2A2650;
    --periwinkle: #7B8CDE;
    --silver-blue: #C4CEEF;
    --dusty-rose: #D4778C;
    --amber-incense: #C9A84C;

    --serif: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
    --sans: 'Nunito Sans', 'Inter', system-ui, -apple-system, sans-serif;
    --mono: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--sans);
    font-weight: 400;
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.75;
    color: var(--silver-blue);
    background-color: var(--void);
    overflow-x: hidden;
    min-height: 100vh;

    /* Pure-CSS generative star field — multiple radial gradients */
    background-image:
        radial-gradient(1px 1px at 13% 7%, rgba(123, 140, 222, 0.30), transparent 50%),
        radial-gradient(1px 1px at 27% 19%, rgba(123, 140, 222, 0.20), transparent 50%),
        radial-gradient(1px 1px at 41% 4%, rgba(123, 140, 222, 0.25), transparent 50%),
        radial-gradient(1px 1px at 55% 12%, rgba(123, 140, 222, 0.18), transparent 50%),
        radial-gradient(1px 1px at 69% 8%, rgba(123, 140, 222, 0.28), transparent 50%),
        radial-gradient(1px 1px at 83% 21%, rgba(123, 140, 222, 0.22), transparent 50%),
        radial-gradient(1px 1px at 95% 15%, rgba(123, 140, 222, 0.19), transparent 50%),
        radial-gradient(1px 1px at 7% 33%, rgba(123, 140, 222, 0.24), transparent 50%),
        radial-gradient(2px 2px at 22% 41%, rgba(123, 140, 222, 0.30), transparent 50%),
        radial-gradient(1px 1px at 38% 47%, rgba(123, 140, 222, 0.16), transparent 50%),
        radial-gradient(1px 1px at 54% 39%, rgba(123, 140, 222, 0.22), transparent 50%),
        radial-gradient(1px 1px at 71% 51%, rgba(123, 140, 222, 0.27), transparent 50%),
        radial-gradient(1px 1px at 88% 44%, rgba(123, 140, 222, 0.18), transparent 50%),
        radial-gradient(1px 1px at 11% 62%, rgba(123, 140, 222, 0.20), transparent 50%),
        radial-gradient(1px 1px at 29% 71%, rgba(123, 140, 222, 0.30), transparent 50%),
        radial-gradient(1px 1px at 46% 67%, rgba(123, 140, 222, 0.15), transparent 50%),
        radial-gradient(1px 1px at 62% 73%, rgba(123, 140, 222, 0.25), transparent 50%),
        radial-gradient(2px 2px at 78% 65%, rgba(123, 140, 222, 0.28), transparent 50%),
        radial-gradient(1px 1px at 91% 78%, rgba(123, 140, 222, 0.22), transparent 50%),
        radial-gradient(1px 1px at 6% 85%, rgba(123, 140, 222, 0.20), transparent 50%),
        radial-gradient(1px 1px at 24% 93%, rgba(123, 140, 222, 0.26), transparent 50%),
        radial-gradient(1px 1px at 42% 88%, rgba(123, 140, 222, 0.18), transparent 50%),
        radial-gradient(1px 1px at 59% 96%, rgba(123, 140, 222, 0.22), transparent 50%),
        radial-gradient(1px 1px at 76% 91%, rgba(123, 140, 222, 0.30), transparent 50%),
        radial-gradient(1px 1px at 93% 86%, rgba(123, 140, 222, 0.20), transparent 50%),
        radial-gradient(2px 2px at 17% 25%, rgba(196, 206, 239, 0.20), transparent 50%),
        radial-gradient(1px 1px at 65% 31%, rgba(196, 206, 239, 0.18), transparent 50%),
        radial-gradient(1px 1px at 36% 56%, rgba(196, 206, 239, 0.22), transparent 50%),
        radial-gradient(1px 1px at 84% 59%, rgba(196, 206, 239, 0.16), transparent 50%);
    background-attachment: fixed;
    background-size: 100% 100%;
}

/* ---- Section frame ---- */
.section {
    position: relative;
    width: 100%;
    padding: 0 6vw;
}

/* ==========================================================================
   1. Threshold Portal — concentric archways tunneling toward vanishing point
   ========================================================================== */

.threshold-portal {
    height: 100vh;
    min-height: 700px;
    overflow: hidden;
    background-color: var(--void);
    display: flex;
    align-items: center;
    justify-content: center;
}

.archway-stack {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.archway {
    position: absolute;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
    border: 1px solid var(--periwinkle);
    border-radius: 50%;
    opacity: 0;
    will-change: transform, opacity;
    animation: archway-emerge 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(200ms + (8 - var(--i)) * 120ms);
    /* outermost arch is largest (i=1), innermost smallest (i=8) */
}

.archway[data-arch="1"] { width: 110vmin; height: 110vmin; }
.archway[data-arch="2"] { width: 90vmin;  height: 90vmin;  }
.archway[data-arch="3"] { width: 72vmin;  height: 72vmin;  }
.archway[data-arch="4"] { width: 56vmin;  height: 56vmin;  }
.archway[data-arch="5"] { width: 42vmin;  height: 42vmin;  }
.archway[data-arch="6"] { width: 30vmin;  height: 30vmin;  }
.archway[data-arch="7"] { width: 20vmin;  height: 20vmin;  }
.archway[data-arch="8"] { width: 12vmin;  height: 12vmin;  }

@keyframes archway-emerge {
    from { opacity: 0; }
    to   { opacity: 0.4; }
}

/* Sine-wave opacity pulse layered on every archway */
.archway::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid var(--periwinkle);
    border-radius: 50%;
    opacity: 0;
    animation: archway-pulse 2.5s ease-in-out infinite;
    animation-delay: calc(var(--i) * 180ms);
}

@keyframes archway-pulse {
    0%, 100% { opacity: 0; }
    50%      { opacity: 0.25; }
}

.portal-content {
    position: relative;
    z-index: 5;
    text-align: center;
    color: var(--silver-blue);
}

.brand {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(36px, 6vw, 72px);
    letter-spacing: 0.15em;
    color: var(--silver-blue);
    opacity: 0;
    animation: fade-in 500ms ease-out forwards;
    animation-delay: 1.3s;
}

.brand-rule {
    display: block;
    height: 1px;
    width: 0;
    margin: 1.4rem auto;
    background-color: var(--periwinkle);
    animation: rule-expand 800ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 1.8s;
}

@keyframes rule-expand {
    from { width: 0; }
    to   { width: 200px; }
}

.brand-subtitle {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(14px, 1.6vw, 19px);
    letter-spacing: 0.18em;
    color: var(--silver-blue);
    opacity: 0;
    animation: fade-in 400ms ease-out forwards;
    animation-delay: 2.6s;
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.scroll-cue {
    position: absolute;
    bottom: 4vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    color: var(--periwinkle);
    opacity: 0;
    animation: fade-in 600ms ease-out forwards;
    animation-delay: 3.2s;
}

.scroll-cue-label {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.85rem;
    letter-spacing: 0.32em;
    text-transform: lowercase;
}

.scroll-cue-mark {
    width: 1px;
    height: 36px;
    background: linear-gradient(to bottom, var(--periwinkle), transparent);
    animation: cue-drift 2.4s ease-in-out infinite;
}

@keyframes cue-drift {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50%      { transform: translateY(8px); opacity: 1; }
}

/* ==========================================================================
   Geometry dividers — impossible figures rendered as line drawings
   ========================================================================== */

.geometry-divider {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 12vh 6vw;
    opacity: 0.08;
}

.geometry-divider--left  { justify-content: flex-start; padding-left: 8vw; }
.geometry-divider--right { justify-content: flex-end;   padding-right: 8vw; }

.impossible-svg {
    width: clamp(120px, 16vw, 220px);
    height: auto;
    color: var(--periwinkle);
}

/* Path-draw setup */
.draw-path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    /* JS will replace dasharray/dashoffset based on getTotalLength() */
}

.draw-path.is-drawn {
    transition: stroke-dashoffset 2s cubic-bezier(0.6, 0.05, 0.3, 0.95);
    stroke-dashoffset: 0 !important;
}

/* ==========================================================================
   2. Archetype Gallery — broken-grid floating ruins
   ========================================================================== */

.archetype-gallery {
    padding-top: 12vh;
    padding-bottom: 16vh;
    position: relative;
    min-height: 280vh;
}

.gallery-header {
    max-width: 720px;
    margin: 0 auto 18vh auto;
    text-align: center;
    padding: 0 4vw;
}

.gallery-eyebrow {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: 0.4em;
    color: var(--amber-incense);
    margin-bottom: 1.2rem;
}

.gallery-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(28px, 4.5vw, 56px);
    letter-spacing: 0.02em;
    line-height: 1.15;
    color: var(--silver-blue);
    margin-bottom: 1.6rem;
}

.gallery-title em {
    color: var(--dusty-rose);
    font-style: italic;
    font-weight: 400;
}

.gallery-lede {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(16px, 1.6vw, 22px);
    line-height: 1.7;
    color: var(--silver-blue);
    opacity: 0.78;
}

/* ---- Floating ruin panels (broken grid, irregular clip-paths) ---- */
.ruin-panel {
    position: relative;
    width: clamp(280px, 38vw, 520px);
    margin-bottom: 22vh;
    padding: 0;
    /* default rectangle — JS will swap to irregular polygon on enter */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition:
        clip-path 600ms cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 600ms ease,
        transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0.3;
    transform: translateY(40px);
    will-change: clip-path, transform, opacity;
}

.ruin-panel.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.ruin-panel__inner {
    background-color: var(--midnight-1);
    border: 1px solid var(--ghost-violet);
    padding: 3rem clamp(1.6rem, 3vw, 2.6rem);
    position: relative;
}

/* Each panel: unique position + unique irregular polygon clip-path when revealed */

.ruin-panel--a {
    margin-left: 8vw;
    transform: translateY(40px) rotate(-1deg);
}
.ruin-panel--a.is-revealed {
    transform: translateY(0) rotate(-1deg);
    clip-path: polygon(0 4%, 96% 0, 100% 14%, 98% 92%, 92% 100%, 4% 97%, 0 80%, 2% 18%);
}

.ruin-panel--b {
    margin-left: auto;
    margin-right: 8vw;
    transform: translateY(40px) rotate(1.5deg);
}
.ruin-panel--b.is-revealed {
    transform: translateY(0) rotate(1.5deg);
    clip-path: polygon(4% 0, 100% 3%, 96% 22%, 100% 88%, 88% 100%, 0 96%, 3% 70%, 0 12%);
}

.ruin-panel--c {
    margin-left: 22vw;
    transform: translateY(40px) rotate(-0.5deg);
}
.ruin-panel--c.is-revealed {
    transform: translateY(0) rotate(-0.5deg);
    clip-path: polygon(0 6%, 92% 0, 100% 18%, 96% 96%, 84% 100%, 6% 98%, 0 86%, 4% 24%);
}

.ruin-panel--d {
    margin-left: auto;
    margin-right: 14vw;
    transform: translateY(40px) rotate(2deg);
}
.ruin-panel--d.is-revealed {
    transform: translateY(0) rotate(2deg);
    clip-path: polygon(8% 0, 100% 5%, 95% 28%, 100% 95%, 80% 100%, 4% 92%, 0 60%, 2% 8%);
}

.ruin-panel--e {
    margin-left: 6vw;
    transform: translateY(40px) rotate(-2deg);
}
.ruin-panel--e.is-revealed {
    transform: translateY(0) rotate(-2deg);
    clip-path: polygon(2% 4%, 94% 2%, 100% 22%, 96% 84%, 90% 100%, 0 94%, 4% 76%, 0 16%);
}

.ruin-panel--f {
    margin-left: auto;
    margin-right: 6vw;
    transform: translateY(40px) rotate(1deg);
}
.ruin-panel--f.is-revealed {
    transform: translateY(0) rotate(1deg);
    clip-path: polygon(0 8%, 96% 0, 100% 18%, 92% 100%, 80% 96%, 8% 100%, 0 78%, 6% 22%);
}

.ruin-mark {
    display: inline-block;
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.95rem;
    letter-spacing: 0.3em;
    color: var(--amber-incense);
    margin-bottom: 1rem;
}

.ruin-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(24px, 3vw, 38px);
    letter-spacing: 0.02em;
    line-height: 1.15;
    color: var(--silver-blue);
    margin-bottom: 0.8rem;
}

.ruin-tagline {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(15px, 1.4vw, 18px);
    color: var(--dusty-rose);
    margin-bottom: 1.4rem;
    opacity: 0.92;
}

.ruin-body {
    font-family: var(--sans);
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.75;
    color: var(--silver-blue);
    opacity: 0.85;
    max-width: 42ch;
}

.ruin-glyph {
    position: absolute;
    top: 1.8rem;
    right: 1.8rem;
    width: 60px;
    height: 60px;
    color: var(--periwinkle);
    opacity: 0.55;
}

.ruin-glyph svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ==========================================================================
   3. The Unconscious Layer — radial pool, ouroboros, italic passage
   ========================================================================== */

.unconscious-layer {
    position: relative;
    height: 100vh;
    min-height: 720px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
}

.unconscious-pool {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center,
            var(--void) 0%,
            var(--midnight-5) 40%,
            var(--void-deep) 100%);
    z-index: 0;
}

.unconscious-content {
    position: relative;
    z-index: 2;
    width: min(560px, 88vw);
    text-align: center;
    padding: 2rem;
}

.ouroboros {
    width: clamp(280px, 36vw, 420px);
    height: auto;
    display: block;
    margin: 0 auto 2.4rem auto;
}

.ouroboros-path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.ouroboros-path.is-drawn {
    transition: stroke-dashoffset 3s ease-in-out;
    stroke-dashoffset: 0 !important;
    animation: ouroboros-glow 3s ease-in-out infinite 3s;
}

@keyframes ouroboros-glow {
    0%, 100% { filter: drop-shadow(0 0 4px var(--amber-incense)); }
    50%      { filter: drop-shadow(0 0 8px var(--amber-incense)); }
}

.ouroboros-eye {
    fill: var(--amber-incense);
    opacity: 0.8;
}

.unconscious-quote {
    margin: 0 auto;
    color: var(--silver-blue);
    transition: opacity 400ms ease;
}

.unconscious-quote .unconscious-line {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(18px, 2.2vw, 28px);
    line-height: 1.7;
    letter-spacing: 0.02em;
    margin: 0.2em 0;
    opacity: var(--quote-opacity, 0.55);
    transition: opacity 350ms ease-out;
}

.unconscious-quote .unconscious-line em {
    font-style: italic;
    color: var(--silver-blue);
}

/* ==========================================================================
   4. Pattern Codex — bento-box grid of crystallised forms
   ========================================================================== */

.pattern-codex {
    padding-top: 14vh;
    padding-bottom: 14vh;
}

.codex-header {
    max-width: 720px;
    margin: 0 auto 8vh auto;
    text-align: center;
}

.codex-eyebrow {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1rem;
    letter-spacing: 0.4em;
    color: var(--amber-incense);
    margin-bottom: 1.2rem;
}

.codex-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(28px, 4.5vw, 56px);
    letter-spacing: 0.02em;
    line-height: 1.15;
    color: var(--silver-blue);
    margin-bottom: 1.4rem;
}

.codex-title em {
    color: var(--dusty-rose);
    font-style: italic;
    font-weight: 400;
}

.codex-lede {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(15px, 1.4vw, 19px);
    line-height: 1.7;
    color: var(--silver-blue);
    opacity: 0.78;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, minmax(220px, auto));
    gap: 2px;
    max-width: 1200px;
    margin: 0 auto;
    background-color: var(--periwinkle);
    /* gap reveals the periwinkle background as hairlines */
    border: 0;
}

.bento-cell {
    position: relative;
    padding: 2.2rem 1.8rem;
    color: var(--silver-blue);
    transition:
        background-color 300ms ease,
        transform 200ms ease;
    overflow: hidden;
}

.bento-cell--1 { background-color: var(--midnight-1); }
.bento-cell--2 { background-color: var(--midnight-3); }
.bento-cell--3 { background-color: #0D1229; }
.bento-cell--4 { background-color: var(--midnight-4); }
.bento-cell--5 { background-color: #0E1130; }
.bento-cell--6 { background-color: var(--midnight-2); }

.bento-cell:hover {
    background-color: var(--midnight-hover);
    transform: scale(1.01);
}

.bento-glyph {
    width: 40px;
    height: 40px;
    color: var(--periwinkle);
    margin-bottom: 1.2rem;
    opacity: 0.85;
}

.bento-glyph svg {
    width: 100%;
    height: 100%;
    display: block;
}

.bento-name {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(20px, 2vw, 26px);
    letter-spacing: 0.04em;
    color: var(--silver-blue);
    margin-bottom: 1rem;
}

.bento-code {
    font-family: var(--mono);
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--silver-blue);
    opacity: 0.7;
    background: transparent;
    white-space: pre-wrap;
    word-break: break-word;
}

.bento-code code {
    font-family: inherit;
    color: inherit;
}

/* ==========================================================================
   5. Closing Sigil — watermark + breathing dot
   ========================================================================== */

.closing-sigil {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sigil-watermark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(60px, 14vw, 220px);
    letter-spacing: 0.05em;
    color: var(--silver-blue);
    opacity: 0.06;
    pointer-events: none;
    white-space: nowrap;
    user-select: none;
}

.sigil-block {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 2rem;
    max-width: 540px;
}

.sigil-line {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: var(--silver-blue);
    margin-bottom: 1.6rem;
}

.breathing-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--dusty-rose);
    opacity: 0.6;
    animation: breathe 2.5s ease-in-out infinite;
}

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

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, minmax(200px, auto));
    }

    .ruin-panel {
        width: clamp(280px, 78vw, 480px);
        margin-left: 6vw !important;
        margin-right: 6vw !important;
    }
}

@media (max-width: 640px) {
    .bento-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, minmax(200px, auto));
    }

    .archway[data-arch="1"] { width: 130vmin; height: 130vmin; }
    .archway[data-arch="2"] { width: 108vmin; height: 108vmin; }

    .gallery-header {
        margin-bottom: 10vh;
    }

    .ruin-panel {
        width: 92vw;
        margin-left: 4vw !important;
        margin-right: 4vw !important;
        margin-bottom: 14vh;
    }

    .geometry-divider {
        padding: 8vh 4vw;
    }
}