/* ============================================================
 * SleepWiz
 * State-driven view switching (pure CSS)
 * ========================================================== */

/* ------------------------------------------------------------
 * Default state safety
 * ---------------------------------------------------------- */

[data-sleep-state] {

    position: relative;
}

/* ============================================================
 * ASLEEP STATE
 * ========================================================== */

/*
 * When asleep:
 * - show only .sw-asleep-view
 * - hide everything else
 */
[data-sleep-state="asleep"] > :not(.sw-asleep-view) {

    display: none !important;
}

/* ============================================================
 * AWAKE STATE
 * ========================================================== */

/*
 * When awake:
 * - hide asleep-view
 * - show everything else
 */

[data-sleep-state="awake"] > .sw-asleep-view {

    display: none !important;
}

/*
 * Ensure normal content is visible when awake
 */

[data-sleep-state="awake"] > :not(.sw-asleep-view) {

    display: "";
}

/* ============================================================
 * Optional: subtle "living UI" feedback
 * ========================================================== */

/*
 * Awake elements feel slightly more "alive"
 * (cartoon-like subtle pop)
 */

[data-sleep-state="awake"] {

    transition:
        transform 120ms ease-out,
        box-shadow 120ms ease-out,
        background 120ms ease-out;
}

/*
 * Micro-lift when awake (very subtle)
 */

[data-sleep-state="awake"] {

    transform: translateY(-0.5px);
}

/* ============================================================
 * Optional: asleep softness
 * ========================================================== */

/*
 * Asleep state feels "inactive / folded"
 */

[data-sleep-state="asleep"] {

    opacity: 0.92;
}