/* ============================================================================
   Shared across all three themes: the page-transition curtain and the staff
   theme switcher. Deliberately theme-agnostic — it paints over whatever is
   underneath while one design hands over to the next.
   ========================================================================= */

/* Honeypot: hidden from people without pushing the page sideways.
   (An off-screen `left:-9999px` field silently adds ~9000px of scroll in RTL.) */
.hp-field {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
}

/* Only ever shown when scripting is on: a black panel that never lifts because
   JS or animations are unavailable would hide the whole site. */
.curtain { display: none; }

html.js .curtain {
    position: fixed;
    inset: 0;
    z-index: 9990;
    pointer-events: none;
    display: grid;
    place-items: center;
    background: #06080B;
    transform-origin: top;
    /* on load: lift away */
    animation: curtain-up 1s cubic-bezier(.76, 0, .24, 1) forwards;
}
.curtain-seal {
    display: block;
    animation: seal-fade .55s ease forwards;
}
.curtain-seal img {
    width: 64px;
    height: 64px;
    filter: drop-shadow(0 0 30px rgba(63, 169, 224, .7));
    animation: seal-pulse 1.2s ease-in-out infinite;
}

/* when a theme link is clicked we drop it back down before navigating */
.curtain.is-closing {
    animation: curtain-down .62s cubic-bezier(.76, 0, .24, 1) forwards;
    pointer-events: all;
}

@keyframes curtain-up {
    0% { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(0 0 100% 0); }
}
@keyframes curtain-down {
    0% { clip-path: inset(100% 0 0 0); opacity: 1; }
    100% { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes seal-fade { to { opacity: 0; } }
@keyframes seal-pulse {
    0%, 100% { transform: scale(1); opacity: .9; }
    50% { transform: scale(1.12); opacity: 1; }
}

/* ------------------------------------------------- staff theme switcher -- */
.theme-dock {
    position: fixed;
    inset-block-end: 1.4rem;
    inset-inline-start: 1.4rem;
    z-index: 9500;
    font-family: "IBM Plex Sans Arabic", system-ui, sans-serif;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem;
    border-radius: 999px;
    background: rgba(10, 12, 16, .78);
    backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 20px 50px -22px rgba(0, 0, 0, .9);
    transform: translateY(0);
    transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .4s ease;
}
.theme-dock.is-tucked { transform: translateY(140%); opacity: 0; }

.theme-dock-label {
    font-size: .66rem;
    letter-spacing: .18em;
    color: rgba(255, 255, 255, .5);
    padding-inline: .55rem;
    white-space: nowrap;
}

.theme-dock a {
    position: relative;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .16);
    color: #E8EEF4;
    font-size: .72rem;
    text-decoration: none;
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease, border-color .4s ease;
}
.theme-dock a:hover { transform: translateY(-3px) scale(1.06); border-color: rgba(255, 255, 255, .5); }
.theme-dock a.is-active { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .14); }

/* each dot wears its own theme's colours, so the choice reads at a glance */
.theme-dot-classic { background: linear-gradient(135deg, #2E7FB0, #24282D); }
.theme-dot-showcase { background: linear-gradient(135deg, #000 48%, #F5F5F7 48%); color: #0071E3 !important; }
.theme-dot-studio { background: linear-gradient(135deg, #070B14 40%, #2E8BFF 70%, #35E0C8); }
.theme-dot-gallery { background: linear-gradient(135deg, #FBFBFD 45%, #4B3BFF); color: #14141A !important; }
.theme-dot-awards { background: linear-gradient(135deg, #0E0E0F 48%, #D9F24B 48%); color: #F4F4F2 !important; }

.theme-dock .dock-close {
    background: none;
    border: 0;
    color: rgba(255, 255, 255, .45);
    cursor: pointer;
    font-size: .8rem;
    padding: .2rem .45rem;
}
.theme-dock .dock-close:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
    html.js .curtain { display: none; animation: none; }
    .theme-dock, .theme-dock a { transition: none; }
}