/* mysterious.day - Pixel Art Diorama meets Lucid Dream */
/* Colors: #1a1520 #2d2235 #5e4b6e #e8d5c4 #c9a87c #a89b8e #f0c674 #d4786a */

@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&family=Tenor+Sans&family=Karla:wght@300;400&display=block');

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background: #1a1520;
    color: #e8d5c4;
    font-family: 'Karla', sans-serif;
    font-weight: 300;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ============================================
   FOG OVERLAY
   ============================================ */

#fog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    background: radial-gradient(ellipse at 50% 30%, transparent 40%, rgba(26, 21, 32, 0.6) 100%);
}

/* ============================================
   FIREFLY PARTICLES
   ============================================ */

#fireflies {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
    overflow: hidden;
}

.firefly {
    position: absolute;
    border-radius: 50%;
    background: #f0c674;
    animation: firefly-drift var(--drift-duration, 25s) linear infinite,
               firefly-glow var(--glow-duration, 4s) ease-in-out infinite alternate;
    animation-delay: var(--drift-delay, 0s), var(--glow-delay, 0s);
}

@keyframes firefly-drift {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(var(--drift-x1, 50px), var(--drift-y1, -100px));
    }
    50% {
        transform: translate(var(--drift-x2, -30px), var(--drift-y2, -200px));
    }
    75% {
        transform: translate(var(--drift-x3, 70px), var(--drift-y3, -300px));
    }
    100% {
        transform: translate(var(--drift-x4, 0px), var(--drift-y4, -400px));
    }
}

@keyframes firefly-glow {
    0% { opacity: 0.15; }
    100% { opacity: 0.8; }
}

/* ============================================
   MOMENT 1: THE THRESHOLD
   ============================================ */

#threshold {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #1a1520;
}

#pixel-bloom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: bloom-reveal 3s ease-out 1s forwards;
}

@keyframes bloom-reveal {
    0% {
        opacity: 0;
        clip-path: circle(2px at 50% 50%);
    }
    10% {
        opacity: 1;
        clip-path: circle(10px at 50% 50%);
    }
    20% {
        clip-path: circle(26px at 50% 50%);
    }
    30% {
        clip-path: circle(50px at 50% 50%);
    }
    40% {
        clip-path: circle(82px at 50% 50%);
    }
    50% {
        clip-path: circle(130px at 50% 50%);
    }
    60% {
        clip-path: circle(200px at 50% 50%);
    }
    70% {
        clip-path: circle(320px at 50% 50%);
    }
    80% {
        clip-path: circle(500px at 50% 50%);
    }
    90% {
        clip-path: circle(800px at 50% 50%);
    }
    100% {
        opacity: 1;
        clip-path: circle(150% at 50% 50%);
    }
}

#pixel-landscape {
    position: relative;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

.landscape-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.landscape-sky {
    background: linear-gradient(
        180deg,
        #1a1520 0%,
        #2d2235 40%,
        #5e4b6e 70%,
        #c9a87c 95%,
        #f0c674 100%
    );
    opacity: 0.6;
}

.landscape-stars {
    background:
        radial-gradient(1px 1px at 15% 12%, #f0c674 50%, transparent 50%),
        radial-gradient(1px 1px at 35% 8%, #e8d5c4 50%, transparent 50%),
        radial-gradient(1px 1px at 55% 18%, #f0c674 50%, transparent 50%),
        radial-gradient(1px 1px at 72% 6%, #c9a87c 50%, transparent 50%),
        radial-gradient(1px 1px at 88% 14%, #f0c674 50%, transparent 50%),
        radial-gradient(1px 1px at 25% 22%, #e8d5c4 50%, transparent 50%),
        radial-gradient(1px 1px at 45% 4%, #f0c674 50%, transparent 50%),
        radial-gradient(1px 1px at 65% 25%, #c9a87c 50%, transparent 50%),
        radial-gradient(1px 1px at 82% 10%, #f0c674 50%, transparent 50%),
        radial-gradient(2px 2px at 92% 20%, #f0c674 50%, transparent 50%);
    animation: star-twinkle 6s ease-in-out infinite alternate;
}

@keyframes star-twinkle {
    0% { opacity: 0.5; }
    50% { opacity: 0.8; }
    100% { opacity: 0.5; }
}

.landscape-mountains {
    background:
        linear-gradient(165deg, transparent 48%, #2d2235 48%, #2d2235 52%, transparent 52%),
        linear-gradient(195deg, transparent 43%, #2d2235 43%, #2d2235 48%, transparent 48%),
        linear-gradient(170deg, transparent 52%, #1a1520 52%);
    opacity: 0.8;
}

.landscape-town {
    background:
        linear-gradient(to top, #1a1520 0%, #1a1520 18%, transparent 18%),
        linear-gradient(to top, #2d2235 0%, #2d2235 22%, transparent 22%);
}

.landscape-windows {
    background:
        radial-gradient(2px 2px at 30% 82%, #f0c674 50%, transparent 50%),
        radial-gradient(2px 2px at 35% 80%, #f0c674 50%, transparent 50%),
        radial-gradient(2px 2px at 42% 83%, #c9a87c 50%, transparent 50%),
        radial-gradient(2px 2px at 50% 81%, #f0c674 50%, transparent 50%),
        radial-gradient(2px 2px at 58% 82%, #f0c674 50%, transparent 50%),
        radial-gradient(2px 2px at 63% 84%, #c9a87c 50%, transparent 50%),
        radial-gradient(2px 2px at 70% 80%, #f0c674 50%, transparent 50%),
        radial-gradient(2px 2px at 46% 85%, #f0c674 50%, transparent 50%);
    animation: window-flicker 8s ease-in-out infinite;
}

@keyframes window-flicker {
    0%, 100% { opacity: 0.7; }
    30% { opacity: 0.9; }
    50% { opacity: 0.6; }
    70% { opacity: 0.85; }
}

/* Title Container */

#title-container {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 2rem;
}

#domain-title {
    font-family: 'Silkscreen', cursive;
    font-size: clamp(4rem, 10vw, 8rem);
    font-weight: 400;
    letter-spacing: 0.15em;
    word-spacing: 0.5em;
    line-height: 1.2;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    image-rendering: pixelated;
}

#domain-title .letter {
    display: inline-block;
    opacity: 0;
    color: #e8d5c4;
    animation: letter-reveal 600ms ease-out forwards;
    animation-delay: calc(3s + var(--i) * 150ms);
}

#domain-title .letter.dot {
    color: #a89b8e;
}

#domain-title .letter.day {
    color: #f0c674;
}

@keyframes letter-reveal {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

#subtitle {
    font-family: 'Karla', sans-serif;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.3vw, 1.15rem);
    color: #a89b8e;
    opacity: 0;
    letter-spacing: 0.02em;
    line-height: 1.8;
    margin-top: 1.5rem;
    animation: subtitle-reveal 1200ms ease-out forwards;
    animation-delay: 5.5s;
}

@keyframes subtitle-reveal {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }
    100% {
        opacity: 0.6;
        transform: translateY(0);
    }
}

/* ============================================
   MOMENT 2: THE CONSTELLATION
   ============================================ */

#constellation {
    position: relative;
    min-height: 100vh;
    padding: 8rem 2rem 6rem;
}

#card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Staggered constellation offsets */
.mystery-card:nth-child(2n) {
    margin-top: 3rem;
}

.mystery-card:nth-child(3n) {
    margin-top: -1.5rem;
}

.mystery-card:nth-child(5n) {
    margin-top: 2rem;
}

.mystery-card {
    position: relative;
    background: #2d2235;
    border: 2px solid #5e4b6e;
    border-radius: 0;
    padding: 0;
    transform: translateZ(0) rotate(var(--card-tilt, 0deg));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: box-shadow 0.5s ease, transform 0.5s ease;
    overflow: hidden;
}

.mystery-card.revealed {
    opacity: 1;
    animation: card-reveal 800ms ease-out forwards;
}

@keyframes card-reveal {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.96) rotate(var(--card-tilt, 0deg));
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(var(--card-tilt, 0deg));
    }
}

.mystery-card:hover {
    box-shadow: 0 30px 80px rgba(240, 198, 116, 0.15);
    transform: translateZ(0) rotate(var(--card-tilt, 0deg)) translateY(-4px);
}

.mystery-card:hover .star-pixel[data-glow='true'] {
    fill: #f0c674;
    transition: fill 0.6s ease;
}

/* Card Border Frame */

.card-border-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.border-ornament {
    position: absolute;
    opacity: 0.6;
}

.border-ornament.top-left { top: 4px; left: 4px; }
.border-ornament.top-right { top: 4px; right: 4px; }
.border-ornament.bottom-left { bottom: 4px; left: 4px; }
.border-ornament.bottom-right { bottom: 4px; right: 4px; }

/* Card Vignette */

.card-vignette {
    width: 100%;
    border-bottom: 1px solid #5e4b6e;
    position: relative;
    overflow: hidden;
}

.card-vignette::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent 70%, rgba(45, 34, 53, 0.4) 100%);
    pointer-events: none;
}

.pixel-art {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.pixel-art .star-pixel {
    transition: fill 0.6s ease;
}

/* Card Text */

.card-title {
    font-family: 'Tenor Sans', serif;
    font-weight: 400;
    font-size: clamp(1.4rem, 2.5vw, 2.2rem);
    letter-spacing: 0.06em;
    color: #c9a87c;
    padding: 1.2rem 1.5rem 0.5rem;
    line-height: 1.3;
}

.card-caption {
    font-family: 'Karla', sans-serif;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.3vw, 1.15rem);
    color: #a89b8e;
    opacity: 0.85;
    line-height: 1.8;
    letter-spacing: 0.02em;
    padding: 0 1.5rem 1.5rem;
}

/* Dashed border overlay on cards */
.mystery-card::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border: 1px dashed #5e4b6e;
    opacity: 0.25;
    pointer-events: none;
    z-index: 4;
}

/* ============================================
   MOMENT 3: THE FADE
   ============================================ */

#the-fade {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#closing-line {
    font-family: 'Tenor Sans', serif;
    font-weight: 400;
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    color: #c9a87c;
    text-align: center;
    letter-spacing: 0.06em;
    line-height: 1.8;
    padding: 2rem;
    opacity: 0;
    transition: opacity 1.2s ease, filter 0.5s ease;
}

#closing-line.visible {
    opacity: 1;
}

/* ============================================
   SCROLLBAR
   ============================================ */

::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: #1a1520;
}

::-webkit-scrollbar-thumb {
    background: #5e4b6e;
}

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

@media (max-width: 768px) {
    #card-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 0 1rem;
    }

    .mystery-card:nth-child(2n),
    .mystery-card:nth-child(3n),
    .mystery-card:nth-child(5n) {
        margin-top: 0;
    }

    #constellation {
        padding: 4rem 1rem 3rem;
    }

    #domain-title {
        letter-spacing: 0.08em;
    }
}

@media (max-width: 480px) {
    #domain-title {
        font-size: clamp(2.5rem, 12vw, 4rem);
    }
}