/* =====================================================
   MYSTIFY
   THEMES.CSS
   PART 3A
   Shared + Hacker + Scroll
===================================================== */

/* =====================================================
   Shared Reveal Page
===================================================== */

.reveal-page{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px;
    position:relative;
    overflow:hidden;
    transition:all .6s ease;
}

.reveal-card{

    width:min(700px,100%);

    border-radius:28px;

    padding:50px;

    backdrop-filter:blur(18px);

    text-align:center;

    position:relative;

    z-index:10;

}

.reveal-title{

    font-size:2.6rem;

    font-weight:800;

    margin-bottom:24px;

}

.reveal-text{

    font-size:1.6rem;

    line-height:1.8;

    margin:30px 0;

    word-break:break-word;

}

.reveal-progress{

    width:100%;
    height:14px;
    overflow:hidden;
    border-radius:999px;
    margin:30px 0;

}

.reveal-progress span{

    display:block;
    height:100%;
    width:0;

    animation:
        loading 3s forwards;

}

@keyframes loading{

    from{
        width:0;
    }

    to{
        width:100%;
    }

}

.theme-btn{

    display:inline-block;

    margin-top:30px;

    padding:14px 30px;

    border-radius:16px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.theme-btn:hover{

    transform:translateY(-3px);

}

/* =====================================================
   HACKER THEME
===================================================== */

.theme-hacker{

    background:#010b04;

    color:#00ff88;

    font-family:monospace;

}

/* Matrix Overlay */

.theme-hacker::before{

    content:"01010101011001010101101010010101010101001010010101010100101001011101001010101010100101010010010100101010101010100101010101010010";

    position:absolute;

    inset:0;

    white-space:pre-wrap;

    font-size:18px;

    line-height:28px;

    color:rgba(0,255,120,.08);

    animation:
        matrixMove 18s linear infinite;

}

@keyframes matrixMove{

    from{

        transform:translateY(-30%);

    }

    to{

        transform:translateY(30%);

    }

}

.theme-hacker .reveal-card{

    background:
        rgba(0,0,0,.65);

    border:
        1px solid rgba(0,255,120,.25);

    box-shadow:
        0 0 45px rgba(0,255,120,.15);

}

.theme-hacker .reveal-title{

    color:#00ff88;

    text-shadow:
        0 0 15px rgba(0,255,120,.6);

}

.theme-hacker .reveal-progress{

    background:
        rgba(0,255,120,.08);

}

.theme-hacker .reveal-progress span{

    background:
        linear-gradient(
            90deg,
            #00ff88,
            #00ffaa
        );

}

.theme-hacker .reveal-text{

    color:#9dfec8;

}

.theme-hacker .theme-btn{

    background:#00ff88;

    color:#02130a;

}

.theme-hacker .theme-btn:hover{

    box-shadow:
        0 0 25px rgba(0,255,120,.4);

}

/* =====================================================
   Scroll Theme
===================================================== */

.theme-scroll{

    background:

    radial-gradient(
        circle,
        #d8c18f,
        #9d7643
    );

    color:#3c2415;

    font-family:Georgia,serif;

}

.theme-scroll::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    repeating-linear-gradient(

        0deg,

        rgba(90,60,20,.03),

        rgba(90,60,20,.03) 2px,

        transparent 2px,

        transparent 4px

    );

}

.theme-scroll .reveal-card{

    background:

    rgba(255,247,220,.78);

    border:

    3px solid rgba(124,87,41,.45);

    box-shadow:

    0 20px 60px rgba(60,36,20,.25);

}

.theme-scroll .reveal-title{

    color:#6d3f13;

    letter-spacing:.08em;

}

.theme-scroll .reveal-progress{

    background:

    rgba(90,60,20,.15);

}

.theme-scroll .reveal-progress span{

    background:

    linear-gradient(

        90deg,

        #6d3f13,

        #c08642

    );

}

.theme-scroll .reveal-text{

    color:#41230e;

    font-style:italic;

}

.theme-scroll .theme-btn{

    background:#7a4d22;

    color:#fff8eb;

}

.theme-scroll .theme-btn:hover{

    background:#8c5a29;

}

/* Paper Texture */

.theme-scroll .reveal-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

    repeating-radial-gradient(

        circle at 20% 20%,

        rgba(0,0,0,.02),

        rgba(0,0,0,.02) 2px,

        transparent 3px,

        transparent 8px

    );

    pointer-events:none;

    opacity:.4;

}

/* ======================================================
   MYSTIFY
   THEMES.CSS
   PART 3B-1
   MAGIC THEME
======================================================*/

.theme-magic{

    background:
    radial-gradient(circle at top,
    #5b21b6,
    #1e0b47 65%,
    #090312);

    color:#f3e8ff;

    font-family:"Trebuchet MS",serif;

    overflow:hidden;

}

/* Floating magical aura */

.theme-magic::before{

    content:"";

    position:absolute;
    inset:0;

    background:

    radial-gradient(circle at 20% 30%,
    rgba(255,255,255,.08),
    transparent 25%),

    radial-gradient(circle at 80% 20%,
    rgba(168,85,247,.18),
    transparent 30%),

    radial-gradient(circle at 50% 80%,
    rgba(236,72,153,.12),
    transparent 30%);

    animation:
    magicGlow 10s ease-in-out infinite;

}

@keyframes magicGlow{

    0%{

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

    }

    50%{

        opacity:1;
        transform:scale(1.05);

    }

    100%{

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

    }

}

/* Sparkles */

.theme-magic::after{

    content:"✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧";

    position:absolute;

    left:-10%;

    top:20%;

    width:120%;

    text-align:center;

    letter-spacing:35px;

    font-size:32px;

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

    animation:
    sparkleMove 12s linear infinite;

}

@keyframes sparkleMove{

    from{

        transform:
        translateY(-20px);

    }

    to{

        transform:
        translateY(40px);

    }

}

/* Card */

.theme-magic .reveal-card{

    background:

    rgba(255,255,255,.08);

    border:

    1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(18px);

    box-shadow:

    0 20px 80px rgba(168,85,247,.35);

}

/* Heading */

.theme-magic .reveal-title{

    color:#f5d0fe;

    text-shadow:

    0 0 15px #d946ef,

    0 0 30px #9333ea;

}

/* Message */

.theme-magic .reveal-text{

    color:#faf5ff;

    font-size:1.7rem;

    line-height:1.9;

}

/* Progress */

.theme-magic .reveal-progress{

    background:

    rgba(255,255,255,.10);

}

.theme-magic .reveal-progress span{

    background:

    linear-gradient(

    90deg,

    #d946ef,

    #a855f7,

    #7c3aed

    );

}

/* Button */

.theme-magic .theme-btn{

    background:

    linear-gradient(

    135deg,

    #d946ef,

    #9333ea

    );

    color:white;

    border:none;

}

.theme-magic .theme-btn:hover{

    transform:

    translateY(-3px)
    scale(1.03);

    box-shadow:

    0 15px 40px rgba(168,85,247,.45);

}

/* Reveal animation */

.theme-magic .reveal-card{

    animation:

    magicAppear .9s ease;

}

@keyframes magicAppear{

    from{

        opacity:0;

        transform:

        scale(.9)
        rotate(-2deg);

        filter:blur(12px);

    }

    to{

        opacity:1;

        transform:

        scale(1)
        rotate(0);

        filter:blur(0);

    }

}

/* Floating particles */

.magic-particle{

    position:absolute;

    width:8px;
    height:8px;

    border-radius:50%;

    background:white;

    opacity:.6;

    animation:

    particleFloat linear infinite;

}

@keyframes particleFloat{

    from{

        transform:

        translateY(100vh)
        scale(.3);

    }

    to{

        transform:

        translateY(-150px)
        scale(1);

    }

}

/* Rune circle */

.magic-circle{

    position:absolute;

    width:340px;

    height:340px;

    border:

    2px dashed rgba(255,255,255,.15);

    border-radius:50%;

    animation:

    rotateCircle 18s linear infinite;

}

@keyframes rotateCircle{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* Mobile */

@media(max-width:768px){

    .theme-magic .reveal-title{

        font-size:2rem;

    }

    .theme-magic .reveal-text{

        font-size:1.3rem;

    }

    .magic-circle{

        width:220px;

        height:220px;

    }

}


/* ======================================================
   MYSTIFY
   THEMES.CSS
   PART 3B-2
   SPACE SIGNAL
====================================================== */

.theme-space{

    position:relative;
    overflow:hidden;

    background:
        radial-gradient(circle at top,#274690,#071126 45%,#01040b);

    color:#ffffff;

    font-family:"Inter",sans-serif;

}

/* ======================================================
   Star Field
====================================================== */

.theme-space::before{

    content:"";

    position:absolute;
    inset:0;

    background:

        radial-gradient(circle,#ffffff 1px,transparent 2px),
        radial-gradient(circle,#7dd3fc 1px,transparent 2px),
        radial-gradient(circle,#c084fc 1px,transparent 2px);

    background-size:
        160px 160px,
        240px 240px,
        320px 320px;

    background-position:
        0 0,
        40px 80px,
        120px 40px;

    opacity:.45;

    animation:
        starDrift 90s linear infinite;

}

@keyframes starDrift{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(700px);
    }

}

/* ======================================================
   Nebula
====================================================== */

.theme-space::after{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    left:50%;
    top:-200px;

    transform:translateX(-50%);

    border-radius:50%;

    background:

        radial-gradient(circle,
        rgba(59,130,246,.25),
        rgba(168,85,247,.10),
        transparent 70%);

    filter:blur(60px);

    animation:
        nebulaPulse 10s ease-in-out infinite;

}

@keyframes nebulaPulse{

    0%,100%{

        transform:
        translateX(-50%)
        scale(1);

    }

    50%{

        transform:
        translateX(-50%)
        scale(1.15);

    }

}

/* ======================================================
   Reveal Card
====================================================== */

.theme-space .reveal-card{

    background:

        rgba(9,20,40,.65);

    border:

        1px solid rgba(125,211,252,.25);

    backdrop-filter:blur(18px);

    box-shadow:

        0 25px 80px rgba(56,189,248,.18);

}

/* ======================================================
   Heading
====================================================== */

.theme-space .reveal-title{

    color:#7dd3fc;

    letter-spacing:.08em;

    text-shadow:

        0 0 15px rgba(56,189,248,.55);

}

/* ======================================================
   Message
====================================================== */

.theme-space .reveal-text{

    color:#dbeafe;

    font-size:1.65rem;

    line-height:1.8;

}

/* ======================================================
   Progress
====================================================== */

.theme-space .reveal-progress{

    background:

        rgba(255,255,255,.08);

}

.theme-space .reveal-progress span{

    background:

        linear-gradient(
            90deg,
            #38bdf8,
            #818cf8,
            #c084fc
        );

}

/* ======================================================
   Button
====================================================== */

.theme-space .theme-btn{

    background:

        linear-gradient(
            135deg,
            #0ea5e9,
            #2563eb
        );

    color:white;

}

.theme-space .theme-btn:hover{

    box-shadow:

        0 18px 45px rgba(56,189,248,.35);

}

/* ======================================================
   Floating Planet
====================================================== */

.space-planet{

    position:absolute;

    width:180px;
    height:180px;

    border-radius:50%;

    right:8%;
    top:10%;

    background:

        radial-gradient(circle at 30% 30%,
        #ffffff,
        #60a5fa 20%,
        #2563eb 65%,
        #1e3a8a);

    box-shadow:

        0 0 60px rgba(96,165,250,.25);

    animation:

        floatPlanet 8s ease-in-out infinite;

}

@keyframes floatPlanet{

    0%,100%{

        transform:
        translateY(0);

    }

    50%{

        transform:
        translateY(-20px);

    }

}

/* Ring */

.space-planet::after{

    content:"";

    position:absolute;

    left:-15px;
    top:70px;

    width:210px;
    height:36px;

    border:

        4px solid rgba(255,255,255,.35);

    border-radius:50%;

    transform:rotate(-18deg);

}

/* ======================================================
   Satellite Signal
====================================================== */

.signal{

    position:absolute;

    left:50%;
    top:50%;

    width:20px;
    height:20px;

    border-radius:50%;

    background:#7dd3fc;

    transform:translate(-50%,-50%);

}

.signal::before,
.signal::after{

    content:"";

    position:absolute;

    inset:-12px;

    border:

        2px solid rgba(125,211,252,.35);

    border-radius:50%;

    animation:

        ping 3s linear infinite;

}

.signal::after{

    animation-delay:1.5s;

}

@keyframes ping{

    from{

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

    }

    to{

        transform:scale(6);
        opacity:0;

    }

}

/* ======================================================
   Hologram Glow
====================================================== */

.theme-space .reveal-card{

    animation:

        hologram 5s ease-in-out infinite;

}

@keyframes hologram{

    0%,100%{

        filter:brightness(1);

    }

    50%{

        filter:brightness(1.08);

    }

}

/* ======================================================
   Responsive
====================================================== */

@media(max-width:768px){

    .space-planet{

        width:120px;
        height:120px;

        right:-20px;

    }

    .space-planet::after{

        width:145px;
        left:-12px;

    }

    .theme-space .reveal-title{

        font-size:2rem;

    }

    .theme-space .reveal-text{

        font-size:1.3rem;

    }

}

/* ======================================================
   MYSTIFY
   THEMES.CSS
   PART 3C-1
   DETECTIVE FILE
====================================================== */

.theme-detective{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(180deg,#2d241d,#17120d);

    color:#2d1c10;

    font-family:"Courier New",monospace;

}

/* ======================================================
   Desk Texture
====================================================== */

.theme-detective::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    repeating-linear-gradient(
        90deg,
        rgba(255,255,255,.02) 0px,
        rgba(255,255,255,.02) 2px,
        transparent 2px,
        transparent 8px
    );

    opacity:.5;

}

/* ======================================================
   File Card
====================================================== */

.theme-detective .reveal-card{

    position:relative;

    background:#efe1c4;

    border:2px solid #b38a5d;

    box-shadow:

        0 25px 70px rgba(0,0,0,.35);

    transform:rotate(-1deg);

}

/* Paper Texture */

.theme-detective .reveal-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    opacity:.18;

    background:

    repeating-radial-gradient(

        circle,

        rgba(0,0,0,.05),

        rgba(0,0,0,.05) 2px,

        transparent 3px,

        transparent 10px

    );

    pointer-events:none;

}

/* ======================================================
   Confidential Stamp
====================================================== */

.theme-detective .reveal-card::after{

    content:"CONFIDENTIAL";

    position:absolute;

    top:18px;
    right:18px;

    padding:10px 18px;

    border:3px solid rgba(180,0,0,.65);

    color:rgba(180,0,0,.65);

    font-weight:800;

    letter-spacing:.18em;

    transform:rotate(14deg);

}

/* ======================================================
   Heading
====================================================== */

.theme-detective .reveal-title{

    color:#55371c;

    text-transform:uppercase;

    letter-spacing:.15em;

    border-bottom:2px dashed #b38a5d;

    padding-bottom:15px;

}

/* ======================================================
   Message
====================================================== */

.theme-detective .reveal-text{

    color:#3b2414;

    font-size:1.45rem;

    line-height:2;

}

/* ======================================================
   Progress
====================================================== */

.theme-detective .reveal-progress{

    background:#d8c6a3;

}

.theme-detective .reveal-progress span{

    background:

        linear-gradient(
            90deg,
            #7a4b25,
            #b78344
        );

}

/* ======================================================
   Button
====================================================== */

.theme-detective .theme-btn{

    background:#6b4424;

    color:#fff;

}

.theme-detective .theme-btn:hover{

    background:#84552d;

}

/* ======================================================
   File Label
====================================================== */

.file-label{

    display:inline-block;

    padding:8px 16px;

    margin-bottom:18px;

    background:#d8c6a3;

    color:#5a3b20;

    font-size:.9rem;

    font-weight:700;

    border-radius:6px;

    letter-spacing:.08em;

}

/* ======================================================
   Paper Clip
====================================================== */

.paperclip{

    position:absolute;

    width:28px;
    height:70px;

    border:4px solid #b7b7b7;

    border-radius:20px;

    top:-18px;
    left:36px;

    transform:rotate(-8deg);

    background:transparent;

}

/* ======================================================
   Typewriter Cursor
====================================================== */

.cursor{

    display:inline-block;

    width:3px;
    height:1.2em;

    background:#55371c;

    margin-left:4px;

    animation:blinkCursor .8s infinite;

}

@keyframes blinkCursor{

    0%,49%{

        opacity:1;

    }

    50%,100%{

        opacity:0;

    }

}

/* ======================================================
   Card Entrance
====================================================== */

.theme-detective .reveal-card{

    animation:

        fileDrop .8s ease;

}

@keyframes fileDrop{

    from{

        opacity:0;

        transform:

        translateY(-80px)
        rotate(-6deg);

    }

    to{

        opacity:1;

        transform:

        translateY(0)
        rotate(-1deg);

    }

}

/* ======================================================
   Responsive
====================================================== */

@media(max-width:768px){

    .theme-detective .reveal-card{

        transform:none;

    }

    .theme-detective .reveal-card::after{

        font-size:.7rem;

        padding:8px 12px;

    }

    .theme-detective .reveal-title{

        font-size:2rem;

    }

    .theme-detective .reveal-text{

        font-size:1.2rem;

    }

}

/* ======================================================
   MYSTIFY
   THEMES.CSS
   PART 3C-2
   SECRET AGENT + UTILITIES
====================================================== */

/* ======================================================
   SECRET AGENT
====================================================== */

.theme-agent{

    position:relative;

    overflow:hidden;

    background:
        radial-gradient(circle at top,
        #1f2937,
        #0b1220,
        #020617);

    color:#e2e8f0;

    font-family:"Inter",sans-serif;

}

/* HUD Grid */

.theme-agent::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(
            rgba(34,211,238,.06) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(34,211,238,.06) 1px,
            transparent 1px
        );

    background-size:40px 40px;

    animation:hudMove 20s linear infinite;

}

@keyframes hudMove{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(40px);
    }

}

/* Scanning Line */

.theme-agent::after{

    content:"";

    position:absolute;

    left:0;
    right:0;

    height:3px;

    background:

        rgba(34,211,238,.45);

    box-shadow:

        0 0 20px rgba(34,211,238,.45);

    animation:scanner 4s linear infinite;

}

@keyframes scanner{

    from{
        top:-5%;
    }

    to{
        top:105%;
    }

}

/* Reveal Card */

.theme-agent .reveal-card{

    background:

        rgba(10,18,30,.72);

    border:

        1px solid rgba(34,211,238,.25);

    backdrop-filter:blur(20px);

    box-shadow:

        0 25px 70px rgba(0,0,0,.45);

}

/* Corner HUD */

.theme-agent .reveal-card::before{

    content:"";

    position:absolute;

    inset:12px;

    border:1px solid rgba(34,211,238,.12);

    pointer-events:none;

}

/* Heading */

.theme-agent .reveal-title{

    color:#67e8f9;

    text-transform:uppercase;

    letter-spacing:.18em;

    text-shadow:

        0 0 15px rgba(34,211,238,.35);

}

/* Message */

.theme-agent .reveal-text{

    color:#e5e7eb;

    line-height:1.9;

}

/* Progress */

.theme-agent .reveal-progress{

    background:

        rgba(255,255,255,.08);

}

.theme-agent .reveal-progress span{

    background:

        linear-gradient(
            90deg,
            #06b6d4,
            #38bdf8
        );

}

/* Button */

.theme-agent .theme-btn{

    background:

        linear-gradient(
            135deg,
            #0891b2,
            #0ea5e9
        );

    color:white;

}

.theme-agent .theme-btn:hover{

    box-shadow:

        0 15px 35px rgba(14,165,233,.35);

}

/* ======================================================
   HUD Labels
====================================================== */

.agent-label{

    display:inline-block;

    padding:6px 12px;

    margin-bottom:18px;

    border:

        1px solid rgba(34,211,238,.25);

    color:#67e8f9;

    font-size:.8rem;

    letter-spacing:.15em;

    text-transform:uppercase;

}

/* ======================================================
   Shared Reveal Effects
====================================================== */

.reveal-card{

    animation:cardFade .7s ease;

}

@keyframes cardFade{

    from{

        opacity:0;

        transform:
        translateY(30px)
        scale(.98);

    }

    to{

        opacity:1;

        transform:none;

    }

}

.reveal-text{

    animation:textFade .9s ease .25s both;

}

@keyframes textFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

.theme-btn{

    transition:
        transform .25s,
        box-shadow .25s,
        background .25s;

}

/* Floating Background Particles */

.theme-particle{

    position:absolute;

    width:10px;
    height:10px;

    border-radius:50%;

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

    animation:themeFloat linear infinite;

}

@keyframes themeFloat{

    from{

        transform:
        translateY(110vh)
        scale(.3);

    }

    to{

        transform:
        translateY(-120px)
        scale(1);

    }

}

/* ======================================================
   Theme Transition
====================================================== */

.theme-fade{

    animation:themeFade .6s ease;

}

@keyframes themeFade{

    from{

        opacity:0;

        filter:blur(12px);

    }

    to{

        opacity:1;

        filter:blur(0);

    }

}

/* ======================================================
   Responsive
====================================================== */

@media(max-width:768px){

    .theme-agent .reveal-title{

        font-size:2rem;

    }

    .theme-agent .reveal-text{

        font-size:1.2rem;

    }

}

@media(max-width:480px){

    .reveal-card{

        padding:28px;

    }

    .reveal-title{

        font-size:1.8rem;

    }

    .reveal-text{

        font-size:1.05rem;

    }

    .theme-btn{

        width:100%;

    }

}