@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');

/* ===== CSS VARIABLES FOR THEMING ===== */
:root {
    --bg-primary: #0a0a0a;
    --bg-secondary: #111;
    --bg-card: #0f0f0f;
    --bg-card-hover: #111827;
    --text-primary: #d1d5db;
    --text-heading: #ffffff;
    --text-muted: #9ca3af;
    --accent: #4ade80;
    --accent-rgb: 74, 222, 128;
    --accent-dark: #22c55e;
    --border-color: #1f2937;
    --border-color-light: #374151;
    --nav-bg: rgba(10, 10, 10, 0.9);
    --scrollbar-track: #0a0a0a;
    --scrollbar-thumb: #22c55e;
    --input-bg: #111827;
    --transition-speed: 0.6s;
    
    /* Glassmorphism Variables */
    --card-bg: rgba(17, 17, 17, 0.45);
    --card-border: rgba(74, 222, 128, 0.15);
    --card-glow: rgba(74, 222, 128, 0.15);
}

/* ===== LIGHT MODE ===== */
html.light-mode {
    --bg-primary: #f0f4f8;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f8fafc;
    --text-primary: #334155;
    --text-heading: #0f172a;
    --text-muted: #64748b;
    --accent: #059669;
    --accent-rgb: 5, 150, 105;
    --accent-dark: #047857;
    --border-color: #e2e8f0;
    --border-color-light: #cbd5e1;
    --nav-bg: rgba(240, 244, 248, 0.95);
    --scrollbar-track: #f0f4f8;
    --scrollbar-thumb: #059669;
    --input-bg: #f1f5f9;

    /* Glassmorphism Variables */
    --card-bg: rgba(255, 255, 255, 0.45);
    --card-border: rgba(5, 150, 105, 0.15);
    --card-glow: rgba(5, 150, 105, 0.1);
}

* {
    transition: background-color var(--transition-speed) ease,
                color var(--transition-speed) ease,
                border-color var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

section[id] {
    scroll-margin-top: 100px;
}

body {
    font-family: 'Fira Code', monospace;
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Custom Scrollbar for terminal feel */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

.neon-text {
    color: var(--accent);
    text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.5);
}

.neon-border {
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.2);
}

.typing-cursor::after {
    content: '█';
    animation: blink 1s step-start infinite;
    color: var(--accent);
}

@keyframes blink {
    50% { opacity: 0; }
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.3);
    border-color: var(--accent);
}

/* ===== GLASSMORPHISM CARD STYLES ===== */
.glass-card {
    background: var(--card-bg);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border-radius: 12px;
    border: 1px solid var(--card-border);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    position: relative;
    transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1),
                box-shadow 0.3s ease,
                border-color 0.3s ease,
                background 0.5s ease;
    will-change: transform, box-shadow;
    transform: translateZ(0); /* Hardware acceleration */
    overflow: hidden;
}

/* Gradient Border using modern Mask-Composite */
.glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1.5px; /* Border thickness */
    background: linear-gradient(135deg, var(--accent), transparent 60%, var(--accent-dark));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

.glass-card:hover::before {
    opacity: 1;
}

.glass-card:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: transparent;
    box-shadow: 0 15px 30px rgba(var(--accent-rgb), 0.2), 
                0 0 15px rgba(var(--accent-rgb), 0.1);
}

/* For Light Mode compatibility overrides */
html.light-mode .glass-card {
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.08);
}

/* Admin Editor specific styles */
.editor-textarea {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color-light);
    color: var(--text-primary);
}

.editor-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.2);
}

/* ===== Light mode overrides for Tailwind classes ===== */
html.light-mode .bg-\[\#0a0a0a\],
html.light-mode .bg-\[\#0a0a0a\]\/90 {
    background-color: var(--nav-bg) !important;
}
html.light-mode .bg-\[\#111\],
html.light-mode .bg-\[\#0f0f0f\] {
    background-color: var(--bg-secondary) !important;
}
html.light-mode .bg-gray-900,
html.light-mode .bg-gray-900\/50,
html.light-mode .bg-gray-900\/30,
html.light-mode .bg-gray-900\/20,
html.light-mode .bg-gray-800 {
    background-color: var(--bg-card) !important;
}
html.light-mode .text-white {
    color: var(--text-heading) !important;
}
html.light-mode .text-gray-300,
html.light-mode .text-gray-400 {
    color: var(--text-primary) !important;
}
html.light-mode .text-gray-500,
html.light-mode .text-gray-600 {
    color: var(--text-muted) !important;
}
html.light-mode .border-gray-700,
html.light-mode .border-gray-800 {
    border-color: var(--border-color) !important;
}
html.light-mode .text-green-400,
html.light-mode .text-green-500 {
    color: var(--accent) !important;
}
html.light-mode .border-green-500\/30,
html.light-mode .border-green-500\/50,
html.light-mode .border-green-700 {
    border-color: rgba(var(--accent-rgb), 0.4) !important;
}
html.light-mode .bg-green-900,
html.light-mode .bg-green-900\/20,
html.light-mode .bg-green-900\/30 {
    background-color: rgba(var(--accent-rgb), 0.1) !important;
}
html.light-mode .hover\:bg-green-500:hover {
    background-color: var(--accent) !important;
}

/* ===== DANCING GIRL THEME TOGGLE ===== */
.theme-toggle-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    background: var(--bg-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.25),
                0 4px 15px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.6s ease, background 0.6s ease;
    overflow: visible;
    padding: 0;
    outline: none;
}
.theme-toggle-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 0 25px rgba(var(--accent-rgb), 0.5),
                0 6px 20px rgba(0,0,0,0.3);
}
.theme-toggle-btn:active {
    transform: scale(0.95);
}

/* Sun and Moon icons inside the toggle button */
.sun-icon, .moon-icon {
    width: 20px;
    height: 20px;
    color: var(--accent);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Interactive rotation on hover */
.theme-toggle-btn:hover .sun-icon {
    transform: scale(1.1) rotate(45deg);
}
.theme-toggle-btn:hover .moon-icon {
    transform: scale(1.1) rotate(-15deg);
}

/* Show moon in light-mode, hide sun */
html.light-mode .theme-toggle-btn .sun-icon {
    display: none;
}
html.light-mode .theme-toggle-btn .moon-icon {
    display: block;
}

/* Show sun in dark-mode, hide moon */
html:not(.light-mode) .theme-toggle-btn .sun-icon {
    display: block;
}
html:not(.light-mode) .theme-toggle-btn .moon-icon {
    display: none;
}

/* Spin animation when button is clicked */
.theme-toggle-btn.clicked .sun-icon,
.theme-toggle-btn.clicked .moon-icon {
    animation: iconSpin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes iconSpin {
    0% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(0.65) rotate(185deg); }
    100% { transform: scale(1) rotate(360deg); }
}

/* Sparkles that burst on click */
.sparkle-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
}
.sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0;
}
.sparkle.burst {
    animation: sparkleBurst 0.7s ease-out forwards;
}
@keyframes sparkleBurst {
    0%   { opacity: 1; transform: translate(0, 0) scale(1); }
    50%  { opacity: 0.8; }
    100% { opacity: 0; transform: var(--sparkle-end) scale(0); }
}

/* Ripple ring effect on button */
.toggle-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    pointer-events: none;
}
.toggle-ripple.active {
    animation: rippleExpand 0.6s ease-out forwards;
}
@keyframes rippleExpand {
    0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

/* Mode tooltip */
.mode-label {
    position: absolute;
    top: 52px;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-family: 'Fira Code', monospace;
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-5px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.theme-toggle-btn:hover .mode-label {
    opacity: 1;
    transform: translateY(0);
}

/* ===== VIEW TRANSITIONS FOR TOGGLE ===== */
.theme-transitioning * {
    transition: none !important;
}

::view-transition-group(root) {
    animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
    z-index: 10000;
}
::view-transition-old(root),
::view-transition-new(root) {
    animation: theme-scale 1.75s cubic-bezier(0.7, 0, 0.84, 0) both;
    mix-blend-mode: normal;
}
::view-transition-new(root) {
    -webkit-mask: url(shigure-ui-smol.gif) 50% / 0 no-repeat;
    mask: url(shigure-ui-smol.gif) 50% / 0 no-repeat;
}

@keyframes theme-scale {
    0%   { -webkit-mask-size: 0;        mask-size: 0; }
    10%  { -webkit-mask-size: 25vmax;   mask-size: 25vmax; }
    90%  { -webkit-mask-size: 25vmax;   mask-size: 25vmax; }
    100% { -webkit-mask-size: 750vmax;  mask-size: 750vmax; }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none; }
    ::view-transition-new(root) { -webkit-mask: none; mask: none; }
}

/* ===== LOGIN SCREEN & IDS PORTAL ===== */
#login-view input {
    color-scheme: dark;
}

.glitch-text {
    text-shadow: 2px 2px 0px #ff0000, -2px -2px 0px #0000ff;
    animation: glitchEffect 0.3s infinite;
}

@keyframes glitchEffect {
    0% { text-shadow: 2px 2px 0px #ff0000, -2px -2px 0px #0000ff; }
    50% { text-shadow: -2px 2px 0px #00ff00, 2px -2px 0px #ff00ff; }
    100% { text-shadow: 2px -2px 0px #ff0000, -2px 2px 0px #0000ff; }
}

/* Circular Glassmorphism Card support */
.circular-card {
    border-radius: 50% !important;
}
.circular-card::before {
    border-radius: 50% !important;
}

/* ===== 3D FLIP CARD ===== */
.flip-card-container {
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.flip-card-container:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    inset: 0;
    overflow: visible !important;
    /* Prevent Chrome/Blink flattening bugs with 3D transform + backdrop-filter */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.flip-card-front {
    transform: rotateY(0deg) !important;
    z-index: 2;
}

.flip-card-back {
    transform: rotateY(180deg) !important;
    z-index: 1;
}

/* ===== INTERACTIVE TERMINAL & GLITCH STYLES ===== */
.terminal-interactive {
    display: flex;
    flex-direction: column;
}

#terminal-output {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), 0.3) transparent;
}

#terminal-output::-webkit-scrollbar {
    width: 6px;
}

#terminal-output::-webkit-scrollbar-track {
    background: transparent;
}

#terminal-output::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.3);
    border-radius: 3px;
}

#terminal-output::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-rgb), 0.6);
}

.terminal-input-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 0.75rem;
}

#terminal-input {
    caret-color: var(--accent);
}

/* Cyberpunk Glitch Text Effect on Hover */
.glitch-hover {
    transition: none !important; /* Prevent transition interfering with glitch */
}

.glitch-hover:hover {
    animation: text-glitch 0.2s linear infinite;
    color: var(--text-heading) !important;
}

@keyframes text-glitch {
    0% {
        text-shadow: 2px -1px 0 rgba(239, 68, 68, 0.8), -2px 1px 0 rgba(59, 130, 246, 0.8);
        transform: translate(1px, -1px);
    }
    20% {
        text-shadow: -2px 1px 0 rgba(239, 68, 68, 0.8), 2px -1px 0 rgba(59, 130, 246, 0.8);
        transform: translate(-1px, 1px);
    }
    40% {
        text-shadow: 1px 2px 0 rgba(239, 68, 68, 0.8), -1px -2px 0 rgba(59, 130, 246, 0.8);
        transform: translate(-1px, -1px);
    }
    60% {
        text-shadow: -1px -2px 0 rgba(239, 68, 68, 0.8), 1px 2px 0 rgba(59, 130, 246, 0.8);
        transform: translate(1px, 1px);
    }
    80% {
        text-shadow: 2px 1px 0 rgba(239, 68, 68, 0.8), -2px -1px 0 rgba(59, 130, 246, 0.8);
        transform: translate(-1px, 1px);
    }
    100% {
        text-shadow: -2px -1px 0 rgba(239, 68, 68, 0.8), 2px 1px 0 rgba(59, 130, 246, 0.8);
        transform: translate(1px, -1px);
    }
}

/* ===== CUSTOM GLOWING CURSOR ===== */
@media (pointer: fine) {
    body, html, a, button, select, input, textarea, .glass-card, .theme-toggle-btn {
        cursor: none !important;
    }
    
    #custom-cursor {
        pointer-events: none;
        box-sizing: border-box;
        transition: transform 0.1s ease-out, border-color 0.3s, background-color 0.3s;
        will-change: left, top, transform;
    }
    
    #custom-cursor-dot {
        pointer-events: none;
        will-change: left, top;
        transition: transform 0.1s ease-out;
    }
}

/* ===== CYBERPUNK THEME SCANNER SCAN EFFECT ===== */
.theme-scanner {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99999;
    background: linear-gradient(to bottom, transparent, rgba(var(--accent-rgb), 0.1) 50%, transparent);
}

.theme-scanner-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--accent);
    box-shadow: 0 0 20px 4px var(--accent), 0 0 40px 10px rgba(var(--accent-rgb), 0.5);
    animation: scanner-sweep 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes scanner-sweep {
    0% {
        top: -10px;
    }
    100% {
        top: 100%;
    }
}