/* SHAI depth layer: tactile buttons, 3D cards, custom dropdowns, motion.
   Loaded after neumorph.css, so it only adds on top of the existing design. */

:root {
    --fx-ease: cubic-bezier(.22, 1, .36, 1);
    --fx-spring: cubic-bezier(.34, 1.56, .64, 1);
    --fx-glow: 139, 92, 246;
    --fx-face: linear-gradient(180deg, #2b2e35 0%, #212329 100%);
    --fx-face-hi: linear-gradient(180deg, #33363e 0%, #25282e 100%);
    --fx-light: linear-gradient(180deg, #ffffff 0%, #dcdde1 100%);
    --fx-rim: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.35);
    --fx-lift-1: 0 1px 1px rgba(0,0,0,.4), 0 3px 3px rgba(0,0,0,.28), 0 8px 8px rgba(0,0,0,.2), 0 16px 18px rgba(0,0,0,.18);
    --fx-lift-2: 0 2px 2px rgba(0,0,0,.4), 0 6px 6px rgba(0,0,0,.3), 0 14px 16px rgba(0,0,0,.26), 0 28px 34px rgba(0,0,0,.24);
}

/* ---------- ambient scene ---------- */
.fx-scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fx-scene::before, .fx-scene::after {
    content: ""; position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
    filter: blur(80px); opacity: .5; will-change: transform;
}
.fx-scene::before {
    left: -18vmax; top: -22vmax;
    background: radial-gradient(circle, rgba(var(--fx-glow), .16), transparent 62%);
    animation: fx-drift-a 26s ease-in-out infinite alternate;
}
.fx-scene::after {
    right: -22vmax; bottom: -26vmax;
    background: radial-gradient(circle, rgba(120, 160, 255, .11), transparent 62%);
    animation: fx-drift-b 31s ease-in-out infinite alternate;
}
.fx-spot {
    position: absolute; inset: 0;
    background: radial-gradient(520px circle at var(--px, 50%) var(--py, 30%), rgba(255,255,255,.045), transparent 60%);
    transition: background-position .2s;
}
@keyframes fx-drift-a { to { transform: translate3d(14vmax, 10vmax, 0) scale(1.12); } }
@keyframes fx-drift-b { to { transform: translate3d(-12vmax, -9vmax, 0) scale(1.1); } }

/* ---------- page gate: nothing shows until the final design is loaded ---------- */
html.ui-pending body { opacity: 0; }
html.ui-ready body { animation: fx-body-in .5s var(--fx-ease) both; }
@keyframes fx-body-in { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: none; } }

/* ---------- staggered entrance ---------- */
.ui-ready .fx-item { animation: fx-rise .75s var(--fx-ease) both; animation-delay: calc(var(--i, 0) * 70ms + 80ms); }
.fx-pre { opacity: 0; transform: translateY(26px) scale(.985); }
.fx-in { opacity: 1; transform: none; transition: opacity .7s var(--fx-ease), transform .8s var(--fx-ease); transition-delay: calc(var(--i, 0) * 60ms); }
@keyframes fx-rise {
    from { opacity: 0; transform: translateY(28px) scale(.97) rotateX(6deg); filter: blur(5px); }
    to   { opacity: 1; transform: none; filter: none; }
}

/* ---------- tactile buttons ---------- */
.btn, .catalog-btn, .mk-btn, .btn-gradient, .btn-action, .btn-copy, button.swal2-styled {
    position: relative; overflow: hidden; isolation: isolate;
    transition: transform .28s var(--fx-spring), box-shadow .28s var(--fx-ease), background .3s ease, filter .3s ease !important;
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
}
.btn, .catalog-btn, .mk-btn, .btn-gradient, .btn-action, .btn-copy {
    background: var(--fx-face) !important;
    box-shadow: var(--fx-rim), 0 1px 0 rgba(0,0,0,.6), 0 4px 0 #111316, 0 10px 18px rgba(0,0,0,.5) !important;
    transform: translateY(0);
}
.btn::before, .catalog-btn::before, .mk-btn::before {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; border-radius: inherit;
    background: radial-gradient(120px circle at var(--bx, 50%) var(--by, 0%), rgba(255,255,255,.2), transparent 65%);
    transition: opacity .3s ease;
}
.btn:hover::before, .catalog-btn:hover::before, .mk-btn:hover::before { opacity: 1; }
.btn:hover, .catalog-btn:hover, .mk-btn:hover, .btn-gradient:hover, .btn-action:hover, .btn-copy:hover {
    background: var(--fx-face-hi) !important;
    transform: translateY(-3px) !important;
    box-shadow: var(--fx-rim), 0 1px 0 rgba(0,0,0,.6), 0 7px 0 #111316, 0 18px 28px rgba(0,0,0,.55), 0 0 0 1px rgba(var(--fx-glow), .16) !important;
}
.btn:active, .catalog-btn:active, .mk-btn:active, .btn-gradient:active, .btn-action:active, .btn-copy:active {
    transform: translateY(3px) scale(.985) !important;
    transition-duration: .08s !important;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.55), 0 1px 0 #111316, 0 2px 6px rgba(0,0,0,.4) !important;
}
.btn-primary, .btn-login, .btn-register, .btn-default, .btn-success, .btn-dark, .btn-gradient-success,
.btn-outline-dark, .catalog-btn:not(.secondary):not(.danger), .swal2-confirm {
    background: var(--fx-light) !important; color: #15171a !important;
    box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0,0,0,.12), 0 4px 0 #8d9097, 0 10px 18px rgba(0,0,0,.5) !important;
}
.btn-primary:hover, .btn-login:hover, .btn-register:hover, .btn-default:hover, .btn-success:hover, .btn-dark:hover,
.btn-gradient-success:hover, .btn-outline-dark:hover, .catalog-btn:not(.secondary):not(.danger):hover {
    background: linear-gradient(180deg, #fff 0%, #eceef2 100%) !important; color: #0e1013 !important;
    box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0,0,0,.1), 0 7px 0 #8d9097, 0 20px 30px rgba(0,0,0,.55), 0 0 28px rgba(255,255,255,.1) !important;
}
.btn-primary:active, .btn-login:active, .btn-register:active, .btn-outline-dark:active,
.catalog-btn:not(.secondary):not(.danger):active {
    box-shadow: inset 0 2px 5px rgba(0,0,0,.25), 0 1px 0 #8d9097, 0 2px 6px rgba(0,0,0,.4) !important;
}
.btn:disabled, .btn.disabled, button:disabled { transform: none !important; opacity: .55; box-shadow: var(--fx-rim) !important; }
.btn-sm { box-shadow: var(--fx-rim), 0 3px 0 #111316, 0 8px 14px rgba(0,0,0,.45) !important; }
.btn-primary.btn-sm, .btn-outline-dark.btn-sm { box-shadow: inset 0 1px 0 #fff, 0 3px 0 #8d9097, 0 8px 14px rgba(0,0,0,.45) !important; }

.fx-ripple {
    position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
    width: 12px; height: 12px; margin: -6px 0 0 -6px; background: rgba(255,255,255,.45);
    transform: scale(0); animation: fx-ripple .7s var(--fx-ease) forwards;
}
.btn-primary .fx-ripple, .btn-outline-dark .fx-ripple, .btn-login .fx-ripple { background: rgba(0,0,0,.22); }
@keyframes fx-ripple { to { transform: scale(26); opacity: 0; } }

/* ---------- cards with real depth ---------- */
main #content { perspective: 1500px; }
.card, .login-container, .register-container, .shai-auth-card, .creator-info, .stats-card, .catalog-box, .box {
    transform-style: preserve-3d;
    transition: transform .5s var(--fx-ease), box-shadow .5s var(--fx-ease), border-color .4s ease !important;
    box-shadow: var(--fx-rim), var(--fx-lift-1) !important;
    border-color: rgba(255,255,255,.07) !important;
    position: relative;
}
.fx-tilt {
    transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0) !important;
}
.fx-tilt:hover { box-shadow: var(--fx-rim), var(--fx-lift-2), 0 0 0 1px rgba(var(--fx-glow), .1) !important; }
.fx-tilt.fx-moving { transition: transform .12s linear, box-shadow .4s var(--fx-ease) !important; }
.fx-tilt::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.075), transparent 55%);
    opacity: 0; transition: opacity .35s ease;
}
.fx-tilt:hover::after { opacity: 1; }
.card-header { box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }

/* ---------- inputs ---------- */
.form-control, .form-select, textarea, select {
    box-shadow: inset 3px 3px 8px rgba(0,0,0,.55), inset -2px -2px 6px rgba(255,255,255,.035) !important;
    transition: box-shadow .35s var(--fx-ease), border-color .3s ease, transform .35s var(--fx-spring), background .3s ease !important;
}
.form-control:focus, .form-select:focus, textarea:focus, select:focus {
    transform: translateY(-1px);
    box-shadow: inset 3px 3px 8px rgba(0,0,0,.6), 0 0 0 3px rgba(var(--fx-glow), .22), 0 10px 24px rgba(0,0,0,.4) !important;
    border-color: rgba(var(--fx-glow), .55) !important;
}
.form-check-input { transition: transform .25s var(--fx-spring), box-shadow .3s ease, background-color .25s ease !important; box-shadow: var(--fx-rim), 0 2px 4px rgba(0,0,0,.5); }
.form-check-input:active { transform: scale(.82); }
.form-check-input:checked { box-shadow: 0 0 0 3px rgba(var(--fx-glow), .25), 0 2px 6px rgba(0,0,0,.5); }

/* toggle switch (Starter .switch) */
.slider { box-shadow: inset 2px 2px 5px rgba(0,0,0,.55), inset -1px -1px 3px rgba(255,255,255,.05); transition: background .35s ease !important; }
.slider:before { box-shadow: 0 2px 4px rgba(0,0,0,.6), inset 0 -1px 0 rgba(0,0,0,.15); transition: transform .4s var(--fx-spring) !important; }

/* ---------- 3D dropdown (select replacement) ---------- */
.fx-select { position: relative; width: 100%; }
.fx-select > select { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 1px !important; height: 1px !important; left: 0; bottom: 0; }
.fx-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left;
    padding: 12px 15px; border-radius: 12px; border: 1px solid var(--neo-line, rgba(255,255,255,.085));
    background: var(--neo-well, #191b1f); color: var(--neo-ink, #f7f7f8); font: inherit; cursor: pointer;
    box-shadow: inset 3px 3px 8px rgba(0,0,0,.55), inset -2px -2px 6px rgba(255,255,255,.035);
    transition: box-shadow .35s var(--fx-ease), border-color .3s ease, transform .35s var(--fx-spring);
}
.fx-trigger:hover { transform: translateY(-1px); }
.fx-trigger:focus-visible, .fx-select.is-open .fx-trigger {
    outline: none; border-color: rgba(var(--fx-glow), .55);
    box-shadow: inset 3px 3px 8px rgba(0,0,0,.6), 0 0 0 3px rgba(var(--fx-glow), .22), 0 10px 24px rgba(0,0,0,.4);
}
.fx-trigger[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.fx-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-label.is-empty { color: #91959d; }
.fx-chevron { flex: none; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .75; transition: transform .45s var(--fx-spring); }
.fx-select.is-open .fx-chevron { transform: translateY(2px) rotate(-135deg); }
.fx-menu {
    position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 1070; max-height: 280px; overflow: auto;
    margin: 0; padding: 7px; list-style: none; border-radius: 16px;
    background: linear-gradient(180deg, #2a2d34, #202227);
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: var(--fx-rim), 0 2px 2px rgba(0,0,0,.4), 0 10px 12px rgba(0,0,0,.35), 0 28px 44px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.4);
    transform-origin: 50% 0; transform: perspective(700px) rotateX(-16deg) translateY(-10px) scale(.96);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .42s var(--fx-spring), opacity .25s ease, visibility 0s linear .42s;
    scrollbar-width: thin;
}
.fx-select.is-up .fx-menu { top: auto; bottom: calc(100% + 10px); transform-origin: 50% 100%; transform: perspective(700px) rotateX(16deg) translateY(10px) scale(.96); }
.fx-select.is-open .fx-menu { transform: perspective(700px) rotateX(0) translateY(0) scale(1); opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.fx-opt {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer;
    color: var(--neo-ink, #f7f7f8); opacity: 0; transform: translateX(-8px);
    transition: background .2s ease, transform .3s var(--fx-spring), box-shadow .3s ease;
}
.fx-select.is-open .fx-opt { opacity: 1; transform: none; transition: opacity .35s ease calc(var(--k, 0) * 28ms + 60ms), transform .45s var(--fx-spring) calc(var(--k, 0) * 28ms + 60ms), background .2s ease, box-shadow .3s ease; }
.fx-opt.is-active { background: linear-gradient(180deg, #34373f, #2a2d34); box-shadow: var(--fx-rim), 0 4px 10px rgba(0,0,0,.4); transform: translateX(3px) !important; }
.fx-opt.is-selected::after { content: ""; width: 7px; height: 12px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) translateY(-2px); }
.fx-opt[aria-disabled="true"] { opacity: .4 !important; cursor: not-allowed; }
.fx-opt.is-placeholder { color: #91959d; }

/* navbar / bootstrap dropdowns */
.dropdown-menu {
    transform-origin: 50% 0; border-radius: 16px !important;
    box-shadow: var(--fx-rim), 0 10px 12px rgba(0,0,0,.35), 0 28px 44px rgba(0,0,0,.5) !important;
}
.dropdown-menu.show { animation: fx-drop .45s var(--fx-spring) both; }
.dropdown-menu.show .dropdown-item { animation: fx-item .4s var(--fx-ease) both; animation-delay: calc(var(--k, 0) * 30ms + 40ms); }
.dropdown-item { transition: background .2s ease, transform .3s var(--fx-spring) !important; border-radius: 9px; }
.dropdown-item:hover { transform: translateX(4px); }
@keyframes fx-drop { from { opacity: 0; transform: perspective(700px) rotateX(-18deg) translateY(-8px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes fx-item { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

/* ---------- tables, badges, modals, alerts ---------- */
.table tbody tr { transition: transform .3s var(--fx-spring), background .25s ease, box-shadow .3s ease; }
.table tbody tr:hover { transform: translateY(-2px) scale(1.003); box-shadow: 0 10px 20px rgba(0,0,0,.35); position: relative; z-index: 1; }
.badge { box-shadow: var(--fx-rim), 0 2px 4px rgba(0,0,0,.4); }
.custom-alert { animation: fx-rise .6s var(--fx-ease) both !important; box-shadow: var(--fx-rim), var(--fx-lift-1); border-radius: 14px; }
.modal.fade .modal-dialog { transform: perspective(900px) rotateX(-10deg) translateY(30px) scale(.94); transition: transform .5s var(--fx-spring); }
.modal.show .modal-dialog { transform: none; }
.swal2-popup { box-shadow: var(--fx-rim), 0 30px 70px rgba(0,0,0,.65) !important; animation: fx-pop .55s var(--fx-spring) both !important; }
.key-popup-content { animation: fx-pop .6s var(--fx-spring) both !important; box-shadow: var(--fx-rim), 0 30px 70px rgba(0,0,0,.65) !important; }
@keyframes fx-pop { from { opacity: 0; transform: perspective(800px) rotateX(14deg) translateY(30px) scale(.88); } to { opacity: 1; transform: none; } }

/* password strength meter (setup page) */
.fx-meter { display: flex; gap: 6px; margin-top: 10px; }
.fx-meter i { flex: 1; height: 5px; border-radius: 4px; background: #101215; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); transition: background .35s ease, box-shadow .35s ease; }
.fx-meter[data-s="1"] i:nth-child(-n+1) { background: #ef4444; }
.fx-meter[data-s="2"] i:nth-child(-n+2) { background: #f59e0b; }
.fx-meter[data-s="3"] i:nth-child(-n+3) { background: #84cc16; }
.fx-meter[data-s="4"] i { background: #22c55e; box-shadow: 0 0 10px rgba(34,197,94,.5); }

/* ---------- details ---------- */
#shai-progress { box-shadow: 0 0 14px rgba(var(--fx-glow), .8); }
html.fx-leaving main { opacity: 0; transform: translateY(10px) scale(.992); transition: opacity .18s ease, transform .18s ease; }
::selection { background: rgba(var(--fx-glow), .35); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: #3a3d44 transparent; }
.shai-tg { box-shadow: var(--fx-rim), 0 4px 0 #3a1c78, 0 12px 22px rgba(0,0,0,.5) !important; border-radius: 14px; }

@media (pointer: coarse) { .btn:hover, .catalog-btn:hover, .mk-btn:hover { transform: none !important; } .table tbody tr:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
    .fx-pre { opacity: 1; transform: none; }
}

/* let the ambient scene show through: the page colour lives on <html> */
body { background: transparent !important; }