/* ==========================================================================
   The page curtain, shared by the sign-in pages, the portal and the landing
   page. One cubicle curtain on a ceiling track: it covers the page when closed
   and is drawn to the right when open. curtain.js switches the states.

   .dt-curtain              on the sign-in pages: stays gathered at the edge
   .dt-curtain.is-overlay   everywhere else: fully out of sight while open
   ========================================================================== */
.dt-curtain {
    --curtain-time: 1.1s;
    --curtain-close-time: .75s;
    --curtain-delay: .2s;
    --curtain-over: 90px;    /* hangs past the right edge so the swing never shows a gap */
    --curtain-gather: -50px; /* visible width once drawn; negative takes its shadow off screen too */
    position: fixed;
    inset: 0;
    z-index: 9990;
    overflow: hidden;
    pointer-events: none;
}

@media (min-width: 1400px) {
    .dt-curtain:not(.is-overlay) {
        --curtain-gather: 6%;
    }
}

/* Out of the way entirely while open, so it costs nothing on the page under it. */
.dt-curtain.is-overlay.is-open {
    display: none;
}

.dt-curtain.is-overlay {
    --curtain-delay: .1s;
}

.page-track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    z-index: 1;
    background: linear-gradient(180deg, #f1edf0 0%, #c3bdc5 45%, #837d8a 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
    pointer-events: none;
}

.page-curtain {
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(var(--curtain-over) * -1);
    width: calc(100% + var(--curtain-over));
    pointer-events: none;
    transform-origin: top right;
    will-change: width, transform;
}

/* States. Closed covers the page; open is drawn aside. */
.dt-curtain.is-open .page-curtain {
    width: calc(var(--curtain-gather) + var(--curtain-over));
}

.dt-curtain.is-opening .page-curtain {
    animation:
        curtainDraw var(--curtain-time) cubic-bezier(.62, .02, .2, 1.05) var(--curtain-delay) forwards,
        curtainLag calc(var(--curtain-time) * 1.25) ease-in-out var(--curtain-delay) forwards;
}

/* Closing runs the other way and faster: the leading edge sweeps back across the page. */
.dt-curtain.is-closing .page-curtain {
    width: calc(var(--curtain-gather) + var(--curtain-over));
    animation:
        curtainClose var(--curtain-close-time) cubic-bezier(.55, 0, .25, 1) forwards,
        curtainLagBack calc(var(--curtain-close-time) * 1.2) ease-in-out forwards;
}

.dt-curtain.is-closing,
.dt-curtain.is-closed {
    pointer-events: auto;
}

@keyframes curtainDraw {
    to { width: calc(var(--curtain-gather) + var(--curtain-over)); }
}

@keyframes curtainClose {
    to { width: calc(100% + var(--curtain-over)); }
}

@keyframes curtainLagBack {
    0% { transform: skewX(0deg); }
    40% { transform: skewX(3.2deg); }
    78% { transform: skewX(-.9deg); }
    100% { transform: skewX(0deg); }
}

/* The runners lead; the hem trails, swings past and comes to rest. */
@keyframes curtainLag {
    0% { transform: skewX(0deg); }
    38% { transform: skewX(-3.6deg); }
    74% { transform: skewX(1.1deg); }
    100% { transform: skewX(0deg); }
}

/* Shadow the leading edge casts on the page behind it. */
.page-curtain::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 46px;
    background: linear-gradient(270deg, rgba(20, 18, 34, .38), rgba(20, 18, 34, 0));
}

.page-curtain .folds {
    position: absolute;
    inset: 0;
    display: flex;
    transform-origin: top center;
}

.dt-curtain.is-open:not(.is-overlay) .folds {
    animation: curtainSway 7s ease-in-out infinite;
}

@keyframes curtainSway {
    0%, 100% { transform: skewX(0deg); }
    50% { transform: skewX(-.55deg); }
}

/* Light across the whole drop: shade under the track and at the hem, a soft
   diagonal sheen and a fine weave. */
.page-curtain .folds::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(180deg, rgba(20, 18, 34, .3) 0%, rgba(20, 18, 34, 0) 16%, rgba(20, 18, 34, 0) 72%, rgba(20, 18, 34, .34) 100%),
        linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .1) 48%, rgba(255, 255, 255, 0) 64%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
}

.page-curtain .fold {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

/* Mesh top panel, as on a hospital cubicle curtain: a hint of the page shows through. */
.page-curtain .fold::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 18px;
    height: 12%;
    border-top: 12px solid #5f4c7c;
    border-bottom: 4px solid #55426f;
    background-image:
        linear-gradient(90deg, rgba(58, 48, 84, .93) 0%, rgba(122, 104, 150, .8) 46%, rgba(62, 51, 88, .92) 100%),
        repeating-linear-gradient(45deg, rgba(250, 244, 237, .3) 0 1px, rgba(0, 0, 0, 0) 1px 6px),
        repeating-linear-gradient(-45deg, rgba(250, 244, 237, .3) 0 1px, rgba(0, 0, 0, 0) 1px 6px);
}

/* The cloth: one pleat per fold, with two lines of piping above a scalloped hem. */
.page-curtain .fold::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(12% + 18px);
    bottom: 0;
    border-radius: 0 0 50% 50% / 0 0 9px 9px;
    background-image:
        linear-gradient(180deg,
            rgba(235, 188, 186, 0) 0 86%, rgba(235, 188, 186, .6) 86% 87.1%,
            rgba(235, 188, 186, 0) 87.1% 88.3%, rgba(235, 188, 186, .38) 88.3% 88.9%,
            rgba(235, 188, 186, 0) 88.9%),
        linear-gradient(90deg, #58456f 0%, #8770a3 22%, #bba7d2 46%, #9781b2 64%, #6b5789 86%, #503e68 100%);
}

/* Uneven pleats: no two neighbours catch the light the same way. */
.page-curtain .fold:nth-child(3n)::after {
    background-image:
        linear-gradient(180deg,
            rgba(235, 188, 186, 0) 0 86%, rgba(235, 188, 186, .6) 86% 87.1%,
            rgba(235, 188, 186, 0) 87.1% 88.3%, rgba(235, 188, 186, .38) 88.3% 88.9%,
            rgba(235, 188, 186, 0) 88.9%),
        linear-gradient(90deg, #4f3d67 0%, #7b6497 30%, #a995c2 54%, #8a74a6 72%, #5d4a7a 100%);
}

.page-curtain .fold:nth-child(4n + 1)::after {
    background-image:
        linear-gradient(180deg,
            rgba(235, 188, 186, 0) 0 86%, rgba(235, 188, 186, .6) 86% 87.1%,
            rgba(235, 188, 186, 0) 87.1% 88.3%, rgba(235, 188, 186, .38) 88.3% 88.9%,
            rgba(235, 188, 186, 0) 88.9%),
        linear-gradient(90deg, #5d4a7a 0%, #947eb0 18%, #c6b4da 40%, #a08bba 60%, #725e90 84%, #58456f 100%);
}

/* Runners: every third fold hangs from the track. */
.page-curtain .fold i {
    display: none;
    position: absolute;
    top: 6px;
    left: 50%;
    width: 4px;
    height: 16px;
    margin-left: -2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #f1edf0, #8c8690);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    z-index: 1;
}

.page-curtain .fold:nth-child(3n + 2) i {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .dt-curtain .page-curtain,
    .dt-curtain .folds { animation: none !important; }
    .dt-curtain.is-opening .page-curtain { width: calc(var(--curtain-gather) + var(--curtain-over)); }
}