/* archetype.works
   A descent through the collective unconscious.
   Surreal dreamscape promo - layered depth, immersive scroll. */

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

:root {
    --void:        #0d0b1e; /* obsidian night */
    --indigo-1:    #12102a; /* chamber gradient start */
    --indigo-2:    #1a1640; /* chamber gradient end */
    --indigo-deep: #2d1b4e;
    --violet:      #5b3a8c; /* dawn / emergence */
    --text:        #e8e4f0; /* lunar white */
    --text-mute:   #9b8fc4; /* amethyst mist */
    --gold:        #d4af37; /* archetypal gold */
    --rose:        #c45b7c; /* shadow rose */
    --teal:        #3a9e8f; /* deep pool */
    --gold-glow:   0 0 30px rgba(212, 175, 55, 0.3);
    --gold-strong: 0 0 60px rgba(212, 175, 55, 0.5);
    --serif:       'Cormorant Garamond', 'Cormorant', Georgia, serif;
    --sans:        'Nunito Sans', 'Inter', system-ui, sans-serif;
}

html {
    scroll-behavior: smooth;
    background: var(--void);
}

body {
    font-family: var(--sans);
    font-weight: 300;
    background: var(--void);
    color: var(--text);
    line-height: 1.75;
    overflow-x: hidden;
    min-height: 100vh;
}

/* off-screen SVG defs container */
.mist-defs { position: absolute; left: -9999px; }

/* ---------- Constellation overlay ---------- */
.constellation {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}
.constellation-line {
    stroke: var(--gold);
    stroke-width: 1;
    opacity: 0;
    fill: none;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 2s ease, opacity 1.5s ease;
}
.constellation-line.visible {
    opacity: 0.18;
    stroke-dashoffset: 0;
}

/* ---------- Main scroll container ---------- */
#descent {
    position: relative;
    z-index: 2;
    scroll-snap-type: y proximity;
}

/* ---------- Threshold (Hero) ---------- */
.threshold {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    background:
        radial-gradient(ellipse at center, rgba(91, 58, 140, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse at 30% 80%, rgba(212, 175, 55, 0.06) 0%, transparent 50%),
        var(--void);
    overflow: hidden;
    scroll-snap-align: start;
}

.threshold::after {
    content: '';
    position: absolute;
    inset: 0;
    filter: url(#mist);
    opacity: 0.04;
    mix-blend-mode: overlay;
    pointer-events: none;
    animation: mistDrift 120s linear infinite;
}

.ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    border: 2px solid var(--gold);
    border-radius: 50%;
    transform: translate(-50%, calc(-50% - 80px));
    box-shadow:
        var(--gold-strong),
        inset 0 0 40px rgba(212, 175, 55, 0.15);
    animation: rotate 60s linear infinite;
    opacity: 0;
    animation-name: rotate, fadeRing;
    animation-duration: 60s, 2.5s;
    animation-timing-function: linear, ease;
    animation-iteration-count: infinite, 1;
    animation-fill-mode: none, forwards;
}
.ring::before,
.ring::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.35);
}
.ring::before {
    inset: 18px;
}
.ring::after {
    inset: 38px;
    border-color: rgba(212, 175, 55, 0.18);
    border-style: dashed;
}

.threshold-inner {
    position: relative;
    text-align: center;
    z-index: 3;
    transform: translateY(80px);
    padding: 0 6vw;
}

.overline {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    color: var(--text-mute);
    letter-spacing: 0.32em;
    text-transform: lowercase;
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
    opacity: 0;
    animation: fadeIn 3s ease 0.8s forwards;
}

.wordmark {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(2rem, 6vw, 4.5rem);
    letter-spacing: 0.12em;
    color: var(--text);
    margin-bottom: 1.4rem;
    opacity: 0;
    animation: fadeIn 3s ease 1.6s forwards;
    text-shadow: 0 0 30px rgba(232, 228, 240, 0.15);
}

.phrase {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    letter-spacing: 0.06em;
    color: var(--text-mute);
    opacity: 0;
    animation: fadeIn 3s ease 2.4s forwards;
}

.scroll-hint {
    position: absolute;
    bottom: 4vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    animation: fadeIn 2s ease 3.2s forwards;
    z-index: 3;
}
.chevron {
    width: 14px;
    height: 14px;
    border-right: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);
    transform: rotate(45deg);
    animation: chevronPulse 2.4s ease-in-out infinite;
    opacity: 0.55;
}
.chevron:nth-child(2) {
    animation-delay: 0.4s;
    opacity: 0.3;
}

/* ---------- Chambers ---------- */
.chamber {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 8vh 6vw;
    background: linear-gradient(180deg, var(--indigo-1) 0%, var(--indigo-2) 100%);
    overflow: hidden;
    scroll-snap-align: start;
}

/* threshold rings between chambers */
.chamber::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.55) 0%, transparent 70%);
    pointer-events: none;
}

/* mist overlay */
.chamber::after {
    content: '';
    position: absolute;
    inset: 0;
    filter: url(#mist);
    opacity: 0.04;
    mix-blend-mode: overlay;
    pointer-events: none;
    animation: mistDrift 120s linear infinite;
}

/* per-chamber gradients - the indigo to violet journey */
.chamber-hero      { background: linear-gradient(180deg, #12102a 0%, #1a1640 100%); }
.chamber-shadow    { background: linear-gradient(180deg, #1a1640 0%, #1d1230 100%); }
.chamber-sage      { background: linear-gradient(180deg, #1d1230 0%, #1f1442 100%); }
.chamber-trickster { background: linear-gradient(180deg, #1f1442 0%, #221650 100%); }
.chamber-mother    { background: linear-gradient(180deg, #221650 0%, #261a55 100%); }
.chamber-anima     { background: linear-gradient(180deg, #261a55 0%, #2d1b4e 100%); }

.chamber-inner {
    width: min(1240px, 100%);
    display: grid;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.4s ease, transform 1.4s ease;
}
.chamber.in-view .chamber-inner {
    opacity: 1;
    transform: translateY(0);
}

.chamber.left  .chamber-inner { grid-template-columns: 35% 65%; }
.chamber.right .chamber-inner { grid-template-columns: 65% 35%; }

@media (max-width: 820px) {
    .chamber.left  .chamber-inner,
    .chamber.right .chamber-inner { grid-template-columns: 1fr; gap: 3rem; }
    .chamber.right .glyph-cell { order: -1; }
}

/* ---------- Glyph cell ---------- */
.glyph-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    padding: 2rem;
}
.glyph-label {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: 0.85rem;
    letter-spacing: 0.32em;
    color: var(--text-mute);
    text-transform: lowercase;
}

/* ---------- Sacred geometry glyphs ---------- */
.glyph {
    position: relative;
    width: clamp(140px, 20vw, 220px);
    height: clamp(140px, 20vw, 220px);
    filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.3));
}

/* Hero - upward triangle */
.glyph-triangle {
    background: var(--gold);
    clip-path: polygon(50% 8%, 92% 92%, 8% 92%);
    animation: glyphPulse 6s ease-in-out infinite;
    box-shadow: var(--gold-glow);
}
.glyph-triangle::after {
    content: '';
    position: absolute;
    inset: 12%;
    background: var(--indigo-1);
    clip-path: polygon(50% 8%, 92% 92%, 8% 92%);
}

/* Shadow - inverted triangle (rose-gold tint) */
.glyph-inverted {
    background: var(--gold);
    clip-path: polygon(8% 8%, 92% 8%, 50% 92%);
    animation: glyphPulse 6s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(196, 91, 124, 0.45));
}
.glyph-inverted::after {
    content: '';
    position: absolute;
    inset: 12%;
    background: linear-gradient(180deg, #1a1640 0%, #1d1230 100%);
    clip-path: polygon(8% 8%, 92% 8%, 50% 92%);
}
.glyph-inverted::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--rose);
    transform: translate(-50%, -120%);
    box-shadow: 0 0 22px rgba(196, 91, 124, 0.7);
}

/* Sage - concentric circles */
.glyph-circles {
    border-radius: 50%;
    border: 2px solid var(--gold);
    box-shadow: var(--gold-glow), inset 0 0 30px rgba(212, 175, 55, 0.1);
    animation: glyphPulse 6s ease-in-out infinite;
}
.glyph-circles::before,
.glyph-circles::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--gold);
    opacity: 0.7;
}
.glyph-circles::before { inset: 14%; opacity: 0.55; }
.glyph-circles::after  {
    inset: 32%;
    border: 1px solid var(--teal);
    box-shadow: 0 0 16px rgba(58, 158, 143, 0.55);
    opacity: 0.85;
    animation: rotate 30s linear infinite;
}

/* Trickster - rotated diamond with missing corner */
.glyph-diamond {
    background: var(--gold);
    clip-path: polygon(50% 0%, 100% 50%, 60% 100%, 0% 50%);
    animation: glyphPulse 6s ease-in-out infinite, tilt 14s ease-in-out infinite;
    box-shadow: var(--gold-glow);
}
.glyph-diamond::after {
    content: '';
    position: absolute;
    inset: 14%;
    background: linear-gradient(180deg, #1f1442 0%, #221650 100%);
    clip-path: polygon(50% 0%, 100% 50%, 60% 100%, 0% 50%);
}

/* Mother - crescent */
.glyph-crescent {
    border-radius: 50%;
    background: var(--gold);
    box-shadow: var(--gold-glow);
    animation: glyphPulse 6s ease-in-out infinite;
}
.glyph-crescent::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, #221650 0%, #261a55 100%);
    transform: translate(22%, -10%) scale(0.95);
}

/* Anima - vesica piscis (two overlapping circles) */
.glyph-vesica {
    background: transparent;
    filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.3));
}
.vesica-circle {
    position: absolute;
    top: 50%;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    border: 2px solid var(--gold);
    transform: translateY(-50%);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.35);
}
.vesica-circle.a { left: 6%;  }
.vesica-circle.b { right: 6%; }
.glyph-vesica::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18%;
    height: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.35) 0%, transparent 70%);
    pointer-events: none;
}

/* ---------- Text cell ---------- */
.text-cell {
    max-width: 56ch;
    padding: 2rem;
}
.numeral {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    color: var(--gold);
    font-size: 1.05rem;
    letter-spacing: 0.4em;
    margin-bottom: 1.2rem;
    opacity: 0.85;
}
.archetype-name {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(2rem, 5vw, 5rem);
    line-height: 1.05;
    letter-spacing: 0.08em;
    color: var(--text);
    margin-bottom: 0.9rem;
    text-shadow: 0 0 32px rgba(232, 228, 240, 0.12);
}
.archetype-name.accent-rose { color: #f0c2d3; text-shadow: 0 0 40px rgba(196, 91, 124, 0.35); }
.archetype-name.accent-teal { color: #c5ece4; text-shadow: 0 0 40px rgba(58, 158, 143, 0.35); }

.epithet {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    color: var(--text-mute);
    margin-bottom: 2rem;
}
.prose {
    font-family: var(--sans);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.85;
    color: var(--text);
    opacity: 0.86;
    max-width: 52ch;
}

/* ---------- Deep Well / Emergence ---------- */
.deep-well {
    position: relative;
    min-height: 100vh;
    padding: 12vh 6vw 8vh;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, var(--indigo-deep) 0%, var(--violet) 100%);
    overflow: hidden;
    scroll-snap-align: start;
}
.deep-well::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.7) 0%, transparent 70%);
}
.deep-well::after {
    content: '';
    position: absolute;
    inset: 0;
    filter: url(#mist);
    opacity: 0.05;
    mix-blend-mode: overlay;
    pointer-events: none;
    animation: mistDrift 120s linear infinite;
}

.emergence-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
}
.emergence-overline {
    color: var(--gold);
    opacity: 0.8;
}
.emergence-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(2rem, 5vw, 4.5rem);
    letter-spacing: 0.12em;
    color: var(--text);
    margin: 0.6rem 0 0.8rem;
}
.emergence-sub {
    font-family: var(--serif);
    font-style: italic;
    color: var(--text-mute);
    font-size: 1.05rem;
    margin-bottom: 4rem;
}

/* ---------- The Mandala ---------- */
.mandala {
    position: relative;
    width: clamp(280px, 50vw, 520px);
    height: clamp(280px, 50vw, 520px);
    margin: 0 auto;
    animation: rotate 90s linear infinite;
}
.mandala-ring {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 50%;
    box-shadow: var(--gold-glow);
}
.mandala-ring.inner {
    inset: 18%;
    border: 1px dashed rgba(212, 175, 55, 0.35);
    box-shadow: none;
}
.mandala-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--gold);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.65);
}

.mandala-spokes {
    position: absolute;
    inset: 0;
}
.spoke {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 50%;
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.45) 0%, transparent 100%);
    transform-origin: top center;
}
.spoke.s1 { transform: translateX(-50%) rotate(0deg);   }
.spoke.s2 { transform: translateX(-50%) rotate(30deg);  }
.spoke.s3 { transform: translateX(-50%) rotate(60deg);  }
.spoke.s4 { transform: translateX(-50%) rotate(90deg);  }
.spoke.s5 { transform: translateX(-50%) rotate(120deg); }
.spoke.s6 { transform: translateX(-50%) rotate(150deg); }

.mandala-figures {
    position: absolute;
    inset: 0;
}
.m-fig {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
}
.m-glyph {
    position: absolute;
    width: 36px;
    height: 36px;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.45));
}
.m-triangle  { background: var(--gold); clip-path: polygon(50% 8%, 92% 92%, 8% 92%); }
.m-inverted  { background: var(--gold); clip-path: polygon(8% 8%, 92% 8%, 50% 92%); }
.m-circles   { border: 1.5px solid var(--gold); border-radius: 50%; background: transparent; }
.m-circles::after { content: ''; position: absolute; inset: 28%; border: 1px solid var(--gold); border-radius: 50%; opacity: 0.7; }
.m-diamond   { background: var(--gold); clip-path: polygon(50% 0%, 100% 50%, 60% 100%, 0% 50%); }
.m-crescent  { background: var(--gold); border-radius: 50%; }
.m-crescent::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--violet); transform: translate(20%, -10%) scale(0.95); }
.m-vesica    { background: transparent; border: 1.5px solid var(--gold); border-radius: 50%; }
.m-vesica::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--gold); transform: translateX(40%); }

/* place 12 figures around the wheel via radial offsets */
.f1  { transform: rotate(0deg)   translateY(-44%); }
.f2  { transform: rotate(30deg)  translateY(-44%); }
.f3  { transform: rotate(60deg)  translateY(-44%); }
.f4  { transform: rotate(90deg)  translateY(-44%); }
.f5  { transform: rotate(120deg) translateY(-44%); }
.f6  { transform: rotate(150deg) translateY(-44%); }
.f7  { transform: rotate(180deg) translateY(-44%); }
.f8  { transform: rotate(210deg) translateY(-44%); }
.f9  { transform: rotate(240deg) translateY(-44%); }
.f10 { transform: rotate(270deg) translateY(-44%); }
.f11 { transform: rotate(300deg) translateY(-44%); }
.f12 { transform: rotate(330deg) translateY(-44%); }

/* counter-rotate each figure so glyphs stay upright as wheel rotates */
.m-fig .m-glyph {
    animation: counterRotate 90s linear infinite;
}

.emergence-coda {
    margin-top: 4rem;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    color: var(--text-mute);
    letter-spacing: 0.06em;
    line-height: 1.9;
}

/* ---------- Footer ---------- */
.site-foot {
    position: relative;
    z-index: 3;
    padding: 4vh 6vw 6vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(180deg, var(--violet) 0%, #2d1b4e 60%, var(--void) 100%);
}
.brand {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: 0.32em;
    color: var(--text);
    font-size: 0.95rem;
    text-transform: lowercase;
}
.foot-rule {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.5;
}
.foot-meta {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: 0.85rem;
    color: var(--text-mute);
    letter-spacing: 0.18em;
}

/* ---------- Animations ---------- */
@keyframes rotate {
    from { transform: translate(-50%, calc(-50% - 80px)) rotate(0deg); }
    to   { transform: translate(-50%, calc(-50% - 80px)) rotate(360deg); }
}

/* For mandala (no offset) we need a separate plain rotate */
.mandala { animation-name: rotateFlat; }
@keyframes rotateFlat {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes counterRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* sage inner ring uses plain rotate */
.glyph-circles::after {
    animation-name: rotateFlat;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeRing {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes mistDrift {
    0%   { transform: translateX(-2%) translateY(0); }
    50%  { transform: translateX(2%)  translateY(-1%); }
    100% { transform: translateX(-2%) translateY(0); }
}
@keyframes glyphPulse {
    0%, 100% { filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.3)); }
    50%      { filter: drop-shadow(0 0 50px rgba(212, 175, 55, 0.55)); }
}
@keyframes tilt {
    0%, 100% { transform: rotate(-3deg); }
    50%      { transform: rotate(3deg); }
}
@keyframes chevronPulse {
    0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.55; }
    50%      { transform: rotate(45deg) translate(3px, 3px); opacity: 0.9; }
}

/* preserve compatibility: simpler plain rotate keyframe for tilt-stack */
@keyframes plainRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* small-screen tightening */
@media (max-width: 640px) {
    .threshold-inner { transform: translateY(60px); }
    .ring { width: 150px; height: 150px; transform: translate(-50%, calc(-50% - 60px)); }
    .text-cell { padding: 1rem; }
    .glyph-cell { padding: 1rem; }
    .mandala { width: 80vw; height: 80vw; }
}