/*
 * ECLIPSE VAULT PORTAL 1.2.24 — EXACT HOMEPAGE SCENE ORIGIN
 *
 * This scene intentionally copies the backdrop source AND layered gradients
 * from Eclipse-Vault-Hero-javitott.html, not a generated mockup.
 * Homepage CSS: .ev-hero height >=820px, .ev-background position:center bottom,
 * background-size:cover, transform:scale(1.01), opacity:.30.
 *
 * Keep the art anchored to an 820px-tall fixed-size canvas relative to the
 * shortcode top. Do not size it to the CREATE ACCOUNT or LOG IN panel height;
 * those change with the active tab. This preserves tab switching stability.
 *
 * Presentation only: no login, registration, email, QR or ownership changes.
 */

/* WordPress/Elementor remains responsible for the actual header and footer. */
body.ev-portal-scene {
    background-color: #03040b !important;
    background-image: none !important;
}

body.ev-portal-scene .evac {
    position: relative;
    isolation: isolate;
    background-color: #03040b !important;
    background-image: none !important;
    background-attachment: initial !important;
    overflow: hidden;
}

/* The original homepage hero is 100% of the scrollable document's
 * content area, not 100vw (which also includes the reserved scrollbar).
 * Center the shortcode against precisely that content area so even its
 * position and padding match on navigation from HOME to MY ACCOUNT.
 * JavaScript supplies this geometry with no-JS fallbacks below. */
body.ev-portal-scene .evac:not(.evac-has-dashboard) {
    width: var(--ev-scene-content-width, 100vw) !important;
    max-width: none !important;
    margin-left: calc(50% - var(--ev-scene-half-width, 50vw)) !important;
    margin-right: calc(50% - var(--ev-scene-half-width, 50vw)) !important;
}

/* Align the image's vertical origin to the bottom of the REAL theme header,
 * exactly where the homepage .ev-hero starts. A small Elementor top gap must
 * not shift the scene. Do not change the image, tint or 820px crop. */
/* One composited layer: the same original homepage image plus its two gradient
 * groups, with 30% total opacity. Copying ALL of them inside one layer is
 * important: separate overlay/image opacities would yield a different result.
 * 820px matches the original hero base. All backgrounds have a stable crop.
 */
body.ev-portal-scene .evac::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: var(--ev-scene-hero-offset, 0px) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    /* When classic desktop scrollbars take up width, 100vw can be wider than
       the homepage .ev-hero (which is 100% of the document's content area).
       The visual-only tabs script supplies documentElement.clientWidth;
       100% remains a fully functional no-JS fallback. */
    width: var(--ev-scene-content-width, 100%) !important;
    height: 820px !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-color: transparent !important;
    background-image:
        radial-gradient(ellipse at 50% 38%, rgba(88,38,197,.20) 0%, rgba(71,26,172,.09) 28%, transparent 53%),
        radial-gradient(ellipse at 50% 89%, rgba(102,42,225,.15) 0%, transparent 36%),
        linear-gradient(90deg, rgba(0,0,7,.60) 0%, transparent 25%, transparent 75%, rgba(0,0,7,.60) 100%),
        linear-gradient(180deg, rgba(2,3,10,.88) 0%, rgba(3,4,13,.64) 20%, rgba(4,4,16,.28) 43%, rgba(3,3,12,.18) 59%, rgba(3,3,11,.53) 78%, rgba(2,3,9,.93) 100%),
        url('https://eclipsevault.eu/wp-content/uploads/2026/09/ChatGPT-Image-2026.-szept.-22.-20_37_31.png') !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, cover !important;
    background-position: center center, center center, center center, center center, center bottom !important;
    opacity: .30 !important;
    filter: none !important;
    -webkit-filter: none !important;
    transform: translateX(-50%) scale(1.01) !important;
    transform-origin: center center !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

/* The old Portal's independent extra darkness layer caused the mismatch. */
body.ev-portal-scene .evac::after {
    content: none !important;
    display: none !important;
}

/* Keep actual account / QR content in front of the decorative background. */
body.ev-portal-scene .evac > .evac-wrap {
    position: relative;
    z-index: 2;
}

/* Elementor wrappers may have their own opaque widget background; avoid
 * obscuring the Portal's scene without changing the theme header/footer. */
body.ev-portal-scene .elementor-widget-shortcode:has(.evac),
body.ev-portal-scene .elementor-widget-shortcode:has(.evac) > .elementor-widget-container {
    background: transparent !important;
}

/* Allow WordPress/Elementor nav and other on-page controls to retain priority. */
body.ev-portal-scene :is(.elementor-location-header, #masthead, header.site-header) {
    z-index: 100 !important;
}

/* On mobile the same artwork and same 820px scene remain fixed to the SHORTCODE
 * top. The user sees a central crop, as on the original mobile hero, but
 * CREATE ACCOUNT / LOG IN cannot change the backdrop dimensions. */
@media(max-width:700px) {
    body.ev-portal-scene .evac::before {
        height: 820px !important;
        background-position: center center, center center, center center, center center, center bottom !important;
        background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, cover !important;
    }
}

/* The homepage hero is at least 820px on desktop. The original Account public
 * scene used 810px and clipped the final 10px of the 820px background. */
@media (min-width: 701px) {
    body.ev-portal-scene .evac:not(.evac-has-dashboard) {
        min-height: 820px !important;
    }
}

/* There is ONE stationary artwork layer; tab switching only changes the
 * content shown above it. Never base artwork size on a pane's own height. */
body.ev-portal-scene .evac [data-ev-auth-view][hidden] {
    display: none !important;
}