/* ==========================================================================
   ANIX ULTIMATE MOTION SUITE — 100% COVERAGE FOR ALL COMPONENTS & MOBILE
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. KEYFRAMES
   -------------------------------------------------------------------------- */
@keyframes anixFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes anixPageSlideIn {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes anixModalSpring {
  0% { opacity: 0; transform: scale(0.9) translateY(24px); }
  65% { transform: scale(1.02) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes anixBottomSheetSlideUp {
  0% { opacity: 0; transform: translateY(100%); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes anixCardPop {
  0% { opacity: 0; transform: translateY(24px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes anixPulseGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-color: rgba(56, 189, 248, 0.4);
  }
  50% {
    box-shadow: 0 0 35px rgba(56, 189, 248, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    border-color: rgba(56, 189, 248, 0.85);
  }
}

@keyframes anixHotPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    border-color: rgba(245, 158, 11, 0.45);
  }
  50% {
    box-shadow: 0 0 40px rgba(245, 158, 11, 0.65), 0 0 15px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    border-color: rgba(245, 158, 11, 0.9);
  }
}

@keyframes anixFabPulse {
  0%, 100% {
    box-shadow: 0 8px 25px rgba(56, 189, 248, 0.4);
  }
  50% {
    box-shadow: 0 12px 35px rgba(56, 189, 248, 0.75), 0 0 20px rgba(56, 189, 248, 0.4);
  }
}

@keyframes anixShimmer {
  0% { transform: translateX(-150%) skewX(-20deg); }
  100% { transform: translateX(250%) skewX(-20deg); }
}

@keyframes anixProgressLaser {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes anixCartBump {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3) rotate(-8deg); }
}

@keyframes anixRippleEffect {
  0% { transform: scale(0); opacity: 0.75; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* --------------------------------------------------------------------------
   2. SCROLL REVEAL (ALL PAGES & ALL DEVICES)
   -------------------------------------------------------------------------- */
.anix-scroll-reveal {
  opacity: 0 !important;
  transform: translateY(28px) !important;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform !important;
}

.anix-scroll-reveal.anix-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* --------------------------------------------------------------------------
   3. MOBILE TAP & ACTIVE STATES (TACTILE FEEDBACK)
   -------------------------------------------------------------------------- */
button,
a,
input[type="button"],
input[type="submit"],
.p-btn,
.p-card,
.m-item,
.n-item,
.anix-login-btn,
.anix-order-submit-btn,
#anix-fab-btn,
.download-tile,
.mobile-download-button,
.anix-card {
  -webkit-tap-highlight-color: transparent !important;
  user-select: none;
}

.anix-touch-pressed {
  transform: scale(0.96) !important;
  filter: brightness(1.2) !important;
  transition: transform 0.1s ease, filter 0.1s ease !important;
}

/* --------------------------------------------------------------------------
   4. PRICING & TARIFFS (.p-card, .p-btn, .p-eyebrow, .p-grid)
   -------------------------------------------------------------------------- */
.p-card,
.anix-pricing-card,
.pricing-card,
[class*="tariff"] {
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s ease, border-color 0.32s ease, background-color 0.25s ease !important;
  will-change: transform, box-shadow !important;
}

.p-card:hover,
.anix-pricing-card:hover,
.pricing-card:hover,
[class*="tariff"]:hover {
  transform: translateY(-8px) scale(1.025) !important;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.8), 0 0 35px rgba(56, 189, 248, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  border-color: rgba(56, 189, 248, 0.6) !important;
}

.p-card:active {
  transform: scale(0.97) !important;
}

.p-card.hot {
  animation: anixHotPulse 3s infinite alternate !important;
}

.p-btn,
.anix-pricing-btn {
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.p-btn:hover,
.anix-pricing-btn:hover {
  transform: translateY(-2.5px) scale(1.03) !important;
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.25) !important;
  filter: brightness(1.15) !important;
}

.p-btn:active,
.anix-pricing-btn:active {
  transform: scale(0.95) !important;
}

/* --------------------------------------------------------------------------
   5. PRODUCT CARDS & DOWNLOAD TILES
   -------------------------------------------------------------------------- */
.product-grid > div,
.download-tile,
.mobile-download-button,
.download-row,
.anix-card,
[class*="product-card"],
[class*="item-card"] {
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s ease, border-color 0.32s ease, background-color 0.25s ease !important;
  will-change: transform, box-shadow !important;
}

.product-grid > div:hover,
.download-tile:hover,
.mobile-download-button:hover,
.download-row:hover,
.anix-card:hover,
[class*="product-card"]:hover,
[class*="item-card"]:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.75), 0 0 30px rgba(56, 189, 248, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  border-color: rgba(56, 189, 248, 0.55) !important;
}

.product-grid > div:active,
.download-tile:active,
.mobile-download-button:active,
.download-row:active,
.anix-card:active {
  transform: scale(0.97) !important;
}

.product-grid > div:hover img,
.download-tile:hover img,
.download-tile:hover svg,
.anix-card:hover img {
  transform: scale(1.08) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* --------------------------------------------------------------------------
   6. MOBILE MENU & NAV SHEETS (.m-item, .n-item, .mi-arrow, .anix-sheet-user)
   -------------------------------------------------------------------------- */
.m-item,
.n-item,
.anix-sheet-item {
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.m-item:hover,
.n-item:hover,
.anix-sheet-item:hover {
  transform: translateX(6px) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  color: #38bdf8 !important;
}

.m-item:active,
.n-item:active,
.anix-sheet-item:active {
  transform: scale(0.97) !important;
  background: rgba(56, 189, 248, 0.15) !important;
}

.mi-arrow {
  transition: transform 0.22s ease !important;
}

.m-item:hover .mi-arrow,
.n-item:hover .mi-arrow {
  transform: translateX(5px) !important;
  color: #38bdf8 !important;
}

.anix-sheet-user {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.anix-sheet-user:hover {
  transform: scale(1.02) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.anix-sheet-user:active {
  transform: scale(0.97) !important;
}

/* --------------------------------------------------------------------------
   7. LOGIN MODAL & OTP CARDS (#anix-login-card, .anix-login-btn, .otp-card)
   -------------------------------------------------------------------------- */
.anix-login-btn {
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.anix-login-btn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45) !important;
  filter: brightness(1.1) !important;
}

.anix-login-btn:active {
  transform: scale(0.95) !important;
}

.otp-card {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.otp-card:focus {
  transform: translateY(-4px) scale(1.08) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.45) !important;
}

#anix-login-arrow {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#anix-login-arrow:hover {
  transform: scale(1.15) rotate(5deg) !important;
  background: #38bdf8 !important;
}

/* --------------------------------------------------------------------------
   8. ORDER PROJECT MODAL & NICHES (.anix-niches-grid, .anix-order-card)
   -------------------------------------------------------------------------- */
.anix-order-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
}

.anix-order-card:hover {
  transform: translateY(-4px) scale(1.015) !important;
  box-shadow: 0 28px 65px rgba(0, 0, 0, 0.75), 0 0 35px rgba(56, 189, 248, 0.25) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
}

.anix-niches-grid > * {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.anix-niches-grid > *:hover {
  transform: translateY(-2px) scale(1.03) !important;
  border-color: #38bdf8 !important;
}

.anix-niches-grid > *:active {
  transform: scale(0.96) !important;
}

.anix-order-submit-btn {
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.anix-order-submit-btn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 10px 30px rgba(56, 189, 248, 0.45) !important;
}

.anix-order-submit-btn:active {
  transform: scale(0.95) !important;
}

/* --------------------------------------------------------------------------
   9. FLOATING ACTION BUTTON (FAB) (#anix-fab-btn, .fab-up-node)
   -------------------------------------------------------------------------- */
#anix-fab-btn {
  animation: anixFabPulse 2.8s infinite ease-in-out !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

#anix-fab-btn:hover {
  transform: scale(1.12) rotate(10deg) !important;
  box-shadow: 0 0 30px rgba(56, 189, 248, 0.85) !important;
}

#anix-fab-btn:active {
  transform: scale(0.9) !important;
}

.fab-up-node {
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.fab-up-node:hover {
  transform: scale(1.12) translateX(-4px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 15px rgba(56, 189, 248, 0.4) !important;
}

.fab-up-node:active {
  transform: scale(0.92) !important;
}

/* --------------------------------------------------------------------------
   10. SEARCH MODAL (.anix-search-cat-tab, .anix-search-item-card)
   -------------------------------------------------------------------------- */
.anix-search-cat-tab {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.anix-search-cat-tab:hover {
  transform: translateY(-2px) scale(1.03) !important;
  color: #fff !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
}

.anix-search-cat-tab:active {
  transform: scale(0.96) !important;
}

.anix-search-cat-tab.active {
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.4) !important;
}

.anix-search-item-card {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.anix-search-item-card:hover {
  transform: translateX(6px) scale(1.01) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.anix-search-item-card:active {
  transform: scale(0.97) !important;
}

/* --------------------------------------------------------------------------
   11. TEAM MEMBERS & MODALS (#anix-members-grid, #anix-member-card, #am-tg)
   -------------------------------------------------------------------------- */
.m-grid > div,
.member-card,
[class*="member-box"] {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.m-grid > div:hover,
.member-card:hover {
  transform: translateY(-5px) scale(1.025) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 22px rgba(56, 189, 248, 0.25) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
}

.m-grid > div:active,
.member-card:active {
  transform: scale(0.97) !important;
}

#am-tg {
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#am-tg:hover {
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 8px 24px rgba(0, 136, 204, 0.45) !important;
}

/* --------------------------------------------------------------------------
   12. ALL MODALS, OVERLAYS & MOBILE BOTTOM SHEETS
   -------------------------------------------------------------------------- */
div[style*="position: fixed"][style*="inset: 0"],
div[style*="position:fixed"][style*="inset:0"],
div[style*="position: fixed"][style*="top: 0"],
dialog,
.modal-overlay,
#anix-hosting-modal,
#anix-order-modal,
#anix-member-overlay,
#anix-login-overlay,
#anix-menu-overlay,
#anix-nav-overlay,
#anix-search-modal {
  animation: anixFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

div[style*="position: fixed"][style*="inset: 0"] > div,
div[style*="position:fixed"][style*="inset:0"] > div,
dialog > div,
.modal-content,
.auth-modal,
#anix-member-card,
#anix-login-card,
.anix-order-box,
.anix-search-box {
  animation: anixModalSpring 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
  will-change: transform, opacity !important;
}

@media (max-width: 768px) {
  #anix-order-modal > div,
  #anix-search-modal > div,
  #anix-login-overlay > div,
  .modal-content {
    animation: anixBottomSheetSlideUp 0.32s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  }
}

/* Modal Close Buttons */
button[aria-label*="Закрыть"],
button[aria-label*="Close"],
button.anix-close,
.anix-sheet-close,
#anix-hosting-close,
#anix-order-close-btn,
#anix-search-close,
.m-close {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s, background-color 0.2s !important;
}

button[aria-label*="Закрыть"]:hover,
button[aria-label*="Close"]:hover,
button.anix-close:hover,
.anix-sheet-close:hover,
#anix-hosting-close:hover,
#anix-order-close-btn:hover,
#anix-search-close:hover,
.m-close:hover { transform: scale(1.08) !important; color: #fff !important; }

/* --------------------------------------------------------------------------
   13. FOOTER & LANGUAGE SWITCHER
   -------------------------------------------------------------------------- */
footer.anix-links a,
footer a {
  transition: all 0.2s ease !important;
}

footer.anix-links a:hover,
footer a:hover {
  transform: translateX(4px) !important;
  color: #38bdf8 !important;
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.5) !important;
}

.language-switch,
.lang-btn {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.language-switch:hover,
.lang-btn:hover {
  transform: scale(1.08) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.3) !important;
}

/* --------------------------------------------------------------------------
   14. TOP LASER LOADER
   -------------------------------------------------------------------------- */
#anix-page-loader {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 3.5px !important;
  width: 0% !important;
  background: linear-gradient(90deg, #38bdf8, #818cf8, #c084fc, #38bdf8) !important;
  background-size: 200% 100% !important;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.95), 0 0 35px rgba(129, 140, 248, 0.7) !important;
  z-index: 2147483647 !important;
  pointer-events: none !important;
  transition: width 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease !important;
  animation: anixProgressLaser 1.5s infinite linear !important;
}

/* ==========================================================================
   ANIX ULTIMATE BURGER & DRAWER MOTION ENGINE v3.0 (OPEN & CLOSE)
   ========================================================================== */

/* 1. Mobile Burger Button & Morphing States */
@media (max-width: 767px) {
  button[aria-label="Toggle Menu"],
  button[aria-label="Открыть меню"],
  .anix-burger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    color: #f4f4f5 !important;
    font-size: 0 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
    transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.24s ease,
                border-color 0.24s ease,
                box-shadow 0.24s ease !important;
  }

  button[aria-label="Toggle Menu"]::after,
  button[aria-label="Открыть меню"]::after {
    content: "" !important;
    display: none !important;
  }

  button[aria-label="Toggle Menu"]:hover,
  button[aria-label="Открыть меню"]:hover,
  .anix-burger:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(56, 189, 248, 0.5) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 6px 20px rgba(56, 189, 248, 0.2) !important;
  }

  button[aria-label="Toggle Menu"]:active,
  button[aria-label="Открыть меню"]:active,
  .anix-burger:active {
    transform: scale(0.9) !important;
  }

  button[aria-label="Toggle Menu"] svg,
  button[aria-label="Открыть меню"] svg,
  .anix-burger svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  button[aria-label="Toggle Menu"]:hover svg,
  button[aria-label="Открыть меню"]:hover svg,
  .anix-burger:hover svg {
    transform: none !important;
  }
}

/* 2. React Dropdown Menu (Spring In, Staggered Items, Smooth Transitions) */
.absolute.top-16.right-5.w-56,
.mobile-menu {
  transform-origin: top right !important;
  animation: anixDropdownSpring 0.34s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  background: rgba(18, 18, 22, 0.92) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
}

@keyframes anixDropdownSpring {
  0% {
    opacity: 0;
    transform: translateY(-14px) scale(0.88);
    filter: blur(6px);
  }
  70% {
    opacity: 1;
    transform: translateY(2px) scale(1.02);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
}

.absolute.top-16.right-5.w-56 button,
.mobile-menu button,
.mobile-menu a {
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.absolute.top-16.right-5.w-56 button:hover,
.mobile-menu button:hover,
.mobile-menu a:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  transform: translateX(4px) scale(1.02) !important;
  color: #fff !important;
}

.absolute.top-16.right-5.w-56 button:active,
.mobile-menu button:active,
.mobile-menu a:active {
  transform: scale(0.96) !important;
}

.absolute.top-16.right-5.w-56 button:nth-child(1) { animation: anixSubItemIn 0.28s 0.03s cubic-bezier(0.16, 1, 0.3, 1) both !important; }
.absolute.top-16.right-5.w-56 button:nth-child(2) { animation: anixSubItemIn 0.28s 0.07s cubic-bezier(0.16, 1, 0.3, 1) both !important; }
.absolute.top-16.right-5.w-56 button:nth-child(3) { animation: anixSubItemIn 0.28s 0.11s cubic-bezier(0.16, 1, 0.3, 1) both !important; }
.absolute.top-16.right-5.w-56 button:nth-child(4) { animation: anixSubItemIn 0.28s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both !important; }

@keyframes anixSubItemIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 3. Universal Overlays & Navigation / Menu Drawers (OPEN & CLOSE) */
#anix-nav-overlay,
#anix-menu-overlay,
#anix-login-overlay,
#anix-member-overlay,
#anix-order-modal,
#anix-search-modal {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: rgba(0, 0, 0, 0) !important;
  backdrop-filter: blur(0px) !important;
  -webkit-backdrop-filter: blur(0px) !important;
  transition: opacity 0.34s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.34s cubic-bezier(0.16, 1, 0.3, 1),
              backdrop-filter 0.34s ease,
              -webkit-backdrop-filter 0.34s ease,
              background 0.34s ease !important;
}

/* Open state */
#anix-nav-overlay.open,
#anix-menu-overlay.open,
#anix-login-overlay.open,
#anix-member-overlay.open,
#anix-order-modal.open,
#anix-search-modal.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: rgba(8, 8, 10, 0.78) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
}

/* Explicit Closing State */
#anix-nav-overlay.anix-sheet-closing,
#anix-menu-overlay.anix-sheet-closing,
#anix-login-overlay.anix-sheet-closing,
#anix-member-overlay.anix-sheet-closing {
  opacity: 0 !important;
  pointer-events: none !important;
  backdrop-filter: blur(0px) !important;
  -webkit-backdrop-filter: blur(0px) !important;
  background: rgba(0, 0, 0, 0) !important;
}

/* Sheet Drawer Containers: Slide Up on Open, Slide Down on Close */
#anix-nav-overlay .anix-sheet-container,
#anix-menu-overlay .anix-sheet-container,
#anix-login-overlay .anix-sheet-container,
#anix-member-overlay .anix-sheet-container,
#anix-order-modal > div,
#anix-search-modal > div,
#anix-login-overlay > div {
  transform: translateY(105%) scale(0.96) !important;
  opacity: 0 !important;
  transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1),
              opacity 0.28s ease !important;
  will-change: transform, opacity !important;
}

#anix-nav-overlay.open .anix-sheet-container,
#anix-menu-overlay.open .anix-sheet-container,
#anix-login-overlay.open .anix-sheet-container,
#anix-member-overlay.open .anix-sheet-container,
#anix-order-modal.open > div,
#anix-search-modal.open > div,
#anix-login-overlay.open > div {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
  transition: transform 0.44s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.36s ease !important;
}

#anix-nav-overlay.anix-sheet-closing .anix-sheet-container,
#anix-menu-overlay.anix-sheet-closing .anix-sheet-container,
#anix-login-overlay.anix-sheet-closing .anix-sheet-container,
#anix-member-overlay.anix-sheet-closing .anix-sheet-container {
  transform: translateY(105%) scale(0.96) !important;
  opacity: 0 !important;
  transition: transform 0.14s ease, opacity 0.12s ease !important;
}

/* Staggered List Items in Nav & Account Drawer */
#anix-nav-overlay.open .n-item,
#anix-menu-overlay.open .m-item,
#anix-menu-overlay.open .anix-sheet-user {
  animation: anixDrawerItemSlide 0.42s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

#anix-menu-overlay.open .anix-sheet-user { animation-delay: 0.02s !important; }
#anix-nav-overlay.open .n-item:nth-child(1), #anix-menu-overlay.open .m-item:nth-child(1) { animation-delay: 0.04s !important; }
#anix-nav-overlay.open .n-item:nth-child(2), #anix-menu-overlay.open .m-item:nth-child(2) { animation-delay: 0.08s !important; }
#anix-nav-overlay.open .n-item:nth-child(3), #anix-menu-overlay.open .m-item:nth-child(3) { animation-delay: 0.12s !important; }
#anix-nav-overlay.open .n-item:nth-child(4), #anix-menu-overlay.open .m-item:nth-child(4) { animation-delay: 0.16s !important; }
#anix-nav-overlay.open .n-item:nth-child(5), #anix-menu-overlay.open .m-item:nth-child(5) { animation-delay: 0.20s !important; }
#anix-nav-overlay.open .n-item:nth-child(6), #anix-menu-overlay.open .m-item:nth-child(6) { animation-delay: 0.24s !important; }
#anix-nav-overlay.open .n-item:nth-child(7), #anix-menu-overlay.open .m-item:nth-child(7) { animation-delay: 0.28s !important; }
#anix-nav-overlay.open .n-item:nth-child(8), #anix-menu-overlay.open .m-item:nth-child(8) { animation-delay: 0.32s !important; }

@keyframes anixDrawerItemSlide {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Interactive Drawer Items Hover & Active */
.n-item, .m-item {
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.24s ease,
              border-color 0.24s ease !important;
}

.n-item:hover, .m-item:hover {
  transform: translateX(6px) scale(1.01) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
}

.n-item:hover .mi-arrow, .m-item:hover .mi-arrow {
  transform: translateX(4px) !important;
  color: #38bdf8 !important;
}

.n-item:active, .m-item:active {
  transform: scale(0.97) !important;
}

/* Drawer Close Buttons (Smooth Rotate & Spring on Hover) */
.anix-sheet-close,
#anix-nav-close,
#anix-menu-close,
#anix-login-close {
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.24s ease,
              border-color 0.24s ease !important;
}

.anix-sheet-close:hover,
#anix-nav-close:hover,
#anix-menu-close:hover,
#anix-login-close:hover { transform: scale(1.08) !important; background: rgba(255, 255, 255, 0.14) !important; }

.anix-sheet-close:active,
#anix-nav-close:active,
#anix-menu-close:active,
#anix-login-close:active {
  transform: none !important;
}

/* --- ANIX PURE SHEET ANIMATION ENGINE (LOGO NAV & PROFILE MENU) --- */
/* 1. Purge 3-stripes burger button completely on all screens */
button[aria-label="Toggle Menu"],
button[aria-label="Открыть меню"],
.anix-burger,
.hamburger-button,
.full-topbar .anix-burger,
header button[aria-label="Toggle Menu"],
.anix-menu-btn-burger,
.absolute.top-16.right-5.w-56 {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2. Base overlay: ALWAYS display:flex, visibility & opacity transitions */
#anix-nav-overlay,
#anix-menu-overlay,
#anix-login-overlay,
#anix-member-overlay {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: rgba(0, 0, 0, 0) !important;
  backdrop-filter: blur(0px) !important;
  -webkit-backdrop-filter: blur(0px) !important;
  transition: opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.38s cubic-bezier(0.16, 1, 0.3, 1),
              backdrop-filter 0.38s ease,
              -webkit-backdrop-filter 0.38s ease,
              background 0.38s ease !important;
}

/* 3. Open State (Smooth fade in + backdrop blur) */
#anix-nav-overlay.open,
#anix-menu-overlay.open,
#anix-login-overlay.open,
#anix-member-overlay.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: rgba(8, 8, 10, 0.82) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
}

/* 4. Explicit Closing State (Smooth fade out) */
#anix-nav-overlay.anix-sheet-closing,
#anix-menu-overlay.anix-sheet-closing,
#anix-login-overlay.anix-sheet-closing,
#anix-member-overlay.anix-sheet-closing {
  opacity: 0 !important;
  backdrop-filter: blur(0px) !important;
  -webkit-backdrop-filter: blur(0px) !important;
  background: rgba(0, 0, 0, 0) !important;
  pointer-events: none !important;
}

/* 5. Sheet Container (Slide up on open, slide down on close) */
#anix-nav-overlay .anix-sheet-container,
#anix-menu-overlay .anix-sheet-container,
#anix-login-overlay .anix-sheet-container,
#anix-member-overlay .anix-sheet-container,
#anix-member-overlay #anix-member-card {
  transform: translateY(105%) scale(0.96) !important;
  opacity: 0 !important;
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1),
              opacity 0.3s ease !important;
  will-change: transform, opacity !important;
}

#anix-nav-overlay.open .anix-sheet-container,
#anix-menu-overlay.open .anix-sheet-container,
#anix-login-overlay.open .anix-sheet-container,
#anix-member-overlay.open .anix-sheet-container,
#anix-member-overlay.open #anix-member-card {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
  transition: transform 0.44s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.36s ease !important;
}

#anix-nav-overlay.anix-sheet-closing .anix-sheet-container,
#anix-menu-overlay.anix-sheet-closing .anix-sheet-container,
#anix-login-overlay.anix-sheet-closing .anix-sheet-container,
#anix-member-overlay.anix-sheet-closing .anix-sheet-container,
#anix-member-overlay.anix-sheet-closing #anix-member-card {
  transform: translateY(105%) scale(0.96) !important;
  opacity: 0 !important;
  transition: transform 0.14s ease, opacity 0.12s ease !important;
}

/* Staggered entrance for items */
#anix-nav-overlay.open .n-item,
#anix-menu-overlay.open .m-item,
#anix-menu-overlay.open .m-user-badge,
#anix-menu-overlay.open .anix-sheet-user {
  animation: anixItemSlideIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
#anix-menu-overlay.open .m-user-badge,
#anix-menu-overlay.open .anix-sheet-user { animation-delay: 0.02s !important; }
#anix-nav-overlay.open .n-item:nth-child(1), #anix-menu-overlay.open .m-item:nth-child(1) { animation-delay: 0.04s !important; }
#anix-nav-overlay.open .n-item:nth-child(2), #anix-menu-overlay.open .m-item:nth-child(2) { animation-delay: 0.08s !important; }
#anix-nav-overlay.open .n-item:nth-child(3), #anix-menu-overlay.open .m-item:nth-child(3) { animation-delay: 0.12s !important; }
#anix-nav-overlay.open .n-item:nth-child(4), #anix-menu-overlay.open .m-item:nth-child(4) { animation-delay: 0.16s !important; }
#anix-nav-overlay.open .n-item:nth-child(5), #anix-menu-overlay.open .m-item:nth-child(5) { animation-delay: 0.20s !important; }
#anix-nav-overlay.open .n-item:nth-child(6), #anix-menu-overlay.open .m-item:nth-child(6) { animation-delay: 0.24s !important; }
#anix-nav-overlay.open .n-item:nth-child(7), #anix-menu-overlay.open .m-item:nth-child(7) { animation-delay: 0.28s !important; }
#anix-nav-overlay.open .n-item:nth-child(8), #anix-menu-overlay.open .m-item:nth-child(8) { animation-delay: 0.32s !important; }

@keyframes anixItemSlideIn {
  0% { opacity: 0; transform: translateY(22px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.anix-sheet-close, #anix-nav-close, #anix-menu-close, #anix-login-close, #anix-member-close {
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease !important;
  cursor: pointer !important;
}
.anix-sheet-close:hover, #anix-nav-close:hover, #anix-menu-close:hover, #anix-login-close:hover, #anix-member-close:hover {
  transform: none !important;
  background: rgba(255, 255, 255, 0.14) !important;
}


/* Explicit Smooth Closing State for All Sheets & Modals */
.anix-sheet-closing,
#anix-nav-overlay.anix-sheet-closing,
#anix-menu-overlay.anix-sheet-closing,
#anix-login-overlay.anix-sheet-closing,
#anix-member-overlay.anix-sheet-closing {
  opacity: 0 !important;
  backdrop-filter: blur(0px) !important;
  -webkit-backdrop-filter: blur(0px) !important;
  background: rgba(0, 0, 0, 0) !important;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              backdrop-filter 0.22s ease !important;
  pointer-events: none !important;
}

.anix-sheet-closing .anix-sheet-container,
.anix-sheet-closing #anix-login-card,
.anix-sheet-closing #anix-member-card,
#anix-nav-overlay.anix-sheet-closing .anix-sheet-container,
#anix-menu-overlay.anix-sheet-closing .anix-sheet-container,
#anix-login-overlay.anix-sheet-closing .anix-sheet-container,
#anix-member-overlay.anix-sheet-closing .anix-sheet-container,
#anix-member-overlay.anix-sheet-closing #anix-member-card {
  transform: translateY(48px) scale(0.96) !important;
  opacity: 0 !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.18s ease !important;
}


/* ==========================================================================
   TWITTER / X MOTION SUITE: MICRO-INTERACTIONS & ANIMATIONS
   ========================================================================== */

@keyframes xHeartPop {
  0% { transform: scale(1); }
  25% { transform: scale(1.4) rotate(-12deg); }
  50% { transform: scale(0.85) rotate(6deg); }
  75% { transform: scale(1.15) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes xRepostSpin {
  0% { transform: rotate(0deg) scale(1); }
  40% { transform: rotate(180deg) scale(1.25); }
  80% { transform: rotate(360deg) scale(0.95); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes xCardIn {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes xBubbleIn {
  0% { opacity: 0; transform: translateY(8px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes xPulseLikeRing {
  0% { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Like & Repost Interactive States with Animations */
.action-btn.like.animating svg,
.action-btn.animating.liked svg,
.tweet-action-like.animating svg {
  animation: xHeartPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) both !important;
}

.action-btn.repost.animating svg,
.action-btn.animating.reposted svg,
.tweet-action-repost.animating svg {
  animation: xRepostSpin 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both !important;
}

/* Tweet Cards Entrance */
.tweet-card,
.tweet-item,
.post-item,
.x-card {
  animation: xCardIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Chat Bubbles Entrance */
.msg-bubble,
.chat-bubble,
.message-bubble {
  animation: xBubbleIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Twitter Tab Underline Indicator Smooth Motion */
.feed-tab,
.profile-tab,
.anix-tab {
  position: relative !important;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s !important;
}

.feed-tab::after,
.profile-tab::after,
.anix-tab::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) scaleX(0) !important;
  width: 48px !important;
  height: 4px !important;
  background: var(--blue, #1d9bf0) !important;
  border-radius: 9999px !important;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s !important;
  transform-origin: center !important;
}

.feed-tab.active::after,
.profile-tab.active::after,
.anix-tab.active::after {
  transform: translateX(-50%) scaleX(1) !important;
}

/* Tactile button active states */
.action-btn:active,
.nav-item:active,
.anix-mob-tab:active {
  transform: scale(0.92) !important;
  transition: transform 0.1s ease !important;
}