/* =============================================================
   KARAKURI PROTOCOL — TWILIGHT TORII DESIGN SYSTEM
   ============================================================= */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700;900&family=JetBrains+Mono:wght@400;600;700&family=Inter:wght@300;400;600;700&display=swap');

/* ---------- Design Tokens ---------- */
:root {
    --indigo: #1A1528;
    --indigo-deep: #0E0B17;
    --crimson: #E63956;
    --crimson-dark: #B02040;
    --gold: #FFB800;
    --gold-dim: #CC9300;
    --teal: #2A6B7C;
    --teal-light: #3A9DB5;
    --white: #F8F9FA;
    --white-dim: rgba(248, 249, 250, 0.7);

    /* Glassmorphism */
    --glass-bg: rgba(26, 21, 40, 0.55);
    --glass-border: rgba(248, 249, 250, 0.08);
    --glass-blur: 24px;
    --glass-bg-heavy: rgba(26, 21, 40, 0.72);

    /* Typography */
    --font-jp: 'Noto Serif JP', serif;
    --font-mono: 'JetBrains Mono', monospace;
    --font-ui: 'Inter', sans-serif;

    /* Animation */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--crimson) var(--indigo-deep);
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-ui);
    background: var(--indigo-deep);
    color: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--indigo-deep);
}

::-webkit-scrollbar-thumb {
    background: var(--crimson);
    border-radius: 3px;
}

/* =============================================================
   GLOBAL HEADER
   ============================================================= */
/* =============================================================
   GLOBAL HEADER (FLOATING PILL REDESIGN)
   ============================================================= */
.header-wrapper {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background-color: transparent;
    border: none;
    z-index: 100;
    pointer-events: none;
}

.global-header {
    position: relative;
    top: 20px;
    margin: 0 auto;
    width: 90%;
    max-width: 1200px;
    height: 72px;
    pointer-events: auto;

    background: var(--white);
    /* Cloud White #F8F9FA */
    border-radius: 50px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;

    /* Soft diffuse drop shadow tinted with Twilight Indigo */
    box-shadow: 0 10px 40px rgba(26, 21, 40, 0.25);
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Glass effect refinement for visibility on light backgrounds */
.global-header:hover {
    box-shadow: 0 15px 50px rgba(26, 21, 40, 0.35);
    background: #FFFFFF;
}

.global-header__left {
    display: flex;
    gap: 32px;
    align-items: center;
    flex: 1;
}

.global-header__left a {
    color: var(--indigo);
    /* Twilight Indigo #1A1528 */
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    font-family: var(--font-jp), var(--font-ui);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.global-header__left a:hover {
    color: var(--crimson);
}

.global-header__nav-item--dropdown::after {
    content: '⌄';
    font-size: 0.8rem;
    margin-bottom: 2px;
}

.global-header__center {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    flex: 0 0 auto;
}

.global-header__center .logo-icon {
    width: 28px;
    height: 28px;
    color: var(--indigo);
    /* Dark Torii Gate */
    display: flex;
    align-items: center;
}

.global-header__center .logo-text {
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--indigo);
    letter-spacing: -0.02em;
}

.global-header__right {
    display: flex;
    align-items: center;
    gap: 24px;
    justify-content: flex-end;
    flex: 1;
}

.global-header__right .lang-toggle {
    background: none;
    border: none;
    color: var(--indigo);
    text-decoration: none;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.global-header__right .lang-toggle:hover {
    opacity: 0.7;
}

.global-header__right .cta-connect {
    background: var(--crimson);
    /* Sunset Crimson #E63956 */
    color: var(--white);
    /* Cloud White #F8F9FA */
    padding: 10px 24px;
    border-radius: 50px;
    border: none;
    text-decoration: none;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(230, 57, 86, 0.2);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.global-header__right .cta-connect:hover {
    background: var(--crimson-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(230, 57, 86, 0.4);
}

/* Also ensure language toggle hover is thematic */
.global-header__right .lang-toggle:hover {
    color: var(--crimson);
    opacity: 1;
}

@media (max-width: 900px) {
    .global-header {
        width: 95%;
        padding: 0 20px;
    }

    .global-header__left {
        display: none;
    }

    .global-header__right .lang-toggle {
        display: none;
    }
}


/* =============================================================
   SECTION 1: THE SPATIAL HERO (CINEMATIC)
   ============================================================= */
.hero {
    position: relative;
    height: 100vh;
    min-height: 700px;
    width: 100vw;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--indigo-deep);
}

/* --- Cinematic Video Background --- */
.hero__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
}

/* --- Dynamic Blur Overlay --- */
.hero__video-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(14, 11, 23, 0.4);
    /* Dark tint to ensure text readability */
    /* Dynamic blur is handled in script.js */
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: backdrop-filter 0.1s ease-out;
    pointer-events: none;
}

/* --- Premium Noise Grain Overlay --- */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.15;
    /* Increased opacity slightly for video */
    mix-blend-mode: overlay;
}

/* --- Left Axis Typography --- */
.hero__particles {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.particle {
    position: absolute;
    background: var(--white);
    border-radius: 50%;
    opacity: 0.3;
    pointer-events: none;
    animation: floatParticle linear infinite;
}

@keyframes floatParticle {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }

    10% {
        opacity: 0.4;
    }

    90% {
        opacity: 0.4;
    }

    100% {
        transform: translate(40px, -100px) scale(0.5);
        opacity: 0;
    }
}

.hero__axis-text {
    position: absolute;
    left: 48px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    font-family: var(--font-jp);
    font-weight: 900;
    font-size: 2.8rem;
    color: var(--white);
    letter-spacing: 0.5em;
    writing-mode: vertical-rl;
    text-orientation: upright;
    mix-blend-mode: overlay;
    /* Blends with the sunset/video */
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    /* Backup legibility */
    animation: fadeInSlideRight 1.5s var(--ease-out-expo) 0.5s both;
}

@keyframes fadeInSlideRight {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

/* --- Center Stage Title Sequence --- */
.hero__center-title {
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.hero__main-title {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--gold);
    letter-spacing: 0.6em;
    margin-bottom: 16px;
    text-transform: uppercase;
    text-shadow: 0 0 30px rgba(255, 184, 0, 0.5);
    animation: fadeInUp 1s var(--ease-out-expo) 0.8s both;
}

.hero__main-title-jp {
    font-family: var(--font-jp);
    font-size: 3.2rem;
    font-weight: 900;
    color: var(--gold);
    letter-spacing: 0.15em;
    margin-bottom: 12px;
    text-shadow: 0 0 30px rgba(255, 184, 0, 0.5);
    animation: fadeInUpSubtle 1s var(--ease-out-expo) 0.8s both;
}

.hero__main-subtitle {
    font-family: var(--font-ui);
    font-size: 1.1rem;
    color: var(--white);
    opacity: 0.8;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    /* Was 40px, but now CTA is below it */
    animation: fadeInUp 1s var(--ease-out-expo) 1s both;
}

.hero__cta-btn {
    font-family: var(--font-jp);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--white);
    background: var(--crimson);
    padding: 16px 48px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    margin-top: 24px;
    margin-bottom: 40px;
    box-shadow: 0 0 20px rgba(255, 184, 0, 0.4), inset 0 0 10px rgba(255, 184, 0, 0.2);
    animation: ctaPulse 2s ease-in-out infinite alternate, fadeInUpSubtle 1s var(--ease-out-expo) 1.1s both;
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.hero__cta-btn:hover {
    transform: scale(1.05);
    background: #FF4A6B;
    box-shadow: 0 0 40px rgba(255, 184, 0, 0.7), inset 0 0 20px rgba(255, 184, 0, 0.5);
}

@keyframes ctaPulse {
    0% {
        box-shadow: 0 0 15px rgba(255, 184, 0, 0.3), inset 0 0 10px rgba(255, 184, 0, 0.2);
    }

    100% {
        box-shadow: 0 0 35px rgba(255, 184, 0, 0.7), inset 0 0 20px rgba(255, 184, 0, 0.4);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px) translateX(-50%);
    }

    /* Overriding left:50% absolute issue requires wrapper */
    to {
        opacity: 1;
        transform: translateY(0) translateX(-50%);
    }

    /* wait, hero__main-title isn't absolute, no need to translateX */
}

/* Fix for keyframes on relative elements */
@keyframes fadeInUpSubtle {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero__main-title {
    animation: fadeInUpSubtle 1s var(--ease-out-expo) 0.8s both;
}

.hero__main-subtitle {
    animation: fadeInUpSubtle 1s var(--ease-out-expo) 1s both;
}


.hero__scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    animation: fadeInUpSubtle 1s var(--ease-out-expo) 1.2s both;
}

.scroll-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, var(--gold) 0%, transparent 100%);
    position: relative;
    overflow: hidden;
    opacity: 0.7;
}

.scroll-line::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 0%, #FFF 50%, transparent 100%);
    animation: scrollDrop 2s linear infinite;
}

@keyframes scrollDrop {
    0% {
        top: -100%;
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

.scroll-text {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--gold);
    letter-spacing: 0.3em;
    opacity: 0.6;
    animation: pulseOpacity 3s ease-in-out infinite alternate;
}

@keyframes pulseOpacity {
    0% {
        opacity: 0.4;
    }

    100% {
        opacity: 0.9;
    }
}

/* --- Interactive Hanko Gateway (Bottom-Right) --- */
.hanko-btn-new {
    position: absolute;
    right: 48px;
    bottom: 48px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(230, 57, 86, 0.4);
    /* Frosted Crimson */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(230, 57, 86, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 20;
    transition: box-shadow 0.4s ease, border-color 0.4s ease, transform 0.1s ease-out;
    animation: zoomInBounce 1s var(--ease-out-expo) 1.2s both;
    outline: none;
}

/* =============================================================
   SECTION 2: THE KAKEJIKU GALLERY
   ============================================================= */
.gallery {
    position: relative;
    min-height: 100vh;
    padding: 120px 0 160px;
    background: linear-gradient(180deg,
            var(--indigo-deep) 0%,
            #12101E 30%,
            #0F1A20 60%,
            var(--indigo-deep) 100%);
    overflow: hidden;
    perspective: 1200px;
}

/* Ambient water reflection */
.gallery__water {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, transparent, rgba(42, 107, 124, 0.05) 50%, rgba(42, 107, 124, 0.1));
    pointer-events: none;
}

.gallery__water::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 4px,
            rgba(42, 107, 124, 0.03) 4px,
            rgba(42, 107, 124, 0.03) 5px);
    animation: waterRipple 8s linear infinite;
}

@keyframes waterRipple {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(5px);
    }
}

.gallery__header {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
    z-index: 2;
}

.gallery__title {
    font-family: var(--font-jp);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--white);
    letter-spacing: 0.2em;
    text-shadow: 0 0 40px rgba(42, 107, 124, 0.4);
}

.gallery__title-en {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--teal-light);
    letter-spacing: 0.4em;
    margin-top: 12px;
    opacity: 0.7;
}

/* Scrolls Container */
.scrolls-container {
    display: flex;
    justify-content: center;
    gap: 60px;
    padding: 40px 60px;
    position: relative;
    z-index: 2;
    transform-style: preserve-3d;
}

/* Individual Kakejiku Scroll */
.kakejiku {
    position: relative;
    width: 320px;
    flex-shrink: 0;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.8s var(--ease-out-expo);
    animation: scrollFloat 6s ease-in-out infinite;
}

.kakejiku:nth-child(1) {
    animation-delay: 0s;
}

.kakejiku:nth-child(2) {
    animation-delay: 2s;
    transform: translateY(-20px);
}

.kakejiku:nth-child(3) {
    animation-delay: 4s;
}

@keyframes scrollFloat {

    0%,
    100% {
        transform: translateY(0) rotateY(0deg);
    }

    50% {
        transform: translateY(-12px) rotateY(1deg);
    }
}

/* Scroll Mounting Rod */
.kakejiku__rod {
    width: 90%;
    height: 8px;
    margin: 0 auto;
    background: linear-gradient(180deg, #8B7355, #6B5740, #8B7355);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 2;
}

.kakejiku__rod--bottom {
    margin-top: -2px;
}

/* Hanging string */
.kakejiku__string {
    width: 2px;
    height: 40px;
    background: linear-gradient(180deg, #8B7355, rgba(139, 115, 85, 0.3));
    margin: 0 auto;
}

/* Scroll Content */
.kakejiku__frame {
    position: relative;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 2px;
    overflow: hidden;
    transition: all 0.6s var(--ease-out-expo);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(248, 249, 250, 0.03);
}

.kakejiku:hover .kakejiku__frame {
    border-color: rgba(42, 107, 124, 0.6);
    transform: scale(1.02);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(42, 107, 124, 0.3),
        0 0 80px rgba(42, 107, 124, 0.2),
        inset 0 0 20px rgba(42, 107, 124, 0.15);
}

/* Art Content Area */
.kakejiku__art {
    width: 100%;
    height: 420px;
    position: relative;
    overflow: hidden;
}

/* CSS-rendered art backgrounds */
.kakejiku__art--samurai {
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 184, 0, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(42, 107, 124, 0.4) 0%, transparent 40%),
        linear-gradient(180deg, #1c1230 0%, #2a1a3e 30%, #1a2840 60%, #0e1520 100%);
    position: relative;
}

.kakejiku__art--miko {
    background:
        radial-gradient(circle at 40% 50%, rgba(230, 57, 86, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 60% 80%, rgba(255, 184, 0, 0.3) 0%, transparent 40%),
        linear-gradient(180deg, #1a1830 0%, #201540 30%, #152030 60%, #0e1520 100%);
}

.kakejiku__art--kitsune {
    background:
        radial-gradient(circle at 50% 40%, rgba(42, 107, 124, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 30% 70%, rgba(255, 184, 0, 0.2) 0%, transparent 40%),
        linear-gradient(180deg, #18152e 0%, #1a2040 30%, #1e1835 60%, #0e1520 100%);
}

/* Within the frame */
.kakejiku__art {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.kakejiku__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    filter: saturate(1.1) contrast(1.1);
}

.kakejiku:hover .kakejiku__image {
    transform: scale(1.05);
}

.kakejiku__art svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.9;
}

/* Teal hover aura */
.kakejiku__aura {
    position: absolute;
    inset: -4px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.6s ease;
    background: radial-gradient(ellipse at center, rgba(42, 107, 124, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 5;
}

.kakejiku:hover .kakejiku__aura {
    opacity: 1;
}

/* Owner Info Tooltip */
.kakejiku__owner {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    z-index: 10;
    background: var(--glass-bg-heavy);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    padding: 10px 16px;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--teal-light);
    white-space: nowrap;
    opacity: 0;
    transition: all 0.4s var(--ease-out-expo);
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.kakejiku:hover .kakejiku__owner {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.kakejiku__owner span {
    color: var(--gold);
}

/* Scroll label */
.kakejiku__label {
    padding: 16px;
    text-align: center;
    background: rgba(26, 21, 40, 0.4);
}

.kakejiku__label-title {
    font-family: var(--font-jp);
    font-size: 1rem;
    color: var(--white);
    letter-spacing: 0.15em;
}

.kakejiku__label-id {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--gold-dim);
    margin-top: 6px;
    opacity: 0.7;
}

/* =============================================================
   SECTION 3: THE KARAKURI FORGE
   ============================================================= */
.forge {
    position: relative;
    min-height: 100vh;
    padding: 120px 40px 160px;
    background: linear-gradient(180deg,
            var(--indigo-deep) 0%,
            #0D0A18 40%,
            #100D1C 70%,
            #0D0A18 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Ambient background geometry */
.forge__bg-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 100px, rgba(255, 184, 0, 0.5) 100px, rgba(255, 184, 0, 0.5) 101px),
        repeating-linear-gradient(90deg, transparent, transparent 100px, rgba(255, 184, 0, 0.5) 100px, rgba(255, 184, 0, 0.5) 101px);
    pointer-events: none;
}

/* Main Dashboard */
.forge__dashboard {
    position: relative;
    width: 100%;
    max-width: 900px;
    background: var(--glass-bg-heavy);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(248, 249, 250, 0.03),
        inset 0 0 100px rgba(26, 21, 40, 0.3);
    z-index: 2;
}

/* Dashboard Header */
.forge__header {
    padding: 32px 40px;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.forge__title {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: var(--gold);
    text-shadow: 0 0 20px rgba(255, 184, 0, 0.3);
}

.forge__status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--white-dim);
}

.forge__status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--teal);
    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {

    0%,
    100% {
        opacity: 0.5;
        box-shadow: 0 0 4px var(--teal);
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 12px var(--teal);
    }
}

/* Forge Body */
.forge__body {
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

/* Gear Assembly Area */
.forge__assembly {
    position: relative;
    width: 320px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Gear elements */
.gear {
    position: absolute;
    border: 3px solid var(--gold-dim);
    border-radius: 50%;
    opacity: 0.2;
    transition: opacity 0.6s ease;
}

.gear::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    height: 30%;
    border: 2px solid var(--gold-dim);
    border-radius: 50%;
}

.gear--lg {
    width: 200px;
    height: 200px;
    border-style: dashed;
}

.gear--md {
    width: 140px;
    height: 140px;
    top: 20px;
    right: 30px;
    border-style: dotted;
}

.gear--sm {
    width: 80px;
    height: 80px;
    bottom: 40px;
    left: 40px;
}

/* Activated state */
.forge--active .gear {
    opacity: 0.8;
}

.forge--active .gear--lg {
    animation: gearSpin 4s linear infinite;
}

.forge--active .gear--md {
    animation: gearSpin 3s linear infinite reverse;
}

.forge--active .gear--sm {
    animation: gearSpin 2s linear infinite;
}

@keyframes gearSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Geometric Plates */
.plate {
    position: absolute;
    background: rgba(255, 184, 0, 0.05);
    border: 1px solid rgba(255, 184, 0, 0.1);
    transition: all 0.8s var(--ease-out-expo);
    opacity: 0.3;
}

.plate--top {
    top: 0;
    left: 25%;
    width: 50%;
    height: 40%;
    clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}

.plate--left {
    top: 20%;
    left: 0;
    width: 40%;
    height: 60%;
    clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
}

.plate--right {
    top: 20%;
    right: 0;
    width: 40%;
    height: 60%;
    clip-path: polygon(0 0, 100% 20%, 100% 80%, 0 100%);
}

.plate--bottom {
    bottom: 0;
    left: 25%;
    width: 50%;
    height: 40%;
    clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}

.forge--active .plate {
    opacity: 0.8;
    background: rgba(255, 184, 0, 0.1);
    border-color: rgba(255, 184, 0, 0.3);
}

.forge--active .plate--top {
    transform: translateY(-15px);
}

.forge--active .plate--left {
    transform: translateX(-15px);
}

.forge--active .plate--right {
    transform: translateX(15px);
}

.forge--active .plate--bottom {
    transform: translateY(15px);
}

/* Step 2: Fast spin state */
.forge--fast-spin .gear {
    opacity: 0.9;
    border-color: var(--gold);
}

.forge--fast-spin .gear--lg {
    animation: gearSpin 1s linear infinite;
}

.forge--fast-spin .gear--md {
    animation: gearSpin 0.75s linear infinite reverse;
}

.forge--fast-spin .gear--sm {
    animation: gearSpin 0.5s linear infinite;
}

.forge--fast-spin .plate {
    opacity: 0.9;
    background: rgba(255, 184, 0, 0.2);
    border-color: rgba(255, 184, 0, 0.5);
}

.forge--fast-spin .plate--top {
    transform: translateY(-20px);
}

.forge--fast-spin .plate--left {
    transform: translateX(-20px);
}

.forge--fast-spin .plate--right {
    transform: translateX(20px);
}

.forge--fast-spin .plate--bottom {
    transform: translateY(20px);
}

/* Step 3: Awaiting Signature (Crimson Pulse) */
.forge--awaiting-sig .forge__dashboard {
    animation: crimsonPulse 0.5s ease-in-out infinite alternate;
}

@keyframes crimsonPulse {
    from {
        border-color: rgba(230, 57, 86, 0.4);
        box-shadow: 0 0 40px rgba(230, 57, 86, 0.2), inset 0 0 60px rgba(230, 57, 86, 0.1);
    }

    to {
        border-color: rgba(230, 57, 86, 0.9);
        box-shadow: 0 0 80px rgba(230, 57, 86, 0.5), inset 0 0 100px rgba(230, 57, 86, 0.3);
    }
}

.forge--awaiting-sig .gear {
    opacity: 0.6;
    animation-duration: 4s;
    border-color: var(--crimson);
}

.forge--awaiting-sig .plate {
    opacity: 0.5;
    background: rgba(230, 57, 86, 0.1);
    border-color: rgba(230, 57, 86, 0.4);
}

/* Step 4: Locked state (Verifying) */
.forge--locked .forge__dashboard {
    border-color: rgba(255, 184, 0, 0.8);
    box-shadow: 0 0 60px rgba(255, 184, 0, 0.4);
}

.forge--locked .gear {
    opacity: 1;
    border-color: var(--gold);
    animation-play-state: paused !important;
    /* Locks the gears */
}

.forge--locked .plate {
    opacity: 1;
    background: rgba(255, 184, 0, 0.2);
    border-color: rgba(255, 184, 0, 0.8);
    transform: translate(0) !important;
}

/* Final State: Success Aura (Mystic Teal) */
.forge--success .forge__dashboard {
    border-color: rgba(42, 107, 124, 0.9);
    box-shadow: 0 0 100px rgba(42, 107, 124, 0.6), inset 0 0 80px rgba(42, 107, 124, 0.3);
    transition: all 0.5s ease;
}

.forge--success .gear {
    opacity: 0.2;
    border-color: var(--teal);
}

.forge--success .plate {
    opacity: 0.2;
    border-color: var(--teal);
    background: rgba(42, 107, 124, 0.1);
    transform: translate(0);
}

/* Mint Button */
.mint-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 60px;
    background: linear-gradient(135deg, rgba(255, 184, 0, 0.15), rgba(255, 184, 0, 0.05));
    border: 2px solid var(--gold);
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--gold);
    transition: all 0.4s var(--ease-out-expo);
    overflow: hidden;
    outline: none;
    box-shadow: 0 0 20px rgba(255, 184, 0, 0.1);
}

.mint-btn::before {
    content: '';
    position: absolute;
    inset: 2px;
    border: 1px solid rgba(255, 184, 0, 0.2);
    border-radius: 2px;
    pointer-events: none;
}

.mint-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -100%;
    width: 200%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    transition: left 0.6s ease;
}

.mint-btn:hover {
    background: linear-gradient(135deg, rgba(255, 184, 0, 0.25), rgba(255, 184, 0, 0.1));
    box-shadow: 0 0 40px rgba(255, 184, 0, 0.2);
    transform: scale(1.02);
}

.mint-btn:hover::after {
    left: 100%;
}

.mint-btn:active {
    transform: scale(0.98);
}

.mint-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Terminal Output */
.forge__terminal {
    width: 100%;
    background: rgba(14, 11, 23, 0.85);
    border: 1px solid rgba(255, 184, 0, 0.15);
    border-radius: 4px;
    padding: 24px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    min-height: 140px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8);
}

/* CRT Scanline effect */
.forge__terminal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 4px, 6px 100%;
    pointer-events: none;
    z-index: 10;
}

.forge__terminal-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 184, 0, 0.05);
}

.forge__terminal-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.forge__terminal-dot--red {
    background: var(--crimson);
}

.forge__terminal-dot--gold {
    background: var(--gold);
}

.forge__terminal-dot--teal {
    background: var(--teal);
}

.forge__terminal-title {
    font-size: 0.6rem;
    color: var(--white-dim);
    margin-left: 8px;
    letter-spacing: 0.15em;
}

.terminal-line {
    line-height: 2;
    opacity: 0;
    transform: translateX(-10px);
    animation: terminalLine 0.4s var(--ease-out-expo) forwards;
}

.terminal-line--prompt {
    color: var(--gold);
}

.terminal-line--info {
    color: var(--teal-light);
}

.terminal-line--success {
    color: #4ADE80;
}

.terminal-line--error {
    color: var(--crimson);
}

@keyframes terminalLine {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Progress Bar */
.forge__progress {
    width: 100%;
    height: 4px;
    background: rgba(255, 184, 0, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.forge__progress.active {
    opacity: 1;
}

.forge__progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--gold), var(--crimson));
    border-radius: 2px;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(255, 184, 0, 0.4);
}

/* Artifact Result */
.forge__result {
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    animation: resultReveal 0.8s var(--ease-out-expo) both;
}

.forge__result.visible {
    display: flex;
}

@keyframes resultReveal {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Artifact Image Frame */
.artifact-frame {
    width: 280px;
    height: 280px;
    position: relative;
    background: var(--glass-bg);
    border: 2px solid var(--gold);
    border-radius: 4px;
    overflow: hidden;
    box-shadow:
        0 0 40px rgba(255, 184, 0, 0.2),
        0 20px 60px rgba(0, 0, 0, 0.4);
}

.artifact-frame__art {
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 30% 40%, rgba(255, 184, 0, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(42, 107, 124, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(230, 57, 86, 0.2) 0%, transparent 40%),
        conic-gradient(from 45deg at 50% 50%, #1a1528, #2a1a3e, #1a2840, #1a1528);
    display: flex;
    align-items: center;
    justify-content: center;
}

.artifact-frame__art svg {
    width: 70%;
    height: 70%;
    opacity: 0.9;
}

/* Artifact glow border */
.artifact-frame::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 6px;
    background: conic-gradient(from 0deg, var(--gold), var(--crimson), var(--teal), var(--gold));
    z-index: -1;
    animation: artifactBorderSpin 4s linear infinite;
    opacity: 0.6;
}

@keyframes artifactBorderSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Verified Badge */
.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 4px;
    padding: 8px 20px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    color: #4ADE80;
    letter-spacing: 0.15em;
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.15);
    animation: verifiedPulse 2s ease-in-out infinite;
}

@keyframes verifiedPulse {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(74, 222, 128, 0.15);
    }

    50% {
        box-shadow: 0 0 30px rgba(74, 222, 128, 0.3);
    }
}

.verified-badge__icon {
    font-size: 1rem;
}

/* TX Hash */
.tx-hash {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--white-dim);
    background: rgba(14, 11, 23, 0.6);
    padding: 8px 16px;
    border-radius: 4px;
    border: 1px solid var(--glass-border);
    word-break: break-all;
    text-align: center;
    max-width: 400px;
}

.tx-hash span {
    color: var(--teal-light);
}

/* =============================================================
   GLOBAL UTILITY ANIMATIONS
   ============================================================= */

/* Section fade-in on scroll */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Audio indicator */
.audio-indicator {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 8px 16px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--white-dim);
    opacity: 0.6;
    transition: opacity 0.3s ease;
    outline: none;
}

.audio-indicator:hover {
    opacity: 1;
}

.audio-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 12px;
}

.audio-bar {
    width: 2px;
    background: var(--teal);
    border-radius: 1px;
    transition: height 0.3s ease;
}

.audio-indicator.playing .audio-bar:nth-child(1) {
    animation: audioBar 0.8s ease-in-out infinite;
    height: 4px;
}

.audio-indicator.playing .audio-bar:nth-child(2) {
    animation: audioBar 0.6s ease-in-out 0.1s infinite;
    height: 8px;
}

.audio-indicator.playing .audio-bar:nth-child(3) {
    animation: audioBar 0.7s ease-in-out 0.2s infinite;
    height: 6px;
}

.audio-indicator.playing .audio-bar:nth-child(4) {
    animation: audioBar 0.9s ease-in-out 0.3s infinite;
    height: 10px;
}

.audio-indicator:not(.playing) .audio-bar {
    height: 4px !important;
    animation: none !important;
}

@keyframes audioBar {

    0%,
    100% {
        height: 4px;
    }

    50% {
        height: 12px;
    }
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1024px) {
    .scrolls-container {
        flex-direction: column;
        align-items: center;
        gap: 40px;
        padding: 20px;
    }

    .kakejiku {
        width: 280px;
    }

    .kakejiku:nth-child(2) {
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .hero__panel {
        left: 20px;
        padding: 32px 20px;
    }

    .hero__title-jp {
        font-size: 1.8rem;
    }

    .hanko-btn {
        right: 30px;
        bottom: 60px;
    }

    .hero__brand-title {
        font-size: 2rem;
    }

    .forge__dashboard {
        margin: 0 10px;
    }

    .forge__body {
        padding: 24px;
    }

    .forge__assembly {
        width: 240px;
        height: 240px;
    }

    .artifact-frame {
        width: 220px;
        height: 220px;
    }
}

/* =============================================================
   GLOBAL FOOTER
   ============================================================= */
.global-footer {
    width: 100%;
    background-color: var(--indigo);
    /* Twilight Indigo grounding base */
    padding: 64px 48px;
    border-top: 1px solid rgba(255, 184, 0, 0.1);
    position: relative;
    z-index: 10;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
    margin-bottom: 64px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.footer-brand svg {
    width: 28px;
    height: 28px;
    color: var(--gold);
    filter: drop-shadow(0 0 8px rgba(255, 184, 0, 0.4));
}

.footer-brand span {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--white);
    letter-spacing: 0.05em;
}

.footer-desc {
    font-family: var(--font-sans);
    color: var(--white-dim);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 300px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-links a {
    font-family: var(--font-mono);
    color: var(--white-dim);
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    align-self: flex-start;
}

.footer-links a:hover {
    color: var(--gold);
    text-shadow: 0 0 10px rgba(255, 184, 0, 0.5);
}

.footer-bottom {
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-sans);
}

.footer-bottom span {
    color: var(--white);
    font-size: 0.85rem;
    opacity: 0.6;
}

.footer-badge {
    color: var(--gold);
    font-size: 0.75rem;
    font-family: var(--font-mono);
    letter-spacing: 0.1em;
    padding: 6px 12px;
    border: 1px solid rgba(255, 184, 0, 0.3);
    border-radius: 4px;
    background: rgba(255, 184, 0, 0.05);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 0 15px rgba(255, 184, 0, 0.1);
}

@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }
}


/* =============================================================
   MANIFESTO PREVIEW / MANIFESTO PAGE
   ============================================================= */
.manifesto-preview,
.manifesto-page {
    padding: 100px 48px;
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
}

.manifesto-preview__container {
    display: flex;
    gap: 64px;
    align-items: center;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    padding: 48px;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.manifesto-preview__visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 800px;
}

.crypto-block {
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    animation: rotateBlock 15s linear infinite;
    position: relative;
}

@keyframes rotateBlock {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }

    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

.crypto-block__face {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 2px solid rgba(42, 107, 124, 0.6);
    background: rgba(42, 107, 124, 0.1);
    box-shadow: inset 0 0 20px rgba(42, 107, 124, 0.4);
}

.crypto-block__face--front {
    transform: translateZ(100px);
}

.crypto-block__face--back {
    transform: rotateY(180deg) translateZ(100px);
}

.crypto-block__face--right {
    transform: rotateY(90deg) translateZ(100px);
}

.crypto-block__face--left {
    transform: rotateY(-90deg) translateZ(100px);
}

.crypto-block__face--top {
    transform: rotateX(90deg) translateZ(100px);
}

.crypto-block__face--bottom {
    transform: rotateX(-90deg) translateZ(100px);
}

.manifesto-preview__content {
    flex: 1;
}

.manifesto-preview__header {
    font-family: var(--font-jp);
    font-size: 1.5rem;
    color: var(--white);
    margin-bottom: 24px;
    letter-spacing: 0.1em;
    text-shadow: 0 0 10px rgba(255, 184, 0, 0.3);
}

.manifesto-preview__body {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--white-dim);
    margin-bottom: 32px;
}

.manifesto-preview__link {
    font-family: var(--font-mono);
    color: var(--gold);
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 4px;
    transition: all 0.3s ease;
}

.manifesto-preview__link:hover {
    text-shadow: 0 0 10px var(--gold);
    box-shadow: 0 2px 10px rgba(255, 184, 0, 0.5);
}

/* =============================================================
   PLATFORM FEATURES
   ============================================================= */
.features {
    padding: 80px 48px;
    max-width: 1400px;
    margin: 0 auto;
}

.features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.feature-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    padding: 32px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(230, 57, 86, 0.4);
}

.feature-card__header {
    font-family: var(--font-mono);
    color: var(--crimson);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
    border-bottom: 1px dashed rgba(230, 57, 86, 0.3);
    padding-bottom: 8px;
}

.feature-card__body {
    font-family: var(--font-ui);
    color: var(--white-dim);
    line-height: 1.6;
    font-size: 1rem;
}

/* =============================================================
   TECHNICAL PIPELINE
   ============================================================= */
.pipeline {
    padding: 80px 48px;
    max-width: 1200px;
    margin: 0 auto 64px auto;
    position: relative;
    text-align: center;
}

.pipeline__title {
    font-family: var(--font-mono);
    color: var(--gold);
    font-size: 1.2rem;
    margin-bottom: 64px;
    letter-spacing: 0.2em;
}

.pipeline__track {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.pipeline__line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gold);
    box-shadow: 0 0 15px var(--gold);
    z-index: 1;
    transform: translateY(-50%);
    opacity: 0.5;
}

.pipeline__step {
    position: relative;
    z-index: 2;
    background: var(--indigo-deep);
    border: 2px solid var(--gold);
    color: var(--white);
    font-family: var(--font-mono);
    padding: 12px 24px;
    border-radius: 24px;
    font-size: 0.85rem;
    box-shadow: 0 0 20px rgba(255, 184, 0, 0.2);
}

/* =============================================================
   GALLERY PAGE SPECIFICS
   ============================================================= */
.gallery-page {
    padding-top: 120px;
    padding-bottom: 80px;
}

.gallery-filters {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 64px;
}

.filter-btn {
    background: rgba(26, 21, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--white-dim);
    font-family: var(--font-mono);
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.filter-btn:hover,
.filter-btn.active {
    color: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 0 10px rgba(255, 184, 0, 0.3);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 48px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

/* =============================================================
   DOCS PAGE SPECIFICS
   ============================================================= */
.docs-page {
    background: #050505;
    color: #FFB000;
    font-family: var(--font-mono);
    min-height: 100vh;
    padding: 120px 48px 80px 48px;
}

.docs-terminal {
    max-width: 1000px;
    margin: 0 auto;
    border: 1px solid #FFB000;
    padding: 32px;
    box-shadow: 0 0 20px rgba(255, 176, 0, 0.1);
    border-radius: 4px;
}

.docs-header-sec {
    border-bottom: 1px dashed #FFB000;
    padding-bottom: 16px;
    margin-bottom: 32px;
}

.docs-section {
    margin-bottom: 48px;
}

.docs-section h3 {
    color: #FFF;
    margin-bottom: 16px;
    font-size: 1.1rem;
}

.docs-code {
    background: rgba(255, 176, 0, 0.05);
    padding: 16px;
    border-left: 2px solid #FFB000;
    white-space: pre-wrap;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* =============================================================
   MANIFESTO PAGE SPECIFICS
   ============================================================= */
.manifesto-longform {
    background: var(--indigo);
    color: var(--white);
    min-height: 100vh;
    padding: 120px 48px 80px 48px;
}

.manifesto-longform__container {
    max-width: 800px;
    margin: 0 auto;
}

.manifesto-longform h1 {
    font-family: var(--font-jp);
    font-size: 3rem;
    margin-bottom: 48px;
    text-align: center;
    color: var(--white);
}

.manifesto-longform h2 {
    font-family: var(--font-ui);
    color: var(--gold);
    font-size: 2rem;
    margin-top: 64px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(255, 184, 0, 0.2);
    padding-bottom: 8px;
}

.manifesto-longform p {
    font-family: var(--font-ui);
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--white);
    margin-bottom: 24px;
}