@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Teko:wght@500;600;700&family=Noto+Sans+JP:wght@400;700&family=Space+Mono:wght@400;700&display=swap');

:root {
    --bg-dark: #e6e6e6; /* Base background from the reference is actually light grey */
    --bg-light: #f5f5f5;
    --yellow: #f1fc2f; /* Very bright neon yellow */
    --black: #111111;
    --white: #ffffff;
    
    --font-mono: 'Space Mono', 'Share Tech Mono', monospace;
    --font-display: 'Teko', sans-serif;
    --font-jp: 'Noto Sans JP', sans-serif;
    --font-code: 'Fira Code', monospace;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--black);
    color: var(--black);
    font-family: var(--font-mono);
    overflow-x: hidden;
    width: 100%;
}

/* ================== LOADER ================== */
.cyber-loader {
    position: fixed; inset: 0; z-index: 9999;
    background-color: var(--yellow); color: var(--black);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity 0.3s ease;
}
.cyber-loader.hidden { opacity: 0; pointer-events: none; }
.loader-content { width: 400px; display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 2; }
.loader-jp { font-family: var(--font-jp); font-weight: bold; font-size: 1.2rem; }
.loader-text { font-family: var(--font-display); font-size: 6rem; line-height: 1; letter-spacing: 5px; margin: 0; }
.loader-bar-container { height: 20px; border: 4px solid var(--black); padding: 2px; }
.loader-bar { height: 100%; background-color: var(--black); width: 0%; transition: width 0.1s linear; }
.loader-status { display: flex; justify-content: space-between; font-family: var(--font-mono); font-weight: bold; font-size: 0.9rem; }
.loading-progress { font-family: var(--font-display); font-size: 12rem; position: fixed; right: 5%; bottom: 0%; color: rgba(17,17,17,0.1); line-height: 1; pointer-events: none; z-index: 1;}

/* ================== FIXED HUD ================== */
.hud-wrapper {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none; /* Let clicks pass through */
    z-index: 100;
}

/* Thick Borders */
.hazard-border-top, .hazard-border-bottom, .hazard-border-left, .hazard-border-right {
    position: absolute;
    background-color: var(--black);
}
.hazard-border-top { top: 0; left: 0; right: 0; height: 15px; }
.hazard-border-bottom { bottom: 0; left: 0; right: 0; height: 15px; }
.hazard-border-left { top: 0; bottom: 0; left: 0; width: 15px; }
.hazard-border-right { top: 0; bottom: 0; right: 0; width: 15px; }

/* Hazard Stripes inside borders */
.hazard-border-top::after, .hazard-border-bottom::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(45deg, var(--yellow), var(--yellow) 10px, var(--black) 10px, var(--black) 20px);
    opacity: 0.8;
}

/* Japanese Marquee */
.marquee-container {
    position: absolute;
    top: 15px; left: 15px; right: 15px;
    height: 30px;
    background-color: var(--black);
    color: var(--yellow);
    display: flex;
    align-items: center;
    overflow: hidden;
    border-bottom: 2px solid var(--yellow);
    pointer-events: auto;
}

.marquee-content {
    display: flex;
    white-space: nowrap;
    animation: marquee 20s linear infinite;
    font-weight: bold;
    font-size: 0.9rem;
    letter-spacing: 2px;
}

.marquee-content span {
    padding-right: 50px;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Assuming two identical spans */
}

/* Navigation */
.cyber-nav {
    position: absolute;
    top: 60px; right: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: auto;
    text-align: right;
}

.nav-link {
    color: var(--black);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 2rem;
    text-transform: uppercase;
    position: relative;
    padding: 5px 15px;
    background-color: transparent;
    border: 2px solid transparent;
    transition: all 0.2s;
    line-height: 1;
}

.nav-link::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--yellow);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.nav-link:hover, .nav-link.active {
    border-color: var(--black);
}

.nav-link:hover::before, .nav-link.active::before {
    transform: scaleX(1);
}

/* ================== GLOBAL STYLES ================== */
.content-scroll {
    position: relative;
    z-index: 1;
    padding: 15px; /* offset for borders */
}

.cyber-section {
    min-height: 100vh;
    position: relative;
    background-color: var(--bg-dark);
    padding: 80px 40px;
    border-bottom: 5px solid var(--black);
    overflow: hidden;
}

.cyber-section.inverted {
    background-color: var(--black);
    color: var(--bg-dark);
}

.yellow-bg {
    background-color: var(--yellow);
}

.bg-grid {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        linear-gradient(rgba(17,17,17,0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17,17,17,0.1) 1px, transparent 1px);
    background-size: 30px 30px;
    z-index: 0;
}

.cyber-section.inverted .bg-grid.light {
    background-image: 
        linear-gradient(rgba(241,252,47,0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(241,252,47,0.1) 1px, transparent 1px);
}

.glitch-title {
    font-family: var(--font-display);
    font-size: 8rem;
    line-height: 0.9;
    text-transform: uppercase;
    position: relative;
    color: var(--black);
    white-space: nowrap;
}

.cyber-section.inverted .glitch-title {
    color: var(--yellow);
}

/* ================== HERO SECTION ================== */
#hero {
    display: flex;
    justify-content: center;
    align-items: center;
}

.bg-topo {
    position: absolute; bottom: 0; right: 0; width: 800px; height: 800px;
    background: repeating-radial-gradient(circle at 50% 50%, transparent, transparent 15px, rgba(17,17,17,0.08) 16px, rgba(17,17,17,0.08) 18px);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    z-index: 0;
}

/* Module general */
.module {
    position: absolute;
    border: 4px solid var(--black);
    z-index: 2;
}

/* Top Left Mod */
.mod-top-left {
    top: 60px; left: 40px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 10px 10px 0 rgba(17,17,17,0.1);
}

.mod-header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--black); padding-bottom: 10px; margin-bottom: 10px; }
.bracket-text { font-family: var(--font-display); font-size: 2rem; font-weight: bold; line-height: 1; }

.header-icons { display: flex; gap: 5px; }
.header-icons div { width: 30px; height: 30px; background: var(--black); display: flex; justify-content: center; align-items: center; }
.header-icons svg { width: 20px; height: 20px; stroke: var(--yellow); fill: none; }
.header-icons .gi-tri svg { fill: var(--yellow); stroke: none; }
.header-icons .gi-circle svg { fill: var(--yellow); stroke: none; }

.arrow-block { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.chevron-svg.large { width: 120px; height: 30px; }
.vertical-text { writing-mode: vertical-rl; text-orientation: mixed; font-size: 1.5rem; font-weight: bold; font-family: var(--font-display); }

.mod-footer {
    display: flex; align-items: center; justify-content: space-between;
}
.switch { width: 40px; height: 20px; border: 2px solid var(--black); border-radius: 10px; position: relative; }
.switch::after { content: ''; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--black); }
.plus-row { font-size: 1.5rem; font-weight: bold; letter-spacing: 5px; }

/* Top Mid Mod */
.mod-top-mid {
    top: 60px; left: 300px;
    padding: 15px;
    display: flex;
    box-shadow: 10px 10px 0 rgba(17,17,17,0.1);
}
.dash-grid {
    display: flex; gap: 20px; align-items: center;
}
.dash-block {
    display: flex; flex-direction: column; gap: 5px;
    border-right: 2px solid var(--black); padding-right: 20px;
}
.dash-block:last-child { border-right: none; padding-right: 0; }
.dash-label { font-family: var(--font-mono); font-size: 0.7rem; font-weight: bold; letter-spacing: 1px; }
.dash-value { font-family: var(--font-display); font-size: 2.5rem; line-height: 1; }
.battery-container { width: 100px; height: 15px; border: 2px solid var(--black); padding: 2px; }
.battery-bar { height: 100%; background: var(--black); }
.dash-sub { font-size: 0.7rem; font-weight: bold; }
.diag-bars { display: flex; gap: 3px; align-items: flex-end; height: 25px; }
.d-bar { width: 10px; background: var(--black); }
.d-bar:nth-child(1) { height: 60%; }
.d-bar:nth-child(2) { height: 100%; }
.d-bar:nth-child(3) { height: 40%; }
.d-bar:nth-child(4) { height: 80%; }
.d-bar:nth-child(5) { height: 50%; }

/* Top Right Mod */
.mod-top-right {
    top: 60px; right: 200px; /* offset for nav */
    padding: 20px;
    display: flex;
    gap: 20px;
    box-shadow: 10px 10px 0 rgba(17,17,17,0.1);
}
.viewfinder {
    width: 150px; height: 100px; background: var(--black); position: relative;
    display: flex; justify-content: center; align-items: center;
}
.vf-corner { position: absolute; width: 15px; height: 15px; border: 2px solid var(--yellow); }
.vf-corner.tl { top: 5px; left: 5px; border-right: none; border-bottom: none; }
.vf-corner.tr { top: 5px; right: 5px; border-left: none; border-bottom: none; }
.vf-corner.bl { bottom: 5px; left: 5px; border-right: none; border-top: none; }
.vf-corner.br { bottom: 5px; right: 5px; border-left: none; border-top: none; }
.vf-center {
    width: 20px; height: 20px; border: 2px solid var(--yellow);
}
.vf-num { position: absolute; top: 5px; left: 10px; color: var(--yellow); font-family: var(--font-mono); font-size: 0.8rem;}

.section-badge { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; text-align: right;}
.badge-text { font-weight: bold; font-size: 1.5rem; line-height: 1.1; }
.small-sub { font-size: 0.6rem; letter-spacing: 1px; }
.badge-num { font-family: var(--font-display); font-size: 4rem; line-height: 0.8; }

/* ================== HERO CENTER ================== */
.hero-bg-elements { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.topo-lines { position: absolute; bottom: 0; right: 0; width: 60%; height: 100%; z-index: 0; pointer-events: none; }
.spirograph { position: absolute; bottom: 5%; left: 5%; width: 350px; height: 350px; z-index: 0; pointer-events: none; animation: spinSpiro 60s linear infinite; }
@keyframes spinSpiro { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.bg-hash { position: absolute; width: 150px; height: 30px; background: repeating-linear-gradient(45deg, rgba(17,17,17,0.1), rgba(17,17,17,0.1) 4px, transparent 4px, transparent 10px); }
.hash-1 { top: 40%; right: 15%; transform: rotate(45deg); }
.hash-2 { bottom: 15%; left: 15%; transform: rotate(-45deg); }
.bg-radar-huge { position: absolute; right: -300px; bottom: -300px; width: 1000px; height: 1000px; border: 2px dashed rgba(17,17,17,0.05); border-radius: 50%; box-shadow: inset 0 0 0 100px rgba(17,17,17,0.02), inset 0 0 0 200px rgba(17,17,17,0.01); }
.bg-watermark-vertical { position: absolute; left: 5%; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font-family: var(--font-display); font-size: 6rem; color: rgba(17,17,17,0.03); letter-spacing: 10px; }

.hero-main-row { display: flex; align-items: center; justify-content: center; gap: 60px; z-index: 5; flex-direction: row-reverse; width: 100%; max-width: 1200px; margin: 50px auto 0 auto; padding-right: 50px; }
.hero-center { flex-shrink: 0; }

.system-badge { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; border: 2px solid var(--black); padding: 5px; width: fit-content; background: var(--yellow); box-shadow: 5px 5px 0 var(--black); }
.badge-q2 { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 10px; border-right: 2px solid var(--black); }
.badge-q2 span { font-size: 0.8rem; font-family: var(--font-mono); font-weight: bold;}
.badge-q2 strong { font-size: 3.5rem; font-family: var(--font-display); line-height: 0.9; }
.badge-right { display: flex; flex-direction: column; gap: 5px; width: 150px; }
.badge-right .sys-label { font-size: 1.8rem; font-family: var(--font-display); font-weight: bold; letter-spacing: 2px; line-height: 1;}
.checker-strip { width: 100%; height: 10px; background: repeating-linear-gradient(45deg, var(--black), var(--black) 5px, transparent 5px, transparent 10px); }

.hero-arrow { width: 300px; margin-top: -10px; }
.hero-arrow svg { width: 100%; }

/* Hero Media Box */
.hero-media-box {
    width: 280px; flex-shrink: 0;
    border: 4px solid var(--black);
    background: var(--yellow);
    box-shadow: 10px 10px 0 rgba(17,17,17,0.1);
}
@keyframes glitch-anim {
    0% { clip-path: inset(10% 0 80% 0); transform: translate(-5px, 5px); filter: hue-rotate(90deg); box-shadow: 10px 10px 0 rgba(17,17,17,0.1), -5px 0 0 red, 5px 0 0 blue; }
    10% { clip-path: inset(40% 0 10% 0); transform: translate(5px, -5px); box-shadow: 10px 10px 0 rgba(17,17,17,0.1), 5px 0 0 red, -5px 0 0 blue; }
    20% { clip-path: inset(80% 0 5% 0); transform: translate(-5px, 0); filter: invert(1); box-shadow: 10px 10px 0 rgba(17,17,17,0.1), -5px 0 0 red, 5px 0 0 blue; }
    30% { clip-path: inset(5% 0 60% 0); transform: translate(5px, 5px); filter: invert(0); box-shadow: 10px 10px 0 rgba(17,17,17,0.1); }
    40% { clip-path: inset(30% 0 20% 0); transform: translate(-5px, -5px); filter: invert(1); box-shadow: 10px 10px 0 rgba(17,17,17,0.1), 5px 0 0 red, -5px 0 0 blue; }
    50% { clip-path: inset(15% 0 70% 0); transform: translate(5px, 0); filter: invert(0); box-shadow: 10px 10px 0 rgba(17,17,17,0.1); }
    60% { clip-path: inset(60% 0 10% 0); transform: translate(-5px, 5px); filter: hue-rotate(180deg); box-shadow: 10px 10px 0 rgba(17,17,17,0.1), -5px 0 0 red, 5px 0 0 blue; }
    70% { clip-path: inset(5% 0 80% 0); transform: translate(5px, -5px); filter: hue-rotate(0deg); box-shadow: 10px 10px 0 rgba(17,17,17,0.1); }
    80% { clip-path: inset(70% 0 15% 0); transform: translate(-5px, 0); filter: contrast(2); box-shadow: 10px 10px 0 rgba(17,17,17,0.1), 5px 0 0 red, -5px 0 0 blue; }
    90% { clip-path: inset(20% 0 50% 0); transform: translate(5px, 5px); filter: contrast(1); box-shadow: 10px 10px 0 rgba(17,17,17,0.1); }
    100% { clip-path: inset(0 0 0 0); transform: translate(0, 0); box-shadow: 10px 10px 0 rgba(17,17,17,0.1); }
}
.glitch-active {
    animation: glitch-anim 0.3s cubic-bezier(.25, .46, .45, .94) both;
}
.media-border-top, .media-border-bottom {
    height: 10px;
    background: repeating-linear-gradient(90deg, var(--black), var(--black) 3px, transparent 3px, transparent 6px);
}
.media-inner {
    position: relative;
    overflow: hidden;
    border-top: 2px solid var(--black);
    border-bottom: 2px solid var(--black);
}
.hero-media-img {
    width: 100%; height: 250px;
    object-fit: cover; display: block;
}
.media-scanline {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px);
    pointer-events: none;
}
.media-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(17,17,17,0.8));
    padding: 15px 10px 10px;
}
.media-tag {
    font-family: var(--font-mono); font-size: 0.8rem;
    color: var(--yellow); font-weight: bold; letter-spacing: 1px;
}
.media-info {
    font-family: var(--font-mono); font-size: 0.7rem;
    font-weight: bold; padding: 5px 10px;
    letter-spacing: 1px;
}

/* Bottom Right */
.mod-bottom-right {
    bottom: 40px; right: 40px;
    padding: 10px;
    display: flex; gap: 15px; align-items: center;
}
.qr-box { width: 60px; height: 60px; border: 2px solid var(--black); padding: 5px; background: var(--white); }
.qr-box.real-qr { width: 100px; height: 100px; padding: 4px; }
.qr-box.real-qr img { width: 100%; height: 100%; display: block; object-fit: contain; }
.rating-box { display: flex; flex-direction: column; align-items: flex-end; }
.rating-id { display: flex; align-items: center; gap: 10px; border-bottom: 2px solid var(--black); padding-bottom: 5px; }
.x-mark { font-family: var(--font-display); font-size: 2.5rem; line-height: 0.8; }
.id-text { font-weight: bold; font-size: 1.2rem; }
.rated-label { font-size: 0.8rem; letter-spacing: 2px; font-weight: bold; margin-top: 5px; }


/* ================== ABOUT SECTION ================== */
.about-container {
    position: relative; z-index: 5;
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    gap: 50px;
    align-items: center;
    height: 100%;
}

.about-left { flex: 1; }
.glitch-image-container {
    width: 100%;
    background-color: #222;
    border: 4px solid var(--yellow);
    position: relative;
    display: flex; justify-content: center; align-items: center;
    overflow: hidden;
}
.about-left .glitch-image-container {
    aspect-ratio: 4/5;
}
.project-visual .glitch-image-container {
    aspect-ratio: auto;
}
.profile-img {
    width: 100%; height: 100%; object-fit: cover; 
    filter: grayscale(100%) contrast(120%) brightness(0.8);
    mix-blend-mode: luminosity;
}
.project-img {
    width: 100%; height: auto; object-fit: contain; display: block;
}
.scanline {
    position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: rgba(241,252,47,0.5);
    animation: scan 3s linear infinite;
}
@keyframes scan { 0% { top: -10%; } 100% { top: 110%; } }
.image-overlay-text {
    position: absolute; bottom: 10px; left: 10px; color: var(--yellow); font-size: 0.8rem; background: var(--black); padding: 2px 5px;
}

.about-right { flex: 1.5; }
.section-title-box { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; }
.section-title-box h2 { font-family: var(--font-display); font-size: 4rem; color: var(--yellow); margin: 0; line-height: 1;}
.title-deco { color: var(--yellow); font-weight: bold; letter-spacing: 3px; }

.terminal-box {
    border: 2px solid var(--yellow);
    background: rgba(17,17,17,0.8);
    backdrop-filter: blur(5px);
}
.terminal-header {
    background: var(--yellow); color: var(--black); padding: 5px 15px; font-weight: bold;
    display: flex; justify-content: space-between; align-items: center;
}
.window-controls span {
    display: inline-block; width: 12px; height: 12px; background: var(--black); margin-left: 5px; border-radius: 50%;
}
.terminal-body {
    padding: 30px; color: var(--bg-dark); font-size: 1.1rem; line-height: 1.6;
    font-family: var(--font-code);
    word-wrap: break-word; overflow-wrap: break-word;
}
.highlight { color: var(--yellow); font-weight: bold; text-shadow: 0 0 5px rgba(241,252,47,0.5); }
.skill-list { list-style: none; margin-left: 20px; color: #aaa;}
.skill-list li { margin-bottom: 5px; }
.cursor {
    display: inline-block; width: 10px; height: 1rem; background: var(--yellow); animation: blink 1s step-end infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.large-watermark {
    position: absolute; top: 10%; right: -5%;
    font-family: var(--font-display); font-size: 20rem; color: rgba(241,252,47,0.03);
    transform: rotate(90deg); z-index: 0; pointer-events: none;
}


/* ================== CONTACT SECTION ================== */
.contact-wrapper {
    position: relative; z-index: 5;
    max-width: 1000px; margin: 0 auto;
    padding-top: 50px;
}
.contact-header { margin-bottom: 50px; text-align: center; }
.jp-subtitle { font-family: var(--font-jp); font-weight: bold; letter-spacing: 5px; margin-top: 10px; }

.contact-grid {
    display: grid; grid-template-columns: 2fr 1fr; gap: 40px;
}

.cyber-form { display: flex; flex-direction: column; gap: 20px; }
.input-group { display: flex; flex-direction: column; gap: 5px; }
.input-group label { font-weight: bold; font-size: 0.9rem; letter-spacing: 1px; }
.input-group input, .input-group textarea {
    background: transparent; border: 2px solid var(--black); padding: 15px;
    font-family: var(--font-mono); font-size: 1rem; color: var(--black);
    transition: all 0.3s;
}
.input-group input:focus, .input-group textarea:focus {
    outline: none; background: var(--yellow); border-color: var(--black);
}

.cyber-btn {
    background: var(--black); color: var(--yellow); border: none; padding: 20px;
    font-family: var(--font-display); font-size: 2rem; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
    transition: all 0.3s; text-transform: uppercase;
}
.cyber-btn:hover { background: var(--yellow); color: var(--black); border: 4px solid var(--black); padding: 16px; }

.contact-info-panel {
    border: 4px solid var(--black); padding: 30px;
    display: flex; flex-direction: column; gap: 30px;
}
.contact-info-panel h3 { font-family: var(--font-display); font-size: 2.5rem; margin-bottom: -10px; border-bottom: 2px solid var(--black); }
.channel-list { display: flex; flex-direction: column; gap: 15px; }
.contact-info-panel {
    background-color: var(--yellow);
    padding: 40px;
    display: flex;
    flex-direction: column;
    color: var(--black);
}
.contact-info-panel h3 { font-family: var(--font-display); font-size: 3rem; color: var(--black); border-bottom: 2px solid var(--black); padding-bottom: 10px; margin-bottom: 30px; line-height: 1; text-shadow: none;}
.channel-list { display: flex; flex-direction: column; gap: 20px; }
.channel-link { display: flex; align-items: center; gap: 15px; text-decoration: none; color: var(--black); font-size: 1.2rem; font-weight: bold; transition: transform 0.3s; }
.channel-link:hover { transform: translateX(10px); color: var(--black); }
.ch-id { font-family: var(--font-display); font-size: 1.5rem; }

.status-box { margin-top: auto; border-top: 1px dashed var(--black); padding-top: 20px; display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--black); font-weight: bold;}
.status-indicator { width: 15px; height: 15px; background: #ff3333; border-radius: 50%; }
.status-indicator.blink { animation: red-blink 1s infinite; }
@keyframes red-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.barcode-large { font-size: 2rem; letter-spacing: 3px; font-weight: bold; overflow: hidden; white-space: nowrap; }

.cyber-footer {
    display: flex; justify-content: space-between; margin-top: 80px; padding-top: 20px; border-top: 4px solid var(--black); font-weight: bold;
}

/* ================== CYBER LOADER ================== */
.cyber-loader {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--black); z-index: 9999;
    display: flex; justify-content: center; align-items: center;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}
.cyber-loader.hidden { opacity: 0; visibility: hidden; }

.loader-content { width: 800px; display: flex; flex-direction: column; gap: 15px; }
.loader-jp { font-family: var(--font-jp); font-size: 1.5rem; color: var(--yellow); letter-spacing: 5px; margin-bottom: -10px; font-weight: bold; }
.loader-text { font-family: var(--font-display); font-size: 8rem; color: var(--yellow); letter-spacing: 5px; line-height: 1;}
.loader-bar-container { width: 100%; height: 40px; border: 3px solid var(--yellow); padding: 3px; }
.loader-bar { width: 0%; height: 100%; background-color: var(--yellow); transition: width 0.2s; }
.loader-status { font-family: var(--font-mono); font-size: 1.2rem; color: var(--yellow); display: flex; justify-content: space-between; font-weight: bold; }
.loading-progress { font-family: var(--font-display); font-size: 8rem; color: var(--yellow); text-align: right; line-height: 1; margin-top: -20px;}

/* ================== JAPANESE ORNAMENTS ================== */
.jp-ornament {
    position: absolute; font-family: var(--font-jp); font-weight: bold;
    color: var(--black); opacity: 0.15; z-index: 0; pointer-events: none;
    letter-spacing: 5px;
}
.cyber-section.inverted .jp-ornament { color: var(--yellow); opacity: 0.1; }

.jp-ornament.vertical { writing-mode: vertical-rl; text-orientation: upright; font-size: 2rem; }
.jp-ornament.horizontal { font-size: 3rem; }

.jp-ornament.vertical.right { top: 100px; right: 50px; }
.jp-ornament.vertical.left-bottom { bottom: 100px; left: 50px; }
.jp-ornament.horizontal.top-right { top: 50px; right: 50px; }
.jp-ornament.vertical.left-large { top: 150px; left: 40px; font-size: 4rem; opacity: 0.05; }

.jp-bg-watermark {
    position: absolute; font-family: var(--font-jp); font-weight: bold;
    font-size: 30vw; color: rgba(241,252,47,0.02); z-index: 0; pointer-events: none;
    top: 50%; right: -10%; transform: translateY(-50%); line-height: 1;
}
.cyber-section.inverted .jp-bg-watermark { color: rgba(255,255,255,0.02); }
.jp-bg-watermark.left { right: auto; left: -10%; }
.jp-bg-watermark.center { right: auto; left: 50%; transform: translate(-50%, -50%); text-align: center; }

.tech-bg-container { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; opacity: 0.15; }
.radar-circle { position: absolute; left: -100px; bottom: -100px; width: 600px; height: 600px; border: 4px dashed var(--black); border-radius: 50%; opacity: 0.5; }
.radar-circle-inner { position: absolute; left: 50px; bottom: 50px; width: 300px; height: 300px; border: 2px solid var(--black); border-radius: 50%; opacity: 0.5; }
.crosshair-huge { position: absolute; top: 10%; right: 10%; font-size: 20rem; color: var(--black); line-height: 0.5; font-family: var(--font-mono); font-weight: normal; }
.watermark-q2 { position: absolute; top: 10%; left: 5%; font-size: 8rem; font-family: var(--font-display); writing-mode: vertical-rl; transform: rotate(180deg); color: var(--black); }


/* ================== PROJECTS SECTION ================== */
.projects-wrapper {
    position: relative; z-index: 5; max-width: 1200px; margin: 0 auto;
}
#projects .glitch-title { color: var(--black); }
#projects .glitch-title::before, #projects .glitch-title::after { color: var(--black); }
.projects-list { display: flex; flex-direction: column; gap: 80px; margin-top: 50px; }
.project-item { display: flex; gap: 40px; align-items: stretch; }
.project-item.reverse { flex-direction: row-reverse; }

.project-visual { flex: 1.2; }
.project-visual .glitch-image-container { aspect-ratio: 16/9; width: 100%; height: 100%; }

.project-details { flex: 1; display: flex; flex-direction: column; }
.project-details.terminal-box { background-color: var(--yellow); border-color: var(--black); }
.project-details .terminal-header { background-color: var(--black); color: var(--yellow); }
.project-details .terminal-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; color: var(--black); }
.project-details h3 { font-family: var(--font-display); font-size: 3.5rem; color: var(--black); margin-bottom: 10px; line-height: 1;}

.project-details .cyber-btn { background: var(--black); color: var(--yellow); border-color: var(--black); }
.project-details .cyber-btn:hover { background: transparent; color: var(--black); }

.small-btn { font-size: 1.2rem; padding: 10px 15px; width: fit-content; margin-top: auto; }
.small-btn:hover { padding: 8px 13px; border-width: 2px; }


/* ================== RESPONSIVE ================== */
@media (max-width: 1024px) {
    .mod-top-right { right: 40px; }
    .mod-top-mid { display: none; }
    .cyber-nav { display: none; }
    .hero-main-row { margin-left: 0; flex-direction: column; align-items: center; gap: 30px; }
    .hero-center { text-align: center; display: flex; flex-direction: column; align-items: center;}
    .hero-arrow { display: none; }
    .hero-media-box { width: 220px; order: -1; }
    .glitch-title { font-size: 6rem; white-space: normal; }
    .contact-wrapper { width: 100%; box-sizing: border-box; }
    .contact-grid { display: flex; flex-direction: column; width: 100%; gap: 40px; }
    .contact-info-panel { width: 100%; max-width: 100%; box-sizing: border-box; }
    .jp-ornament { display: none; }
    .project-item, .project-item.reverse { flex-direction: column; }
    .hero-bg-elements { display: none; }
}

@media (max-width: 768px) {
    .module { transform: scale(0.6); }
    .mod-top-left { transform-origin: top left; left: 10px; top: 50px; }
    .mod-top-right { transform-origin: top right; right: 10px; top: 50px; }
    .mod-bottom-right { transform-origin: bottom right; right: 10px; bottom: 20px; }
    
    .about-container { flex-direction: column; gap: 30px; }
    .glitch-title { font-size: 3rem; white-space: normal; word-wrap: break-word; overflow-wrap: break-word; line-height: 1; }
    .cyber-section { padding: 120px 20px 60px 20px; width: 100%; box-sizing: border-box; overflow-x: hidden; }
    .section-title-box h2 { font-size: 2.5rem; word-wrap: break-word; overflow-wrap: break-word;}
    .title-deco { display: none; }
    .loader-content { width: 80%; }
    .loader-jp { font-size: 1rem; }
    .loader-text { font-size: 4rem; }
    .loading-progress { font-size: 5rem; }
    
    .hazard-border-top { height: 10px; }
    .hazard-border-bottom { height: 10px; }
    .hazard-border-left { width: 10px; }
    .hazard-border-right { width: 10px; }
    .marquee-container { top: 10px; left: 10px; right: 10px; height: 25px; }
    .marquee-content { font-size: 0.75rem; }
    
    .input-group input, .input-group textarea { width: 100%; box-sizing: border-box; }
    .cyber-btn { font-size: 1.5rem; padding: 15px; }
    .contact-info-panel h3 { font-size: 2rem; }
}