/* ============================================================
   martiallaw.wiki - Corporate Horizontal Dossier
   Color Palette:
     #1B2C5A - Corporate Dark Blue (dark panels)
     #F5F7FA - Corporate Light (light panels)
     #FFFFFF - White (text on dark)
     #7B9BD4 - Corporate Blue Accent (interactive)
     #A0B4D4 - Light Blue (secondary text)
     #D0D8E4 - Border Gray (card borders)
     #2A3A5C - Dark Text (text on light)
     #5A8AC4 - Highlight Blue (hover states)
   Font: Nunito (Google Fonts)
   ============================================================ */

/* Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow: hidden;
    height: 100%;
}

body {
    font-family: 'Nunito', sans-serif;
    background: #1B2C5A;
    color: #2A3A5C;
    overflow: hidden;
    height: 100%;
    cursor: none;
}

/* ============================================================
   Cursor Follow Dot
   ============================================================ */
#cursor-dot {
    position: fixed;
    width: 8px;
    height: 8px;
    background: #7B9BD4;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}

#cursor-dot.expanded {
    width: 20px;
    height: 20px;
    box-shadow: 0 0 30px rgba(123, 155, 212, 0.3);
}

/* ============================================================
   Progress Bars (Top & Bottom)
   ============================================================ */
.progress-bar {
    position: fixed;
    left: 0;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, #7B9BD4, #5A8AC4, #1B2C5A);
    z-index: 9999;
    transition: width 0.1s linear;
    pointer-events: none;
}

#progress-top {
    top: 0;
}

#progress-bottom {
    bottom: 0;
}

/* ============================================================
   Horizontal Scroll Container
   ============================================================ */
#scroll-container {
    display: flex;
    width: max-content;
    height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

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

/* ============================================================
   Panels (Base)
   ============================================================ */
.panel {
    width: 100vw;
    height: 100vh;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
}

.panel-index {
    width: 80vw;
}

/* Panel Backgrounds */
.panel-title {
    background: #1B2C5A;
}

.panel-light {
    background: #F5F7FA;
}

.panel-dark {
    background: #1B2C5A;
}

.panel-index {
    background: #F5F7FA;
}

/* ============================================================
   Organic Blob Accents
   ============================================================ */
.blob {
    position: absolute;
    width: 300px;
    height: 300px;
    background: #7B9BD4;
    opacity: 0.08;
    border-radius: 40% 60% 55% 45% / 60% 40% 65% 35%;
    animation: blobMorph 12s ease-in-out infinite;
    pointer-events: none;
}

.blob-top-left {
    top: -80px;
    left: -80px;
}

.blob-bottom-right {
    bottom: -80px;
    right: -80px;
    animation-delay: -6s;
}

@keyframes blobMorph {
    0%, 100% {
        border-radius: 40% 60% 55% 45% / 60% 40% 65% 35%;
    }
    33% {
        border-radius: 55% 45% 40% 60% / 45% 55% 35% 65%;
    }
    66% {
        border-radius: 45% 55% 60% 40% / 55% 45% 40% 60%;
    }
}

/* ============================================================
   Title Slide (Panel 1)
   ============================================================ */
.title-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding-top: 0;
    margin-top: -10vh;
}

.title-main {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: clamp(3rem, 6vw, 5rem);
    color: #FFFFFF;
    letter-spacing: 0.04em;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 400ms ease, transform 400ms ease;
}

.title-main.visible {
    opacity: 1;
    transform: translateY(0);
}

.title-rule {
    width: 0;
    height: 1px;
    background: #FFFFFF;
    margin: 1.2rem 0;
    transition: width 300ms ease 400ms;
}

.title-rule.visible {
    width: 60%;
}

.title-domain {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    color: #7B9BD4;
    opacity: 0;
    transition: opacity 200ms ease 700ms;
}

.title-domain.visible {
    opacity: 1;
}

.title-subtitle {
    font-family: 'Nunito', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    color: #A0B4D4;
    margin-top: 0.5rem;
    opacity: 0;
    transition: opacity 200ms ease 700ms;
}

.title-subtitle.visible {
    opacity: 1;
}

/* Scroll Hint Arrow */
.scroll-hint {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    animation: pulseRight 2s ease-in-out infinite;
    opacity: 0.7;
}

@keyframes pulseRight {
    0%, 100% {
        transform: translateY(-50%) translateX(0);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-50%) translateX(10px);
        opacity: 1;
    }
}

/* ============================================================
   Briefing Panels - Two Column Layout
   ============================================================ */
.panel-content {
    width: 90%;
    max-width: 1200px;
    padding: 3rem 2rem;
}

.two-column {
    display: flex;
    align-items: center;
    gap: 4rem;
}

.col-text {
    flex: 0 0 55%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 400ms ease, transform 400ms ease;
}

.col-text.visible {
    opacity: 1;
    transform: translateX(0);
}

.col-graphic {
    flex: 0 0 45%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Labels */
.label {
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5A8AC4;
}

.light-label {
    color: #A0B4D4;
}

/* Section Titles */
.section-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    line-height: 1.2;
}

.dark-text {
    color: #2A3A5C;
}

.light-text {
    color: #FFFFFF;
}

/* Body Text */
.body-text {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: clamp(0.9rem, 1.05vw, 1rem);
    line-height: 1.8;
}

.light-body {
    color: #A0B4D4;
}

/* Statistics */
.stat-block {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.stat-number {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
}

.stat-label {
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5A8AC4;
}

/* ============================================================
   SVG Infographics
   ============================================================ */
.infographic {
    width: 100%;
    max-width: 400px;
    height: auto;
}

.svg-shape {
    opacity: 0;
    transform-origin: center;
    transform: scale(0);
    transition: opacity 300ms ease, transform 300ms ease;
}

.col-graphic.visible .svg-shape {
    opacity: 1;
    transform: scale(1);
}

/* Stagger each SVG shape */
.col-graphic.visible .svg-shape:nth-child(1) { transition-delay: 0ms; }
.col-graphic.visible .svg-shape:nth-child(2) { transition-delay: 100ms; }
.col-graphic.visible .svg-shape:nth-child(3) { transition-delay: 200ms; }
.col-graphic.visible .svg-shape:nth-child(4) { transition-delay: 300ms; }
.col-graphic.visible .svg-shape:nth-child(5) { transition-delay: 400ms; }
.col-graphic.visible .svg-shape:nth-child(6) { transition-delay: 500ms; }
.col-graphic.visible .svg-shape:nth-child(7) { transition-delay: 600ms; }
.col-graphic.visible .svg-shape:nth-child(8) { transition-delay: 700ms; }
.col-graphic.visible .svg-shape:nth-child(9) { transition-delay: 800ms; }
.col-graphic.visible .svg-shape:nth-child(10) { transition-delay: 900ms; }
.col-graphic.visible .svg-shape:nth-child(11) { transition-delay: 1000ms; }
.col-graphic.visible .svg-shape:nth-child(12) { transition-delay: 1100ms; }
.col-graphic.visible .svg-shape:nth-child(13) { transition-delay: 1200ms; }
.col-graphic.visible .svg-shape:nth-child(14) { transition-delay: 1300ms; }
.col-graphic.visible .svg-shape:nth-child(15) { transition-delay: 1400ms; }
.col-graphic.visible .svg-shape:nth-child(16) { transition-delay: 1500ms; }
.col-graphic.visible .svg-shape:nth-child(17) { transition-delay: 1600ms; }
.col-graphic.visible .svg-shape:nth-child(18) { transition-delay: 1700ms; }
.col-graphic.visible .svg-shape:nth-child(19) { transition-delay: 1800ms; }
.col-graphic.visible .svg-shape:nth-child(20) { transition-delay: 1900ms; }
.col-graphic.visible .svg-shape:nth-child(21) { transition-delay: 2000ms; }
.col-graphic.visible .svg-shape:nth-child(22) { transition-delay: 2100ms; }
.col-graphic.visible .svg-shape:nth-child(23) { transition-delay: 2200ms; }
.col-graphic.visible .svg-shape:nth-child(24) { transition-delay: 2300ms; }
.col-graphic.visible .svg-shape:nth-child(25) { transition-delay: 2400ms; }

/* SVG text should not be affected by scale(0) - keep them visible once parent is visible */
.infographic text {
    opacity: 0;
    transition: opacity 300ms ease;
}

.col-graphic.visible .infographic text {
    opacity: 1;
}

/* ============================================================
   Index Panel
   ============================================================ */
.index-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 720px;
}

.index-card {
    width: 160px;
    height: 120px;
    background: #FFFFFF;
    border: 1px solid #D0D8E4;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.index-card:hover {
    border-color: #5A8AC4;
    box-shadow: 0 4px 20px rgba(90, 138, 196, 0.15);
    transform: translateY(-2px);
}

.card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    color: #2A3A5C;
}

/* ============================================================
   Responsive adjustments
   ============================================================ */
@media (max-width: 900px) {
    .two-column {
        flex-direction: column;
        gap: 2rem;
    }

    .col-text {
        flex: 1 1 auto;
    }

    .col-graphic {
        flex: 1 1 auto;
    }

    .infographic {
        max-width: 280px;
    }

    .card-grid {
        justify-content: center;
    }

    .blob {
        width: 200px;
        height: 200px;
    }
}