/* ═══════════════════════════════════════════════════════════════
   SAITS 403 — 3D DEPTH AURORA
   ═══════════════════════════════════════════════════════════════ */

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

:root{
    --neon-green:#00ffaa;
    --neon-cyan:#00e5ff;
    --neon-yellow:#fff000;
    --neon-purple:#b86bff;
    --deep-bg:#000208;
    --glass-bg:rgba(2,8,20,0.7);
    --glass-border:rgba(0,255,157,0.25);
}

html,body{height:100%;overflow:hidden}

body{
    font-family:'SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    background:var(--deep-bg);
    color:#f0f8ff;
    perspective:1200px;
    perspective-origin:50% 50%;
}

/* ═══════════════════════════════════════════════════════════════
   LAYER 1: MOVING AURORA BACKGROUND (full screen gradient)
   ═══════════════════════════════════════════════════════════════ */
.aurora-bg{
    position:fixed;
    inset:-20%;
    z-index:0;
    background:
        radial-gradient(ellipse 80% 50% at 20% 80%,
            rgba(0,255,157,0.4) 0%,
            rgba(0,212,255,0.2) 30%,
            transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 20%,
            rgba(168,85,247,0.35) 0%,
            rgba(0,212,255,0.15) 40%,
            transparent 70%),
        radial-gradient(ellipse 50% 50% at 50% 100%,
            rgba(255,238,0,0.25) 0%,
            rgba(0,255,157,0.15) 50%,
            transparent 80%),
        radial-gradient(ellipse 70% 60% at 10% 30%,
            rgba(0,100,255,0.3) 0%,
            rgba(0,255,157,0.1) 40%,
            transparent 70%);
    animation:aurora-drift 18s ease-in-out infinite alternate;
    filter:blur(50px) saturate(1.6);
    transform:scale(1.2);
    will-change:transform,filter;
}

@keyframes aurora-drift{
    0%{
        transform:scale(1.2) rotate(0deg) translate(0,0);
        filter:blur(80px) saturate(1.4) hue-rotate(0deg);
    }
    25%{
        transform:scale(1.35) rotate(5deg) translate(3%,-2%);
        filter:blur(40px) saturate(1.8) hue-rotate(10deg);
    }
    50%{
        transform:scale(1.25) rotate(-3deg) translate(-2%,3%);
        filter:blur(55px) saturate(1.5) hue-rotate(-8deg);
    }
    75%{
        transform:scale(1.4) rotate(4deg) translate(2%,1%);
        filter:blur(45px) saturate(1.7) hue-rotate(15deg);
    }
    100%{
        transform:scale(1.3) rotate(-5deg) translate(-1%,-2%);
        filter:blur(50px) saturate(1.6) hue-rotate(-5deg);
    }
}

/* ═══════════════════════════════════════════════════════════════
   LAYER 2: SECONDARY AURORA PULSE
   ═══════════════════════════════════════════════════════════════ */
.aurora-pulse{
    position:fixed;
    inset:-30%;
    z-index:1;
    background:
        radial-gradient(circle at 30% 70%,
            rgba(0,255,157,0.15) 0%,
            transparent 50%),
        radial-gradient(circle at 70% 30%,
            rgba(255,238,0,0.1) 0%,
            transparent 50%);
    animation:aurora-pulse 12s ease-in-out infinite alternate-reverse;
    filter:blur(80px);
    mix-blend-mode:screen;
    will-change:opacity,transform;
}

@keyframes aurora-pulse{
    0%{opacity:0.6;transform:scale(1.1)}
    50%{opacity:1;transform:scale(1.3)}
    100%{opacity:0.7;transform:scale(1.15)}
}

/* ═══════════════════════════════════════════════════════════════
   LAYER 3: DEEP SPACE PARTICLES
   ═══════════════════════════════════════════════════════════════ */
.particles{
    position:fixed;
    inset:0;
    z-index:2;
    pointer-events:none;
}

.particle{
    position:absolute;
    border-radius:50%;
    background:var(--neon-cyan);
    opacity:0;
    animation:particle-float 8s linear infinite;
}

.particle:nth-child(odd){background:var(--neon-green)}
.particle:nth-child(3n){background:var(--neon-yellow)}
.particle:nth-child(4n){background:var(--neon-purple)}

@keyframes particle-float{
    0%{opacity:0;transform:translateY(100vh) scale(0) rotate(0deg)}
    10%{opacity:0.8}
    90%{opacity:0.6}
    100%{opacity:0;transform:translateY(-10vh) scale(1.5) rotate(180deg)}
}

/* ═══════════════════════════════════════════════════════════════
   LAYER 4: 3D GRID FLOOR (depth perspective)
   ═══════════════════════════════════════════════════════════════ */
.grid-floor{
    position:fixed;
    bottom:-50%;
    left:-50%;
    width:200%;
    height:100%;
    z-index:3;
    background:
        linear-gradient(transparent 98%, rgba(0,255,157,0.08) 98%),
        linear-gradient(90deg, transparent 98%, rgba(0,212,255,0.05) 98%);
    background-size:60px 60px;
    transform:perspective(600px) rotateX(60deg) translateZ(0);
    animation:grid-move 4s linear infinite;
    opacity:0.5;
    mask-image:linear-gradient(to top, rgba(0,0,0,1) 0%, transparent 70%);
    -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,1) 0%, transparent 70%);
    pointer-events:none;
}

@keyframes grid-move{
    from{background-position:0 0}
    to{background-position:0 60px}
}

/* ═══════════════════════════════════════════════════════════════
   MAIN CONTENT — 3D CARD
   ═══════════════════════════════════════════════════════════════ */
.scene{
    position:fixed;
    inset:0;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:center;
    transform-style:preserve-3d;
}

.card-3d{
    position:relative;
    width:min(700px,92vw);
    padding:50px 45px;
    background:var(--glass-bg);
    backdrop-filter:blur(20px) saturate(1.4);
    border:1px solid var(--glass-border);
    border-radius:28px;
    transform-style:preserve-3d;
    transform:rotateX(2deg) rotateY(-2deg);
    transition:transform 0.1s ease-out;
    box-shadow:
        0 30px 100px rgba(0,0,0,0.8),
        0 0 120px rgba(0,255,157,0.08),
        inset 0 1px 0 rgba(255,255,255,0.1),
        inset 0 -1px 0 rgba(0,0,0,0.3);
    animation:card-levitate 6s ease-in-out infinite;
}

@keyframes card-levitate{
    0%,100%{transform:rotateX(2deg) rotateY(-2deg) translateZ(0)}
    50%{transform:rotateX(1deg) rotateY(-1deg) translateZ(20px)}
}

/* Glow border animation */
.card-3d::before{
    content:'';
    position:absolute;
    inset:-2px;
    border-radius:30px;
    padding:2px;
    background:linear-gradient(135deg,
        rgba(0,255,157,0.5),
        rgba(0,212,255,0.3),
        rgba(255,238,0,0.4),
        rgba(168,85,247,0.3),
        rgba(0,255,157,0.5));
    background-size:300% 300%;
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    animation:border-flow 4s linear infinite;
    pointer-events:none;
    z-index:1;
}

@keyframes border-flow{
    to{background-position:300% 300%}
}

/* ═══════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════ */
.header{
    position:relative;
    z-index:2;
    text-align:center;
    margin-bottom:35px;
    transform:translateZ(30px);
}

.status-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 26px;
    background:linear-gradient(135deg,rgba(255,30,30,0.2),rgba(255,60,60,0.1));
    border:1px solid rgba(255,60,60,0.4);
    border-radius:50px;
    font-size:13px;
    font-weight:700;
    letter-spacing:3px;
    color:#ff4757;
    text-transform:uppercase;
    margin-bottom:22px;
    box-shadow:0 0 30px rgba(255,30,30,0.15),inset 0 0 20px rgba(255,30,30,0.05);
    animation:badge-pulse 2s ease-in-out infinite;
}

.status-dot{
    width:10px;height:10px;
    background:#ff4757;
    border-radius:50%;
    box-shadow:0 0 15px #ff4757;
    animation:dot-blink 1.2s ease-in-out infinite;
}

@keyframes badge-pulse{
    0%,100%{box-shadow:0 0 30px rgba(255,30,30,0.15)}
    50%{box-shadow:0 0 50px rgba(255,30,30,0.3)}
}

@keyframes dot-blink{
    0%,100%{opacity:1;box-shadow:0 0 15px #ff4757}
    50%{opacity:0.5;box-shadow:0 0 5px #ff4757}
}

.logo{
    font-size:clamp(42px,8vw,64px);
    font-weight:900;
    letter-spacing:-2px;
    margin-bottom:4px;
    background:linear-gradient(135deg,
        var(--neon-green) 0%,
        var(--neon-cyan) 35%,
        var(--neon-yellow) 65%,
        var(--neon-purple) 100%);
    background-size:300% 300%;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:logo-gradient 4s ease-in-out infinite;
    filter:drop-shadow(0 0 30px rgba(0,255,157,0.3));
    text-transform:uppercase;
}

@keyframes logo-gradient{
    0%,100%{background-position:0% 50%}
    50%{background-position:100% 50%}
}

.tagline{
    font-size:13px;
    letter-spacing:6px;
    text-transform:uppercase;
    color:rgba(136,166,199,0.7);
    margin-bottom:30px;
}

/* ═══════════════════════════════════════════════════════════════
   CONTENT
   ═══════════════════════════════════════════════════════════════ */
.content{
    position:relative;
    z-index:2;
    transform:translateZ(20px);
}

.title{
    font-size:clamp(24px,4vw,32px);
    font-weight:800;
    color:#fff;
    margin-bottom:14px;
    text-shadow:0 0 40px rgba(0,212,255,0.4),0 0 80px rgba(0,255,157,0.15);
    line-height:1.3;
}

.message{
    font-size:15px;
    line-height:1.8;
    color:rgba(190,220,250,0.9);
    margin-bottom:35px;
    max-width:480px;
    margin-left:auto;
    margin-right:auto;
}

/* ═══════════════════════════════════════════════════════════════
   INFO GRID — 3D TILES
   ═══════════════════════════════════════════════════════════════ */
.info-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:14px;
    margin-bottom:35px;
    transform-style:preserve-3d;
}

.info-tile{
    background:linear-gradient(145deg,
        rgba(255,255,255,0.06) 0%,
        rgba(0,0,0,0.2) 100%);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:16px;
    padding:18px 16px;
    text-align:left;
    transition:all 0.3s ease;
    transform:translateZ(0);
    position:relative;
    overflow:hidden;
}

.info-tile:hover{
    transform:translateZ(30px) translateY(-3px);
    border-color:rgba(0,255,157,0.3);
    box-shadow:0 15px 40px rgba(0,0,0,0.4),0 0 30px rgba(0,255,157,0.08);
    background:linear-gradient(145deg,
        rgba(0,255,157,0.08) 0%,
        rgba(0,0,0,0.2) 100%);
}

.info-tile::after{
    content:'';
    position:absolute;
    top:0;left:-100%;
    width:50%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.03),transparent);
    transition:left 0.7s ease;
}

.info-tile:hover::after{
    left:100%;
}

.info-label{
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:2px;
    color:rgba(100,130,160,0.6);
    margin-bottom:8px;
    font-weight:600;
}

.info-value{
    font-size:15px;
    font-weight:600;
    font-family:'SF Mono','Fira Code',monospace;
    color:var(--neon-green);
    text-shadow:0 0 15px rgba(0,255,157,0.35);
    word-break:break-all;
    line-height:1.4;
}

.info-value.danger{color:#ff4757;text-shadow:0 0 20px rgba(255,71,87,0.3)}
.info-value.info{color:var(--neon-cyan);text-shadow:0 0 20px rgba(0,212,255,0.2)}
.info-value.warn{color:var(--neon-yellow);text-shadow:0 0 20px rgba(255,238,0,0.2)}

/* ═══════════════════════════════════════════════════════════════
   SECURITY STATUS BAR
   ═══════════════════════════════════════════════════════════════ */
.security-bar{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
    padding:18px;
    background:rgba(0,0,0,0.3);
    border-radius:16px;
    border:1px solid rgba(0,255,157,0.08);
    margin-bottom:25px;
}

.sec-item{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:12px;
    font-weight:500;
    color:rgba(150,180,210,0.8);
    letter-spacing:1px;
}

.sec-dot{
    width:8px;height:8px;
    border-radius:50%;
    animation:sec-pulse 2s ease-in-out infinite;
}
.sec-dot.g{background:var(--neon-green);box-shadow:0 0 10px var(--neon-green)}
.sec-dot.b{background:var(--neon-cyan);box-shadow:0 0 10px var(--neon-cyan)}
.sec-dot.y{background:var(--neon-yellow);box-shadow:0 0 10px var(--neon-yellow)}
.sec-dot.r{background:#ff4757;box-shadow:0 0 10px #ff4757;animation-delay:0.3s}
.sec-dot.p{background:var(--neon-purple);box-shadow:0 0 10px var(--neon-purple);animation-delay:0.6s}

@keyframes sec-pulse{
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:0.5;transform:scale(0.85)}
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.footer{
    position:relative;
    z-index:2;
    text-align:center;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,0.05);
}

.footer-text{
    font-size:11px;
    color:rgba(80,110,140,0.5);
    letter-spacing:1px;
    line-height:1.8;
}

.footer-bots{
    font-size:9px;
    color:rgba(60,90,120,0.4);
    margin-top:8px;
    letter-spacing:0.5px;
}

/* ═══════════════════════════════════════════════════════════════
   SCANLINE OVERLAY (retro security feel)
   ═══════════════════════════════════════════════════════════════ */
.scanline{
    position:fixed;
    inset:0;
    z-index:100;
    pointer-events:none;
    background:repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.015) 2px,
        rgba(0,0,0,0.015) 4px);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:600px){
    .card-3d{padding:35px 25px;border-radius:20px}
    .logo{font-size:36px}
    .title{font-size:20px}
    .info-grid{grid-template-columns:1fr 1fr}
    .security-bar{gap:12px}
}

@media(max-width:400px){
    .info-grid{grid-template-columns:1fr}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
}