/* ppuzzle.works — Candlelit Puzzle Atelier */

:root {
    --deep-ground: #1a1410;
    --primary-amber: #d4a24e;
    --burnished-copper: #b87333;
    --honeycomb-light: #f5e6c8;
    --ember: #8b3a1a;
    --parchment: #e8dcc8;
    --hex-size: min(22vw, 200px);
    --hex-size-sm: min(15vw, 130px);
    --hex-size-lg: min(40vw, 380px);
}

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

html {
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
}

html::-webkit-scrollbar {
    display: none;
}

body {
    background: var(--deep-ground);
    color: var(--parchment);
    font-family: 'Libre Baskerville', serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    line-height: 1.72;
    letter-spacing: 0.01em;
    overflow-x: hidden;
}

#scroll-container {
    scroll-snap-type: y mandatory;
    overflow-y: auto;
    height: 100vh;
    scrollbar-width: none;
}

#scroll-container::-webkit-scrollbar {
    display: none;
}

/* ===== CHAMBERS ===== */

.chamber {
    position: relative;
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ===== HONEYCOMB WIREFRAME BACKGROUND ===== */

.honeycomb-wireframe {
    position: absolute;
    inset: 0;
    opacity: 0.08;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='194' viewBox='0 0 112 194'%3E%3Cpath d='M56 0 L112 33.5 L112 100.5 L56 134 L0 100.5 L0 33.5Z' fill='none' stroke='%23b87333' stroke-width='0.5'/%3E%3Cpath d='M56 60 L112 93.5 L112 160.5 L56 194 L0 160.5 L0 93.5Z' fill='none' stroke='%23b87333' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 112px 194px;
    transform: rotate(15deg) scale(1.3);
    pointer-events: none;
}

/* ===== HEX CLUSTERS ===== */

.hex-cluster {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== HEX CELLS ===== */

.hex-cell {
    position: absolute;
    width: var(--hex-size);
    height: calc(var(--hex-size) * 1.1547);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
}

.hex-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 15%;
    background: radial-gradient(ellipse at center, rgba(212, 162, 78, 0.15) 0%, var(--deep-ground) 70%);
}

.hex-glow {
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(212, 162, 78, 0.2) 0%, transparent 70%);
    border-radius: 50%;
}

/* ===== FLICKER ANIMATIONS ===== */

@keyframes flicker1 {
    0% { opacity: 0.85; filter: brightness(1); }
    12% { opacity: 0.92; filter: brightness(1.05); }
    28% { opacity: 0.78; filter: brightness(0.95); }
    44% { opacity: 0.95; filter: brightness(1.08); }
    53% { opacity: 0.82; filter: brightness(0.92); }
    71% { opacity: 0.90; filter: brightness(1.02); }
    87% { opacity: 0.76; filter: brightness(0.90); }
    100% { opacity: 0.85; filter: brightness(1); }
}

@keyframes flicker2 {
    0% { opacity: 0.80; filter: brightness(0.98); }
    18% { opacity: 0.88; filter: brightness(1.04); }
    35% { opacity: 0.75; filter: brightness(0.92); }
    50% { opacity: 0.93; filter: brightness(1.06); }
    62% { opacity: 0.79; filter: brightness(0.94); }
    78% { opacity: 0.87; filter: brightness(1.01); }
    90% { opacity: 0.82; filter: brightness(0.96); }
    100% { opacity: 0.80; filter: brightness(0.98); }
}

@keyframes flicker3 {
    0% { opacity: 0.88; filter: brightness(1.02); }
    15% { opacity: 0.78; filter: brightness(0.93); }
    30% { opacity: 0.91; filter: brightness(1.05); }
    48% { opacity: 0.83; filter: brightness(0.97); }
    60% { opacity: 0.95; filter: brightness(1.08); }
    75% { opacity: 0.80; filter: brightness(0.91); }
    88% { opacity: 0.90; filter: brightness(1.03); }
    100% { opacity: 0.88; filter: brightness(1.02); }
}

.hex-cell.lit {
    opacity: 1;
}

.hex-surround.lit {
    animation: flicker1 3.7s ease-in-out infinite;
}

.hex-surround.lit:nth-child(3) {
    animation: flicker2 5.1s ease-in-out infinite;
}

.hex-surround.lit:nth-child(5) {
    animation: flicker3 4.3s ease-in-out infinite;
}

.hex-ambient.lit {
    animation: flicker2 5.1s ease-in-out infinite;
}

.hex-ambient.lit:nth-child(odd) {
    animation: flicker3 4.3s ease-in-out infinite;
}

/* ===== CHAMBER 1 — THRESHOLD ===== */

#cluster-threshold .hex-center {
    width: calc(var(--hex-size) * 1.8);
    height: calc(var(--hex-size) * 1.8 * 1.1547);
    z-index: 2;
}

#cluster-threshold .hex-center .hex-inner {
    background: radial-gradient(ellipse at center, rgba(212, 162, 78, 0.25) 0%, var(--deep-ground) 65%);
}

.hex-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: clamp(2rem, 5vw, 4rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--primary-amber);
    line-height: 1.1;
    opacity: 0;
    transition: opacity 3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hex-title.revealed {
    opacity: 1;
}

/* Surrounding hexagons positions around center */
#cluster-threshold .hex-surround:nth-child(2) { transform: translate(-120%, -55%); }
#cluster-threshold .hex-surround:nth-child(3) { transform: translate(0%, -90%); }
#cluster-threshold .hex-surround:nth-child(4) { transform: translate(120%, -55%); }
#cluster-threshold .hex-surround:nth-child(5) { transform: translate(120%, 55%); }
#cluster-threshold .hex-surround:nth-child(6) { transform: translate(0%, 90%); }
#cluster-threshold .hex-surround:nth-child(7) { transform: translate(-120%, 55%); }

/* ===== CHAMBER 2 — COLLECTION ===== */

.hex-phrase {
    font-family: 'Libre Baskerville', serif;
    font-weight: 400;
    font-size: clamp(0.8rem, 1.2vw, 1.05rem);
    font-style: italic;
    color: var(--honeycomb-light);
    line-height: 1.4;
    opacity: 0;
    transition: opacity 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hex-word.lit .hex-phrase {
    opacity: 1;
}

#cluster-collection .hex-word:nth-child(1) { transform: translate(-130%, -40%); }
#cluster-collection .hex-word:nth-child(2) { transform: translate(0%, -80%); }
#cluster-collection .hex-word:nth-child(3) { transform: translate(130%, -40%); }
#cluster-collection .hex-word:nth-child(4) { transform: translate(-65%, 10%); }
#cluster-collection .hex-word:nth-child(5) { transform: translate(65%, 10%); }
#cluster-collection .hex-word:nth-child(6) { transform: translate(-130%, 60%); }
#cluster-collection .hex-word:nth-child(7) { transform: translate(0%, 80%); }
#cluster-collection .hex-word:nth-child(8) { transform: translate(130%, 60%); }

/* ===== CHAMBER 3 — WORKSHOP ===== */

#cluster-workshop .hex-large {
    width: var(--hex-size-lg);
    height: calc(var(--hex-size-lg) * 1.1547);
    z-index: 2;
}

#cluster-workshop .hex-large .hex-inner {
    background: radial-gradient(ellipse at center, rgba(212, 162, 78, 0.12) 0%, rgba(26, 20, 16, 0.95) 65%);
    padding: 12%;
}

.hex-text-body {
    overflow: hidden;
}

.hex-text-body p {
    color: var(--parchment);
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(0.75rem, 1.1vw, 0.95rem);
    line-height: 1.72;
    margin-bottom: 0.8em;
    opacity: 0;
    transition: opacity 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hex-text-body p.revealed {
    opacity: 1;
}

#cluster-workshop .hex-ambient:nth-child(2) { transform: translate(-55%, -80%); }
#cluster-workshop .hex-ambient:nth-child(3) { transform: translate(55%, -80%); }
#cluster-workshop .hex-ambient:nth-child(4) { transform: translate(-70%, 50%); }
#cluster-workshop .hex-ambient:nth-child(5) { transform: translate(70%, 50%); }

.wax-drip {
    width: 40%;
    height: 80%;
    opacity: 0.3;
}

.wax-drip path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: drip 10s linear infinite;
}

@keyframes drip {
    0% { stroke-dashoffset: 200; }
    100% { stroke-dashoffset: 0; }
}

/* ===== CHAMBER 4 — MECHANISM ===== */

.hex-count {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: clamp(1.8rem, 4vw, 3.6rem);
    letter-spacing: 0.04em;
    color: var(--primary-amber);
    line-height: 1.1;
    display: block;
}

.hex-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 300;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--burnished-copper);
    margin-top: 0.3em;
    display: block;
}

#cluster-mechanism .hex-number:nth-child(1) { transform: translate(-65%, -60%); }
#cluster-mechanism .hex-number:nth-child(2) { transform: translate(65%, -60%); }
#cluster-mechanism .hex-number:nth-child(3) { transform: translate(0%, 0%); }
#cluster-mechanism .hex-number:nth-child(4) { transform: translate(-130%, 10%); }
#cluster-mechanism .hex-number:nth-child(5) { transform: translate(130%, 10%); }
#cluster-mechanism .hex-ambient:nth-child(6) { transform: translate(-65%, 70%); }
#cluster-mechanism .hex-ambient:nth-child(7) { transform: translate(65%, 70%); }

/* ===== CHAMBER 5 — CLOSE ===== */

#cluster-close .hex-close-cell:nth-child(1) { transform: translate(-65%, -60%); }
#cluster-close .hex-close-cell:nth-child(2) { transform: translate(65%, -60%); }
#cluster-close .hex-close-final { 
    width: calc(var(--hex-size) * 1.4);
    height: calc(var(--hex-size) * 1.4 * 1.1547);
    z-index: 2;
}
#cluster-close .hex-close-cell:nth-child(4) { transform: translate(-130%, 10%); }
#cluster-close .hex-close-cell:nth-child(5) { transform: translate(130%, 10%); }
#cluster-close .hex-close-cell:nth-child(6) { transform: translate(0%, 80%); }

.hex-final-word {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: clamp(2.5rem, 6vw, 5rem);
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: var(--primary-amber);
    line-height: 1.1;
    opacity: 0;
    transition: opacity 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hex-final-word.revealed {
    opacity: 1;
}

.final-candle {
    position: absolute;
    bottom: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background: var(--primary-amber);
    border-radius: 50%;
    transform: translate(-50%, 50%);
    opacity: 0;
    transition: opacity 2s ease-in 1.5s;
    box-shadow: 0 0 8px 2px rgba(212, 162, 78, 0.4), 0 0 20px 4px rgba(212, 162, 78, 0.15);
}

.final-candle.visible {
    opacity: 1;
}

/* ===== HEXAGONAL NAVIGATION ===== */

#hex-nav {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity 1.5s ease;
}

#hex-nav.visible {
    opacity: 1;
}

.nav-hex {
    width: 36px;
    height: 42px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--burnished-copper);
    cursor: pointer;
    position: relative;
    opacity: 0.5;
    transition: opacity 0.4s ease, background 0.4s ease;
    animation: flicker1 3.7s ease-in-out infinite;
}

.nav-hex:nth-child(2) {
    background: var(--primary-amber);
    animation: flicker2 5.1s ease-in-out infinite;
}

.nav-hex:nth-child(3) {
    background: var(--ember);
    animation: flicker3 4.3s ease-in-out infinite;
}

.nav-hex:nth-child(4) {
    background: var(--honeycomb-light);
    animation: flicker1 4.8s ease-in-out infinite;
}

.nav-hex:hover {
    opacity: 1;
}

.nav-hex.active {
    opacity: 1;
}

.nav-label {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%) rotate(-30deg);
    transform-origin: right center;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 300;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--burnished-copper);
    white-space: nowrap;
    margin-right: 0.8rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.nav-hex:hover .nav-label {
    opacity: 1;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
    :root {
        --hex-size: min(28vw, 160px);
        --hex-size-sm: min(20vw, 100px);
        --hex-size-lg: min(65vw, 300px);
    }
    
    #hex-nav {
        top: auto;
        bottom: 1rem;
        right: 50%;
        transform: translateX(50%);
        flex-direction: row;
    }
    
    .nav-label {
        right: 50%;
        top: auto;
        bottom: 100%;
        transform: translateX(50%) rotate(0deg);
        transform-origin: center bottom;
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
    
    #cluster-threshold .hex-surround:nth-child(2) { transform: translate(-100%, -50%); }
    #cluster-threshold .hex-surround:nth-child(3) { transform: translate(0%, -80%); }
    #cluster-threshold .hex-surround:nth-child(4) { transform: translate(100%, -50%); }
    #cluster-threshold .hex-surround:nth-child(5) { transform: translate(100%, 50%); }
    #cluster-threshold .hex-surround:nth-child(6) { transform: translate(0%, 80%); }
    #cluster-threshold .hex-surround:nth-child(7) { transform: translate(-100%, 50%); }
    
    .hex-text-body p {
        font-size: clamp(0.7rem, 2.5vw, 0.85rem);
    }
}