/* ================================================================
BAYTORIA FRONTEND — ANIMATIONS & REVEAL SYSTEM
─────────────────────────────────────────────────────────────────
الاستخدام:
…
← fade-up افتراضي
…
← من اليسار
…
← من اليمين
…
← تكبير
…
← قلب خفيف
…
← تأخير بـ ms
================================================================ */
/* ----------------------------------------------------------------
1. SCROLL REVEAL — الظهور عند التمرير
---------------------------------------------------------------- */
/* الحالة المبدئية — قبل الدخول في الشاشة */
[data-reveal] {
opacity: 0;
will-change: opacity, transform;
transition:
opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* الحالة المرئية — بعد الدخول */
[data-reveal].is-visible {
opacity: 1;
transform: none !important;
}
/* أنواع الحركة */
[data-reveal],
[data-reveal="fade-up"] { transform: translateY(32px); }
[data-reveal="fade-down"] { transform: translateY(-32px); }
[data-reveal="fade-left"] { transform: translateX(32px); } /* من اليمين للأرابيك */
[data-reveal="fade-right"] { transform: translateX(-32px); }
[data-reveal="zoom"] { transform: scale(0.92); }
[data-reveal="zoom-up"] { transform: translateY(20px) scale(0.94); }
[data-reveal="flip"] { transform: perspective(600px) rotateX(8deg) translateY(16px); }
[data-reveal="none"] { transform: none; }
/* تأخيرات مبنية على data-delay (تُطبَّق بـ JS أيضاً) */
[data-reveal][data-delay="100"] { transition-delay: 100ms; }
[data-reveal][data-delay="150"] { transition-delay: 150ms; }
[data-reveal][data-delay="200"] { transition-delay: 200ms; }
[data-reveal][data-delay="300"] { transition-delay: 300ms; }
[data-reveal][data-delay="400"] { transition-delay: 400ms; }
[data-reveal][data-delay="500"] { transition-delay: 500ms; }
[data-reveal][data-delay="600"] { transition-delay: 600ms; }
[data-reveal][data-delay="700"] { transition-delay: 700ms; }
/* ── Stagger: أطفال data-stagger يظهرون بتتابع ── */
[data-stagger] > * {
opacity: 0;
transform: translateY(24px);
will-change: opacity, transform;
transition:
opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-stagger].is-visible > * { opacity: 1; transform: none; }
/* تأخير تلقائي لكل طفل (يُضاف بـ JS) */
[data-stagger].is-visible > *:nth-child(1) { transition-delay: 50ms; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: 120ms; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: 190ms; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: 260ms; }
[data-stagger].is-visible > *:nth-child(5) { transition-delay: 330ms; }
[data-stagger].is-visible > *:nth-child(6) { transition-delay: 400ms; }
[data-stagger].is-visible > *:nth-child(7) { transition-delay: 470ms; }
[data-stagger].is-visible > *:nth-child(8) { transition-delay: 540ms; }
[data-stagger].is-visible > *:nth-child(9) { transition-delay: 610ms; }
[data-stagger].is-visible > *:nth-child(n+10) { transition-delay: 680ms; }
/* احترام تفضيل إيقاف الحركة */
@media (prefers-reduced-motion: reduce) {
[data-reveal],
[data-stagger] > * {
transition: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* ----------------------------------------------------------------
2. PAGE LOAD ANIMATIONS — عند تحميل الصفحة
---------------------------------------------------------------- */
@keyframes bt-fade-in-up {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: none; }
}
@keyframes bt-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes bt-scale-in {
from { opacity: 0; transform: scale(0.93); }
to { opacity: 1; transform: none; }
}
@keyframes bt-slide-in-right {
from { opacity: 0; transform: translateX(-40px); }
to { opacity: 1; transform: none; }
}
@keyframes bt-slide-in-left {
from { opacity: 0; transform: translateX(40px); }
to { opacity: 1; transform: none; }
}
.bt-anim-fade-up { animation: bt-fade-in-up 0.7s cubic-bezier(0.22,0.61,0.36,1) both; }
.bt-anim-fade-in { animation: bt-fade-in 0.6s ease both; }
.bt-anim-scale-in { animation: bt-scale-in 0.65s cubic-bezier(0.22,0.61,0.36,1) both; }
.bt-anim-slide-right{ animation: bt-slide-in-right 0.65s cubic-bezier(0.22,0.61,0.36,1) both; }
.bt-anim-slide-left { animation: bt-slide-in-left 0.65s cubic-bezier(0.22,0.61,0.36,1) both; }
/* تأخيرات للحركات عند التحميل */
.bt-anim-d1 { animation-delay: 100ms; }
.bt-anim-d2 { animation-delay: 200ms; }
.bt-anim-d3 { animation-delay: 350ms; }
.bt-anim-d4 { animation-delay: 500ms; }
.bt-anim-d5 { animation-delay: 650ms; }
/* ----------------------------------------------------------------
3. CONTINUOUS ANIMATIONS — حركات مستمرة
---------------------------------------------------------------- */
/* طفو — للصور والعناصر الديكورية */
@keyframes bt-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
.bt-float { animation: bt-float 4s ease-in-out infinite; }
.bt-float--slow { animation: bt-float 6s ease-in-out infinite; }
/* نبض ناعم */
@keyframes bt-pulse-soft {
0%, 100% { opacity: 1; }
50% { opacity: 0.65; }
}
.bt-pulse-soft { animation: bt-pulse-soft 2.5s ease-in-out infinite; }
/* دوران بطيء */
@keyframes bt-spin-slow {
to { transform: rotate(360deg); }
}
.bt-spin-slow { animation: bt-spin-slow 12s linear infinite; }
/* توهج ذهبي */
@keyframes bt-glow-gold {
0%, 100% { box-shadow: 0 0 0 0 rgba(212,178,101,0); }
50% { box-shadow: 0 0 20px 4px rgba(212,178,101,.35); }
}
.bt-glow-gold { animation: bt-glow-gold 2.5s ease-in-out infinite; }
/* وميض نقطة حية */
@keyframes bt-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.2; }
}
.bt-blink { animation: bt-blink 1.4s ease-in-out infinite; }
/* شريط خبر */
@keyframes bt-marquee-left {
0% { transform: translateX(-38%); }
100% { transform: translateX(100%); }
}
.animate-marquee-left {
display: inline-block;
white-space: nowrap;
animation: bt-marquee-left 40s linear infinite;
}
@keyframes bt-marquee {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.animate-marquee { animation: bt-marquee 30s linear infinite; }
/* بريق زر (shine effect) */
@keyframes bt-shine {
from { left: -60%; }
to { left: 110%; }
}
.bt-shine-btn {
position: relative;
overflow: hidden;
}
.bt-shine-btn::after {
content: "";
position: absolute;
top: 0;
left: -60%;
width: 40%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255,255,255,.2),
transparent
);
transform: skewX(-15deg);
}
.bt-shine-btn:hover::after {
animation: bt-shine 0.55s ease forwards;
}
/* ----------------------------------------------------------------
4. HOVER MICRO-INTERACTIONS — تفاعلات الـ hover
---------------------------------------------------------------- */
/* رفع خفيف */
.bt-hover-lift {
transition: transform var(--bt-transition-base), box-shadow var(--bt-transition-base);
}
.bt-hover-lift:hover {
transform: translateY(-4px);
box-shadow: var(--bt-shadow-lg);
}
/* تكبير خفيف */
.bt-hover-scale {
transition: transform var(--bt-transition-base);
}
.bt-hover-scale:hover { transform: scale(1.04); }
/* إضاءة الحدود */
.bt-hover-border {
border: 1.5px solid transparent;
transition: border-color var(--bt-transition-base);
}
.bt-hover-border:hover { border-color: rgba(212,178,101,.5); }
/* ----------------------------------------------------------------
5. BACKWARD COMPATIBILITY — مع الكود القديم
---------------------------------------------------------------- */
/* كانت تُستخدم في properties-active */
#cardsGrid [data-card] {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
#cardsGrid [data-card].show {
opacity: 1;
transform: none;
}
/* كانت تُستخدم في properties-sold */
.feature-card {
opacity: 0;
transform: translateY(10px) scale(.98);
transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.25s ease;
}
.feature-card.in {
opacity: 1;
transform: none;
}
.feature-card:hover {
transform: translateY(-3px) scale(1.01);
box-shadow: 0 10px 18px -12px rgba(0,0,0,.25);
}
.reveal-y,
[data-anim].reveal-y {
opacity: 0;
transform: translateY(14px);
transition: opacity .6s cubic-bezier(.2,.65,.3,1), transform .6s cubic-bezier(.2,.65,.3,1);
}
.in {
opacity: 1 !important;
transform: none !important;
}
.icon-badge::after {
content: "";
position: absolute;
right: -6px;
bottom: -4px;
width: 16px;
height: 16px;
border-radius: 9999px;
background: #D4B26533;
filter: blur(1px);
}