/* ═══════════════════════════════════════════════════════
   RHIBUSTECH — PAGE TRANSITIONS
   Brand-colored curtain sweep. Inspired by the classic
   "thin-line expands to full screen" technique.
   Does NOT modify style.css or services.css.
═══════════════════════════════════════════════════════ */

.page-curtain {
    align-items: center;
    background: #110D0C;
    display: flex;
    inset: 0;
    justify-content: center;
    pointer-events: none;
    position: fixed;
    transform: scale(1, 0);
    transform-origin: center;
    will-change: transform;
    z-index: 9999;
}

/* Brand accent line that sits in the middle during the thin-line moment */
.page-curtain::before {
    background: #FB9300;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Icon shown in the center while curtain is fully closed */
.page-curtain-icon {
    color: #FB9300;
    font-size: 52px;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s ease;
    user-select: none;
    position: relative;
    z-index: 1;
}

/* ── SWEEP IN: current page → curtain covers screen ── */
.page-curtain.is-entering {
    animation: curtainIn 0.6s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.page-curtain.is-entering .page-curtain-icon {
    opacity: 1;
    transition-delay: 0.25s;
}

/* ── SWEEP OUT: new page loads → curtain uncovers it ── */
.page-curtain.is-exiting {
    transform: scale(1, 1);
    transform-origin: center;
    animation: curtainOut 0.6s cubic-bezier(0.77, 0, 0.175, 1) forwards 0.05s;
}

/* Matches the snippet: starts as a horizontal sliver, expands full */
@keyframes curtainIn {
    0%   { transform: scale(1, 0.004); }
    40%  { transform: scale(1, 0.004); }
    100% { transform: scale(1, 1);     }
}

/* Reverse: collapses back to a sliver, then disappears */
@keyframes curtainOut {
    0%   { transform: scale(1, 1);     }
    60%  { transform: scale(1, 0.004); }
    100% { transform: scale(1, 0);     }
}