:root {
    --site-reveal-duration: 760ms;
    --site-reveal-stagger: 55ms;
    --site-insert-duration: 760ms;
}

.app-shell {
    position: relative;
    isolation: isolate;
}

.app-shell::before,
.app-shell::after {
    content: '';
    position: fixed;
    pointer-events: none;
    z-index: -1;
    border-radius: 999px;
    filter: blur(68px);
    opacity: .42;
}

.app-shell::before {
    width: 320px;
    height: 320px;
    top: 6%;
    right: -110px;
    background: radial-gradient(circle, rgba(50,185,255,.26) 0%, rgba(50,185,255,.08) 42%, transparent 72%);
    animation: shellOrbFloatA 16s ease-in-out infinite alternate;
}

.app-shell::after {
    width: 280px;
    height: 280px;
    left: -90px;
    bottom: 8%;
    background: radial-gradient(circle, rgba(47,118,255,.24) 0%, rgba(47,118,255,.06) 44%, transparent 74%);
    animation: shellOrbFloatB 18s ease-in-out infinite alternate;
}

@keyframes shellOrbFloatA {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(-24px, 26px, 0) scale(1.08); }
}

@keyframes shellOrbFloatB {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(32px, -20px, 0) scale(1.12); }
}

.fx-reveal {
    opacity: 0;
    transform: translate3d(0, 30px, 0) scale(.984);
    filter: blur(7px);
    transition:
        opacity var(--site-reveal-duration) cubic-bezier(.22,.9,.24,1),
        transform var(--site-reveal-duration) cubic-bezier(.2,1.12,.32,1),
        filter calc(var(--site-reveal-duration) * .82) ease;
    will-change: opacity, transform, filter;
}

.fx-reveal-up    { transform: translate3d(0, 34px, 0) scale(.984); }
.fx-reveal-left  { transform: translate3d(52px, 16px, 0) scale(.984); }
.fx-reveal-right { transform: translate3d(-52px, 16px, 0) scale(.984); }
.fx-reveal-scale { transform: translate3d(0, 18px, 0) scale(.9); }

.fx-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

/* ── Refined, professional reveal for chat messages & ticket rows ──
   Soft upward rise with a gentle settle (no horizontal slide, no overshoot
   snap, lighter blur) so list items glide into place smoothly. */
.fx-reveal-soft {
    transform: translate3d(0, 18px, 0) scale(.992);
    filter: blur(3px);
    transition:
        opacity 460ms cubic-bezier(.22, .61, .26, 1),
        transform 540ms cubic-bezier(.22, .61, .26, 1),
        filter 380ms ease;
}
.message-card.fx-reveal-soft { transform: translate3d(0, 16px, 0) scale(.994); }
.ticket-row.fx-reveal-soft   { transform: translate3d(0, 20px, 0) scale(.99); }
.fx-reveal-soft.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

.live-insert-shell {
    display: block;
    transform-origin: top center;
}

.card,
.messages-section,
.ticket-details,
.close-section,
.admin-feature-card,
.proof-public-card,
.proof-manage-card,
.rank-access-card,
.ticket-row,
.message-card,
.stat,
.proof-fact-card,
.proof-media-card,
.flash,
.hero {
    transition: transform .34s ease, box-shadow .34s ease, border-color .28s ease, background .28s ease;
}

.card:hover,
.messages-section:hover,
.ticket-details:hover,
.close-section:hover,
.admin-feature-card:hover,
.proof-public-card:hover,
.proof-manage-card:hover,
.rank-access-card:hover,
.proof-fact-card:hover,
.proof-media-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px rgba(7, 12, 22, .26);
}

.btn,
.nav a,
.chip,
.permission-pill,
.ticket-attachment-card,
.proof-card-actions a,
.proof-card-actions button {
    position: relative;
    overflow: hidden;
}

.btn::before,
.nav a::before,
.permission-pill::before,
.ticket-attachment-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.22) 22%, transparent 42%);
    transform: translateX(-130%);
    transition: transform .8s ease;
    pointer-events: none;
}

.btn:hover::before,
.nav a:hover::before,
.permission-pill:hover::before,
.ticket-attachment-card:hover::before {
    transform: translateX(130%);
}

.btn.is-loading {
    gap: 10px;
}

.btn-loading-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: currentColor;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(255,255,255,.45);
    animation: submitPulse .95s ease-in-out infinite;
}

@keyframes submitPulse {
    0% { transform: scale(.85); box-shadow: 0 0 0 0 rgba(255,255,255,.38); }
    70% { transform: scale(1.18); box-shadow: 0 0 0 10px rgba(255,255,255,0); }
    100% { transform: scale(.9); box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

.fx-bump {
    animation: softBump .76s cubic-bezier(.2,.9,.18,1);
}

@keyframes softBump {
    0% { transform: scale(1); }
    36% { transform: scale(1.14); }
    100% { transform: scale(1); }
}

.flash-fx {
    position: relative;
    overflow: hidden;
}

.flash-fx::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.16) 26%, transparent 48%);
    transform: translateX(-120%);
    animation: flashSweep 2.8s ease 1;
    pointer-events: none;
}

@keyframes flashSweep {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(130%); }
}

.site-footer {
    position: relative;
    margin-top: 44px;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.045);
    background: transparent;
    overflow: hidden;
}

.site-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(124, 200, 255, 0.045), transparent 42%),
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.018), transparent);
    pointer-events: none;
}

.site-footer-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.site-footer-copy {
    position: relative;
    margin: 0;
    padding: 13px 24px;
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.008);
    color: rgba(236, 242, 255, 0.78);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 8px 30px rgba(0, 0, 0, 0.12);
}

.site-footer-copy span {
    position: relative;
    display: inline-block;
    margin: 0 2px;
    color: #8fd7ff;
    font-weight: 800;
    text-shadow:
        0 0 7px rgba(143, 215, 255, 0.45),
        0 0 16px rgba(93, 192, 255, 0.28);
    animation: footerNameGlow 3s ease-in-out infinite;
}

.site-footer-copy span::after {
    content: '';
    position: absolute;
    left: -10px;
    right: -10px;
    top: 50%;
    height: 70%;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(143, 215, 255, 0.16), transparent 72%);
    filter: blur(12px);
    opacity: 0.7;
    z-index: -1;
    animation: footerAura 3s ease-in-out infinite;
}

@keyframes footerNameGlow {
    0%, 100% {
        opacity: 0.9;
        text-shadow:
            0 0 6px rgba(143, 215, 255, 0.32),
            0 0 14px rgba(93, 192, 255, 0.18);
    }
    50% {
        opacity: 1;
        text-shadow:
            0 0 10px rgba(143, 215, 255, 0.75),
            0 0 22px rgba(93, 192, 255, 0.5),
            0 0 34px rgba(93, 192, 255, 0.22);
    }
}

@keyframes footerAura {
    0%, 100% {
        opacity: 0.38;
        transform: translateY(-50%) scale(0.96);
    }
    50% {
        opacity: 0.82;
        transform: translateY(-50%) scale(1.06);
    }
}

html {
    scroll-padding-top: 22px;
}

.cg-glider-group {
    position: relative;
    isolation: isolate;
}

.cg-glider-group > .site-active-glider {
    position: absolute;
    left: 0;
    right: auto;
    top: 0;
    z-index: 0;
    width: var(--cg-glider-w, 0px);
    height: var(--cg-glider-h, 0px);
    transform: translate3d(var(--cg-glider-x, 0px), var(--cg-glider-y, 0px), 0);
    border-radius: 18px;
    border: 1px solid rgba(126, 218, 255, .26);
    background: rgba(74, 181, 255, .025);
    box-shadow:
        inset 0 0 0 1px rgba(126, 218, 255, .06),
        0 0 0 1px rgba(57, 205, 255, .025),
        0 8px 16px rgba(40, 160, 255, .07);
    opacity: 0;
    pointer-events: none;
    will-change: transform, width, height;
    transition:
        transform .30s cubic-bezier(.22,1,.36,1),
        width .26s cubic-bezier(.22,1,.36,1),
        height .26s cubic-bezier(.22,1,.36,1),
        opacity .12s ease,
        border-radius .18s ease;
}

.cg-glider-group.has-active-glider > .site-active-glider {
    opacity: 1;
}

.cg-glider-group > :not(.site-active-glider) {
    position: relative;
    z-index: 1;
}

.docs-mode-switch.cg-glider-group > .site-active-glider,
.docs-option-grid.cg-glider-group > .site-active-glider,
.docs-subtabs.cg-glider-group > .site-active-glider {
    border-radius: 17px;
}

.docs-subtabs.cg-glider-group > .site-active-glider {
    border-radius: 14px;
}

.docs-option-grid.cg-glider-group > .site-active-glider {
    background: rgba(74, 181, 255, .018);
    border-color: rgba(126, 218, 255, .24);
    box-shadow: inset 0 0 0 1px rgba(126, 218, 255, .045), 0 8px 14px rgba(40, 160, 255, .055);
}

.docs-subtabs.cg-glider-group {
    scroll-margin-top: 18px;
}

.docs-subtabs.cg-glider-group > .docs-subtab {
    min-width: 0;
}

.docs-mode-option.is-active,
.docs-option.is-active,
.docs-subtab.is-active,
.proof-mode-switch .permission-pill.active {
    box-shadow: inset 0 0 0 1px rgba(126, 218, 255, .08), 0 12px 26px rgba(40, 160, 255, .07);
}

@media (max-width: 780px) {
    html {
        scroll-padding-top: 14px;
    }
}


html.perf-mid {
    scroll-behavior: auto;
}

html.perf-low {
    scroll-behavior: auto !important;
}

html.perf-mid .app-shell::before,
html.perf-mid .app-shell::after,
html.perf-mid .site-footer-copy span::after,
html.perf-mid .flash-fx::after {
    filter: none !important;
    opacity: .22 !important;
    animation-duration: 6s !important;
}

html.perf-low *,
html.perf-low *::before,
html.perf-low *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
}

html.perf-low .app-shell::before,
html.perf-low .app-shell::after,
html.perf-low .site-footer-copy span::after,
html.perf-low .flash-fx::after,
html.perf-low .btn::before,
html.perf-low .nav a::before,
html.perf-low .permission-pill::before,
html.perf-low .ticket-attachment-card::before,
html.perf-low .site-active-glider {
    display: none !important;
}

html.perf-low .fx-reveal,
html.perf-low .fx-reveal.is-visible,
html.perf-low .live-insert-shell,
html.perf-low .card,
html.perf-low .ticket-row,
html.perf-low .message-card,
html.perf-low .proof-public-card,
html.perf-low .proof-manage-card,
html.perf-low .docs-option,
html.perf-low .docs-rule-card,
html.perf-low .admin-feature-card {
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
}

html.perf-low .card,
html.perf-low .ticket-row,
html.perf-low .message-card,
html.perf-low .proof-public-card,
html.perf-low .proof-manage-card,
html.perf-low .docs-option,
html.perf-low .docs-rule-card,
html.perf-low .admin-feature-card,
html.perf-low .site-footer-copy,
html.perf-low .section-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025) !important;
}

html.perf-mid .fx-reveal {
    transition-duration: .26s !important;
    filter: none !important;
}

/* وقتی انیمیشن اسکرول از پنل مالک خاموش است */
html.fx-anim-off .fx-reveal,
html.fx-anim-off .fx-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
}

html.perf-mid .site-active-glider {
    transition-duration: .18s !important;
    box-shadow: inset 0 0 0 1px rgba(126, 218, 255, .04) !important;
}

@media (prefers-reduced-motion: reduce) {
    .site-active-glider {
        animation: none !important;
        transition: none !important;
    }

    .fx-reveal,
    .btn::before,
    .nav a::before,
    .permission-pill::before,
    .ticket-attachment-card::before,
    .flash-fx::after,
    .app-shell::before,
    .app-shell::after {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
    }
}

@media (max-width: 640px) {
    .site-footer {
        margin-top: 36px;
        padding: 18px 0;
    }

    .site-footer-copy {
        width: 100%;
        padding: 12px 14px;
        font-size: 13px;
        border-radius: 16px;
    }
}