/* ===================================================
   mujun.day — Contradiction
   Gold-Black Luxury Aesthetic with Zen Philosophy
   Interaction (Subtle Cursor Interaction) uses IntersectionObserver`. When a panel enters the viewport:
   Space Grotesk headlines and Space Grotesk headlines. Body text is set at weight 400.
   Font source note: Space Grotesk" (Google Fonts.
   =================================================== */

:root {
    /* Primary Colors */
    --primary-bg: #0A0A0A;
    --secondary-bg: #1A1714;
    --primary-accent: #CFAB57;
    --secondary-accent: #D4A843;
    --tertiary-accent: #E8D5A3;
    --body-text: #B8B0A0;
    --muted-element: #4A443C;
    --highlight-surface: #2C2410;
    --dark-gold: #8B7333;

    /* Fonts */
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --font-accent: 'Noto Serif JP', serif;

    /* Animations */
    --ease-in-out: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-smooth: cubic-bezier(0.25, 0, 0.25, 1);
}

/* ===================================================
   Global Styles
   =================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--primary-bg);
    color: var(--body-text);
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    line-height: 1.72;
    overflow-x: hidden;
    cursor: crosshair;
}

.scroll-veil {
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    background:
        radial-gradient(circle at var(--cursor-x, 50%) var(--cursor-y, 50%), rgba(232, 213, 163, 0.08), transparent 16rem),
        linear-gradient(90deg, rgba(10, 10, 10, 0.82), transparent 18%, transparent 82%, rgba(10, 10, 10, 0.82));
    mix-blend-mode: screen;
    opacity: 0.55;
}

/* ===================================================
   Container and Panel System
   =================================================== */

.container {
    width: 100%;
    min-height: 100vh;
    position: relative;
}

.byobu-panel {
    position: relative;
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 3fr 1fr 2fr;
    grid-template-rows: 1fr;
    gap: 0;
    align-items: center;
    justify-content: stretch;
    overflow: hidden;
    isolation: isolate;
}

.byobu-panel:nth-child(even) {
    background-color: var(--secondary-bg);
}

/* ===================================================
   Grid Overlay - Architectural Lattice
   =================================================== */

.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(207, 171, 87, 0.06) 0px,
            rgba(207, 171, 87, 0.06) 1px,
            transparent 1px,
            transparent calc(100% / 6)
        ),
        repeating-linear-gradient(
            0deg,
            rgba(207, 171, 87, 0.06) 0px,
            rgba(207, 171, 87, 0.06) 1px,
            transparent 1px,
            transparent 120px
        );
    z-index: 1;
    pointer-events: none;
    opacity: 0;
}

@keyframes grid-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.08;
    }
}

/* ===================================================
   Gradient Mesh Background
   =================================================== */

.gradient-mesh {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0;
    background-size: 120% 120%;
    transition: background-position 2s var(--ease-smooth), transform 900ms var(--ease-smooth);
}

@keyframes mesh-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#mesh-1 {
    background:
        radial-gradient(ellipse 600px 400px at 30% 20%, rgba(207, 171, 87, 0.12), transparent),
        radial-gradient(ellipse 300px 500px at 70% 60%, rgba(212, 168, 67, 0.08), transparent),
        linear-gradient(135deg, rgba(207, 171, 87, 0.04) 0%, rgba(232, 213, 163, 0.02) 40%, rgba(212, 168, 67, 0.03) 70%, rgba(139, 115, 51, 0.02) 100%),
        radial-gradient(ellipse 800px 200px at 50% 80%, rgba(44, 36, 16, 0.4), transparent),
        var(--primary-bg);
}

#mesh-2 {
    background:
        radial-gradient(ellipse 500px 350px at 50% 40%, rgba(212, 168, 67, 0.1), transparent),
        radial-gradient(ellipse 400px 300px at 20% 70%, rgba(207, 171, 87, 0.08), transparent),
        conic-gradient(from 120deg at 30% 30%, rgba(212, 168, 67, 0.04) 0deg, transparent 120deg),
        radial-gradient(ellipse 600px 150px at 70% 20%, rgba(139, 115, 51, 0.06), transparent),
        var(--primary-bg);
}

#mesh-3 {
    background:
        radial-gradient(ellipse 550px 380px at 70% 30%, rgba(207, 171, 87, 0.11), transparent),
        radial-gradient(ellipse 320px 450px at 40% 70%, rgba(212, 168, 67, 0.09), transparent),
        conic-gradient(from 240deg at 60% 50%, rgba(207, 171, 87, 0.04) 0deg, transparent 100deg),
        radial-gradient(ellipse 700px 180px at 30% 85%, rgba(44, 36, 16, 0.35), transparent),
        var(--primary-bg);
}

#mesh-4 {
    background:
        radial-gradient(ellipse 480px 320px at 45% 35%, rgba(212, 168, 67, 0.12), transparent),
        radial-gradient(ellipse 350px 380px at 75% 65%, rgba(207, 171, 87, 0.07), transparent),
        conic-gradient(from 180deg at 50% 40%, rgba(139, 115, 51, 0.05) 0deg, transparent 90deg),
        radial-gradient(ellipse 650px 160px at 60% 15%, rgba(212, 168, 67, 0.08), transparent),
        var(--primary-bg);
}

#mesh-5 {
    background:
        radial-gradient(ellipse 520px 360px at 35% 45%, rgba(207, 171, 87, 0.1), transparent),
        radial-gradient(ellipse 300px 420px at 65% 25%, rgba(212, 168, 67, 0.09), transparent),
        conic-gradient(from 315deg at 70% 60%, rgba(207, 171, 87, 0.04) 0deg, transparent 110deg),
        radial-gradient(ellipse 720px 190px at 40% 80%, rgba(44, 36, 16, 0.38), transparent),
        var(--primary-bg);
}

#mesh-6 {
    background:
        radial-gradient(ellipse 490px 340px at 55% 50%, rgba(212, 168, 67, 0.11), transparent),
        radial-gradient(ellipse 330px 460px at 25% 30%, rgba(207, 171, 87, 0.08), transparent),
        conic-gradient(from 90deg at 40% 70%, rgba(139, 115, 51, 0.05) 0deg, transparent 85deg),
        radial-gradient(ellipse 680px 170px at 75% 25%, rgba(212, 168, 67, 0.07), transparent),
        var(--primary-bg);
}

#mesh-7 {
    background:
        radial-gradient(ellipse 540px 370px at 40% 25%, rgba(207, 171, 87, 0.12), transparent),
        radial-gradient(ellipse 310px 390px at 70% 75%, rgba(212, 168, 67, 0.08), transparent),
        conic-gradient(from 135deg at 50% 50%, rgba(207, 171, 87, 0.04) 0deg, transparent 95deg),
        radial-gradient(ellipse 740px 200px at 50% 90%, rgba(44, 36, 16, 0.36), transparent),
        var(--primary-bg);
}

#mesh-8 {
    background:
        radial-gradient(ellipse 460px 330px at 60% 40%, rgba(212, 168, 67, 0.1), transparent),
        radial-gradient(ellipse 340px 410px at 30% 60%, rgba(207, 171, 87, 0.09), transparent),
        conic-gradient(from 225deg at 70% 30%, rgba(139, 115, 51, 0.05) 0deg, transparent 105deg),
        radial-gradient(ellipse 620px 155px at 35% 15%, rgba(212, 168, 67, 0.08), transparent),
        var(--primary-bg);
}

#mesh-9 {
    background:
        radial-gradient(ellipse 530px 350px at 25% 55%, rgba(207, 171, 87, 0.11), transparent),
        radial-gradient(ellipse 320px 430px at 80% 20%, rgba(212, 168, 67, 0.09), transparent),
        conic-gradient(from 300deg at 30% 70%, rgba(207, 171, 87, 0.04) 0deg, transparent 100deg),
        radial-gradient(ellipse 700px 185px at 65% 75%, rgba(44, 36, 16, 0.37), transparent),
        var(--primary-bg);
}

#mesh-10 {
    background:
        radial-gradient(ellipse 510px 360px at 50% 30%, rgba(212, 168, 67, 0.12), transparent),
        radial-gradient(ellipse 290px 400px at 20% 70%, rgba(207, 171, 87, 0.08), transparent),
        conic-gradient(from 45deg at 60% 40%, rgba(139, 115, 51, 0.05) 0deg, transparent 88deg),
        radial-gradient(ellipse 660px 175px at 45% 85%, rgba(212, 168, 67, 0.07), transparent),
        var(--primary-bg);
}

/* ===================================================
   Panel Content Structure
   =================================================== */

.panel-content {
    position: relative;
    z-index: 2;
    grid-column: 1 / -1;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 3fr 1fr 2fr;
    padding: 8vh 4vw;
    pointer-events: none;
}

.panel-content::before,
.panel-content::after {
    content: '';
    position: absolute;
    z-index: -1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(207, 171, 87, 0.38), rgba(232, 213, 163, 0.22), transparent);
    transform-origin: left center;
    opacity: 0;
}

.panel-content::before {
    top: 26vh;
    left: 4vw;
    width: 35vw;
}

.panel-content::after {
    right: 5vw;
    bottom: 24vh;
    width: 42vw;
}

.content-upper-left {
    grid-column: 1 / 3;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1.5rem;
}

.content-lower-right {
    grid-column: 4 / 7;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
}

/* ===================================================
   Typography
   =================================================== */

.headline {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 8vw, 8rem);
    font-weight: 700;
    color: var(--primary-accent);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 0.94;
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    text-shadow: 0 0 32px rgba(207, 171, 87, 0.16);
}

#panel-1 .headline,
#panel-3 .headline,
#panel-5 .headline,
#panel-7 .headline,
#panel-8 .headline {
    font-family: var(--font-accent);
    font-weight: 700;
    text-transform: none;
}

@keyframes headline-reveal {
    from {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
    }
    to {
        opacity: 1;
        clip-path: inset(0 0% 0 0);
    }
}

.subheading {
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    font-weight: 400;
    color: var(--body-text);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 0;
}

.annotation {
    font-family: var(--font-accent);
    font-size: clamp(0.85rem, 1vw, 1.05rem);
    font-weight: 400;
    color: rgba(212, 168, 67, 0.7);
    letter-spacing: 0.12em;
    margin-top: 1rem;
    opacity: 0;
    clip-path: inset(100% 0 0 0);
}

@keyframes annotation-reveal {
    from {
        opacity: 0;
        clip-path: inset(100% 0 0 0);
    }
    to {
        opacity: 1;
        clip-path: inset(0% 0 0 0);
    }
}

.body-text {
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    font-weight: 400;
    color: var(--body-text);
    line-height: 1.72;
    max-width: 65ch;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: auto;
}

@keyframes text-fade-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================================
   Z-Pattern Diagonal
   =================================================== */

.z-diagonal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    transform-origin: center;
    transition: transform 900ms var(--ease-smooth);
}

.glyph-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transform: translateY(18px) scale(0.98);
}

.glyph-svg {
    position: absolute;
    width: min(34vw, 420px);
    height: min(34vw, 420px);
    overflow: visible;
    filter: drop-shadow(0 0 18px rgba(207, 171, 87, 0.10));
}

.glyph-spear,
.glyph-shield {
    stroke: #CFAB57;
    fill: none;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.glyph-shield {
    stroke: rgba(232, 213, 163, 0.52);
}

.glyph-spear {
    stroke: rgba(207, 171, 87, 0.72);
}

.glyph-1 { right: 8vw; top: 10vh; transform: rotate(-18deg); }
.glyph-2 { left: 10vw; bottom: 9vh; transform: rotate(24deg) scale(0.84); }
.glyph-3 { right: 14vw; bottom: 12vh; transform: rotate(8deg) scale(1.08); }
.glyph-4 { left: 42vw; top: 8vh; transform: rotate(-34deg) scale(0.72); }
.glyph-5 { right: 6vw; top: 38vh; transform: rotate(31deg) scale(0.92); }
.glyph-6 { left: 7vw; bottom: 16vh; transform: rotate(-9deg) scale(0.86); }
.glyph-7 { right: 18vw; top: 18vh; transform: rotate(47deg) scale(0.78); }
.glyph-8 { left: 45vw; bottom: 8vh; transform: rotate(-27deg) scale(1.12); }
.glyph-9 { right: 8vw; bottom: 6vh; transform: rotate(13deg) scale(0.82); }
.glyph-10 { left: 12vw; top: 13vh; transform: rotate(-41deg) scale(1.04); }

/* ===================================================
   Scroll-Linked Animations
   =================================================== */

.byobu-panel.in-view .grid-overlay {
    animation: grid-fade-in 600ms ease-out 200ms forwards;
}

.byobu-panel.in-view .gradient-mesh {
    animation: mesh-fade-in 800ms var(--ease-in-out) forwards;
}

.byobu-panel.in-view .headline {
    animation: headline-reveal 1000ms var(--ease-in-out) 200ms forwards;
}

.byobu-panel.in-view .subheading {
    animation: text-fade-up 700ms ease-out 400ms forwards;
}

.byobu-panel.in-view .annotation {
    animation: annotation-reveal 800ms var(--ease-in-out) 600ms forwards;
}

.byobu-panel.in-view .body-text {
    animation: text-fade-up 700ms ease-out 400ms forwards;
}

.byobu-panel.in-view .glyph-layer {
    animation: glyph-arrive 1800ms var(--ease-in-out) 900ms forwards;
}

.byobu-panel.in-view .panel-content::before {
    animation: scan-line 1300ms var(--ease-in-out) 250ms forwards;
}

.byobu-panel.in-view .panel-content::after {
    animation: scan-line 1300ms var(--ease-in-out) 650ms forwards;
}

@keyframes glyph-arrive {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
    }
    to {
        opacity: 0.46;
        transform: translateY(0) scale(1);
    }
}

@keyframes scan-line {
    from {
        opacity: 0;
        transform: scaleX(0);
    }
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

.byobu-panel:not(.in-view) .grid-overlay,
.byobu-panel:not(.in-view) .gradient-mesh,
.byobu-panel:not(.in-view) .headline,
.byobu-panel:not(.in-view) .subheading,
.byobu-panel:not(.in-view) .annotation,
.byobu-panel:not(.in-view) .body-text,
.byobu-panel:not(.in-view) .fracture-line,
.byobu-panel:not(.in-view) .glyph-layer,
.byobu-panel:not(.in-view) .panel-content::before,
.byobu-panel:not(.in-view) .panel-content::after {
    animation: none;
}

/* ===================================================
   Kintsugi Fracture Animation
   =================================================== */

.fracture-line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: kintsugi-draw 2500ms ease-in-out 800ms forwards;
    filter: drop-shadow(0 0 5px rgba(232, 213, 163, 0.28));
}

@keyframes kintsugi-draw {
    from {
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dashoffset: 0;
    }
}

/* ===================================================
   Cursor Response (Gold Shimmer)
   =================================================== */

.gradient-mesh.cursor-responsive {
    transition: background-position 2s var(--ease-smooth);
}

/* ===================================================
   Responsive Design
   =================================================== */

@media (max-width: 1200px) {
    .panel-content {
        padding: 6vh 3vw;
    }

    .content-upper-left {
        grid-column: 1 / 4;
    }

    .content-lower-right {
        grid-column: 4 / 7;
    }
}

@media (max-width: 768px) {
    .byobu-panel {
        grid-template-columns: 1fr;
        min-height: 200vh;
    }

    .panel-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .content-upper-left,
    .content-lower-right {
        grid-column: 1;
        grid-row: auto;
    }

    .headline {
        font-size: clamp(2rem, 6vw, 4rem);
    }

    .grid-overlay {
        background-image:
            repeating-linear-gradient(
                90deg,
                rgba(207, 171, 87, 0.04) 0px,
                rgba(207, 171, 87, 0.04) 1px,
                transparent 1px,
                transparent 50%
            ),
            repeating-linear-gradient(
                0deg,
                rgba(207, 171, 87, 0.04) 0px,
                rgba(207, 171, 87, 0.04) 1px,
                transparent 1px,
                transparent 80px
            );
    }
}

@media (max-width: 480px) {
    .byobu-panel {
        min-height: 300vh;
    }

    .panel-content {
        padding: 4vh 2vw;
    }

    .headline {
        font-size: clamp(1.5rem, 5vw, 2.5rem);
    }

    .body-text {
        font-size: clamp(0.9rem, 1vw, 1rem);
        line-height: 1.6;
    }
}

/* ===================================================
   Decorative Accent - Using All Colors
   =================================================== */

.byobu-panel::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 40%;
    left: 50%;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(to bottom, transparent, var(--dark-gold), transparent);
    opacity: 0;
    z-index: 0.5;
    pointer-events: none;
}

.byobu-panel.in-view::before {
    animation: accent-shimmer 3000ms ease-in-out infinite;
}

@keyframes accent-shimmer {
    0%, 100% {
        opacity: 0;
        transform: translateY(-50%);
    }
    50% {
        opacity: 0.15;
        transform: translateY(-50%);
    }
}

/* ===================================================
   Print Styles
   =================================================== */

@media print {
    body {
        background-color: white;
        color: black;
    }

    .grid-overlay,
    .gradient-mesh,
    .z-diagonal {
        display: none;
    }

    .headline {
        color: black;
    }
}