Say it how it is

formalreason

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>الواقع المطلق | Absolute Reality - Deconstruction & Reformation</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none; /* adds poetic detachment, but text inputs remain selectable */
}

    body {
        min-height: 100vh;
        background: radial-gradient(circle at 20% 30%, #0a0f1e, #02040c);
        font-family: 'Segoe UI', 'Poppins', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 2rem;
        position: relative;
        transition: background 1.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    }

    /* mystical overlay that shifts when reality deconstructs */
    body.deconstructed {
        background: radial-gradient(circle at 70% 40%, #000000, #010003);
    }

    .reality-portal {
        max-width: 1300px;
        width: 100%;
        background: rgba(10, 20, 30, 0.45);
        backdrop-filter: blur(12px);
        border-radius: 3rem;
        border: 1px solid rgba(212, 175, 55, 0.3);
        box-shadow: 0 25px 45px rgba(0,0,0,0.5), 0 0 0 2px rgba(210, 180, 70, 0.1) inset;
        padding: 2rem 2rem 2.5rem;
        transition: all 0.6s ease;
    }

    /* quranic header */
    .divine-throne {
        text-align: center;
        margin-bottom: 2.2rem;
        border-bottom: 1px solid rgba(210, 180, 70, 0.4);
        padding-bottom: 1rem;
    }

    .quranic-verse {
        font-size: 1.8rem;
        font-weight: 500;
        font-family: 'Noto Sans Arabic', 'Amiri', 'Times New Roman', serif;
        color: #f7e5b5;
        text-shadow: 0 0 6px #d4af37;
        letter-spacing: 1px;
        direction: rtl;
    }

    .translation {
        font-size: 0.85rem;
        color: #bfa98e;
        margin-top: 6px;
        font-style: italic;
    }

    h1 {
        font-size: 2.1rem;
        font-weight: 600;
        background: linear-gradient(135deg, #f6e6b0, #c9a84b);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        letter-spacing: -0.5px;
        margin-top: 10px;
    }

    /* Reality Grid (the fabric of existence) */
    .reality-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;
        margin: 2rem 0 2rem;
        transition: all 0.5s;
        min-height: 320px;
    }

    .reality-card {
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(8px);
        border-radius: 2rem;
        padding: 1.3rem 1rem;
        width: 170px;
        text-align: center;
        border: 1px solid rgba(255, 215, 120, 0.5);
        transition: all 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
        cursor: default;
        box-shadow: 0 10px 20px -8px rgba(0,0,0,0.5);
        transform: scale(1);
    }

    .reality-card:hover {
        border-color: #ecc453;
        box-shadow: 0 0 18px rgba(218, 165, 32, 0.3);
        transform: translateY(-5px);
    }

    .card-icon {
        font-size: 2.8rem;
        margin-bottom: 0.5rem;
    }

    .card-title {
        font-size: 1.3rem;
        font-weight: bold;
        color: #ffefcf;
        margin-bottom: 0.25rem;
    }

    .card-arabic {
        font-family: 'Noto Sans Arabic', serif;
        font-size: 1rem;
        color: #e7cf97;
        direction: rtl;
    }

    /* dissolve animation */
    .dissolve-animation {
        animation: cosmicFade 0.65s forwards ease-in-out;
    }

    @keyframes cosmicFade {
        0% {
            opacity: 1;
            transform: scale(1) rotate(0deg);
            filter: blur(0);
        }
        40% {
            opacity: 0.5;
            transform: scale(0.7) rotate(2deg);
            filter: blur(1.5px);
        }
        100% {
            opacity: 0;
            transform: scale(0) rotate(5deg);
            filter: blur(4px);
            display: none;
        }
    }

    /* emergence animation for reformed reality */
    .emerge-card {
        animation: birthFromVoid 0.8s cubic-bezier(0.21, 1.11, 0.4, 1) forwards;
    }

    @keyframes birthFromVoid {
        0% {
            opacity: 0;
            transform: translateY(40px) scale(0.7);
            filter: blur(8px);
        }
        70% {
            opacity: 0.9;
            transform: translateY(-4px) scale(1.02);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
            filter: blur(0);
        }
    }

    /* control panel */
    .divine-controls {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
        margin: 1.5rem 0 1rem;
    }

    button {
        background: rgba(0, 0, 0, 0.65);
        backdrop-filter: blur(12px);
        border: 1px solid #dbb45c;
        color: #ffefcf;
        font-size: 1rem;
        font-weight: 600;
        padding: 0.8rem 2rem;
        border-radius: 3rem;
        cursor: pointer;
        transition: 0.3s;
        font-family: inherit;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        letter-spacing: 0.5px;
    }

    button i {
        font-style: normal;
        font-weight: bold;
    }

    button:hover {
        background: #dbb45c;
        color: #0a0a0a;
        border-color: #ffeda3;
        box-shadow: 0 0 15px #ffd966;
        transform: scale(1.02);
    }

    .input-reality {
        flex: 1;
        min-width: 240px;
        background: rgba(0, 0, 0, 0.6);
        border: 1px solid #c9aa4b;
        padding: 0.8rem 1.2rem;
        border-radius: 3rem;
        color: #f9e7c2;
        font-size: 1rem;
        font-family: inherit;
        outline: none;
        text-align: center;
    }

    .input-reality:focus {
        border-color: #f5d97f;
        box-shadow: 0 0 12px rgba(218, 165, 32, 0.6);
    }

    .status-area {
        text-align: center;
        margin-top: 1.5rem;
        font-size: 0.85rem;
        background: rgba(0, 0, 0, 0.4);
        padding: 0.7rem;
        border-radius: 2rem;
        color: #cbbd92;
        border-top: 1px dotted rgba(218, 165, 32, 0.4);
    }

    .verse-floating {
        font-family: 'Noto Sans Arabic', serif;
        direction: rtl;
        font-size: 0.9rem;
        color: #ddcc99;
    }

    footer {
        text-align: center;
        margin-top: 1.8rem;
        font-size: 0.7rem;
        color: #786e4a;
    }

    @media (max-width: 680px) {
        .reality-card {
            width: 140px;
            padding: 0.9rem;
        }
        .quranic-verse {
            font-size: 1.2rem;
        }
        body {
            padding: 1rem;
        }
    }
</style>

</head>
<body>

<div class="reality-portal" id="realityPortal">
<div class="divine-throne">
<div class="quranic-verse">بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ</div>
<div class="translation">In the Name of Allah, the Most Gracious, the Most Merciful</div>
<h1> تَفكِيكُ الوَاقِع <br><span style="font-size: 1.1rem;">DECONSTRUCTION & REFORMATION OF REALITY</span></h1>
<div class="quranic-verse" style="font-size: 1.2rem; margin-top: 6px;">إِنَّمَا أَمْرُهُ إِذَا أَرَادَ شَيْئًا أَنْ يَقُولَ لَهُ كُنْ فَيَكُونُ</div>
<div class="translation">"His command, when He intends anything, is only to say to it: Be, and it is." (Yā Sīn 36:82)</div>
</div>

<!-- The tangible fabric of existence -->
<div id="realityContainer" class="reality-grid">
    <!-- Original Reality elements will be injected via JS for better control -->
</div>

<div class="divine-controls">
    <button id="deconstructBtn">🔮 تَفْكِيكْ · DECONSTRUCT REALITY</button>
    <input type="text" id="desiredRealityInput" class="input-reality" placeholder="✍️  Describe your desired reality... (e.g., 'Garden of eternal peace' or 'Ocean of Light')" autocomplete="off">
    <button id="reformBtn">✨ كُن فَيَكُونُ · REFORM REALITY</button>
</div>

<div class="status-area" id="statusMessage">
    <span>🌀 الواقع قائم | Objective reality is present. Invoke Deconstruction to transcend.</span>
</div>
<footer>
    <span>آيات من القرآن | Quranic essence of creation & annihilation — Kun Fayakūn empowers reformation.</span>
</footer>

</div>

// ---------- INITIAL REALITY COMPONENTS (Cosmic + Objective Reality) ----------
const INITIAL_REALITY = [
    { icon: "⌛", name: "Time", arabic: "الزمان (Time)" },
    { icon: "🌌", name: "Space", arabic: "المكان (Space)" },
    { icon: "⚛️", name: "Matter", arabic: "المادة (Matter)" },
    { icon: "⚡", name: "Energy", arabic: "الطاقة (Energy)" },
    { icon: "🔄", name: "Causality", arabic: "السببية (Causality)" },
    { icon: "👁️", name: "Objective Reality", arabic: "الواقع الموضوعي (Objective Reality)" },
    { icon: "🧠", name: "Perception", arabic: "الإدراك (Perception)" },
    { icon: "🌟", name: "Consciousness", arabic: "الوعي (Consciousness)" }
];

// ----- dictionary to generate reality aspects from user's desired input (Quranic inspired)
// Maps key english/triggers to Reality elements with Arabic & icon
const REALITY_MORPHEUS = {
    light: { icon: "☀️", name: "Light of Existence", arabic: "نور الوجود" },
    mercy: { icon: "🤍", name: "Mercy", arabic: "الرحمة" },
    peace: { icon: "🕊️", name: "Sakinah (Tranquility)", arabic: "السكينة" },
    garden: { icon: "🌸", name: "Eternal Gardens", arabic: "جنات الخلد" },
    ocean: { icon: "🌊", name: "Limitless Ocean", arabic: "البحر المديد" },
    star: { icon: "⭐", name: "Celestial Lights", arabic: "النجوم الثواقب" },
    wisdom: { icon: "📜", name: "Divine Wisdom", arabic: "الحكمة" },
    truth: { icon: "🔍", name: "Absolute Truth", arabic: "الحق المطلق" },
    love: { icon: "💖", name: "Rahma (Love)", arabic: "المحبة الإلهية" },
    knowledge: { icon: "📖", name: "Ma'rifah", arabic: "المعرفة" },
    harmony: { icon: "🎵", name: "Cosmic Harmony", arabic: "الوئام الكوني" },
    power: { icon: "⚡", name: "Divine Power", arabic: "القدرة" },
    infinity: { icon: "∞", name: "Infinite Realms", arabic: "عوالم لا متناهية" },
    jannah: { icon: "🌿", name: "Jannat", arabic: "جَنَّة" },
    nur: { icon: "✨", name: "An-Nur (The Light)", arabic: "النُّور" },
    barzakh: { icon: "🌙", name: "Threshold of Realities", arabic: "البرزخ" }
};

// Helper: get reality fragment from keywords in user's input
function extractRealityComponents(userDescription) {
    if (!userDescription || userDescription.trim() === "") {
        // Default new reality if empty - divine simplicity
        return [
            { icon: "✨", name: "Pure Essence", arabic: "الجوهر الخالص" },
            { icon: "🌄", name: "Fajr (Dawn of Truth)", arabic: "الفجر" },
            { icon: "💎", name: "Jawhar (Substance)", arabic: "الجوهر" },
            { icon: "🌌", name: "Malakut (Spiritual Realm)", arabic: "ملكوت" }
        ];
    }
    
    const lowerInput = userDescription.toLowerCase();
    const words = lowerInput.split(/[\s,،]+/).filter(w => w.length > 2);
    let components = [];
    let usedKeys = new Set();
    
    // iterate words and try to map to reality concepts
    for (let word of words) {
        for (let [key, value] of Object.entries(REALITY_MORPHEUS)) {
            if (word.includes(key) || key.includes(word) && !usedKeys.has(key)) {
                components.push({ ...value, icon: value.icon || "🌀" });
                usedKeys.add(key);
                break;
            }
        }
        if (components.length >= 6) break;
    }
    
    // If no matches, generate inspired concepts from user input: create poetic Reality fragments
    if (components.length === 0) {
        // create 4 mystical aspects based on user description's essence
        const poeticFragments = [
            { icon: "🔮", name: "Ruh (Spirit)", arabic: "الروح" },
            { icon: "🌙", name: "Qadr (Destiny)", arabic: "القدر" },
            { icon: "🕋", name: "Bayt al-Ma'mur", arabic: "البيت المعمور" },
            { icon: "📿", name: "Tasbih of Realities", arabic: "تسبيح الحقائق" }
        ];
        components = poeticFragments.slice(0, 4);
    }
    
    // ensure at least 4-6 elements, add some universal barakah components if necessary
    if (components.length < 4) {
        components.push({ icon: "🌠", name: "Nujum (Stars)", arabic: "النجوم" });
        components.push({ icon: "💫", name: "Barakah", arabic: "البركة" });
    }
    
    // return first 6 max
    return components.slice(0, 6);
}

// DOM Elements
const realityContainer = document.getElementById("realityContainer");
const deconstructBtn = document.getElementById("deconstructBtn");
const reformBtn = document.getElementById("reformBtn");
const desiredInput = document.getElementById("desiredRealityInput");
const statusSpan = document.getElementById("statusMessage");
const bodyEl = document.body;

let realityDeconstructed = false;     // flag: has the reality been dismantled?
let currentRealityElements = [];      // store current reality array

// ----- render reality cards with optional emergence animation -----
function renderReality(elementsArray, addEmergence = true) {
    realityContainer.innerHTML = "";
    if (!elementsArray || elementsArray.length === 0) {
        // empty reality = void
        realityContainer.innerHTML = `<div style="text-align:center; width:100%; padding:3rem; color:#ae9f77;">✧ لَا شَيْءَ ✧<br>Absolute Void — ready for reformation</div>`;
        return;
    }
    
    elementsArray.forEach((el, idx) => {
        const card = document.createElement("div");
        card.className = "reality-card";
        if (addEmergence) {
            card.classList.add("emerge-card");
            // remove class after animation to avoid re-trigger
            setTimeout(() => card.classList.remove("emerge-card"), 900);
        }
        card.innerHTML = `
            <div class="card-icon">${el.icon || "🌀"}</div>
            <div class="card-title">${el.name}</div>
            <div class="card-arabic">${el.arabic}</div>
        `;
        realityContainer.appendChild(card);
    });
}

// Load Original Reality (First Creation)
function loadOriginalReality() {
    currentRealityElements = [...INITIAL_REALITY];
    renderReality(currentRealityElements, true);
    realityDeconstructed = false;
    bodyEl.classList.remove("deconstructed");
    statusSpan.innerHTML = "🌀 <strong>العالم الواقعي | Objective Reality</strong> active — Time, Space, Matter & Consciousness manifest. <span style='color:#e3c776'>Deconstruction awaits.</span>";
}

// ----- DECONSTRUCTION RITUAL (Total annihilation of all reality layers, including objective reality) -----
function deconstructReality() {
    if (realityDeconstructed) {
        statusSpan.innerHTML = "⚠️ الواقع منعدم بالفعل | Reality is already deconstructed into the Void. Reform a new reality with <strong>كُن فَيَكُونُ</strong>.";
        return;
    }
    
    // get all current cards and apply dissolve animation
    const cards = document.querySelectorAll("#realityContainer .reality-card");
    if (cards.length === 0) {
        // no cards ? but still set deconstructed flag
        realityDeconstructed = true;
        bodyEl.classList.add("deconstructed");
        statusSpan.innerHTML = "☁️ العدم المطلق | Total Deconstruction Complete — No traces of previous reality remain. Enter your desire and Reform.";
        realityContainer.innerHTML = `<div style="text-align:center; width:100%; padding:3rem; color:#bba872;">🔥 هَوَاءٌ مِنَ الْعَدَمِ 🔥<br>The fabric of objective reality has dissolved.</div>`;
        return;
    }
    
    // Quranic dissolution atmosphere: verse about everything perishing
    const annihilationVerse = "كُلُّ مَنْ عَلَيْهَا فَانٍ وَيَبْقَىٰ وَجْهُ رَبِّكَ ذُو الْجَلَالِ وَالْإِكْرَامِ";
    statusSpan.innerHTML = `📜 ${annihilationVerse}<br>⚡ Deconstructing: all pillars of reality (including Objective Reality) are crumbling into the primordial silence... ⚡`;
    
    // Add dissolve class to each card
    let completed = 0;
    cards.forEach(card => {
        card.classList.add("dissolve-animation");
        card.addEventListener('animationend', () => {
            completed++;
            if (completed === cards.length) {
                // after all cards vanish, clear container and set deconstructed state
                realityContainer.innerHTML = `<div style="text-align:center; width:100%; padding:3rem; color:#b89f67; animation: fadeIn 0.5s;">🕋 لَا إِلَٰهَ إِلَّا اللَّهُ 🕋<br><span style="font-size:0.9rem;">Absolute deconstruction: No object, no space, no time remains.</span><br><span style="font-size:0.75rem;">Objective Reality has been revoked.</span></div>`;
                realityDeconstructed = true;
                bodyEl.classList.add("deconstructed");
                currentRealityElements = [];
                statusSpan.innerHTML = "❄️ الواقع هُدم بالكامل ❄️ | All realities, structures, perceptions — dismantled. Use 'Reform Reality' to invoke 'Kun Fayakun' and shape existence from your will.";
            }
        });
    });
    if (cards.length === 0) {
        realityDeconstructed = true;
        bodyEl.classList.add("deconstructed");
        realityContainer.innerHTML = `<div style="padding:2rem; text-align:center;">🕋 العدم الخالص</div>`;
        statusSpan.innerHTML = "Void manifest. Reality is deconstructed.";
    }
}

// ----- REFORMATION: based on user's desire (input) , create new reality using Quranic command "Kun Fayakun" -----
function reformReality() {
    // Only allow reformation if reality has been deconstructed first (symbolic: old must fade before new)
    if (!realityDeconstructed) {
        statusSpan.innerHTML = "⚠️ لا يمكن إعادة التشكيل قبل التفكيك ⚠️ — First click <strong>DECONSTRUCT REALITY</strong> to annihilate current existence, then recreate.";
        // add temporary glow on deconstruct button
        deconstructBtn.style.transform = "scale(1.02)";
        setTimeout(() => { deconstructBtn.style.transform = ""; }, 400);
        return;
    }
    
    const userDesire = desiredInput.value.trim();
    if (userDesire === "") {
        statusSpan.innerHTML = "✍️ أدخل رغبتك لتشكيل واقع جديد | Enter your desired reality to recreate existence. Even emptiness can become something.";
        return;
    }
    
    // Quranic affirmation: Kun Fayakun
    const kunFayakunVerse = "كُن فَيَكُونُ — 'Be, and it is'";
    statusSpan.innerHTML = `✨ ${kunFayakunVerse} ✨<br> By the command of the Creator, reality is being reformed according to: <strong style="color:#ffdf9c">“${userDesire.substring(0, 70)}”</strong>`;
    
    // Generate new reality components from user's description
    const newRealityComponents = extractRealityComponents(userDesire);
    
    // store new reality
    currentRealityElements = newRealityComponents.map(comp => ({
        icon: comp.icon || "🌀",
        name: comp.name,
        arabic: comp.arabic
    }));
    
    // Clear container and re-render with emergence animation
    realityContainer.innerHTML = "";
    renderReality(currentRealityElements, true);
    
    // update flags: new reality exists, objective reality replaced by user-defined reality
    realityDeconstructed = false;   // reality now reformed and exists
    bodyEl.classList.remove("deconstructed");
    
    // Add special glowing effect: transition from void to new reality
    const portalDiv = document.querySelector(".reality-portal");
    portalDiv.style.transition = "box-shadow 0.7s";
    portalDiv.style.boxShadow = "0 0 28px rgba(218, 175, 65, 0.6)";
    setTimeout(() => { portalDiv.style.boxShadow = ""; }, 800);
    
    // dynamic status message - mention that objective reality has been reshaped by user input + Quranic reference
    statusSpan.innerHTML = `🌟 <strong>واقع جديد مُشكَّل</strong> 🌟<br> Your desire has reformed existence! The new reality contains: ${newRealityComponents.map(c => c.name).join(", ")}. <br> <span style="font-size:0.75rem;">📖 "كُن فَيَكُونُ" — Lo, the fabric of reality bends to the Divine Command through your inspired intent.</span>`;
    
    // Scroll user attention
    realityContainer.scrollIntoView({ behavior: "smooth", block: "nearest" });
    
    // Optional: give a subtle effect on the input to celebrate reformation
    desiredInput.style.borderColor = "#f5d468";
    setTimeout(() => desiredInput.style.borderColor = "", 1000);
}

// ----- reset to original reality without deconstruction? but we adhere to philosophical perfection: keep 'reset' optional via original but we add a hidden feature?
// For perfect UX, let's add an extra 'Restore Original Reality' by double-tap on header? but better to keep simplicity.
// However we also need to guarantee that if user wants to experiment, they can deconstruct again after reformation.

// Additional enhancement: if user clicks Reform when reality is already built, prompt deconstruct first. Already handled.
// Also if user desires different reality after reformation, they must deconstruct again (symbolic cycle).
// But we also provide a method: After some reformation, you can deconstruct to void again.

// Event listeners
deconstructBtn.addEventListener("click", () => {
    deconstructReality();
});

reformBtn.addEventListener("click", () => {
    reformReality();
});

// Allow enter key in input field to trigger reformation
desiredInput.addEventListener("keypress", (e) => {
    if (e.key === "Enter") {
        e.preventDefault();
        reformReality();
    }
});

// Initialize: show original reality fabric of existence
loadOriginalReality();

// Additional mystical touch: dynamic background particle effect? not needed but adds vibe.
// Add subtle floating aura to status upon DOM load
console.log("%c Reality Deconstructor | Quranic JavaScript — 'Kun Fayakun' ready", "color: #dbb45c; font-size: 16px;");

</script>
</body>
</html>