/* ===================================================================
   aiice.quest -- surreal frozen quest
   Horizontal-scroll chambers, generative ice, parallax dreamscape
   =================================================================== */

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

:root {
    --abyss:        #0a1628;   /* primary background */
    --glacial:      #4fc3f7;   /* secondary cyan */
    --neural:       #e040fb;   /* AI accent magenta */
    --slate:        #1a2744;   /* surface */
    --frost:        #e8eaf6;   /* primary text */
    --thaw:         #80deea;   /* text accent */
    --prismatic:    #7c4dff;   /* glow violet */
    --amber:        #ffab40;   /* lantern warmth */

    --display:  'Cinzel Decorative', 'Quicksand', serif;
    --body:     'Quicksand', system-ui, sans-serif;
    --code:     'Fira Code', 'Menlo', monospace;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--abyss);
    color: var(--frost);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

body {
    cursor: crosshair;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(124,77,255,0.10), transparent 60%),
        radial-gradient(ellipse at 80% 70%, rgba(79,195,247,0.08), transparent 65%),
        var(--abyss);
}

/* ----------- horizontal scroll container ----------- */
.quest-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    display: flex;
    flex-wrap: nowrap;
    z-index: 5;
    -webkit-overflow-scrolling: touch;
}
.quest-container::-webkit-scrollbar { height: 4px; background: rgba(10,22,40,0.6); }
.quest-container::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, var(--glacial), var(--prismatic));
    border-radius: 2px;
}

.chamber {
    position: relative;
    flex: 0 0 100vw;
    min-width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
    overflow: hidden;
    isolation: isolate;
}

/* The Core has no scroll-snap so user can rest there */
.chamber-core {
    scroll-snap-align: none;
}

.chamber-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.78;
    mix-blend-mode: screen;
}

/* frost-over per-chamber overlay (animated by JS via custom prop) */
.chamber-frost {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    --frost-radius: 0%;
    --frost-origin-x: 50%;
    --frost-origin-y: 50%;
    background: radial-gradient(
        circle at var(--frost-origin-x) var(--frost-origin-y),
        transparent var(--frost-radius),
        rgba(10,22,40,0.92) calc(var(--frost-radius) + 20%)
    );
    transition: background 700ms cubic-bezier(.2,.8,.2,1);
}

.chamber.is-active .chamber-frost {
    --frost-radius: 160%;
}

.chamber-content {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    padding: 6vh 6vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ----------- typography ----------- */
.title-crystal,
.chamber-title,
.core-line {
    font-family: var(--display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--frost);
}

.kicker {
    font-family: var(--code);
    font-size: 0.78rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--thaw);
    margin-bottom: 1.2rem;
    opacity: 0.85;
}

.chamber-body {
    font-family: var(--body);
    font-size: 1.08rem;
    line-height: 1.75;
    color: var(--frost);
    max-width: 36ch;
    margin-bottom: 1rem;
    opacity: 0.92;
}

.chamber-body .emph {
    color: var(--thaw);
    font-weight: 600;
    text-shadow: 0 0 10px rgba(128,222,234,0.3);
}

.quest-meta {
    font-family: var(--code);
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    color: var(--thaw);
    margin-top: 1.4rem;
    opacity: 0.7;
}

/* clue crystallization hover effect */
.clue {
    cursor: pointer;
    transition: filter 400ms ease;
}
.clue:hover { filter: brightness(1.15); }
.clue .ch,
.clue span.char {
    display: inline-block;
    transition: text-shadow 350ms ease,
                transform 350ms cubic-bezier(.2,.8,.2,1),
                color 350ms ease;
    transition-delay: calc(var(--ci, 0) * 30ms);
    will-change: transform, text-shadow;
}
.clue:hover .ch,
.clue:hover span.char {
    text-shadow:
        0 0 8px var(--glacial),
        0 0 20px var(--prismatic);
    transform: scale(1.05) translateY(-1px);
    color: var(--thaw);
}

/* ----------- chamber 0: threshold ----------- */
.chamber-threshold {
    background: radial-gradient(circle at 50% 50%, rgba(124,77,255,0.18), transparent 65%);
}
.threshold-content {
    flex-direction: column;
    text-align: center;
    gap: 2.5rem;
}
.title-crystal {
    font-size: clamp(2rem, 5vw, 5.5rem);
    line-height: 1.1;
    color: var(--frost);
    text-shadow:
        0 0 20px rgba(79,195,247,0.5),
        0 0 50px rgba(124,77,255,0.3);
    user-select: none;
}
.title-crystal .ch {
    display: inline-block;
    opacity: 0;
    transform: scale(0.4) rotate(-12deg);
    filter: blur(8px);
    animation: crystallize 900ms cubic-bezier(.2,.8,.2,1) forwards;
    animation-delay: calc(var(--ci) * 110ms + 200ms);
}
.title-crystal .ch.dot {
    color: var(--neural);
    text-shadow: 0 0 14px var(--neural), 0 0 28px var(--prismatic);
}
@keyframes crystallize {
    0%   { opacity: 0; transform: scale(0.4) rotate(-12deg); filter: blur(8px); }
    60%  { opacity: 1; transform: scale(1.08) rotate(2deg); filter: blur(0); }
    100% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); }
}
.threshold-tag {
    font-family: var(--body);
    font-size: 1.05rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--thaw);
    opacity: 0;
    animation: fadeUp 1.2s ease 1.6s forwards;
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 0.9; transform: translateY(0); }
}
.threshold-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    opacity: 0;
    animation: fadeUp 1.2s ease 2s forwards;
}
.threshold-arrow svg {
    width: 140px;
    height: 44px;
    filter: drop-shadow(0 0 6px var(--glacial));
    animation: arrowPulse 2.4s ease-in-out infinite;
}
@keyframes arrowPulse {
    0%, 100% { transform: translateX(0); opacity: 0.7; }
    50%      { transform: translateX(8px); opacity: 1; }
}
.arrow-label {
    font-family: var(--code);
    font-size: 0.72rem;
    letter-spacing: 0.25em;
    color: var(--glacial);
    text-transform: uppercase;
    opacity: 0.6;
}

/* ----------- split chambers ----------- */
.split {
    display: grid;
    gap: 4vw;
    width: 100%;
    height: 100%;
    align-items: center;
}
.split-odd  { grid-template-columns: 38% 62%; }
.split-even { grid-template-columns: 62% 38%; }

.panel-text {
    padding: 2.5rem;
    background: linear-gradient(135deg,
        rgba(26,39,68,0.62),
        rgba(10,22,40,0.45));
    border: 1px solid rgba(79,195,247,0.18);
    border-radius: 2px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow:
        0 0 0 1px rgba(232,234,246,0.04),
        0 30px 80px rgba(0,0,0,0.4);
    transform: translateX(-30px);
    opacity: 0;
    transition: transform 1s cubic-bezier(.2,.8,.2,1) 0.1s,
                opacity 1s ease 0.1s;
    position: relative;
}
.split-even .panel-text { transform: translateX(30px); }
.chamber.is-active .panel-text { transform: translateX(0); opacity: 1; }

.panel-text::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px;
    width: 40px; height: 40px;
    border-top: 1px solid var(--glacial);
    border-left: 1px solid var(--glacial);
    opacity: 0.6;
}
.panel-text::after {
    content: '';
    position: absolute;
    bottom: -1px; right: -1px;
    width: 40px; height: 40px;
    border-bottom: 1px solid var(--neural);
    border-right: 1px solid var(--neural);
    opacity: 0.55;
}

.chamber-title {
    font-size: clamp(1.6rem, 3.4vw, 3.2rem);
    line-height: 1.15;
    margin-bottom: 1.5rem;
    color: var(--frost);
}

.panel-visual {
    position: relative;
    width: 100%;
    height: 80vh;
    max-height: 720px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ----------- chamber 3: polyhedron ----------- */
.polyhedron-stage {
    width: 360px;
    height: 360px;
    perspective: 900px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.polyhedron {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    animation: polySpin 24s linear infinite;
}
@keyframes polySpin {
    0%   { transform: rotateX(15deg) rotateY(0deg); }
    100% { transform: rotateX(15deg) rotateY(360deg); }
}
.face {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 200px; height: 200px;
    border: 1px solid var(--glacial);
    background:
        linear-gradient(135deg, rgba(79,195,247,0.12), rgba(124,77,255,0.08));
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--code);
    color: var(--thaw);
    font-size: 1.4rem;
    letter-spacing: 0.2em;
    box-shadow: 0 0 30px rgba(79,195,247,0.25) inset;
    clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}
.face-1 { transform: rotateY(0deg)   translateZ(100px); }
.face-2 { transform: rotateY(60deg)  translateZ(100px); border-color: var(--neural); color: var(--neural); }
.face-3 { transform: rotateY(120deg) translateZ(100px); }
.face-4 { transform: rotateY(180deg) translateZ(100px); border-color: var(--prismatic); color: var(--prismatic); }
.face-5 { transform: rotateY(240deg) translateZ(100px); }
.face-6 { transform: rotateY(300deg) translateZ(100px); border-color: var(--neural); color: var(--neural); }

/* ----------- chamber 4: aurora ----------- */
.aurora-stage {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(79,195,247,0.15);
    background: radial-gradient(ellipse at center, rgba(10,22,40,0.4), rgba(10,22,40,0.85));
}
.aurora-band {
    position: absolute;
    left: -25%;
    width: 150%;
    height: 60%;
    filter: blur(40px);
    mix-blend-mode: screen;
    opacity: 0.8;
    transform-origin: center;
    border-radius: 50%;
}
.band-a {
    top: 5%;
    background: linear-gradient(90deg, transparent, var(--prismatic), transparent);
    animation: auroraDrift 18s ease-in-out infinite;
}
.band-b {
    top: 25%;
    background: linear-gradient(90deg, transparent, var(--glacial), transparent);
    animation: auroraDrift 22s ease-in-out infinite reverse;
    animation-delay: -3s;
}
.band-c {
    top: 45%;
    background: linear-gradient(90deg, transparent, var(--neural), transparent);
    animation: auroraDrift 26s ease-in-out infinite;
    animation-delay: -7s;
    opacity: 0.55;
}
.band-d {
    top: 60%;
    height: 40%;
    background: linear-gradient(90deg, transparent, var(--thaw), transparent);
    animation: auroraDrift 30s ease-in-out infinite reverse;
    animation-delay: -11s;
    opacity: 0.6;
}
@keyframes auroraDrift {
    0%   { transform: translateX(-10%) skewX(-8deg) scaleY(0.9); }
    50%  { transform: translateX(12%)  skewX(8deg)  scaleY(1.2); }
    100% { transform: translateX(-10%) skewX(-8deg) scaleY(0.9); }
}

/* ----------- chamber 6: the core ----------- */
.chamber-core {
    background:
        radial-gradient(ellipse at center, rgba(124,77,255,0.18), transparent 70%),
        radial-gradient(ellipse at 70% 40%, rgba(255,171,64,0.06), transparent 60%);
}
.core-layers {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.core-layer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.core-aurora {
    background:
        radial-gradient(ellipse at 30% 50%, rgba(124,77,255,0.4), transparent 50%),
        radial-gradient(ellipse at 70% 30%, rgba(79,195,247,0.3), transparent 55%),
        radial-gradient(ellipse at 50% 70%, rgba(224,64,251,0.25), transparent 50%);
    filter: blur(30px);
    animation: coreAurora 14s ease-in-out infinite;
    opacity: 0.75;
    mix-blend-mode: screen;
}
@keyframes coreAurora {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.08) rotate(2deg); }
}
.core-fractal svg {
    width: min(80vh, 80vw);
    height: min(80vh, 80vw);
    animation: coreFractal 40s linear infinite;
    filter: drop-shadow(0 0 12px rgba(79,195,247,0.4));
    opacity: 0.65;
}
@keyframes coreFractal {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.core-alice svg {
    width: 220px;
    height: 330px;
    filter: drop-shadow(0 0 25px rgba(124,77,255,0.6));
    animation: coreAliceBreathe 6s ease-in-out infinite;
    opacity: 0.6;
}
@keyframes coreAliceBreathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}

.core-content {
    flex-direction: column;
    text-align: center;
    gap: 1.4rem;
    z-index: 4;
}
.core-kicker {
    color: var(--amber);
}
.core-line {
    font-size: clamp(2rem, 5vw, 4.5rem);
    color: var(--amber);
    text-shadow:
        0 0 20px rgba(255,171,64,0.5),
        0 0 50px rgba(255,171,64,0.25);
    animation: coreBreathe 4s ease-in-out infinite;
}
@keyframes coreBreathe {
    0%, 100% { transform: scale(1); letter-spacing: 0.18em; }
    50%      { transform: scale(1.02); letter-spacing: 0.22em; }
}
.core-sub {
    font-size: 1.1rem;
    color: var(--frost);
    max-width: 48ch;
    margin: 0 auto;
    opacity: 0.85;
    line-height: 1.7;
}
.core-meta {
    color: var(--amber);
    opacity: 0.7;
}

/* ----------- parallax layers ----------- */
.parallax-layer {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    pointer-events: none;
    will-change: transform;
}
.parallax-aurora {
    width: 220vw;
    background:
        radial-gradient(ellipse 60% 40% at 15% 35%, rgba(124,77,255,0.35), transparent 60%),
        radial-gradient(ellipse 50% 35% at 45% 25%, rgba(79,195,247,0.28), transparent 60%),
        radial-gradient(ellipse 60% 40% at 78% 40%, rgba(224,64,251,0.20), transparent 60%),
        radial-gradient(ellipse 50% 35% at 110% 30%, rgba(128,222,234,0.22), transparent 60%);
    filter: blur(60px);
    z-index: 1;
    opacity: 0.6;
    mix-blend-mode: screen;
}
.parallax-stalactites {
    width: 250vw;
    height: 60vh;
    z-index: 2;
    opacity: 0.55;
}
.parallax-stalactites svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}
.parallax-particles {
    width: 100vw;
    height: 100vh;
    z-index: 4;
    opacity: 0.8;
}
.frost-particle {
    position: absolute;
    background: radial-gradient(circle, rgba(232,234,246,0.7), rgba(128,222,234,0.3));
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    filter: blur(1px);
    pointer-events: none;
    will-change: transform, opacity;
}

/* ----------- quest map (top edge) ----------- */
.quest-map {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 70px;
    z-index: 30;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(10,22,40,0.55), transparent);
}
.quest-map svg {
    width: 100%;
    height: 60px;
    display: block;
}
.map-node {
    fill: rgba(79,195,247,0.25);
    stroke: var(--glacial);
    stroke-width: 0.8;
    transition: fill 500ms ease, filter 500ms ease, transform 500ms ease;
    transform-origin: center;
    transform-box: fill-box;
}
.map-node.reached {
    fill: var(--neural);
    filter: drop-shadow(0 0 8px var(--neural));
}
.map-node.current {
    fill: var(--amber);
    filter: drop-shadow(0 0 10px var(--amber));
    animation: nodePulse 1.6s ease-in-out infinite;
}
@keyframes nodePulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.25); }
}
.quest-coord {
    position: absolute;
    top: 44px;
    right: 24px;
    font-family: var(--code);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: var(--thaw);
    opacity: 0.7;
    text-transform: uppercase;
    transition: color 400ms ease;
}

/* ----------- alice waypoint silhouette ----------- */
.alice-waypoint {
    position: fixed;
    bottom: 28px;
    left: 5vw;
    width: 60px;
    height: 90px;
    z-index: 25;
    pointer-events: none;
    will-change: transform, left;
    transition: left 1.2s cubic-bezier(.2,.8,.2,1);
    filter: drop-shadow(0 0 8px rgba(128,222,234,0.5));
}
.alice-waypoint svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.alice-shards .shard {
    transform-origin: 30px 45px;
    transform-box: fill-box;
    transition: transform 300ms cubic-bezier(.2,.8,.2,1);
}
.alice-waypoint.walking .alice-shards {
    animation: aliceWalk 1.4s steps(4) infinite;
}
@keyframes aliceWalk {
    0%   { transform: translateY(0)  rotate(0deg); }
    25%  { transform: translateY(-2px) rotate(-1deg); }
    50%  { transform: translateY(0)  rotate(0deg); }
    75%  { transform: translateY(-2px) rotate(1deg); }
    100% { transform: translateY(0)  rotate(0deg); }
}
.alice-waypoint.dissolve .shard {
    animation: shatter 0.6s ease-out forwards;
}
@keyframes shatter {
    to {
        transform:
            translate(var(--dx, 30px), var(--dy, -30px))
            rotate(var(--dr, 90deg))
            scale(0.4);
        opacity: 0;
    }
}
.alice-waypoint.reform .shard {
    animation: reform 0.7s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes reform {
    from {
        transform:
            translate(calc(var(--dx, -30px) * -1), calc(var(--dy, 30px) * -1))
            rotate(calc(var(--dr, -90deg) * -1))
            scale(0.3);
        opacity: 0;
    }
    to { transform: none; opacity: 1; }
}
.alice-waypoint .s-lantern {
    animation: lanternFlicker 2.2s ease-in-out infinite;
    transform-origin: 54px 49px;
    transform-box: fill-box;
}
@keyframes lanternFlicker {
    0%, 100% { filter: drop-shadow(0 0 4px var(--amber)); transform: scale(1); }
    50%      { filter: drop-shadow(0 0 12px var(--amber)); transform: scale(1.08); }
}

/* ----------- cursor ice trail ----------- */
#cursor-trail {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 40;
}
.trail-hex {
    position: absolute;
    width: 12px;
    height: 12px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: radial-gradient(circle, var(--glacial), var(--prismatic));
    opacity: 0.7;
    pointer-events: none;
    will-change: opacity, transform;
    animation: trailFade 800ms ease-out forwards;
    filter: blur(0.5px);
}
@keyframes trailFade {
    from { opacity: 0.8; transform: scale(1) rotate(0deg); }
    to   { opacity: 0;   transform: scale(0.3) rotate(45deg); }
}

/* ----------- ice crack network ----------- */
.ice-cracks {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 6;
    pointer-events: none;
    opacity: 0.5;
}

/* ----------- responsive tweaks ----------- */
@media (max-width: 900px) {
    .split-odd, .split-even { grid-template-columns: 1fr; gap: 1.5rem; }
    .panel-visual { height: 40vh; }
    .panel-text { padding: 1.5rem; }
    .chamber-content { padding: 4vh 4vw; }
    .alice-waypoint { width: 44px; height: 66px; bottom: 18px; }
    .quest-coord { font-size: 0.6rem; right: 12px; }
    .polyhedron-stage { width: 240px; height: 240px; }
    .polyhedron { width: 130px; height: 130px; }
    .face { width: 130px; height: 130px; font-size: 1rem; }
    .face-1, .face-2, .face-3, .face-4, .face-5, .face-6 {
        --tz: 65px;
    }
    .face-1 { transform: rotateY(0deg)   translateZ(65px); }
    .face-2 { transform: rotateY(60deg)  translateZ(65px); }
    .face-3 { transform: rotateY(120deg) translateZ(65px); }
    .face-4 { transform: rotateY(180deg) translateZ(65px); }
    .face-5 { transform: rotateY(240deg) translateZ(65px); }
    .face-6 { transform: rotateY(300deg) translateZ(65px); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 200ms !important;
    }
}