/* ============================================
   karmabadge.com - Styles
   Japanese Minimalism + Digital Ritual
   ============================================ */

:root {
    /* Color Palette */
    --bg-primary: #0A1628;        /* Abyssal Indigo */
    --bg-secondary: #0F2137;      /* Midnight Reef */
    --fg-primary: #E2E8F0;        /* Lunar Mist */
    --fg-secondary: #94A3B8;      /* Tide Foam */
    --accent-primary: #4ECDC4;    /* Bioluminescent Teal */
    --accent-secondary: #FF6B4A;  /* Karma Coral */
    --accent-tertiary: #F0B429;   /* Shrine Amber */
    --surface: #162A40;           /* Deep Current */

    /* Timing */
    --badge-rotation: 20s;
    --glitch-offset: 2px;
    --scan-speed: 15s;
    --transition-gate: 600ms;

    /* Typography */
    --font-display: 'Josefin Sans', sans-serif;
    --font-body: 'Noto Sans JP', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    /* Spacing */
    --space-pad: 20%;
}

/* ============================================
   Reset & Base
   ============================================ */

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

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

body {
    background-color: var(--bg-primary);
    color: var(--fg-primary);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    line-height: 1.75;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   Scan Lines Overlay
   ============================================ */

.scan-lines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 1px,
        rgba(78, 205, 196, 0.025) 1px,
        rgba(78, 205, 196, 0.025) 2px
    );
    animation: scanScroll var(--scan-speed) linear infinite;
}

@keyframes scanScroll {
    from { background-position: 0 0; }
    to { background-position: 0 100vh; }
}

/* ============================================
   Progress Indicator
   ============================================ */

.progress-track {
    position: fixed;
    right: 12px;
    top: 0;
    width: 2px;
    height: 100vh;
    background: rgba(10, 22, 40, 0.5);
    z-index: 999;
}

.progress-fill {
    width: 100%;
    height: 0%;
    background: linear-gradient(to bottom, var(--bg-primary), var(--accent-primary));
    transition: height 150ms ease-out;
}

/* ============================================
   Gate Sections (Common)
   ============================================ */

.gate {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: background-color var(--transition-gate) ease;
}

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

/* ============================================
   PCB Trace Lines
   ============================================ */

.pcb-traces {
    position: absolute;
    top: 0;
    height: 100%;
    width: 120px;
    color: var(--accent-primary);
    opacity: 0.08;
    pointer-events: none;
}

.pcb-traces-left {
    left: 2vw;
}

.pcb-traces-right {
    right: 2vw;
}

.solder-node {
    fill: var(--accent-tertiary);
    opacity: 0.2;
    transition: opacity 300ms ease;
}

.solder-node.active {
    opacity: 1;
}

/* ============================================
   Gate 0: Landing - Badge Ring
   ============================================ */

.gate-0 {
    background-color: var(--bg-primary);
}

.badge-ring-container {
    position: relative;
    width: clamp(280px, 55vw, 520px);
    height: clamp(280px, 55vw, 520px);
    animation: badgeRotate var(--badge-rotation) linear infinite;
    will-change: transform;
}

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

.badge-ring-layer svg {
    width: 100%;
    height: 100%;
}

/* Chromatic aberration layers */
.badge-ring-red {
    animation: chromaticRed 6s ease-in-out infinite;
    will-change: transform;
}

.badge-ring-cyan {
    animation: chromaticCyan 6s ease-in-out infinite;
    will-change: transform;
}

@keyframes chromaticRed {
    0%, 100% { transform: translate(-1px, 0); }
    50% { transform: translate(-2px, 1px); }
}

@keyframes chromaticCyan {
    0%, 100% { transform: translate(1px, 0); }
    50% { transform: translate(2px, -1px); }
}

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

/* Center text does NOT rotate (counter-rotation) */
.badge-ring-center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: badgeRotateReverse var(--badge-rotation) linear infinite;
    text-align: center;
    white-space: nowrap;
}

@keyframes badgeRotateReverse {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(-360deg); }
}

.domain-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.2rem, 5.5vw, 4.8rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-primary);
    text-shadow: 0 0 40px rgba(78, 205, 196, 0.15);
}

/* Glitch blocks */
.glitch-block {
    position: absolute;
    background: var(--accent-secondary);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
    z-index: 10;
}

.glitch-block-1 {
    width: 60px;
    height: 6px;
    top: 30%;
    left: 15%;
    animation: glitchPulse1 7s ease-in-out infinite;
}

.glitch-block-2 {
    width: 80px;
    height: 4px;
    top: 65%;
    right: 20%;
    background: var(--accent-primary);
    animation: glitchPulse2 5s ease-in-out infinite;
}

.glitch-block-3 {
    width: 40px;
    height: 8px;
    top: 48%;
    left: 60%;
    animation: glitchPulse3 8s ease-in-out infinite;
}

@keyframes glitchPulse1 {
    0%, 85%, 100% { opacity: 0; transform: translateX(0); }
    87% { opacity: 0.7; transform: translateX(5px); }
    89% { opacity: 0; transform: translateX(-3px); }
    91% { opacity: 0.5; transform: translateX(4px); }
    93% { opacity: 0; transform: translateX(0); }
}

@keyframes glitchPulse2 {
    0%, 78%, 100% { opacity: 0; transform: translateX(0); }
    80% { opacity: 0.6; transform: translateX(-6px); }
    82% { opacity: 0; transform: translateX(3px); }
    84% { opacity: 0.4; transform: translateX(-4px); }
    86% { opacity: 0; transform: translateX(0); }
}

@keyframes glitchPulse3 {
    0%, 90%, 100% { opacity: 0; transform: translateX(0); }
    92% { opacity: 0.5; transform: translateX(3px); }
    94% { opacity: 0; transform: translateX(-5px); }
    96% { opacity: 0.6; transform: translateX(6px); }
    98% { opacity: 0; transform: translateX(0); }
}

/* ============================================
   Gate 1: The Ledger
   ============================================ */

.gate-1 {
    background-color: var(--bg-secondary);
}

/* Scan lines specific to gate-1 are handled by the global overlay,
   but we add extra scan line intensity here */
.gate-1::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(78, 205, 196, 0.015) 2px,
        rgba(78, 205, 196, 0.015) 3px
    );
    animation: scanScrollSlow 25s linear infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes scanScrollSlow {
    from { background-position: 0 0; }
    to { background-position: 0 -600px; }
}

.ledger-column {
    position: relative;
    z-index: 2;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
    padding: 8vh 0;
}

.ledger-entry {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 800ms ease, transform 800ms ease;
}

.ledger-entry.visible {
    opacity: 1;
    transform: translateY(0);
}

.ledger-bold {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: var(--fg-primary);
    line-height: 1.6;
}

.ledger-light {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(0.85rem, 1.5vw, 1rem);
    color: var(--fg-secondary);
    letter-spacing: 0.01em;
    line-height: 1.75;
    padding-left: 1rem;
    border-left: 1px solid rgba(78, 205, 196, 0.15);
}

/* ============================================
   Gate 2: The Forge
   ============================================ */

.gate-2 {
    background-color: var(--surface);
}

.forge-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    z-index: 2;
}

.forge-badge {
    width: clamp(220px, 40vw, 360px);
    height: clamp(220px, 40vw, 360px);
}

.forge-path {
    stroke-dasharray: 754;
    stroke-dashoffset: 754;
    transition: stroke-dashoffset 2s cubic-bezier(0.65, 0, 0.35, 1);
}

.forge-path.drawn {
    stroke-dashoffset: 0;
}

.forge-path-inner {
    stroke-dasharray: 628;
    stroke-dashoffset: 628;
    transition: stroke-dashoffset 2.5s cubic-bezier(0.65, 0, 0.35, 1) 0.3s;
}

.forge-path-inner.drawn {
    stroke-dashoffset: 0;
}

.forge-center {
    transition: opacity 1s ease 1.5s;
}

.forge-center.visible {
    opacity: 1;
}

.forge-text {
    transition: opacity 1s ease 1.8s;
}

.forge-text.visible {
    opacity: 1;
}

.forge-wireframe {
    animation: wireframePulse 4s ease-in-out infinite;
}

@keyframes wireframePulse {
    0%, 100% { opacity: 0.15; stroke-dashoffset: 0; }
    50% { opacity: 0.08; stroke-dashoffset: 12; }
}

/* Orbiting forge fragments */
.forge-fragment {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    will-change: transform;
}

.forge-fragment-1 {
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, rgba(255, 107, 74, 0.6), transparent);
    animation: orbit1 8s linear infinite;
    top: 50%;
    left: 50%;
}

.forge-fragment-2 {
    width: 20px;
    height: 20px;
    background: linear-gradient(225deg, rgba(78, 205, 196, 0.5), transparent);
    animation: orbit2 10s linear infinite;
    top: 50%;
    left: 50%;
}

.forge-fragment-3 {
    width: 25px;
    height: 15px;
    background: linear-gradient(45deg, rgba(255, 107, 74, 0.4), transparent);
    animation: orbit3 12s linear infinite reverse;
    top: 50%;
    left: 50%;
}

.forge-fragment-4 {
    width: 15px;
    height: 25px;
    background: linear-gradient(315deg, rgba(240, 180, 41, 0.4), transparent);
    animation: orbit4 9s linear infinite;
    top: 50%;
    left: 50%;
}

@keyframes orbit1 {
    from { transform: rotate(0deg) translateX(clamp(130px, 22vw, 210px)) rotate(0deg); }
    to { transform: rotate(360deg) translateX(clamp(130px, 22vw, 210px)) rotate(-360deg); }
}

@keyframes orbit2 {
    from { transform: rotate(90deg) translateX(clamp(140px, 24vw, 230px)) rotate(-90deg); }
    to { transform: rotate(450deg) translateX(clamp(140px, 24vw, 230px)) rotate(-450deg); }
}

@keyframes orbit3 {
    from { transform: rotate(180deg) translateX(clamp(120px, 20vw, 190px)) rotate(-180deg); }
    to { transform: rotate(540deg) translateX(clamp(120px, 20vw, 190px)) rotate(-540deg); }
}

@keyframes orbit4 {
    from { transform: rotate(270deg) translateX(clamp(150px, 25vw, 240px)) rotate(-270deg); }
    to { transform: rotate(630deg) translateX(clamp(150px, 25vw, 240px)) rotate(-630deg); }
}

.forge-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-primary);
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 1s ease 2s, transform 1s ease 2s;
}

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

.forge-subtitle {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(0.85rem, 1.5vw, 1rem);
    color: var(--fg-secondary);
    letter-spacing: 0.03em;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1s ease 2.3s, transform 1s ease 2.3s;
}

.forge-subtitle.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   Gate 3: The Archive
   ============================================ */

.gate-3 {
    background-color: var(--bg-secondary);
}

.archive-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    width: 100%;
    max-width: 1000px;
    padding: 4vh 0;
}

.archive-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-primary);
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 800ms ease, transform 800ms ease;
}

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

.archive-specimens {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(2rem, 6vw, 6rem);
    width: 100%;
}

.specimen {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.specimen svg {
    width: clamp(140px, 20vw, 200px);
    height: clamp(140px, 20vw, 200px);
}

.specimen-label {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-secondary);
}

/* Specimen states */
.specimen-ghost {
    opacity: 0.15;
}

.specimen-ghost.visible {
    opacity: 0.15;
}

.specimen-forming {
    opacity: 0;
    transition: opacity 1s ease 0.3s;
}

.specimen-forming.visible {
    opacity: 0.6;
}

.specimen-forming .specimen-glitch-fragments {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.spec-frag {
    position: absolute;
    pointer-events: none;
}

.spec-frag-1 {
    width: 40px;
    height: 5px;
    background: rgba(255, 107, 74, 0.5);
    top: 30%;
    left: -10%;
    animation: specGlitch1 3s ease-in-out infinite;
}

.spec-frag-2 {
    width: 30px;
    height: 4px;
    background: rgba(78, 205, 196, 0.4);
    top: 55%;
    right: -5%;
    animation: specGlitch2 4s ease-in-out infinite;
}

.spec-frag-3 {
    width: 25px;
    height: 6px;
    background: rgba(240, 180, 41, 0.3);
    bottom: 25%;
    left: 5%;
    animation: specGlitch3 5s ease-in-out infinite;
}

@keyframes specGlitch1 {
    0%, 80%, 100% { opacity: 0; transform: translateX(0); }
    85% { opacity: 1; transform: translateX(4px); }
    90% { opacity: 0; transform: translateX(-3px); }
}

@keyframes specGlitch2 {
    0%, 70%, 100% { opacity: 0; transform: translateX(0); }
    75% { opacity: 1; transform: translateX(-5px); }
    80% { opacity: 0; transform: translateX(2px); }
}

@keyframes specGlitch3 {
    0%, 85%, 100% { opacity: 0; transform: translateX(0); }
    88% { opacity: 1; transform: translateX(3px); }
    92% { opacity: 0; transform: translateX(-4px); }
}

.specimen-realized {
    opacity: 0;
    transition: opacity 1s ease 0.6s;
}

.specimen-realized.visible {
    opacity: 1;
}

.specimen-realized svg {
    filter: drop-shadow(0 0 20px rgba(78, 205, 196, 0.25));
}

/* ============================================
   Gate 4: The Return
   ============================================ */

.gate-4 {
    background-color: var(--bg-primary);
}

.badge-ring-warm {
    /* Warm version inherits base badge-ring styles */
}

.badge-ring-red-warm {
    animation: chromaticRedWarm 6s ease-in-out infinite;
    will-change: transform;
}

.badge-ring-amber-warm {
    animation: chromaticAmberWarm 6s ease-in-out infinite;
    will-change: transform;
}

@keyframes chromaticRedWarm {
    0%, 100% { transform: translate(-1px, 1px); }
    50% { transform: translate(-3px, -1px); }
}

@keyframes chromaticAmberWarm {
    0%, 100% { transform: translate(1px, -1px); }
    50% { transform: translate(3px, 1px); }
}

/* Typewriter text */
.typewriter-text {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    letter-spacing: 0.04em;
    color: var(--fg-primary);
    display: inline;
}

.typewriter-cursor {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    background: var(--accent-tertiary);
    vertical-align: text-bottom;
    margin-left: 2px;
    animation: cursorBlink 530ms step-end infinite;
}

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

/* ============================================
   Data Corruption Blocks
   ============================================ */

.corruption-blocks {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 998;
}

.corruption-block {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

.cb-1 {
    width: 60px;
    height: 6px;
    background: var(--accent-secondary);
    top: 25%;
    left: 10%;
}

.cb-2 {
    width: 80px;
    height: 4px;
    background: var(--accent-primary);
    top: 40%;
    right: 15%;
}

.cb-3 {
    width: 50px;
    height: 8px;
    background: var(--accent-secondary);
    top: 60%;
    left: 30%;
}

.cb-4 {
    width: 70px;
    height: 5px;
    background: var(--accent-primary);
    top: 75%;
    right: 25%;
}

.cb-5 {
    width: 45px;
    height: 6px;
    background: var(--accent-tertiary);
    top: 50%;
    left: 55%;
}

.corruption-block.active {
    animation: corruptionFlash 250ms ease-out forwards;
}

@keyframes corruptionFlash {
    0% { opacity: 0; transform: translateX(0); }
    20% { opacity: 0.8; transform: translateX(5px); }
    40% { opacity: 0; transform: translateX(-3px); }
    60% { opacity: 0.6; transform: translateX(4px); }
    80% { opacity: 0.3; transform: translateX(-2px); }
    100% { opacity: 0; transform: translateX(0); }
}

/* ============================================
   Glitch intensity during transitions
   ============================================ */

.gate.transitioning .badge-ring-red,
.gate.transitioning .badge-ring-cyan {
    animation-duration: 0.5s;
}

.gate.transitioning .glitch-block {
    animation-duration: 1s;
}

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

@media (max-width: 768px) {
    .pcb-traces {
        width: 60px;
        opacity: 0.05;
    }

    .pcb-traces-left {
        left: 0.5vw;
    }

    .pcb-traces-right {
        right: 0.5vw;
    }

    .archive-specimens {
        flex-direction: column;
        gap: 3rem;
    }

    .ledger-column {
        padding: 6vh 2vw;
        gap: 2.5rem;
    }

    .gate-content {
        padding: 4vh 4vw;
    }
}

@media (max-width: 480px) {
    .badge-ring-container {
        width: 260px;
        height: 260px;
    }

    .domain-name {
        font-size: 1.8rem;
    }

    .pcb-traces {
        display: none;
    }
}