/* /css/doorfx.css */
:root {
    /* Tweak these only and every page updates */
    --doorfx-bg: #000;
    /* “a little dark (not black, not gray)” */
    --doorfx-speed-open: 520ms;
    --doorfx-speed-close: 420ms;
    --doorfx-ease: cubic-bezier(.2, .8, .2, 1);
}

/* FOUC guard: hide page until DoorFX opens once */
/* Keep hidden only until we start opening */
html.booting:not(.doorfx-opening) body>*:not(#doorfx) { visibility: hidden !important; }


html.booted body>* {
    visibility: visible !important;
}

/* Overlay */
#doorfx.doorfx {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    display: none;
}

#doorfx.doorfx .doorfx__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50vw;
    background: var(--doorfx-bg);
}

#doorfx .doorfx__panel--left {
    left: 0;
    transform: translateX(-100%);
}

#doorfx .doorfx__panel--right {
    right: 0;
    transform: translateX(100%);
}

#doorfx.doorfx--opening,
#doorfx.doorfx--closing {
    display: block;
    pointer-events: none;
}

/* Opening from edges → center */
@keyframes doorfx-open-left {
    from {
        transform: translateX(-100%)
    }

    to {
        transform: translateX(0)
    }
}

@keyframes doorfx-open-right {
    from {
        transform: translateX(100%)
    }

    to {
        transform: translateX(0)
    }
}

/* Closing from center → edges */
@keyframes doorfx-close-left {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-100%)
    }
}

@keyframes doorfx-close-right {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(100%)
    }
}

/* Opening = panels move outwards (center → edges) */
.doorfx--opening .doorfx__panel--left  { animation: doorfx-close-left  var(--doorfx-speed-open)  var(--doorfx-ease) forwards; }
.doorfx--opening .doorfx__panel--right { animation: doorfx-close-right var(--doorfx-speed-open)  var(--doorfx-ease) forwards; }

/* Closing = panels move inwards (edges → center) */
.doorfx--closing .doorfx__panel--left  { animation: doorfx-open-left   var(--doorfx-speed-close) var(--doorfx-ease) forwards; }
.doorfx--closing .doorfx__panel--right { animation: doorfx-open-right  var(--doorfx-speed-close) var(--doorfx-ease) forwards; }


/* When hidden between transitions */
.doorfx--hidden {
    display: none !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .doorfx__panel {
        transition: none !important;
        animation: none !important;
    }

    #doorfx {
        display: none !important;
    }

    html.booting body>*:not(#doorfx) {
        visibility: visible !important;
    }
}

/* === Boot phase: show doors closed before JS runs === */
html.booting #doorfx,
#doorfx.doorfx.doorfx--closed {
  display: block;             /* overlay visible immediately */
  pointer-events: none;
}

/* While booting or explicitly "closed", keep both panels at center (closed) */
html.booting #doorfx .doorfx__panel--left,
#doorfx.doorfx.doorfx--closed .doorfx__panel--left {
  transform: translateX(0);
}

html.booting #doorfx .doorfx__panel--right,
#doorfx.doorfx.doorfx--closed .doorfx__panel--right {
  transform: translateX(0);
}

/* Optional: avoid background scroll while doors are closed */
html.booting body {
  overflow: hidden;
}