/* ============================================================================
 * zen/components/transition/transition.css
 * ----------------------------------------------------------------------------
 * Camera transition presets.
 *
 * Classes applied to .z-world or the canvas overlay while a transition plays.
 * Most of the work is in JS (transition.js orchestrates the sequencing); CSS
 * here only provides the visual treatment for whip and keeps the curtain
 * overlay styled.
 * ============================================================================ */

/* Curtain overlay — full viewport, above everything except the HUD bar.
 * zen-canvas injects one instance of this as a direct child.              */
.zen-curtain {
    position: fixed; inset: 0;
    background: #000;
    opacity: 0;
    pointer-events: none;
    z-index: 50;
    will-change: opacity;
}

/* Whip: brief directional blur on the world during the camera move.
 * Duration is owned by the JS pan (transition-duration on transform);
 * the filter comes back to 0 when the class is removed after the pan
 * completes.                                                              */
.zen-xfrm--whip {
    filter: blur(4px);
    transition: filter 0.22s linear;
}
.zen-xfrm--whip-right { transform-origin: 100% 50%; }
.zen-xfrm--whip-left  { transform-origin: 0% 50%; }
.zen-xfrm--whip-up    { transform-origin: 50% 0%; }
.zen-xfrm--whip-down  { transform-origin: 50% 100%; }