/* ==========================================
   MEMORY SCAN
========================================== */

#memoryScan{

position:fixed;
inset:0;

display:flex;
justify-content:center;
align-items:center;

overflow:hidden;

padding:24px;
box-sizing:border-box;

color:#fff;
text-align:center;

/* Same world as Boot */
background:
radial-gradient(circle at 50% 20%,
rgba(255,220,140,.14) 0%,
transparent 40%),

linear-gradient(
180deg,
#08111f 0%,
#132745 45%,
#23466f 75%,
#315c8b 100%
);

animation:skyBreath 12s ease-in-out infinite;

}

/* ==========================================
   GOLDEN GLOW
========================================== */

#memoryScan::before{

content:"";

position:absolute;

left:50%;
top:180px;

width:420px;
height:420px;

transform:translateX(-50%);
border-radius:50%;

background:
radial-gradient(circle,
rgba(255,223,140,.18),
transparent 72%);

filter:blur(35px);

animation:scanGlow 8s ease-in-out infinite;

}

/* ==========================================
   CINEMA VIGNETTE
========================================== */

#memoryScan::after{

content:"";

position:absolute;
inset:0;

pointer-events:none;

background:
radial-gradient(circle,
transparent 45%,
rgba(0,0,0,.18) 75%,
rgba(0,0,0,.42) 100%);

}

.scan-container{

position:relative;
z-index:2;

width:100%;
max-width:380px;

display:flex;
flex-direction:column;
align-items:center;

animation:floatScene 6s ease-in-out infinite;

}

/* ==========================================
   STAR
========================================== */

.scan-star{

font-size:28px;

margin-bottom:18px;

animation:twinkleStar 2.5s ease-in-out infinite;

}

/* ==========================================
   TITLE
========================================== */

#scanText{

font-size:clamp(22px,7vw,36px);

font-weight:700;

line-height:1.35;

max-width:300px;

margin:28px auto;

animation:textBreath 5s ease-in-out infinite;

text-shadow:
0 2px 18px rgba(255,255,255,.18);

transition:
opacity .6s ease,
transform .6s ease;

}

/* ==========================================
   MEMORY TRACK
========================================== */

.memory-track{

display:flex;

align-items:center;

justify-content:center;

margin-bottom:26px;

}

.memory-line{

width:34px;
height:2px;

background:rgba(255,255,255,.22);

margin:0 2px;

transition:.4s;

}

.memory-dot{

width:14px;
height:14px;

border-radius:50%;

background:#888;

transition:.45s;

}
/* ==========================================
   ACTIVE MEMORY
========================================== */

.memory-dot.active{

background:#FFD76A;

box-shadow:

0 0 10px rgba(255,215,106,.9),
0 0 22px rgba(255,215,106,.7),
0 0 40px rgba(255,215,106,.35);

animation:memoryPulse 1.8s ease-in-out infinite;

}

.memory-line.active{

background:#FFD76A;

box-shadow:

0 0 10px rgba(255,215,106,.45);

}

/* ==========================================
   PERCENT
========================================== */

#scanPercent{

margin-top:18px;

font-size:18px;

font-weight:600;

letter-spacing:3px;

color:#FFD76A;

opacity:.85;

}

/* ==========================================
   STATUS
========================================== */

#scanStatus{

margin-top:22px;

font-size:16px;

line-height:1.7;

max-width:260px;

color:rgba(255,255,255,.78);

}

/* ==========================================
   SCAN LOADER
========================================== */

.scan-loader{

width:100%;
max-width:260px;

height:8px;

margin-top:20px;

background:rgba(255,255,255,.12);

border-radius:50px;

overflow:hidden;

}

#scanFill{

position:relative;
overflow:hidden;

width:0;
height:100%;
border-radius:50px;

background:linear-gradient(
90deg,
#FFD76A,
#FFEFB0,
#FFD76A
);

box-shadow:
0 0 18px rgba(255,215,106,.45);

transition:width .35s linear;

}

#scanFill.ready{

box-shadow:

0 0 14px rgba(255,215,106,.7),
0 0 28px rgba(255,215,106,.4);

}

#scanFill::after{

content:"";

position:absolute;

top:0;
right:-20px;

width:50px;
height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.9),
transparent
);

filter:blur(3px);

animation:shineMove 1.8s linear infinite;

}

.scan-mist{

position:absolute;

left:-20%;
bottom:-120px;

width:140%;
height:260px;

background:radial-gradient(circle,
rgba(255,255,255,.08),
transparent 70%);

filter:blur(55px);

opacity:.6;

animation:mistMove 18s ease-in-out infinite;

pointer-events:none;

}

/* ==========================================
   ANIMATIONS
========================================== */

@keyframes memoryPulse{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.28);

}

}

@keyframes twinkleStar{

0%,100%{

transform:scale(1);
opacity:.75;

}

50%{

transform:scale(1.25);
opacity:1;

}

}

@keyframes scanGlow{

0%,100%{

transform:translateX(-50%) scale(1);
opacity:.45;

}

50%{

transform:translateX(-50%) scale(1.12);
opacity:.8;

}

}

@keyframes floatScene{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}

@keyframes skyBreath{

0%,100%{

filter:brightness(1);

}

50%{

filter:brightness(1.06);

}

}

@keyframes mistMove{

0%,100%{

transform:
translateX(0)
translateY(0);

}

50%{

transform:
translateX(-40px)
translateY(-18px);

}

}

@keyframes shineMove{

from{

left:-40%;

}

to{

left:130%;

}

}

/* Floating Particles */

.scan-particle{
    position:absolute;
    width:4px;
    height:4px;
    border-radius:50%;
    background:#FFD76A;
    box-shadow:0 0 10px rgba(255,215,106,.9);
    animation:particleFloat linear infinite;
    pointer-events:none;
}

@keyframes particleFloat{

0%{
    transform:translateY(0) scale(.6);
    opacity:0;
}

20%{
    opacity:1;
}

80%{
    opacity:.9;
}

100%{
    transform:translateY(-170px) scale(1.2);
    opacity:0;
}

}

/* ===========================
   TEXT TRANSITION
=========================== */

#scanText{

opacity:1;

transform:translateY(0);

transition:

opacity .7s ease,
transform .7s ease;

}

#scanText.hide{

opacity:0;

transform:translateY(18px);

}

@keyframes textBreath{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-4px);

}

}

/* ===========================
   MEMORY SCREEN FADE OUT
=========================== */

#memoryScan{
    opacity:1;
    transition:opacity .9s ease;
}

#memoryScan.fade{
    opacity:0;
}