/* ============================================================
   TRALDI TECH — SPACE THEME  |  site.css
   ============================================================ */

:root {
    --sp-bg:      #020817;
    --sp-blue:    #0ea5e9;
    --sp-glow:    rgba(14, 165, 233, 0.4);
    --sp-dim:     rgba(14, 165, 233, 0.08);
    --sp-border:  rgba(14, 165, 233, 0.18);
    --sp-surface: rgba(5, 15, 40, 0.65);
    --sp-text:    rgba(220, 240, 255, 0.92);
    --sp-muted:   rgba(148, 163, 184, 0.75);

    /* Calibration editor */
    --cell-zoom:  1;
    --cell-w:     130px;
    --cell-font:  0.95rem;
    --cell-pad-x: 0.75rem;
    --cell-pad-y: 0.5rem;
}

html { font-size: 14px; position: relative; min-height: 100%; }

@media (min-width: 768px) { html { font-size: 16px; } }

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: #0ea5e9 transparent; }
*::-webkit-scrollbar          { height: 6px; width: 8px; }
*::-webkit-scrollbar-thumb    { background: #0ea5e9; border-radius: 9999px; }
*::-webkit-scrollbar-track    { background: transparent; }

/* ============================================================
   KEYFRAMES
   ============================================================ */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fade-in {
    0%   { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes spin-slow {
    to { transform: rotate(360deg); }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-9px); }
}
@keyframes glow-pulse {
    0%, 100% { text-shadow: 0 0 10px #0ea5e9, 0 0 30px rgba(14,165,233,.3); }
    50%       { text-shadow: 0 0 22px #0ea5e9, 0 0 60px rgba(14,165,233,.55), 0 0 100px rgba(14,165,233,.15); }
}
@keyframes glow {
    0%, 100% { text-shadow: 0 0 16px #34d399, 0 0 32px #34d399; }
    50%       { text-shadow: 0 0 32px #a5b4fc, 0 0 64px #a5b4fc; }
}
@keyframes border-glow {
    0%, 100% { box-shadow: 0 0 6px rgba(14,165,233,.3); }
    50%       { box-shadow: 0 0 22px rgba(14,165,233,.55), 0 0 40px rgba(14,165,233,.12); }
}
@keyframes nebula-drift {
    0%, 100% { transform: translate(0,0) scale(1); }
    33%       { transform: translate(28px,-18px) scale(1.04); }
    66%       { transform: translate(-15px,12px) scale(0.97); }
}
@keyframes gradient-shift {
    0%, 100% { background-position: 0%   50%; }
    50%       { background-position: 100% 50%; }
}
@keyframes flash-green {
    0%   { background: rgba(34,197,94,.25); }
    100% { background: transparent; }
}
@keyframes flash-red {
    0%   { background: rgba(239,68,68,.25); }
    100% { background: transparent; }
}
@keyframes counter-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes scan-line {
    0%   { top: -4px; opacity: 0.8; }
    50%  { opacity: 0.3; }
    100% { top: 100%; opacity: 0; }
}
@keyframes neon-border-pulse {
    0%, 100% { border-color: rgba(14,165,233,.2); box-shadow: 0 0 8px rgba(14,165,233,.1); }
    50%       { border-color: rgba(14,165,233,.5); box-shadow: 0 0 20px rgba(14,165,233,.25); }
}

/* ============================================================
   ANIMATION CLASSES
   ============================================================ */

.animate-fadeIn       { animation: fadeIn      0.8s ease-out forwards; }
.animate-fadeInRight  { animation: fadeInRight  0.8s ease-out forwards; }
.animate-fade-in      { animation: fade-in      0.7s ease; }
.animate-spin-slow    { animation: spin-slow    2s linear infinite; }
.animate-glow         { animation: glow         2s ease-in-out infinite; }
.animate-glow-pulse   { animation: glow-pulse   3s ease-in-out infinite; }
.animate-float        { animation: float        4s ease-in-out infinite; }
.animate-border-glow  { animation: border-glow  3s ease-in-out infinite; }
.animate-flash-green  { animation: flash-green  0.8s ease-out; }
.animate-flash-red    { animation: flash-red    0.8s ease-out; }

.delay-100 { animation-delay: .1s; }
.delay-200 { animation-delay: .2s; }
.delay-300 { animation-delay: .3s; }
.delay-400 { animation-delay: .4s; }
.delay-500 { animation-delay: .5s; }
.delay-600 { animation-delay: .6s; }
.delay-800 { animation-delay: .8s; }

/* ============================================================
   NEBULA LAYERS
   ============================================================ */

.nebula-1, .nebula-2, .nebula-3 {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: -25;
}
.nebula-1 {
    width: 800px; height: 800px;
    background: radial-gradient(ellipse, rgba(14,165,233,.11) 0%, transparent 68%);
    top: -280px; left: -220px;
    animation: nebula-drift 22s ease-in-out infinite;
}
.nebula-2 {
    width: 1000px; height: 1000px;
    background: radial-gradient(ellipse, rgba(99,102,241,.08) 0%, transparent 68%);
    bottom: -380px; right: -280px;
    animation: nebula-drift 28s ease-in-out infinite reverse;
}
.nebula-3 {
    width: 600px; height: 600px;
    background: radial-gradient(ellipse, rgba(56,189,248,.07) 0%, transparent 65%);
    top: 40%; left: 58%;
    animation: nebula-drift 19s ease-in-out infinite 6s;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */

.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   TOOLTIP
   ============================================================ */

.tt { position: relative; }
.tt::after {
    content: attr(data-tt);
    position: absolute;
    top: -36px; left: 50%;
    transform: translateX(-50%);
    background: rgba(2,8,23,.96);
    color: #bae6fd;
    font-size: .75rem;
    padding: .35rem .55rem;
    border-radius: .5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    white-space: nowrap;
    border: 1px solid rgba(14,165,233,.25);
    z-index: 999;
}
.tt:hover::after { opacity: 1; }

/* ============================================================
   GLASS / CARD COMPONENTS
   ============================================================ */

.glass-space {
    background: rgba(5,15,40,.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(14,165,233,.15);
    border-radius: 16px;
}

.glass-space-bright {
    background: rgba(5,15,40,.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(14,165,233,.3);
    box-shadow: 0 0 24px rgba(14,165,233,.08), 0 20px 60px rgba(0,0,0,.3);
    border-radius: 16px;
}

.card-space {
    background: rgba(5,15,40,.55);
    border: 1px solid rgba(14,165,233,.15);
    border-radius: 16px;
    transition: all .35s ease;
    position: relative;
    overflow: hidden;
}
.card-space::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(14,165,233,.45), transparent);
}
.card-space:hover {
    border-color: rgba(14,165,233,.4);
    box-shadow: 0 0 32px rgba(14,165,233,.12), 0 24px 64px rgba(0,0,0,.35);
    transform: translateY(-5px);
}

/* Neon border animation */
.neon-border { animation: neon-border-pulse 3s ease-in-out infinite; }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn-space {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 26px;
    background: linear-gradient(135deg, #0369a1, #0ea5e9);
    color: white;
    border: 1px solid rgba(14,165,233,.4);
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all .3s ease;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}
.btn-space:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 24px rgba(14,165,233,.55), 0 10px 32px rgba(14,165,233,.25);
    color: white;
    text-decoration: none;
}
.btn-space:active { transform: translateY(0); }

.btn-space-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 26px;
    background: transparent;
    color: #7dd3fc;
    border: 1px solid rgba(14,165,233,.35);
    border-radius: 10px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all .3s ease;
    text-decoration: none;
}
.btn-space-outline:hover {
    background: rgba(14,165,233,.1);
    border-color: rgba(14,165,233,.65);
    box-shadow: 0 0 18px rgba(14,165,233,.2);
    color: #bae6fd;
    text-decoration: none;
}

/* ============================================================
   INPUTS
   ============================================================ */

.input-space {
    background: rgba(2,8,23,.8) !important;
    border: 1px solid rgba(14,165,233,.2) !important;
    color: #e0f2fe !important;
    border-radius: 10px !important;
    transition: all .3s ease !important;
    font-size: 14px;
}
.input-space:focus {
    border-color: rgba(14,165,233,.6) !important;
    box-shadow: 0 0 0 3px rgba(14,165,233,.08), 0 0 18px rgba(14,165,233,.1) !important;
    outline: none !important;
}
.input-space::placeholder { color: rgba(148,163,184,.45) !important; }

/* ============================================================
   CALIBRATION EDITOR (keep functional)
   ============================================================ */

.cell-selected {
    outline: 2px solid #0ea5e9 !important;
    outline-offset: -2px;
    background-color: rgba(14,165,233,.12) !important;
}

.drag-rect {
    position: absolute;
    border: 1px dashed rgba(56,189,248,.75);
    background: rgba(14,165,233,.08);
    pointer-events: none;
    z-index: 40;
}

.value-input {
    width:     calc(var(--cell-w)     * var(--cell-zoom));
    font-size: calc(var(--cell-font)  * var(--cell-zoom));
    padding:   calc(var(--cell-pad-y) * var(--cell-zoom)) calc(var(--cell-pad-x) * var(--cell-zoom));
}

#showSidebarBtn {
    position: fixed;
    left: .75rem;
    top:  .75rem;
    z-index: 50;
}

/* ============================================================
   GRADIENT TEXT UTILITY
   ============================================================ */

.text-gradient-blue {
    background: linear-gradient(135deg, #38bdf8, #818cf8, #38bdf8);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shift 4s ease-in-out infinite;
}

/* ============================================================
   SCAN LINE (decorative)
   ============================================================ */

.scan-container { position: relative; overflow: hidden; }
.scan-container::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(14,165,233,.4), transparent);
    animation: scan-line 4s linear infinite;
    pointer-events: none;
}