/* ==========================================================================
   INAIVOM - Animations
   File: app/static/css/animations.css
   Premium Matrimony Platform
   ========================================================================== */


/* ==========================================================================
   1. ANIMATION VARIABLES
   ========================================================================== */

:root {
    --anim-fast: 150ms;
    --anim-normal: 250ms;
    --anim-medium: 350ms;
    --anim-slow: 500ms;

    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-enter: cubic-bezier(0, 0, 0.2, 1);
    --ease-exit: cubic-bezier(0.4, 0, 1, 1);
    --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
}


/* ==========================================================================
   2. FADE
   ========================================================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.animate-fade-in {
    animation: fadeIn var(--anim-medium) var(--ease-standard) both;
}

.animate-fade-out {
    animation: fadeOut var(--anim-normal) var(--ease-standard) both;
}


/* ==========================================================================
   3. FADE UP
   ========================================================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate-fade-up,
.fade-in-up {
    animation: fadeInUp var(--anim-medium) var(--ease-premium) both;
}


/* ==========================================================================
   4. FADE DOWN
   ========================================================================== */

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -18px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate-fade-down,
.fade-in-down {
    animation: fadeInDown var(--anim-medium) var(--ease-premium) both;
}


/* ==========================================================================
   5. FADE LEFT
   ========================================================================== */

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-20px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate-fade-left {
    animation: fadeInLeft var(--anim-medium) var(--ease-premium) both;
}


/* ==========================================================================
   6. FADE RIGHT
   ========================================================================== */

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(20px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate-fade-right {
    animation: fadeInRight var(--anim-medium) var(--ease-premium) both;
}


/* ==========================================================================
   7. SLIDE UP
   ========================================================================== */

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate-slide-up {
    animation: slideUp var(--anim-medium) var(--ease-premium) both;
}


/* ==========================================================================
   8. SLIDE DOWN
   ========================================================================== */

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translate3d(0, -30px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate-slide-down {
    animation: slideDown var(--anim-medium) var(--ease-premium) both;
}


/* ==========================================================================
   9. SLIDE LEFT
   ========================================================================== */

@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translate3d(30px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate-slide-left {
    animation: slideLeft var(--anim-medium) var(--ease-premium) both;
}


/* ==========================================================================
   10. SLIDE RIGHT
   ========================================================================== */

@keyframes slideRight {
    from {
        opacity: 0;
        transform: translate3d(-30px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate-slide-right {
    animation: slideRight var(--anim-medium) var(--ease-premium) both;
}


/* ==========================================================================
   11. SCALE IN
   ========================================================================== */

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-scale-in,
.scale-in {
    animation: scaleIn var(--anim-normal) var(--ease-premium) both;
}


/* ==========================================================================
   12. SCALE OUT
   ========================================================================== */

@keyframes scaleOut {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.96);
    }
}

.animate-scale-out {
    animation: scaleOut var(--anim-fast) var(--ease-exit) both;
}


/* ==========================================================================
   13. POP
   ========================================================================== */

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.88);
    }

    70% {
        opacity: 1;
        transform: scale(1.03);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-pop,
.pop-in {
    animation: popIn 380ms var(--ease-premium) both;
}


/* ==========================================================================
   14. SOFT BOUNCE
   ========================================================================== */

@keyframes softBounce {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.animate-bounce-soft {
    animation: softBounce 1.8s ease-in-out infinite;
}


/* ==========================================================================
   15. PULSE
   ========================================================================== */

@keyframes pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.035);
        opacity: 0.9;
    }
}

.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}


/* ==========================================================================
   16. HEART PULSE
   ========================================================================== */

@keyframes heartPulse {
    0%,
    100% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.12);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.08);
    }

    70% {
        transform: scale(1);
    }
}

.animate-heart,
.heart-pulse {
    animation: heartPulse 1.4s ease-in-out infinite;
}


/* ==========================================================================
   17. FAVOURITE HEART
   ========================================================================== */

@keyframes favouritePop {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.28);
    }

    70% {
        transform: scale(0.94);
    }

    100% {
        transform: scale(1);
    }
}

.favourite-added,
.favorite-added {
    animation: favouritePop 400ms var(--ease-premium);
}


/* ==========================================================================
   18. SHAKE
   ========================================================================== */

@keyframes shake {
    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-5px);
    }

    40% {
        transform: translateX(5px);
    }

    60% {
        transform: translateX(-3px);
    }

    80% {
        transform: translateX(3px);
    }
}

.animate-shake,
.shake {
    animation: shake 420ms ease-in-out;
}


/* ==========================================================================
   19. SPIN
   ========================================================================== */

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin,
.spinner {
    animation: spin 0.85s linear infinite;
}


/* ==========================================================================
   20. ROTATE IN
   ========================================================================== */

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-6deg) scale(0.96);
    }

    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

.animate-rotate-in {
    animation: rotateIn var(--anim-medium) var(--ease-premium) both;
}


/* ==========================================================================
   21. SHIMMER
   ========================================================================== */

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

    100% {
        background-position: 200% 0;
    }
}

.shimmer,
.skeleton {
    background:
        linear-gradient(
            90deg,
            #f2f2f4 25%,
            #fafafa 37%,
            #f2f2f4 63%
        );

    background-size: 200% 100%;

    animation: shimmer 1.5s linear infinite;
}


/* ==========================================================================
   22. PREMIUM GOLD SHIMMER
   ========================================================================== */

@keyframes goldShimmer {
    0% {
        background-position: 200% center;
    }

    100% {
        background-position: -200% center;
    }
}

.gold-shimmer,
.premium-shimmer {
    background:
        linear-gradient(
            110deg,
            #a98218 0%,
            #d4af37 25%,
            #fff0a8 45%,
            #d4af37 65%,
            #a98218 100%
        );

    background-size: 250% auto;

    animation: goldShimmer 3s linear infinite;
}


/* ==========================================================================
   23. PREMIUM BORDER GLOW
   ========================================================================== */

@keyframes premiumGlow {
    0%,
    100% {
        box-shadow:
            0 0 0 rgba(212, 175, 55, 0),
            0 8px 24px rgba(0, 0, 0, 0.06);
    }

    50% {
        box-shadow:
            0 0 18px rgba(212, 175, 55, 0.22),
            0 10px 30px rgba(0, 0, 0, 0.08);
    }
}

.animate-premium-glow {
    animation: premiumGlow 2.8s ease-in-out infinite;
}


/* ==========================================================================
   24. MAROON GLOW
   ========================================================================== */

@keyframes maroonGlow {
    0%,
    100% {
        box-shadow: 0 0 0 rgba(128, 0, 32, 0);
    }

    50% {
        box-shadow: 0 0 18px rgba(128, 0, 32, 0.18);
    }
}

.animate-maroon-glow {
    animation: maroonGlow 2.6s ease-in-out infinite;
}


/* ==========================================================================
   25. ONLINE STATUS PULSE
   ========================================================================== */

@keyframes onlinePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.4);
    }

    70% {
        box-shadow: 0 0 0 7px rgba(25, 135, 84, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(25, 135, 84, 0);
    }
}

.online-pulse,
.status-online.animate {
    animation: onlinePulse 2s infinite;
}


/* ==========================================================================
   26. NOTIFICATION PULSE
   ========================================================================== */

@keyframes notificationPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.14);
    }
}

.notification-pulse,
.notification-count.animate {
    animation: notificationPulse 1.5s ease-in-out infinite;
}


/* ==========================================================================
   27. VERIFICATION SUCCESS
   ========================================================================== */

@keyframes verifiedPop {
    0% {
        opacity: 0;
        transform: scale(0.6);
    }

    65% {
        opacity: 1;
        transform: scale(1.12);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.verified-animation,
.animate-verified {
    animation: verifiedPop 450ms var(--ease-premium) both;
}


/* ==========================================================================
   28. SUCCESS CHECK
   ========================================================================== */

@keyframes successCheck {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(-20deg);
    }

    70% {
        opacity: 1;
        transform: scale(1.08) rotate(3deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

.animate-success-check {
    animation: successCheck 450ms var(--ease-premium) both;
}


/* ==========================================================================
   29. MODAL ENTRANCE
   ========================================================================== */

@keyframes modalBackdropIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modalContentIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal.show .modal-dialog {
    animation: modalContentIn 280ms var(--ease-premium) both;
}

.modal-backdrop.show {
    animation: modalBackdropIn var(--anim-normal) ease both;
}


/* ==========================================================================
   30. DROPDOWN ENTRANCE
   ========================================================================== */

@keyframes dropdownIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.dropdown-menu.show {
    animation: dropdownIn 180ms var(--ease-premium) both;
}


/* ==========================================================================
   31. PROFILE CARD ENTRANCE
   ========================================================================== */

@keyframes profileCardIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.profile-card.animate-in,
.match-card.animate-in {
    animation: profileCardIn 380ms var(--ease-premium) both;
}


/* ==========================================================================
   32. CARD HOVER
   ========================================================================== */

.hover-lift {
    transition:
        transform var(--anim-normal) var(--ease-standard),
        box-shadow var(--anim-normal) var(--ease-standard);
}

.hover-lift:hover {
    transform: translateY(-4px);
}


/* ==========================================================================
   33. IMAGE ZOOM
   ========================================================================== */

.hover-image-zoom {
    overflow: hidden;
}

.hover-image-zoom img {
    transition: transform 450ms var(--ease-premium);
}

.hover-image-zoom:hover img {
    transform: scale(1.045);
}


/* ==========================================================================
   34. BUTTON PRESS
   ========================================================================== */

.btn,
button,
.button {
    transition:
        transform var(--anim-fast) var(--ease-standard),
        box-shadow var(--anim-normal) var(--ease-standard),
        background-color var(--anim-normal) var(--ease-standard),
        border-color var(--anim-normal) var(--ease-standard),
        color var(--anim-normal) var(--ease-standard);
}

.btn:active:not(:disabled),
button:active:not(:disabled),
.button:active:not(:disabled) {
    transform: scale(0.975);
}


/* ==========================================================================
   35. LINK UNDERLINE
   ========================================================================== */

.animated-link {
    position: relative;

    display: inline-block;

    text-decoration: none;
}

.animated-link::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;

    height: 1px;

    background: currentColor;

    transform: scaleX(0);
    transform-origin: right center;

    transition: transform var(--anim-normal) var(--ease-standard);
}

.animated-link:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}


/* ==========================================================================
   36. NAVIGATION UNDERLINE
   ========================================================================== */

.nav-animated-link {
    position: relative;
}

.nav-animated-link::after {
    content: "";

    position: absolute;
    right: 50%;
    bottom: -4px;
    left: 50%;

    height: 2px;

    border-radius: 2px;

    background: #d4af37;

    transition:
        right var(--anim-normal) var(--ease-premium),
        left var(--anim-normal) var(--ease-premium);
}

.nav-animated-link:hover::after,
.nav-animated-link.active::after {
    right: 0;
    left: 0;
}


/* ==========================================================================
   37. PAGE ENTRANCE
   ========================================================================== */

@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-enter,
.page-content.animate {
    animation: pageEnter 320ms var(--ease-premium) both;
}


/* ==========================================================================
   38. SECTION REVEAL
   ========================================================================== */

.reveal {
    opacity: 0;
    transform: translateY(20px);

    transition:
        opacity 550ms var(--ease-premium),
        transform 550ms var(--ease-premium);
}

.reveal.is-visible,
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}


/* ==========================================================================
   39. REVEAL LEFT
   ========================================================================== */

.reveal-left {
    opacity: 0;
    transform: translateX(-22px);

    transition:
        opacity 550ms var(--ease-premium),
        transform 550ms var(--ease-premium);
}

.reveal-left.is-visible,
.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}


/* ==========================================================================
   40. REVEAL RIGHT
   ========================================================================== */

.reveal-right {
    opacity: 0;
    transform: translateX(22px);

    transition:
        opacity 550ms var(--ease-premium),
        transform 550ms var(--ease-premium);
}

.reveal-right.is-visible,
.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}


/* ==========================================================================
   41. STAGGERED CHILDREN
   ========================================================================== */

.stagger-children > * {
    opacity: 0;

    animation: fadeInUp 420ms var(--ease-premium) both;
}

.stagger-children > *:nth-child(1) {
    animation-delay: 40ms;
}

.stagger-children > *:nth-child(2) {
    animation-delay: 80ms;
}

.stagger-children > *:nth-child(3) {
    animation-delay: 120ms;
}

.stagger-children > *:nth-child(4) {
    animation-delay: 160ms;
}

.stagger-children > *:nth-child(5) {
    animation-delay: 200ms;
}

.stagger-children > *:nth-child(6) {
    animation-delay: 240ms;
}

.stagger-children > *:nth-child(7) {
    animation-delay: 280ms;
}

.stagger-children > *:nth-child(8) {
    animation-delay: 320ms;
}


/* ==========================================================================
   42. CHAT MESSAGE
   ========================================================================== */

@keyframes chatMessageIn {
    from {
        opacity: 0;
        transform: translateY(7px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.chat-message-new,
.message-new {
    animation: chatMessageIn 250ms var(--ease-premium) both;
}


/* ==========================================================================
   43. TYPING INDICATOR
   ========================================================================== */

@keyframes typingDot {
    0%,
    60%,
    100% {
        opacity: 0.35;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
        transform: translateY(-4px);
    }
}

.typing-indicator span {
    display: inline-block;

    animation: typingDot 1.2s ease-in-out infinite;
}

.typing-indicator span:nth-child(2) {
    animation-delay: 150ms;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 300ms;
}


/* ==========================================================================
   44. LOADING DOTS
   ========================================================================== */

@keyframes loadingDot {
    0%,
    80%,
    100% {
        opacity: 0.35;
        transform: scale(0.8);
    }

    40% {
        opacity: 1;
        transform: scale(1);
    }
}

.loading-dots span {
    display: inline-block;

    width: 6px;
    height: 6px;

    margin: 0 2px;

    border-radius: 50%;

    background: currentColor;

    animation: loadingDot 1.2s infinite ease-in-out;
}

.loading-dots span:nth-child(2) {
    animation-delay: 150ms;
}

.loading-dots span:nth-child(3) {
    animation-delay: 300ms;
}


/* ==========================================================================
   45. PROGRESS BAR
   ========================================================================== */

@keyframes progressLoad {
    from {
        width: 0;
    }
}

.progress-bar.animate-progress {
    animation: progressLoad 700ms var(--ease-premium) both;
}


/* ==========================================================================
   46. TOAST ENTRANCE
   ========================================================================== */

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toast.animate-in {
    animation: toastSlideIn 300ms var(--ease-premium) both;
}


/* ==========================================================================
   47. TOAST EXIT
   ========================================================================== */

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(24px);
    }
}

.toast.animate-out {
    animation: toastSlideOut 220ms var(--ease-exit) both;
}


/* ==========================================================================
   48. TOOLTIP
   ========================================================================== */

@keyframes tooltipIn {
    from {
        opacity: 0;
        transform: translateY(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tooltip.show {
    animation: tooltipIn var(--anim-fast) ease both;
}


/* ==========================================================================
   49. BADGE POP
   ========================================================================== */

@keyframes badgePop {
    0% {
        transform: scale(0.7);
        opacity: 0;
    }

    70% {
        transform: scale(1.08);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.badge.animate,
.badge-pop {
    animation: badgePop 320ms var(--ease-premium) both;
}


/* ==========================================================================
   50. CONFETTI-LIKE PREMIUM SPARK
   ========================================================================== */

@keyframes premiumSpark {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(0);
    }

    45% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(1.25) rotate(45deg);
    }
}

.premium-spark {
    animation: premiumSpark 700ms var(--ease-premium) both;
}


/* ==========================================================================
   51. FLOATING ELEMENT
   ========================================================================== */

@keyframes floatSoft {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

.animate-float {
    animation: floatSoft 3.5s ease-in-out infinite;
}


/* ==========================================================================
   52. ANIMATION DELAYS
   ========================================================================== */

.delay-50 {
    animation-delay: 50ms !important;
}

.delay-100 {
    animation-delay: 100ms !important;
}

.delay-150 {
    animation-delay: 150ms !important;
}

.delay-200 {
    animation-delay: 200ms !important;
}

.delay-250 {
    animation-delay: 250ms !important;
}

.delay-300 {
    animation-delay: 300ms !important;
}

.delay-400 {
    animation-delay: 400ms !important;
}

.delay-500 {
    animation-delay: 500ms !important;
}


/* ==========================================================================
   53. ANIMATION SPEED UTILITIES
   ========================================================================== */

.animation-fast {
    animation-duration: var(--anim-fast) !important;
}

.animation-normal {
    animation-duration: var(--anim-normal) !important;
}

.animation-medium {
    animation-duration: var(--anim-medium) !important;
}

.animation-slow {
    animation-duration: var(--anim-slow) !important;
}


/* ==========================================================================
   54. PAUSE / DISABLE
   ========================================================================== */

.animation-paused {
    animation-play-state: paused !important;
}

.no-animation,
.animation-none {
    animation: none !important;
    transition: none !important;
}


/* ==========================================================================
   55. PERFORMANCE
   ========================================================================== */

.animate-fade-up,
.animate-fade-down,
.animate-fade-left,
.animate-fade-right,
.animate-slide-up,
.animate-slide-down,
.animate-slide-left,
.animate-slide-right,
.animate-scale-in,
.animate-pop,
.profile-card.animate-in,
.match-card.animate-in,
.chat-message-new {
    backface-visibility: hidden;
}


/* ==========================================================================
   56. REDUCED MOTION ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }

    .animate-fade-in,
    .animate-fade-out,
    .animate-fade-up,
    .animate-fade-down,
    .animate-fade-left,
    .animate-fade-right,
    .animate-slide-up,
    .animate-slide-down,
    .animate-slide-left,
    .animate-slide-right,
    .animate-scale-in,
    .animate-scale-out,
    .animate-pop,
    .animate-bounce-soft,
    .animate-pulse,
    .animate-heart,
    .animate-spin,
    .animate-premium-glow,
    .animate-maroon-glow,
    .animate-float,
    .online-pulse,
    .notification-pulse,
    .gold-shimmer,
    .premium-shimmer,
    .shimmer,
    .skeleton,
    .typing-indicator span,
    .loading-dots span,
    .premium-spark {
        animation: none !important;
    }

    .reveal,
    .reveal-left,
    .reveal-right {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .stagger-children > * {
        opacity: 1 !important;
        animation: none !important;
    }

    .hover-lift:hover,
    .hover-image-zoom:hover img,
    .btn:active,
    button:active,
    .button:active {
        transform: none !important;
    }
}


/* ==========================================================================
   57. PRINT
   ========================================================================== */

@media print {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

    .reveal,
    .reveal-left,
    .reveal-right,
    .stagger-children > * {
        opacity: 1 !important;
    }
}