/* =========================================================
   SYNOD OF DARKNESS — SoD GRAPHICAL ENGINE
   =========================================================

   File: home.css
   Component: Home Page
   Project: Synod of Darkness
   Language: CSS
   Type: Internal Home Page stylesheet
   Scope: Home Page only

   Purpose:
   - Controls the responsive 5120 × 1600 master scene.
   - Controls all Home Page graphical layers.
   - Controls stars and clouds animations.
   - Controls the Coming Soon graphical rollover.
   - Controls graphical Footer Layer 14.
   - Controls footer navigation hit areas.
   - Provides portrait-specific graphical corrections.

   Architecture:
   - Client-editable settings:
     ../style.css
   - Global TopBar:
     topbar.css
   - Popup internal interface:
     popup.css

   Layer architecture:
   - Layers 0–3:
     Sky group
   - Layers 4–12:
     Main graphical content
   - Layer 13:
     Coming Soon interactive hit area
   - Layer 14:
     Footer graphical interface
   - Layer 15:
     Footer interactive hit areas

   IMPORTANT:
   This file contains internal Home Page layout rules.
   Client customization must not be added here.

   Popup windows remain independent from the master scene.

   Master canvas:
   5120 × 1600

   Last update:
   2026-08-27

   CHANGELOG:
   - 2026-08-26:
     Layer 11 attached directly to the responsive master scene.
   - 2026-08-26:
     Coming Soon CTA converted to a self-contained PNG button.
     Removed obsolete CSS text overlay from the CTA.
     Existing Layers 0–10 and popup rules preserved.
   - 2026-08-27:
     Coming Soon graphical button width calibrated to the
     native 1440 px width relative to the 5120 px master canvas.
   - 2026-08-27:
     Coming Soon graphical button moved below the central
     Synod of Darkness logo.
   - 2026-08-27:
     Removed the temporary 10 px bottom viewport reserve.
     The apparent bottom obstruction was caused by the
     ChromeOS shelf and not by the Home Page scene.
   - 2026-08-27:
     Replaced the standalone Coming Soon button architecture
     with sod-header-11.png using the complete 5120 × 1600
     master canvas.
     Removed all obsolete .sod-enter-button positioning,
     portrait calibration and rollover rules.
     Layers 0–10 remain unchanged.
     HTML footer preserved for later calibration.
   - 2026-08-27:
     Added sod-header-12.png as graphical Layer 12 for the
     Coming Soon rollover state.
     Added an isolated transparent HTML hit area over the
     Coming Soon button only.
     Layers 0–11 positioning remain unchanged.
   - 2026-08-27:
     Added Sod-footer.png as graphical Layer 14 using the
     complete 5120 × 1600 master canvas.
     Final validated Layer 14 position: 170 px.
   - 2026-08-27:
     Removed the obsolete temporary HTML legal footer.
     Added Layer 15 transparent hit areas aligned with the
     footer PNG navigation labels.
   ========================================================= */


/* =========================================================
   HOME PAGE STAGE
   ========================================================= */

.sod-stage {

    --sod-scene-width:
        min(100vw, calc(100dvh * 3.2));

    --sod-scene-height:
        min(31.25vw, 100dvh);

    position: fixed;

    top: 0;
    left: 0;

    width: var(--sod-scene-width);

    height:
        min(
            100dvh,
            calc(var(--sod-scene-height) + 165px)
        );

    overflow: visible;
}


/* =========================================================
   MASTER SCENE
   Responsive 5120 × 1600 canvas.
   ========================================================= */

.sod-scene {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    aspect-ratio: 5120 / 1600;

    overflow: visible;

    container-type: inline-size;
}


/* =========================================================
   SCENE GROUPS
   ========================================================= */

.sod-sky,
.sod-content {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
}


.sod-sky {

    z-index: 0;
}


.sod-content {

    z-index: 1;
}


/* =========================================================
   LAYER 0 — LANDSCAPE
   ========================================================= */

.layer-landscape {

    position: absolute;

    z-index: 0;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: fill;

    display: block;
}


/* =========================================================
   LAYER 1 — STARS
   ========================================================= */

.layer-header-01 {

    position: absolute;

    z-index: 1;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: fill;

    display: block;

    pointer-events: none;

    animation:
        star-twinkle 4s ease-in-out infinite alternate;

    will-change:
        opacity,
        filter;
}


/* ---------------------------------------------------------
   STAR TWINKLE ANIMATION
   --------------------------------------------------------- */

@keyframes star-twinkle {

    0% {

        opacity: 0.65;

        filter:
            brightness(0.9);
    }


    50% {

        opacity: 1;

        filter:
            brightness(1.8)
            drop-shadow(0 0 4px #6caa86)
            drop-shadow(0 0 8px #6caa86);
    }


    100% {

        opacity: 0.8;

        filter:
            brightness(1.1);
    }
}


/* =========================================================
   LAYER 2 — MOON
   ========================================================= */

.layer-header-02 {

    position: absolute;

    z-index: 2;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: fill;

    display: block;

    pointer-events: none;
}


/* =========================================================
   LAYER 3 — CLOUDS
   ========================================================= */

.layer-header-03 {

    position: absolute;

    z-index: 3;

    top: 0;
    left: 0;

    width: 200%;
    height: 100%;

    display: flex;

    opacity: 0.25;

    pointer-events: none;

    animation:
        cloud-drift 360s linear infinite;

    will-change:
        transform;
}


.layer-header-03 img {

    width: 50%;
    height: 100%;

    object-fit: fill;

    flex-shrink: 0;

    display: block;
}


/* ---------------------------------------------------------
   CLOUD DRIFT ANIMATION
   --------------------------------------------------------- */

@keyframes cloud-drift {

    from {

        transform:
            translateX(0);
    }


    to {

        transform:
            translateX(-50%);
    }
}


/* =========================================================
   LAYER 4 — NECROMANCER RAMPART
   ========================================================= */

.layer-header-04 {

    position: absolute;

    z-index: 4;

    top: 50px;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: fill;

    display: block;

    pointer-events: none;
}


/* =========================================================
   LAYER 5 — CITADEL
   ========================================================= */

.layer-header-05 {

    position: absolute;

    z-index: 5;

    top: 50px;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: fill;

    display: block;

    pointer-events: none;
}


/* =========================================================
   LAYER 6 — EVIL FOREST
   ========================================================= */

.layer-header-06 {

    position: absolute;

    z-index: 6;

    top: 150px;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: fill;

    display: block;

    pointer-events: none;
}


/* =========================================================
   LAYER 7 — UNDEAD ARMY
   ========================================================= */

.layer-header-07 {

    position: absolute;

    z-index: 7;

    top: 80px;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: fill;

    display: block;

    pointer-events: none;
}


/* =========================================================
   LAYER 8 — NECROMANCER PORTAL / STATUE
   ========================================================= */

.layer-header-08 {

    position: absolute;

    z-index: 8;

    top: 165px;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: fill;

    display: block;

    pointer-events: none;
}


/* =========================================================
   LAYER 9 — NECROMANCER CRYPT
   ========================================================= */

.layer-header-09 {

    position: absolute;

    z-index: 9;

    top: 165px;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: fill;

    display: block;

    pointer-events: none;
}


/* =========================================================
   LAYER 10 — SYNOD OF DARKNESS MAIN IDENTITY
   ========================================================= */

.layer-header-10 {

    position: absolute;

    z-index: 10;

    top: 155px;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: fill;

    display: block;

    pointer-events: none;
}


/* =========================================================
   LAYER 11 — COMING SOON NORMAL STATE

   Full 5120 × 1600 transparent master layer.
   ========================================================= */

.layer-header-11 {

    position: absolute;

    z-index: 11;

    top: 155px;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: fill;

    display: block;

    pointer-events: none;
}


/* =========================================================
   LAYER 12 — COMING SOON ROLLOVER

   Full 5120 × 1600 transparent master layer.
   Pixel-aligned with Layer 11.
   ========================================================= */

.layer-header-12 {

    position: absolute;

    z-index: 12;

    top: 155px;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: fill;

    display: block;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.2s ease;
}


/* =========================================================
   LAYER 13 — COMING SOON INTERACTIVE HIT AREA

   Transparent clickable zone covering only the graphical
   Coming Soon button.

   Percentage coordinates follow the responsive master scene.
   ========================================================= */

.sod-coming-soon-hitbox {

    position: absolute;

    z-index: 13;

    left: 35%;

    top:
        calc(
            155px + 71.5%
        );

    width: 30%;
    height: 20%;

    display: block;

    cursor: pointer;

    pointer-events: auto;

    text-decoration: none;

    background: transparent;
}


/* ---------------------------------------------------------
   COMING SOON — ROLLOVER
   --------------------------------------------------------- */

.sod-coming-soon-hitbox:hover ~ .layer-header-12,
.sod-coming-soon-hitbox:focus-visible ~ .layer-header-12 {

    opacity: 1;
}


/* =========================================================
   LAYER 14 — FOOTER GRAPHICAL INTERFACE

   Full 5120 × 1600 transparent master layer.
   Footer graphical content only.
   ========================================================= */

.layer-footer-14 {

    position: absolute;

    z-index: 14;

    top: 170px;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: fill;

    display: block;

    pointer-events: none;
}


/* =========================================================
   LAYER 15 — FOOTER INTERACTIVE HIT AREAS

   Transparent clickable zones aligned with Sod-footer.png.

   The footer PNG uses the complete 5120 × 1600 master canvas
   and Layer 14 is vertically offset by 170 px.

   Horizontal coordinates are derived from the final footer
   artwork supplied on 2026-08-27.
   ========================================================= */

.sod-footer-hitboxes {

    position: absolute;

    z-index: 15;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;
}


.sod-footer-hitbox {

    position: absolute;

    /*
     * Footer text occupies the lower section of the master
     * footer artwork. The 170 px offset matches Layer 14.
     */
    top:
        calc(
            170px + 88.5%
        );

    height: 11%;

    display: block;

    pointer-events: auto;

    cursor: pointer;

    text-decoration: none;

    background: transparent;
}


/* Legal Notice */

.sod-footer-hitbox-legal {

    left: 46.5%;
    width: 8%;
}


/* Privacy Policy */

.sod-footer-hitbox-privacy {

    left: 54.8%;
    width: 10%;
}


/* Cookies */

.sod-footer-hitbox-cookies {

    left: 65.2%;
    width: 6%;
}


/* About */

.sod-footer-hitbox-about {

    left: 71.3%;
    width: 5%;
}


/* Contact */

.sod-footer-hitbox-contact {

    left: 76.4%;
    width: 5.5%;
}


/* =========================================================
   HOME PAGE — POPUP WINDOW CONTAINER

   Independent from Layers 0–15.
   ========================================================= */

.sod-popup-window {

    position: fixed;

    z-index: 1000;

    top: 50%;
    left: 50%;

    width: 80vw;
    height: 80dvh;

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

    display: none;

    margin: 0;
    padding: 0;

    border:
        1px solid #6caa86;

    overflow: hidden;

    background: transparent;
}


.sod-popup-window.is-open {

    display: block;
}


.sod-popup-window > iframe {

    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;
}


/* =========================================================
   PORTRAIT MODE — HOME PAGE

   Existing Layers 0–10 portrait corrections preserved.

   Layers 11, 12 and 14 use the same 5120 × 1600
   master canvas.
   Layer 15 follows the footer master-layer coordinates.
   ========================================================= */

@media (orientation: portrait) {


    /* Layer 6 — Evil Forest */

    .layer-header-06 {

        top: 125px;
    }


    /* Layer 8 — Necromancer Portal / Statue */

    .layer-header-08 {

        top: 120px;
    }


    /* Layer 9 — Necromancer Crypt */

    .layer-header-09 {

        top: 120px;
    }


    /* Layer 10 — Main Identity / Logo */

    .layer-header-10 {

        top: 125px;
    }

}