/* longitude.day - Fairycore Cartography of Time */
/* Colors: #fdf6ec (Parchment), #3d2e1f (Charcoal), #d4a574 (Brass), #f0b88a (Peach),
   #b8a0c8 (Lavender), #e08890 (Rose), #5c3d5e (Plum), #e8ddd0 (Mist), #f5ede0 (Warm) */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: clamp(15px, 1.8vw, 19px);
    line-height: 1.7;
    color: #3d2e1f;
    background: linear-gradient(to bottom, #fdf6ec, #f5ede0);
    overflow-x: hidden;
    min-height: 100vh;
}

/* ===== Dot Navigation ===== */
#dot-nav {
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d4a574;
    border: none;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
    box-shadow: 0 0 6px rgba(212, 165, 116, 0.4);
    padding: 0;
}

.dot.active {
    width: 10px;
    height: 10px;
    animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

/* ===== Sections ===== */
.section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* ===== Section 1: Meridian Gate ===== */
#meridian-gate {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.globe-main {
    position: absolute;
    width: 60vmin;
    height: 60vmin;
    opacity: 0.5;
}

.globe-rotation {
    transform-origin: 200px 200px;
    animation: globeRotate 120s linear infinite;
}

@keyframes globeRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.equator-line {
    animation: equatorPulse 4s ease-in-out infinite;
}

@keyframes equatorPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

.longitude-line {
    opacity: 0;
    animation: lineReveal 0.6s ease-in-out forwards;
}

.gate-text {
    position: relative;
    z-index: 2;
    text-align: center;
}

.domain-title {
    font-family: 'Baloo 2', cursive;
    font-weight: 700;
    font-size: clamp(48px, 8vw, 120px);
    letter-spacing: 0.02em;
    color: #3d2e1f;
    line-height: 1.1;
}

.domain-subtitle {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 2vw, 22px);
    color: #5c3d5e;
    margin-top: 12px;
    letter-spacing: 0.05em;
}

@keyframes lineReveal {
    from { opacity: 0; }
    to { opacity: 0.6; }
}

/* ===== Section 2: Bubble Atlas ===== */
#bubble-atlas {
    min-height: 100vh;
    position: relative;
    padding: 80px 60px;
}

.concentric-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 600px;
    opacity: 0.4;
    pointer-events: none;
}

.concentric-circles {
    width: 100%;
    height: auto;
}

.stars-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.star-shape {
    position: absolute;
    width: 6px;
    height: 6px;
    opacity: 0.3;
}

.star-shape svg {
    width: 100%;
    height: 100%;
}

.time-wave {
    position: absolute;
    bottom: 5%;
    left: 0;
    width: 100%;
    height: 40px;
    pointer-events: none;
}

.time-wave-clock {
    bottom: 3%;
}

#bubble-field {
    position: relative;
    width: 100%;
    min-height: 800px;
    height: auto;
}

.bubble {
    position: absolute;
    border-radius: 50%;
    border: 1px solid #d4a574;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    cursor: default;
    transition: transform 0.4s ease-in-out, background-color 0.4s ease-in-out;
    box-shadow: inset 0 2px 8px rgba(61, 46, 31, 0.06);
    perspective: 1000px;
}

.bubble-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.6s ease-in-out;
    transform-style: preserve-3d;
    position: relative;
}

.bubble:hover .bubble-inner {
    transform: rotateY(180deg);
}

.bubble-front,
.bubble-back {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    padding: 15px;
}

.bubble-front {
    flex-direction: column;
}

.bubble-back {
    transform: rotateY(180deg);
}

.bubble-text {
    font-family: 'Nunito', sans-serif;
    font-size: clamp(11px, 1.4vw, 15px);
    line-height: 1.5;
    color: #3d2e1f;
}

.bubble-sparkline {
    margin-top: 8px;
    opacity: 0.7;
}

.bubble:hover {
    transform: scale(1.15);
    z-index: 10;
}

@keyframes bubbleFloat1 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(20px, -15px); }
    50% { transform: translate(-10px, -25px); }
    75% { transform: translate(15px, -10px); }
}

@keyframes bubbleFloat2 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-25px, 10px); }
    50% { transform: translate(15px, 20px); }
    75% { transform: translate(-15px, -15px); }
}

@keyframes bubbleFloat3 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(10px, 20px); }
    50% { transform: translate(-20px, -10px); }
    75% { transform: translate(25px, 15px); }
}

@keyframes bubbleFloat4 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-15px, -20px); }
    50% { transform: translate(25px, 10px); }
    75% { transform: translate(-10px, 25px); }
}

/* ===== Section 3: Clock Garden ===== */
#clock-garden {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.section-title {
    font-family: 'Baloo 2', cursive;
    font-weight: 600;
    font-size: clamp(28px, 4vw, 56px);
    letter-spacing: 0.02em;
    color: #3d2e1f;
    text-align: center;
    margin-bottom: 30px;
}

.clock-container {
    position: relative;
    width: 60vmin;
    height: 60vmin;
}

.clock-face {
    width: 100%;
    height: 100%;
}

.clock-rotation {
    transform-origin: 300px 300px;
    animation: clockRotate 360s linear infinite;
}

@keyframes clockRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.clock-labels {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.clock-label {
    position: absolute;
    transform: translate(-50%, -50%);
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(10px, 1.2vw, 13px);
    color: #5c3d5e;
    letter-spacing: 0.04em;
    white-space: nowrap;
    animation: labelFloat 25s ease-in-out infinite;
}

.clock-label:nth-child(2n) {
    animation-duration: 30s;
    animation-direction: reverse;
}

.clock-label:nth-child(3n) {
    animation-duration: 22s;
}

@keyframes labelFloat {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(-6px); }
}

/* ===== Section 4: Meridian Stories ===== */
#meridian-stories {
    min-height: 100vh;
    padding: 80px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stories-container {
    position: relative;
    width: 100%;
    max-width: 1100px;
    min-height: 700px;
}

.card {
    position: absolute;
    width: 320px;
    height: 420px;
    perspective: 1000px;
    cursor: pointer;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease-in-out;
    transform-style: preserve-3d;
}

.card:hover .card-inner {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.card-front {
    background: #fdf6ec;
    border: 1px solid #d4a574;
    box-shadow: 0 4px 20px rgba(61, 46, 31, 0.08);
}

.card-back {
    background: rgba(184, 160, 200, 0.12);
    background-color: #fdf6ec;
    border: 1px solid #b8a0c8;
    transform: rotateY(180deg);
    box-shadow: 0 4px 20px rgba(92, 61, 94, 0.1);
    overflow: hidden;
}

.card-back p {
    font-size: clamp(12px, 1.3vw, 15px);
    line-height: 1.6;
    color: #3d2e1f;
    margin-bottom: 16px;
}

.card-motif {
    width: 80px;
    height: 80px;
    margin-bottom: 24px;
}

.card-motif svg {
    width: 100%;
    height: 100%;
}

.card h3 {
    font-family: 'Baloo 2', cursive;
    font-weight: 600;
    font-size: clamp(20px, 2.5vw, 28px);
    color: #3d2e1f;
    text-align: center;
    margin-bottom: 8px;
}

.card-date {
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(11px, 1.2vw, 14px);
    color: #5c3d5e;
    letter-spacing: 0.04em;
}

.card-viz {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}

/* ===== Section 5: Departure ===== */
#departure {
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.departure-content {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.globe-small {
    width: 20vmin;
    height: 20vmin;
    opacity: 0.7;
    margin-bottom: 20px;
}

.globe-small .globe-rotation {
    transform-origin: 200px 200px;
    animation: globeRotate 120s linear infinite;
}

.globe-small .longitude-line {
    opacity: 1;
}

.departure-title {
    font-family: 'Baloo 2', cursive;
    font-weight: 700;
    font-size: clamp(28px, 4vw, 56px);
    color: #3d2e1f;
    letter-spacing: 0.02em;
}

.departure-subtitle {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 1.8vw, 20px);
    color: #5c3d5e;
    margin-top: 8px;
    letter-spacing: 0.03em;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    #dot-nav {
        left: 10px;
    }

    #bubble-atlas {
        padding: 40px 20px;
    }

    .card {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100%;
        max-width: 320px;
        margin: 20px auto;
    }

    .stories-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: auto;
    }

    .clock-container {
        width: 80vmin;
        height: 80vmin;
    }

    .clock-label {
        font-size: 10px;
    }
}