/* ============================================
   xity.dev — Pop-Art Comic Zine
   ============================================ */

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

html {
    scroll-behavior: smooth;
}

body {
    background: #1a1209;
    color: #e8dcd0;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: clamp(1rem, 1.1vw, 1.125rem);
    line-height: 1.7;
    letter-spacing: 0.005em;
    overflow-x: hidden;
}

/* ---- Typography ---- */

.panel-heading {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(4rem, 12vw, 10rem);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f5efe6;
    text-shadow: 3px 3px 0 #0d0d0d;
    line-height: 0.95;
}

.heading-dark {
    color: #0d0d0d;
    text-shadow: 3px 3px 0 rgba(196, 112, 78, 0.3);
}

/* ---- Panels (Core Layout) ---- */

.panel {
    position: relative;
    width: 100%;
    min-height: 100vh;
    border-bottom: 4px solid #0d0d0d;
    overflow: hidden;
}

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

.panel-terra {
    background: #c4704e;
}

/* ---- Noise Overlays ---- */

.noise-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

.noise-dark {
    opacity: 0.15;
}

.noise-light {
    opacity: 0.25;
}

/* ---- Halftone Overlay ---- */

.halftone-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background-image: radial-gradient(circle, #c4704e 30%, transparent 31%);
    background-size: clamp(4px, 0.8vw, 8px) clamp(4px, 0.8vw, 8px);
    transition: opacity 600ms ease;
}

.halftone-visible {
    opacity: 0.3;
}

/* ---- Splash Panel ---- */

.panel-splash {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.splash-content {
    position: relative;
    z-index: 2;
    padding-left: 5vw;
    padding-bottom: 10vh;
}

.splash-title {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(6rem, 25vw, 20rem);
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #f5efe6;
    text-shadow: 5px 5px 0 #0d0d0d, -2px -2px 0 #e8602a;
    line-height: 0.85;
    opacity: 0;
}

.splash-title.animate-in {
    opacity: 1;
    animation: shake 400ms ease-out;
}

.splash-tagline {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    color: #e8dcd0;
    margin-top: 1.5rem;
    opacity: 0;
    transition: opacity 500ms ease;
}

.splash-tagline.fade-in {
    opacity: 1;
}

/* ---- Shake Animation ---- */

@keyframes shake {
    0%, 100% { transform: translate(0); }
    25% { transform: translate(-4px, 2px); }
    50% { transform: translate(3px, -3px); }
    75% { transform: translate(-2px, 1px); }
}

@keyframes shake-small {
    0%, 100% { transform: translate(0); }
    25% { transform: translate(-2px, 1px); }
    50% { transform: translate(1px, -2px); }
    75% { transform: translate(-1px, 1px); }
}

.shake-hover:hover {
    animation: shake-small 200ms ease;
}

.shake-hover:active {
    animation: shake 100ms ease;
}

/* ---- Action Lines ---- */

.action-lines {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.action-lines-splash::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    transform: translate(-50%, -50%);
    background: repeating-conic-gradient(
        #a0522d 0deg 2deg,
        transparent 2deg 10deg
    );
    opacity: 0.08;
}

.action-lines-code::before {
    content: '';
    position: absolute;
    bottom: -50%;
    right: -30%;
    width: 150%;
    height: 150%;
    background: repeating-conic-gradient(
        #a0522d 0deg 1.5deg,
        transparent 1.5deg 8deg
    );
    opacity: 0.06;
}

/* ---- Panel Reveal (clip-path) ---- */

.panel-reveal {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.panel-reveal.unrevealed {
    clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%);
}

.panel-reveal.revealing {
    animation: diagonal-reveal 500ms ease-out forwards;
}

@keyframes diagonal-reveal {
    from {
        clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%);
    }
    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

/* ---- Diagonal Slash ---- */

.diagonal-slash {
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    height: 80px;
    background: #1a1209;
    transform: skewY(-2deg);
    z-index: 3;
    border-bottom: 4px solid #0d0d0d;
}

/* ---- Panel Content ---- */

.panel-content {
    position: relative;
    z-index: 2;
    padding: 8vh 5vw;
    max-width: 700px;
}

.edge-left {
    margin-right: auto;
}

.edge-right {
    margin-left: auto;
}

.bottom-aligned {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 80vh;
}

.panel-body {
    color: #e8dcd0;
    margin-top: 1.5rem;
}

.panel-terra .panel-body {
    color: #2a1f14;
}

.panel-terra .panel-heading:not(.heading-dark) {
    color: #0d0d0d;
    text-shadow: 3px 3px 0 rgba(232, 96, 42, 0.3);
}

/* ---- CTA Link ---- */

.cta-link {
    display: inline-block;
    margin-top: 2rem;
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    letter-spacing: 0.08em;
    color: #e8602a;
    text-decoration: none;
    border: 4px solid #e8602a;
    padding: 0.5em 1em;
    transition: background 200ms, color 200ms, border-width 150ms;
}

.cta-link:hover {
    background: #e8602a;
    color: #1a1209;
    border-width: 6px;
    border-radius: 2px;
}

/* ---- Feature Strips ---- */

.strip-row {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    min-height: 100vh;
}

.strip {
    border-right: 4px solid #0d0d0d;
    padding: 5vh 3vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.strip:last-child {
    border-right: none;
}

.strip-icon {
    width: 48px;
    height: 48px;
    color: #f5efe6;
    filter: url(#roughen);
    margin-bottom: 1.5rem;
}

.stamp-icon {
    width: 100%;
    height: 100%;
}

.strip-title {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 400;
    letter-spacing: 0.08em;
    color: #f5efe6;
    text-shadow: 2px 2px 0 #0d0d0d;
}

.strip-text {
    font-family: 'Source Serif 4', Georgia, serif;
    color: #e8dcd0;
    margin-top: 0.75rem;
}

/* ---- Circuit Traces ---- */

.circuit-traces {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    z-index: 1;
}

.circuit-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* ---- Code Block ---- */

.code-block {
    background: #1a1209;
    border: 1px solid #c4704e;
    padding: 2rem;
    margin-top: 2rem;
    position: relative;
    overflow-x: auto;
}

.code-block::before {
    content: '';
    position: absolute;
    inset: 0;
    mix-blend-mode: overlay;
    opacity: 0.35;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.code-block pre {
    position: relative;
    z-index: 1;
}

.code-block code {
    font-family: 'Space Mono', monospace;
    font-size: 0.85rem;
    color: #e8dcd0;
    line-height: 1.8;
}

.code-block .kw { color: #e8602a; }
.code-block .str { color: #d4a843; }
.code-block .cmt { color: #a0522d; opacity: 0.6; }
.code-block .fn { color: #e8602a; }
.code-block .num { color: #d4a843; }

/* ---- Navigation Dot ---- */

#nav-dot {
    position: fixed;
    top: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #0d0d0d;
    border: 3px solid #c4704e;
    cursor: pointer;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 200ms ease;
}

#nav-dot:hover {
    animation: shake-small 200ms ease;
}

.dot-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dot-lines span {
    display: block;
    width: 18px;
    height: 2px;
    background: #f5efe6;
    transition: transform 300ms, opacity 300ms;
}

#nav-dot.open .dot-lines span:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
}
#nav-dot.open .dot-lines span:nth-child(2) {
    opacity: 0;
}
#nav-dot.open .dot-lines span:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
}

/* ---- Radial Navigation ---- */

#radial-nav {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: #0d0d0d;
    pointer-events: none;
    opacity: 0;
    clip-path: circle(0% at calc(100% - 3.5rem) 3.5rem);
    transition: clip-path 400ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms;
}

#radial-nav.open {
    opacity: 1;
    pointer-events: all;
    clip-path: circle(150% at calc(100% - 3.5rem) 3.5rem);
}

.nav-links {
    position: relative;
    width: 100%;
    height: 100%;
}

.nav-link {
    position: absolute;
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(2.5rem, 6vw, 5rem);
    letter-spacing: 0.08em;
    color: #f5efe6;
    text-decoration: none;
    transition: color 150ms;
}

.nav-link:hover {
    color: #e8602a;
    animation: shake-small 200ms ease;
}

/* ---- Responsive ---- */

@media (max-width: 768px) {
    .strip-row {
        grid-template-columns: 1fr;
    }

    .strip {
        border-right: none;
        border-bottom: 4px solid #0d0d0d;
        min-height: 33vh;
    }

    .strip:last-child {
        border-bottom: none;
    }

    .panel-content {
        padding: 6vh 6vw;
    }

    .splash-content {
        padding-left: 6vw;
    }

    .nav-link {
        position: relative;
        display: block;
        padding: 1rem 2rem;
        top: auto !important;
        left: auto !important;
    }

    .nav-links {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 2rem;
    }
}