/* ==========================================================================
   WP Curtain Raiser — Public stylesheet
   Version: 1.6.0
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS custom properties
   --wcr-speed is overridden at runtime by JS from the saved setting.
   -------------------------------------------------------------------------- */

:root {
    --wcr-speed:      2000ms;
    --wcr-easing:     cubic-bezier(0.4, 0, 0.2, 1);
    --wcr-rope-speed: 350ms;
}

/* --------------------------------------------------------------------------
   v1.3 — Overlay wrapper (ARIA dialog)
   display:contents makes the div invisible to layout while preserving it in
   the accessibility tree (role="dialog" / aria-modal are still exposed).
   -------------------------------------------------------------------------- */

.wp-curtain-overlay {
    display: contents;
}

/* --------------------------------------------------------------------------
   Curtain panels
   -------------------------------------------------------------------------- */

.wp-curtain-left-curtain,
.wp-curtain-right-curtain {
    position:   fixed;
    top:        0;
    height:     100vh;
    width:      50%;
    z-index:    1102;
    overflow:   hidden;
    transition: width var(--wcr-speed) var(--wcr-easing);
    will-change: width;
}

.wp-curtain-right-curtain {
    right:   0;
    z-index: 1103;
}

/* Open state — JS adds this class */
.wp-curtain-left-curtain.wp-curtain--open,
.wp-curtain-right-curtain.wp-curtain--open {
    width: 0;
}

/* --------------------------------------------------------------------------
   Panel images (custom curtain image)
   -------------------------------------------------------------------------- */

.wp-curtain-left-curtain  img,
.wp-curtain-right-curtain img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    object-position: left center;  /* Anchor to panel's inner edge during transition */
    display:    block;
    border:     none;
}

/* --------------------------------------------------------------------------
   Solid-colour panel (no image configured)
   background-color is set as an inline style from PHP.
   -------------------------------------------------------------------------- */

.wp-curtain-color-panel {
    width:  100%;
    height: 100%;
}

/* --------------------------------------------------------------------------
   v1.4 — Gradient theme presets
   scaleX(-1) on the right panel mirrors the gradient so both panels face
   inward toward the centre seam — classic theatre curtain look.
   -------------------------------------------------------------------------- */

/* Deep Velvet */
.wp-curtain-left-curtain.wcr-theme-velvet,
.wp-curtain-right-curtain.wcr-theme-velvet {
    background: linear-gradient(to right, #8B0000, #4a0000);
}
.wp-curtain-right-curtain.wcr-theme-velvet { transform: scaleX(-1); }

/* Royal Blue */
.wp-curtain-left-curtain.wcr-theme-royal-blue,
.wp-curtain-right-curtain.wcr-theme-royal-blue {
    background: linear-gradient(to right, #003366, #001a33);
}
.wp-curtain-right-curtain.wcr-theme-royal-blue { transform: scaleX(-1); }

/* Forest Green */
.wp-curtain-left-curtain.wcr-theme-forest,
.wp-curtain-right-curtain.wcr-theme-forest {
    background: linear-gradient(to right, #1a4731, #0d2318);
}
.wp-curtain-right-curtain.wcr-theme-forest { transform: scaleX(-1); }

/* Midnight Black */
.wp-curtain-left-curtain.wcr-theme-midnight,
.wp-curtain-right-curtain.wcr-theme-midnight {
    background: linear-gradient(to right, #1a1a2e, #0d0d16);
}
.wp-curtain-right-curtain.wcr-theme-midnight { transform: scaleX(-1); }

/* Gold */
.wp-curtain-left-curtain.wcr-theme-gold,
.wp-curtain-right-curtain.wcr-theme-gold {
    background: linear-gradient(to right, #b8860b, #7a5900);
}
.wp-curtain-right-curtain.wcr-theme-gold { transform: scaleX(-1); }

/* Satin Rose */
.wp-curtain-left-curtain.wcr-theme-satin-rose,
.wp-curtain-right-curtain.wcr-theme-satin-rose {
    background: linear-gradient(to right, #8b2252, #4a0f2a);
}
.wp-curtain-right-curtain.wcr-theme-satin-rose { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   Rope
   -------------------------------------------------------------------------- */

.wp-curtain-rope {
    position:        fixed;
    top:             -80px; /* Hidden above viewport */
    right:           5%;
    z-index:         1104;
    border:          none;
    cursor:          pointer;
    display:         block;
    text-decoration: none;
    transition:      top var(--wcr-rope-speed) cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change:     top;
}

/* Visible state — JS adds this class when curtain is open */
.wp-curtain-rope.wp-curtain-rope--visible {
    top: 0;
}

.wp-curtain-rope img {
    display:   block;
    width:     auto;    /* Render at the image's natural width */
    max-width: 120px;   /* Safety cap for oversized uploads on desktop */
}

/* --------------------------------------------------------------------------
   v1.4 — Countdown timer display
   Centred over the curtain, above the rope (z-index 1105).
   -------------------------------------------------------------------------- */

.wp-curtain-countdown {
    position:        fixed;
    top:             50%;
    left:            50%;
    transform:       translate(-50%, -50%);
    z-index:         1105;
    font-size:       clamp(2rem, 8vw, 5rem);
    font-weight:     700;
    font-family:     monospace, monospace;
    color:           #fff;
    text-shadow:     0 2px 8px rgba(0, 0, 0, 0.6);
    letter-spacing:  0.08em;
    pointer-events:  none;
    user-select:     none;
}

/* --------------------------------------------------------------------------
   v1.3 — Screen-reader-only live region
   Visually hidden but announced by assistive technology.
   -------------------------------------------------------------------------- */

.wp-curtain-live-region {
    position:    absolute;
    width:       1px;
    height:      1px;
    padding:     0;
    overflow:    hidden;
    clip:        rect(0, 0, 0, 0);
    white-space: nowrap;
    border:      0;
}

/* --------------------------------------------------------------------------
   Accessibility: respect reduced-motion preference
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .wp-curtain-left-curtain,
    .wp-curtain-right-curtain,
    .wp-curtain-rope {
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
   Responsive adjustments
   -------------------------------------------------------------------------- */

@media screen and (max-width: 768px) {
    .wp-curtain-rope {
        right: 4%;
    }
    .wp-curtain-rope img {
        max-width: 80px;   /* Tablet safety cap */
    }
}

@media screen and (max-width: 480px) {
    .wp-curtain-rope {
        right: 3%;
    }
    .wp-curtain-rope img {
        max-width: 60px;   /* Mobile safety cap */
    }
}