/**
 * Retm Animations & Effects
 * يمكن حذف هذا الملف للتراجع عن التأثيرات
 */

/* ===== RETM STAR IDENTITY ===== */
/* النجمة الأصلية من لوغو رتم */

/* Inline SVG Star Shape - Original from Logo */
.retm-star {
    display: inline-block;
    width: 1em;
    height: 1em;
    background: #ED2C85;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='104 -1 22 22'%3E%3Cpath d='M111.988 15.4785C109.883 15.8298 107.721 17.8443 106.237 15.0842C104.731 12.2883 107.657 11.6574 108.975 10.1877C108.24 8.33812 104.486 7.91515 106.223 4.93282C107.765 2.28743 109.847 4.03667 111.93 4.71773C112.326 2.7319 111.887 -0.0425203 114.769 0.000494149C117.479 0.0435086 117.63 2.48098 117.551 4.91847C119.828 3.78575 121.976 2.48816 123.489 4.88263C125.399 7.91515 121.392 8.19474 120.693 10.0515C121.551 11.8366 125.406 12.1664 123.417 15.2133C121.846 17.6149 119.72 16.2313 117.782 15.1918C117.292 17.2349 117.746 19.7513 115.007 19.9305C111.952 20.1312 112.29 17.4715 111.98 15.4785H111.988Z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='104 -1 22 22'%3E%3Cpath d='M111.988 15.4785C109.883 15.8298 107.721 17.8443 106.237 15.0842C104.731 12.2883 107.657 11.6574 108.975 10.1877C108.24 8.33812 104.486 7.91515 106.223 4.93282C107.765 2.28743 109.847 4.03667 111.93 4.71773C112.326 2.7319 111.887 -0.0425203 114.769 0.000494149C117.479 0.0435086 117.63 2.48098 117.551 4.91847C119.828 3.78575 121.976 2.48816 123.489 4.88263C125.399 7.91515 121.392 8.19474 120.693 10.0515C121.551 11.8366 125.406 12.1664 123.417 15.2133C121.846 17.6149 119.72 16.2313 117.782 15.1918C117.292 17.2349 117.746 19.7513 115.007 19.9305C111.952 20.1312 112.29 17.4715 111.98 15.4785H111.988Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Star with gradient */
.retm-star-gradient {
    display: inline-block;
    width: 1em;
    height: 1em;
    background: linear-gradient(135deg, #613A96, #ED2C85);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='104 -1 22 22'%3E%3Cpath d='M111.988 15.4785C109.883 15.8298 107.721 17.8443 106.237 15.0842C104.731 12.2883 107.657 11.6574 108.975 10.1877C108.24 8.33812 104.486 7.91515 106.223 4.93282C107.765 2.28743 109.847 4.03667 111.93 4.71773C112.326 2.7319 111.887 -0.0425203 114.769 0.000494149C117.479 0.0435086 117.63 2.48098 117.551 4.91847C119.828 3.78575 121.976 2.48816 123.489 4.88263C125.399 7.91515 121.392 8.19474 120.693 10.0515C121.551 11.8366 125.406 12.1664 123.417 15.2133C121.846 17.6149 119.72 16.2313 117.782 15.1918C117.292 17.2349 117.746 19.7513 115.007 19.9305C111.952 20.1312 112.29 17.4715 111.98 15.4785H111.988Z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='104 -1 22 22'%3E%3Cpath d='M111.988 15.4785C109.883 15.8298 107.721 17.8443 106.237 15.0842C104.731 12.2883 107.657 11.6574 108.975 10.1877C108.24 8.33812 104.486 7.91515 106.223 4.93282C107.765 2.28743 109.847 4.03667 111.93 4.71773C112.326 2.7319 111.887 -0.0425203 114.769 0.000494149C117.479 0.0435086 117.63 2.48098 117.551 4.91847C119.828 3.78575 121.976 2.48816 123.489 4.88263C125.399 7.91515 121.392 8.19474 120.693 10.0515C121.551 11.8366 125.406 12.1664 123.417 15.2133C121.846 17.6149 119.72 16.2313 117.782 15.1918C117.292 17.2349 117.746 19.7513 115.007 19.9305C111.952 20.1312 112.29 17.4715 111.98 15.4785H111.988Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Star sizes */
.retm-star-xs { width: 12px; height: 12px; }
.retm-star-sm { width: 16px; height: 16px; }
.retm-star-md { width: 24px; height: 24px; }
.retm-star-lg { width: 32px; height: 32px; }
.retm-star-xl { width: 48px; height: 48px; }
.retm-star-2xl { width: 64px; height: 64px; }

/* Floating decorative stars */
.star-decoration {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.star-decoration .retm-star {
    animation: floatStar 8s ease-in-out infinite;
    opacity: 0.6;
}

.star-decoration:nth-child(2) .retm-star {
    animation-delay: -2s;
    animation-duration: 10s;
}

.star-decoration:nth-child(3) .retm-star {
    animation-delay: -4s;
    animation-duration: 6s;
}

.star-decoration:nth-child(4) .retm-star {
    animation-delay: -6s;
    animation-duration: 9s;
}

@keyframes floatStar {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-15px) rotate(15deg);
    }
    50% {
        transform: translateY(-5px) rotate(-10deg);
    }
    75% {
        transform: translateY(-20px) rotate(10deg);
    }
}

/* Spinning star */
.retm-star-spin {
    animation: spinStar 10s linear infinite;
}

@keyframes spinStar {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Pulsing star */
.retm-star-pulse {
    animation: pulseStar 2s ease-in-out infinite;
}

@keyframes pulseStar {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
}

/* Star as list bullet */
ul.star-list {
    list-style: none;
    padding: 0;
}

ul.star-list li {
    position: relative;
    padding-right: 1.75rem;
    margin-bottom: 0.75rem;
}

ul.star-list li::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0.35em;
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, #613A96, #ED2C85);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='104 -1 22 22'%3E%3Cpath d='M111.988 15.4785C109.883 15.8298 107.721 17.8443 106.237 15.0842C104.731 12.2883 107.657 11.6574 108.975 10.1877C108.24 8.33812 104.486 7.91515 106.223 4.93282C107.765 2.28743 109.847 4.03667 111.93 4.71773C112.326 2.7319 111.887 -0.0425203 114.769 0.000494149C117.479 0.0435086 117.63 2.48098 117.551 4.91847C119.828 3.78575 121.976 2.48816 123.489 4.88263C125.399 7.91515 121.392 8.19474 120.693 10.0515C121.551 11.8366 125.406 12.1664 123.417 15.2133C121.846 17.6149 119.72 16.2313 117.782 15.1918C117.292 17.2349 117.746 19.7513 115.007 19.9305C111.952 20.1312 112.29 17.4715 111.98 15.4785H111.988Z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='104 -1 22 22'%3E%3Cpath d='M111.988 15.4785C109.883 15.8298 107.721 17.8443 106.237 15.0842C104.731 12.2883 107.657 11.6574 108.975 10.1877C108.24 8.33812 104.486 7.91515 106.223 4.93282C107.765 2.28743 109.847 4.03667 111.93 4.71773C112.326 2.7319 111.887 -0.0425203 114.769 0.000494149C117.479 0.0435086 117.63 2.48098 117.551 4.91847C119.828 3.78575 121.976 2.48816 123.489 4.88263C125.399 7.91515 121.392 8.19474 120.693 10.0515C121.551 11.8366 125.406 12.1664 123.417 15.2133C121.846 17.6149 119.72 16.2313 117.782 15.1918C117.292 17.2349 117.746 19.7513 115.007 19.9305C111.952 20.1312 112.29 17.4715 111.98 15.4785H111.988Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* LTR list */
html[dir="ltr"] ul.star-list li {
    padding-right: 0;
    padding-left: 1.75rem;
}

html[dir="ltr"] ul.star-list li::before {
    right: auto;
    left: 0;
}

/* Star divider */
.star-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 3rem 0;
}

.star-divider::before,
.star-divider::after {
    content: '';
    flex: 1;
    max-width: 150px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(97, 58, 150, 0.3), transparent);
}

.star-divider .retm-star {
    flex-shrink: 0;
}

/* Section title with star */
.title-with-star {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.title-with-star .retm-star {
    flex-shrink: 0;
}

/* Card corner star */
.card-star {
    position: absolute;
    top: -8px;
    right: -8px;
}

html[dir="ltr"] .card-star {
    right: auto;
    left: -8px;
}

/* Background stars pattern */
.stars-bg {
    position: relative;
}

.stars-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23613A96' opacity='0.05'%3E%3Ccircle cx='50' cy='15' r='15'/%3E%3Ccircle cx='80' cy='32.5' r='15'/%3E%3Ccircle cx='80' cy='67.5' r='15'/%3E%3Ccircle cx='50' cy='85' r='15'/%3E%3Ccircle cx='20' cy='67.5' r='15'/%3E%3Ccircle cx='20' cy='32.5' r='15'/%3E%3Ccircle cx='50' cy='50' r='25'/%3E%3C/svg%3E");
    background-size: 60px 60px;
    background-position: center;
    opacity: 0.03;
    pointer-events: none;
}

/* Hero floating stars container */
.hero-stars {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-star {
    position: absolute;
    opacity: 0.15;
}

.hero-star:nth-child(1) {
    top: 15%;
    left: 10%;
    animation: floatStar 12s ease-in-out infinite;
}

.hero-star:nth-child(2) {
    top: 25%;
    right: 15%;
    animation: floatStar 10s ease-in-out infinite -3s;
}

.hero-star:nth-child(3) {
    bottom: 30%;
    left: 20%;
    animation: floatStar 8s ease-in-out infinite -5s;
}

.hero-star:nth-child(4) {
    bottom: 20%;
    right: 10%;
    animation: floatStar 14s ease-in-out infinite -2s;
}

.hero-star:nth-child(5) {
    top: 50%;
    left: 5%;
    animation: floatStar 11s ease-in-out infinite -4s;
}

.hero-star:nth-child(6) {
    top: 40%;
    right: 5%;
    animation: floatStar 9s ease-in-out infinite -6s;
}

/* Number/Step with star background */
.star-number {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
}

.star-number::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #613A96, #ED2C85);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='104 -1 22 22'%3E%3Cpath d='M111.988 15.4785C109.883 15.8298 107.721 17.8443 106.237 15.0842C104.731 12.2883 107.657 11.6574 108.975 10.1877C108.24 8.33812 104.486 7.91515 106.223 4.93282C107.765 2.28743 109.847 4.03667 111.93 4.71773C112.326 2.7319 111.887 -0.0425203 114.769 0.000494149C117.479 0.0435086 117.63 2.48098 117.551 4.91847C119.828 3.78575 121.976 2.48816 123.489 4.88263C125.399 7.91515 121.392 8.19474 120.693 10.0515C121.551 11.8366 125.406 12.1664 123.417 15.2133C121.846 17.6149 119.72 16.2313 117.782 15.1918C117.292 17.2349 117.746 19.7513 115.007 19.9305C111.952 20.1312 112.29 17.4715 111.98 15.4785H111.988Z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='104 -1 22 22'%3E%3Cpath d='M111.988 15.4785C109.883 15.8298 107.721 17.8443 106.237 15.0842C104.731 12.2883 107.657 11.6574 108.975 10.1877C108.24 8.33812 104.486 7.91515 106.223 4.93282C107.765 2.28743 109.847 4.03667 111.93 4.71773C112.326 2.7319 111.887 -0.0425203 114.769 0.000494149C117.479 0.0435086 117.63 2.48098 117.551 4.91847C119.828 3.78575 121.976 2.48816 123.489 4.88263C125.399 7.91515 121.392 8.19474 120.693 10.0515C121.551 11.8366 125.406 12.1664 123.417 15.2133C121.846 17.6149 119.72 16.2313 117.782 15.1918C117.292 17.2349 117.746 19.7513 115.007 19.9305C111.952 20.1312 112.29 17.4715 111.98 15.4785H111.988Z'/%3E%3C/svg%3E") center/contain no-repeat;
    z-index: -1;
}

/* Feature icon with star shape */
.star-icon-bg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    position: relative;
}

.star-icon-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(97, 58, 150, 0.15), rgba(237, 44, 133, 0.15));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='104 -1 22 22'%3E%3Cpath d='M111.988 15.4785C109.883 15.8298 107.721 17.8443 106.237 15.0842C104.731 12.2883 107.657 11.6574 108.975 10.1877C108.24 8.33812 104.486 7.91515 106.223 4.93282C107.765 2.28743 109.847 4.03667 111.93 4.71773C112.326 2.7319 111.887 -0.0425203 114.769 0.000494149C117.479 0.0435086 117.63 2.48098 117.551 4.91847C119.828 3.78575 121.976 2.48816 123.489 4.88263C125.399 7.91515 121.392 8.19474 120.693 10.0515C121.551 11.8366 125.406 12.1664 123.417 15.2133C121.846 17.6149 119.72 16.2313 117.782 15.1918C117.292 17.2349 117.746 19.7513 115.007 19.9305C111.952 20.1312 112.29 17.4715 111.98 15.4785H111.988Z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='104 -1 22 22'%3E%3Cpath d='M111.988 15.4785C109.883 15.8298 107.721 17.8443 106.237 15.0842C104.731 12.2883 107.657 11.6574 108.975 10.1877C108.24 8.33812 104.486 7.91515 106.223 4.93282C107.765 2.28743 109.847 4.03667 111.93 4.71773C112.326 2.7319 111.887 -0.0425203 114.769 0.000494149C117.479 0.0435086 117.63 2.48098 117.551 4.91847C119.828 3.78575 121.976 2.48816 123.489 4.88263C125.399 7.91515 121.392 8.19474 120.693 10.0515C121.551 11.8366 125.406 12.1664 123.417 15.2133C121.846 17.6149 119.72 16.2313 117.782 15.1918C117.292 17.2349 117.746 19.7513 115.007 19.9305C111.952 20.1312 112.29 17.4715 111.98 15.4785H111.988Z'/%3E%3C/svg%3E") center/contain no-repeat;
    z-index: 0;
}

.star-icon-bg svg,
.star-icon-bg i {
    position: relative;
    z-index: 1;
}

/* ===== 1. SCROLL REVEAL ===== */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.reveal-right {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.reveal-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-scale.visible {
    opacity: 1;
    transform: scale(1);
}

/* Staggered animations */
.stagger > .reveal:nth-child(1),
.stagger > [class*="reveal"]:nth-child(1) { transition-delay: 0.1s; }
.stagger > .reveal:nth-child(2),
.stagger > [class*="reveal"]:nth-child(2) { transition-delay: 0.15s; }
.stagger > .reveal:nth-child(3),
.stagger > [class*="reveal"]:nth-child(3) { transition-delay: 0.2s; }
.stagger > .reveal:nth-child(4),
.stagger > [class*="reveal"]:nth-child(4) { transition-delay: 0.25s; }
.stagger > .reveal:nth-child(5),
.stagger > [class*="reveal"]:nth-child(5) { transition-delay: 0.3s; }
.stagger > .reveal:nth-child(6),
.stagger > [class*="reveal"]:nth-child(6) { transition-delay: 0.35s; }

/* ===== 2. MAGNETIC BUTTONS ===== */
.magnetic-btn {
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.magnetic-btn::before {
    content: '';
    position: absolute;
    inset: -4px;
    background: inherit;
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    filter: blur(15px);
    transition: opacity 0.3s;
}

.magnetic-btn:hover {
    transform: scale(1.03) translateY(-2px);
}

.magnetic-btn:hover::before {
    opacity: 0.5;
}

.magnetic-btn:active {
    transform: scale(0.98);
}

/* ===== 3. 3D TILT CARDS ===== */
.tilt-card {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.3s ease;
}

.tilt-card .card-content,
.tilt-card > div:first-child {
    transform: translateZ(20px);
    transition: transform 0.3s ease;
}

.tilt-card:hover .card-content,
.tilt-card:hover > div:first-child {
    transform: translateZ(30px);
}

/* ===== 4. GLASS CARD ENHANCEMENTS ===== */
.glass-enhanced {
    position: relative;
    overflow: hidden;
}

/* Gradient border on hover */
.glass-enhanced::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(97, 58, 150, 0.5),
        transparent 50%,
        rgba(237, 44, 133, 0.5)
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

/* Shine effect */
.glass-enhanced::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.03) 50%,
        transparent 70%
    );
    transform: rotate(45deg) translateX(-100%);
    transition: transform 0.6s;
    pointer-events: none;
}

.glass-enhanced:hover {
    transform: translateY(-5px);
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.2),
        0 0 40px rgba(97, 58, 150, 0.1);
}

.glass-enhanced:hover::before {
    opacity: 1;
}

.glass-enhanced:hover::after {
    transform: rotate(45deg) translateX(100%);
}

/* ===== 5. ANIMATED COUNTERS ===== */
.counter-animate {
    display: inline-block;
}

/* ===== 6. HERO ENHANCEMENTS ===== */
.hero-orbs {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    animation: floatOrb 8s ease-in-out infinite;
}

.hero-orb-1 {
    width: 400px;
    height: 400px;
    background: rgba(97, 58, 150, 0.4);
    top: 10%;
    right: 10%;
    animation-delay: 0s;
}

.hero-orb-2 {
    width: 300px;
    height: 300px;
    background: rgba(237, 44, 133, 0.3);
    bottom: 20%;
    left: 15%;
    animation-delay: -3s;
}

.hero-orb-3 {
    width: 200px;
    height: 200px;
    background: rgba(139, 92, 246, 0.25);
    top: 50%;
    left: 50%;
    animation-delay: -5s;
}

@keyframes floatOrb {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-30px) scale(1.05);
    }
}

/* Gradient mesh background */
.gradient-mesh {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(97, 58, 150, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(237, 44, 133, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(97, 58, 150, 0.15) 0%, transparent 70%);
    animation: meshMove 25s ease-in-out infinite;
    pointer-events: none;
}

@keyframes meshMove {
    0%, 100% { background-position: 0% 0%, 100% 100%, 50% 50%; }
    25% { background-position: 100% 0%, 0% 100%, 25% 75%; }
    50% { background-position: 100% 100%, 0% 0%, 75% 25%; }
    75% { background-position: 0% 100%, 100% 0%, 50% 50%; }
}

/* ===== 7. ANIMATED GRADIENT TEXT ===== */
.gradient-text-animated {
    background: linear-gradient(135deg, #613A96, #ED2C85, #613A96);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 4s ease infinite;
}

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

/* ===== 8. FLOATING ELEMENTS ===== */
.float-gentle {
    animation: floatGentle 6s ease-in-out infinite;
}

.float-gentle:nth-child(2n) {
    animation-delay: -2s;
    animation-duration: 7s;
}

.float-gentle:nth-child(3n) {
    animation-delay: -4s;
    animation-duration: 5s;
}

@keyframes floatGentle {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-12px) rotate(1deg);
    }
    75% {
        transform: translateY(8px) rotate(-1deg);
    }
}

/* ===== 9. PROGRESS BARS ===== */
.progress-animated .progress-fill {
    width: 0;
    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-animated.visible .progress-fill {
    width: var(--progress, 100%);
}

/* ===== 10. BENTO GRID ===== */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 180px);
    gap: 1rem;
}

.bento-grid .bento-item:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
}

.bento-grid .bento-item:nth-child(2) {
    grid-column: span 2;
}

.bento-grid .bento-item:nth-child(5) {
    grid-column: span 2;
}

@media (max-width: 768px) {
    .bento-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .bento-grid .bento-item:nth-child(1),
    .bento-grid .bento-item:nth-child(2),
    .bento-grid .bento-item:nth-child(5) {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/* ===== 11. CURSOR TRAIL ===== */
.cursor-trail {
    position: fixed;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, rgba(97, 58, 150, 0.6), rgba(237, 44, 133, 0.6));
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    filter: blur(8px);
    transition: opacity 0.3s;
    mix-blend-mode: screen;
}

.cursor-trail.active {
    opacity: 1;
}

/* Hide on mobile/touch devices */
@media (hover: none) {
    .cursor-trail {
        display: none;
    }
}

/* ===== 12. BUTTON GLOW EFFECT ===== */
.btn-glow {
    position: relative;
    overflow: visible;
}

.btn-glow::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, #613A96, #ED2C85);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    filter: blur(12px);
    transition: opacity 0.3s;
}

.btn-glow:hover::after {
    opacity: 0.6;
}

/* ===== 13. HOVER LIFT ===== */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* ===== 14. PULSE ANIMATION ===== */
.pulse-soft {
    animation: pulseSoft 3s ease-in-out infinite;
}

@keyframes pulseSoft {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.02);
        opacity: 0.9;
    }
}

/* ===== ACCESSIBILITY: Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hero-orb,
    .gradient-mesh,
    .float-gentle,
    .gradient-text-animated,
    .pulse-soft {
        animation: none;
    }

    .glass-enhanced::after,
    .magnetic-btn::before,
    .btn-glow::after {
        display: none;
    }
}