/* ===========================================================
   loader.css
   Medicine Search Loader
   Master Stylesheet
   =========================================================== */

/* -----------------------------------------------------------
   Foundation
----------------------------------------------------------- */

@import "01-reset.css";
@import "02-variables.css";

/* -----------------------------------------------------------
   Scene
----------------------------------------------------------- */

@import "03-scene.css";
@import "04-map.css";
@import "05-roads.css";
@import "06-buildings.css";
@import "07-water.css";
@import "08-parks.css";

/* -----------------------------------------------------------
   Search Animation
----------------------------------------------------------- */

@import "09-user.css";
@import "10-ripple.css";
@import "11-pharmacy.css";
@import "12-connections.css";
@import "13-packets.css";
@import "14-availability.css";

/* -----------------------------------------------------------
   Interface
----------------------------------------------------------- */

@import "15-progress.css";

/* -----------------------------------------------------------
   Effects
----------------------------------------------------------- */

@import "16-effects.css";

/* -----------------------------------------------------------
   Responsive
----------------------------------------------------------- */

@import "17-responsive.css";

/* ===========================================================
   GLOBAL LAYER STACK
=========================================================== */

.loader{
    position:fixed;
    inset:0;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:var(--color-background);
    /* border:1px solid red;  */
    color:var(--color-text);
}

.scene{
    /* // min(100vw,1600px); */
    /* //:min(100vh,900px); */
    position:relative;
    width: 100vw; 
    height: 100vh; 
    overflow:hidden;
    isolation:isolate;
    /* border: 1px solid blue; */
}

.atmosphere{
    position:absolute;
    inset:0;
    z-index:1;
}

.terrain{
    position:absolute;
    inset:0;
    z-index:2;
}

.water-layer{
    position:absolute;
    inset:0;
    z-index:3;
}

.parks{
    position:absolute;
    inset:0;
    z-index:4;
}

.city-blocks{
    position:absolute;
    inset:0;
    z-index:5;
}

.roads{
    position:absolute;
    inset:0;
    z-index:6;
}

.connections{
    position:absolute;
    inset:0;
    z-index:7;
    pointer-events:none;
}

.packet-layer{
    position:absolute;
    inset:0;
    z-index:8;
    pointer-events:none;
}

.pharmacy-network{
    position:absolute;
    inset:0;
    z-index:9;
}

.hub-layer{
    position:absolute;
    inset:0;
    z-index:10;
}

.ripple-layer{
    position:absolute;
    inset:0;
    z-index:11;
    pointer-events:none;
}

.particles{
    position:absolute;
    inset:0;
    z-index:12;
    pointer-events:none;
}

.hud{
    position:absolute;
    inset:0;
    z-index:20;
    pointer-events:none;
}

/* ===========================================================
   PERFORMANCE
=========================================================== */

.scene *,
.scene *::before,
.scene *::after{

    box-sizing:border-box;

    will-change:
        transform,
        opacity;

}

/* ===========================================================
   DEFAULT TRANSITIONS
=========================================================== */

.user-hub,
.pharmacy,
.packet,
.connection,
.progress,
.status-panel{

    transition:

        opacity .35s ease,
        transform .35s ease,
        filter .35s ease;

}

/* ===========================================================
   GLASS
=========================================================== */

.glass{

    backdrop-filter:
        blur(20px)
        saturate(180%);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(180%);

}

/* ===========================================================
   HIDDEN HELPERS
=========================================================== */

[hidden]{

    display:none !important;

}