/* ==========================================================================
   TEXTILA — Hero 3D
   CSS فقط · بدون مكتبات · محسّن للاتصال البطيء
   ========================================================================== */

/* ===== فيديو الخلفية ===== */
.hero-video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* الفيديو يبدأ بشكل ناعم */
    animation: videoFadeIn 1.5s ease forwards;
}

@keyframes videoFadeIn {
    from { opacity: 0; transform: scale(1.05); }
    to   { opacity: 1; transform: scale(1); }
}

/* Overlay فوق الفيديو — يجعل النص مقروءاً */
.hero-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(251, 247, 240, 0.75) 0%,
        rgba(240, 230, 208, 0.55) 40%,
        rgba(251, 247, 240, 0.65) 100%
    );
    /* طبقة ذهبية خفيفة */
    backdrop-filter: none;
}

/* على الجوال: الفيديو يعمل لكن بحجم أصغر */
@media (max-width: 640px) {
    .hero-video {
        display: block;
        object-position: center center;
    }
    .hero-video-wrap {
        background: none;
    }
}

/* ===== WRAPPER ===== */
.hero-3d {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    padding: 0 5vw;
    gap: 2rem;
    background: linear-gradient(135deg, #FBF7F0 0%, #F0E6D0 50%, #FBF7F0 100%);
}

/* ===== خلفية الـ Orbs ===== */
.h3d-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.h3d-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
}

.h3d-orb-1 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(201,169,97,0.25) 0%, transparent 70%);
    top: -10%; right: -5%;
    animation: orbFloat 12s ease-in-out infinite;
}

.h3d-orb-2 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(232,213,168,0.3) 0%, transparent 70%);
    bottom: 10%; left: 0%;
    animation: orbFloat 16s ease-in-out infinite reverse;
}

.h3d-orb-3 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(201,169,97,0.15) 0%, transparent 70%);
    top: 50%; left: 30%;
    animation: orbFloat 20s ease-in-out infinite;
    animation-delay: -8s;
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%       { transform: translate(30px, -20px) scale(1.05); }
    66%       { transform: translate(-15px, 15px) scale(0.97); }
}

/* ===== جزيئات ذهبية (CSS فقط) ===== */
.h3d-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.h3d-particles span {
    position: absolute;
    width: 4px; height: 4px;
    background: var(--color-gold);
    border-radius: 50%;
    opacity: 0;
    animation: particleFly 8s linear infinite;
}

/* توزيع الجزيئات */
.h3d-particles span:nth-child(1)  { left: 10%; animation-delay: 0s;    animation-duration: 9s;  width:3px; height:3px; }
.h3d-particles span:nth-child(2)  { left: 25%; animation-delay: 1.5s;  animation-duration: 11s; }
.h3d-particles span:nth-child(3)  { left: 40%; animation-delay: 0.8s;  animation-duration: 8s;  width:2px; height:2px; }
.h3d-particles span:nth-child(4)  { left: 55%; animation-delay: 3s;    animation-duration: 10s; }
.h3d-particles span:nth-child(5)  { left: 70%; animation-delay: 2s;    animation-duration: 7s;  width:5px; height:5px; }
.h3d-particles span:nth-child(6)  { left: 85%; animation-delay: 4s;    animation-duration: 12s; width:2px; height:2px; }
.h3d-particles span:nth-child(7)  { left: 15%; animation-delay: 5s;    animation-duration: 9s;  }
.h3d-particles span:nth-child(8)  { left: 60%; animation-delay: 1s;    animation-duration: 14s; width:3px; height:3px; }
.h3d-particles span:nth-child(9)  { left: 33%; animation-delay: 6s;    animation-duration: 8s;  }
.h3d-particles span:nth-child(10) { left: 78%; animation-delay: 2.5s;  animation-duration: 11s; width:2px; height:2px; }
.h3d-particles span:nth-child(11) { left: 5%;  animation-delay: 7s;    animation-duration: 13s; }
.h3d-particles span:nth-child(12) { left: 92%; animation-delay: 3.5s;  animation-duration: 9s;  width:4px; height:4px; }

@keyframes particleFly {
    0%   { transform: translateY(110vh) rotate(0deg);   opacity: 0; }
    10%  { opacity: 0.8; }
    90%  { opacity: 0.4; }
    100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; }
}

/* ===== المشهد 3D ===== */
.h3d-scene {
    position: relative;
    width: 50%;
    height: 80vh;
    max-height: 650px;
    flex-shrink: 0;
    perspective: 1200px;
    transform-style: preserve-3d;
    z-index: 2;
}

/* ===== بطاقات المنتجات ===== */
.h3d-card {
    position: absolute;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 80px -20px rgba(42,34,24,0.25),
                0 0 0 1px rgba(201,169,97,0.15);
    transition: transform 0.1s linear; /* سلاسة الـ JS */
    will-change: transform;
    transform-style: preserve-3d;
    cursor: pointer;
}

.h3d-card-inner {
    position: relative;
    width: 100%; height: 100%;
    overflow: hidden;
}

.h3d-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.h3d-card:hover img {
    transform: scale(1.04);
}

/* تأثير اللمعان عند تحريك الماوس */
.h3d-card-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s;
}

.h3d-card:hover .h3d-card-shine {
    opacity: 1;
}

.h3d-card-label {
    position: absolute;
    bottom: 1rem; left: 1rem;
    background: rgba(251,247,240,0.92);
    backdrop-filter: blur(8px);
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-gold-dark);
    font-family: var(--font-body);
    font-weight: 500;
}

/* === مواضع البطاقات الثلاث === */
.h3d-card--back {
    width: 52%;
    height: 55%;
    top: 30%;
    left: 5%;
    animation: cardFloat 7s ease-in-out infinite;
    animation-delay: -2s;
    z-index: 1;
    opacity: 0.85;
    filter: brightness(0.92);
}

.h3d-card--mid {
    width: 58%;
    height: 62%;
    top: 5%;
    right: 0%;
    animation: cardFloat 9s ease-in-out infinite;
    animation-delay: -5s;
    z-index: 3;
}

.h3d-card--front {
    width: 50%;
    height: 54%;
    bottom: 2%;
    right: 10%;
    animation: cardFloat 8s ease-in-out infinite;
    z-index: 4;
}

@keyframes cardFloat {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-18px); }
}

/* === شارة دائرية === */
.h3d-badge {
    position: absolute;
    bottom: 15%;
    left: -2%;
    width: 100px; height: 100px;
    z-index: 5;
    will-change: transform;
    animation: badgeSpin 0s linear; /* الـ JS يتحكم بها */
}

.h3d-badge-svg {
    width: 100%; height: 100%;
    fill: none;
    color: var(--color-gold-dark);
    animation: rotateSlow 20s linear infinite;
    font-family: var(--font-body);
    font-size: 0.5rem;
    letter-spacing: 2px;
}

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

/* ===== محتوى النص ===== */
.h3d-content {
    position: relative;
    z-index: 5;
    flex: 1;
    padding: 6rem 0 4rem;
    max-width: 480px;
}

.h3d-logo {
    height: 90px;
    width: auto;
    margin-bottom: 2rem;
    filter: drop-shadow(0 4px 20px rgba(201,169,97,0.3));
}

.h3d-tagline {
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-gold-dark);
    margin-bottom: 2.5rem;
    opacity: 0.9;
}

.h3d-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

/* ===== إحصائيات ===== */
.h3d-stats {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--color-line);
}

.h3d-stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.h3d-stat-val {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-style: italic;
    color: var(--color-gold-dark);
    line-height: 1;
}

.h3d-stat-lbl {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
}

.h3d-stat-sep {
    width: 1px;
    height: 40px;
    background: var(--color-line);
}

/* ===== سهم للأسفل ===== */
.h3d-scroll-hint {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-gold-dark);
    opacity: 0.7;
    animation: bounce 2.5s ease-in-out infinite;
    z-index: 10;
    transition: opacity 0.3s;
}

.h3d-scroll-hint:hover {
    opacity: 1;
}

@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(8px); }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .hero-3d {
        flex-direction: column-reverse;
        padding: 0 1.5rem;
        padding-top: 100px;
        justify-content: flex-end;
        align-items: center;
    }

    .h3d-scene {
        width: 100%;
        height: 55vw;
        max-height: 380px;
    }

    .h3d-content {
        padding: 2rem 0 1rem;
        text-align: center;
        max-width: 100%;
    }

    .h3d-logo {
        height: 70px;
        margin: 0 auto 1.5rem;
        display: block;
    }

    .h3d-actions {
        justify-content: center;
    }

    .h3d-stats {
        justify-content: center;
    }

    .h3d-badge {
        width: 80px; height: 80px;
        bottom: 5%; left: 5%;
    }
}

@media (max-width: 640px) {
    .h3d-scene {
        height: 65vw;
    }

    .h3d-card--back  { width: 48%; height: 50%; }
    .h3d-card--mid   { width: 55%; height: 58%; }
    .h3d-card--front { width: 46%; height: 50%; }

    /* تقليل الجزيئات على الجوال */
    .h3d-particles span:nth-child(n+7) {
        display: none;
    }

    /* إيقاف الـ orb blur الثقيل على الجوال الضعيف */
    .h3d-orb {
        filter: blur(40px);
    }
}

/* ===== Reduced Motion (احترام إعدادات إمكانية الوصول) ===== */
@media (prefers-reduced-motion: reduce) {
    .h3d-card,
    .h3d-orb,
    .h3d-badge-svg,
    .h3d-particles span,
    .h3d-scroll-hint {
        animation: none !important;
    }
}

/* ==========================================================================
   SCROLL-DRIVEN VIDEO — مثل Apple / ZettaJoule
   ========================================================================== */

/* القسم الخارجي — مساحة السحب (3 شاشات) */
.scroll-video-section {
    position: relative;
    height: 300vh;
    z-index: 1;
}

/* الجزء الثابت — يحوي الفيديو والـ Hero معاً */
.scroll-video-sticky {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* الفيديو في الخلف */
.scroll-video-el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; /* الحاسوب: المنتصف */
    z-index: 0;
    will-change: contents;
}

/* الجوال: نرى المنتصف من الفيديو الأفقي */
@media (max-width: 768px) {
    .scroll-video-el {
        object-position: center 30%; /* نرفع الصورة قليلاً لإظهار السرير */
        width: 100%;
        height: 100%;
    }
}

/* Overlays فوق الفيديو */
.scroll-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(251,247,240,0.50) 0%,
        rgba(240,230,208,0.35) 50%,
        rgba(251,247,240,0.45) 100%
    );
    z-index: 1;
    pointer-events: none;
}

.scroll-video-overlay2 {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        rgba(42,34,24,0.12) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* الـ Hero يطفو فوق الفيديو */
.scroll-video-sticky .hero-3d {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: transparent !important;
    min-height: 100vh;
    padding: 0 5vw;
}

/* إخفاء الـ orbs لأن الفيديو يستبدلها */
.scroll-video-sticky .h3d-bg {
    display: none;
}

/* جوال — مساحة سحب أقصر */
@media (max-width: 768px) {
    .scroll-video-section {
        height: 200vh;
    }
}


/* منع رجفة/وميض الفيديو عند التحميل */
/* Canvas يظهر دائماً */
.scroll-video-el {
    opacity: 1;
}