@keyframes rise {
    from { opacity: 0; transform: translateY(26px) }
    to   { opacity: 1; transform: none }
}

@keyframes diamond-in {
    from { opacity: 0; transform: rotate(-45deg) scale(.55) }
    to   { opacity: .9; transform: rotate(45deg) scale(1) }
}

@keyframes band-in {
    from { transform: translateX(14%) rotate(-2deg) }
    to   { transform: translateX(0) rotate(-2deg) }
}

.hero h1 { animation: rise .8s cubic-bezier(.2, .7, .2, 1) backwards }
.hero p  { animation: rise .8s .15s cubic-bezier(.2, .7, .2, 1) backwards }
.hero .btn { animation: rise .8s .3s cubic-bezier(.2, .7, .2, 1) backwards }
.hero .btn.o { animation-delay: .4s }
.hero .d { animation: diamond-in 1.2s .1s cubic-bezier(.2, .7, .2, 1) backwards, diamond-sway 9s 1.3s ease-in-out infinite }
.hero:after { animation: band-in 1s cubic-bezier(.2, .7, .2, 1) backwards, band-drift 7s 1s ease-in-out infinite alternate }

/* عنوان الصفحات الداخلية */
.pb h1 { animation: rise .6s cubic-bezier(.2, .7, .2, 1) backwards }

/* ===== 2) الظهور عند التمرير (هادئ وقصير) ===== */
.js .rv {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--d, 0s);
}
.js .rv.in { opacity: 1; transform: none }

/* الخط الأخضر تحت العناوين يمتد */
.js .ln { transform: scaleX(0); transform-origin: right; transition: transform .6s .1s ease }
html[dir=ltr].js .ln { transform-origin: left }
.js .ln.in { transform: scaleX(1) }

/* ===== 3) تفاعل عند اللمس (استجابة لحركة المستخدم) ===== */
.k, .doc, .tags span {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease
}
.k:hover { transform: translateY(-4px); box-shadow: 0 10px 22px -12px rgba(43, 52, 54, .35) }
.doc:hover { transform: translateX(-6px); border-color: var(--or) }
html[dir=ltr] .doc:hover { transform: translateX(6px) }
.tags span:hover { background: var(--ink); color: #fff; border-color: var(--ink) }

.btn { transition: transform .2s ease, filter .2s ease }
.btn:hover { transform: translateY(-2px); filter: brightness(1.08) }
.btn:active { transform: translateY(0) }

/* ألماسة البطاقات تدور عند تمرير الماوس */
.dm { transition: transform .45s cubic-bezier(.2, .7, .2, 1) }
.k:hover .dm { transform: rotate(225deg) scale(.7) }

/* روابط القائمة: الخط يمتد من اتجاه القراءة */
nav a { position: relative; border-bottom: 0 }
nav a:after {
    content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
    background: var(--or); transform: scaleX(0); transform-origin: right; transition: transform .25s ease
}
html[dir=ltr] nav a:after { transform-origin: left }
nav a.on:after, nav a:hover:after { transform: scaleX(1) }

/* قائمة الموبايل تنزل بنعومة */
@media(max-width:800px) {
    nav.open { animation: rise .3s ease backwards }
}

/* هيدر يظهر ظل خفيف عند التمرير */
header { transition: box-shadow .25s ease }
header.sc { box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .35) }

/* ===== حركة دائمة في الهيرو ===== */
@keyframes diamond-sway {
    0%, 100% { transform: rotate(45deg) translate(0, 0) }
    50%      { transform: rotate(52deg) translate(-10px, -16px) }
}

@keyframes band-drift {
    from { transform: translateX(0) rotate(-2deg) }
    to   { transform: translateX(-3%) rotate(-1.4deg) }
}

@keyframes float-small {
    0%, 100% { transform: rotate(45deg) translateY(0) }
    50%      { transform: rotate(135deg) translateY(-22px) }
}

.hero .c { position: relative; z-index: 1 }

/* معين صغير بإطار يطفو بجانب الكبير */
.hero:before {
    content: "";
    position: absolute;
    inset-inline-end: 24%;
    top: 70px;
    width: 46px;
    height: 46px;
    border: 3px solid var(--or);
    border-radius: 7px;
    opacity: .75;
    transform: rotate(45deg);
    animation: float-small 6s ease-in-out infinite;
}

@media(max-width:800px) {
    .hero .d { animation: diamond-in 1.2s .1s cubic-bezier(.2, .7, .2, 1) backwards }
    .hero:before { opacity: .75; width: 34px; height: 34px; top: auto; bottom: 92px; inset-inline-end: 14% }
}

/* ===== احترام من يفضّل تقليل الحركة ===== */
@media (prefers-reduced-motion: reduce) {
    *, *:before, *:after {
        animation: none !important;
        transition: none !important;
    }
    .js .rv, .js .ln { opacity: 1; transform: none }
}