/*
 Theme Name: Alalama Theme
 Theme URI: https://al3lama.ly
 Author: Al3lama Team
 Author URI: https://al3lama.ly
 Description: قالب ووردبريس مخصص لشركة العلامة للحاسبات والتقنية، محول من تطبيق React مع دعم كامل للغة العربية.
 Version: 2.0.0 - Enhanced with animations and hover effects
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: alalama-theme
 Tags: custom, tailwindcss, professional, rtl, arabic
 */

/* ========================================
   Reset & Base Styles
   (Tailwind CSS handles most resets)
   ======================================== */

/* RTL Support */
html {
    direction: rtl;
    scroll-behavior: smooth;
}

body {
    font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Remove orange focus outline from buttons and links */
a:focus,
button:focus,
*:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ========================================
   Custom Animations
   ======================================== */

/* Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

/* Fade In Up Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Pulse Animation */
@keyframes pulse-gentle {

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

    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

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

/* Float Animation */
@keyframes float {

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

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

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

/* Slide In from Right (for RTL) */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

.animate-slide-in-right {
    animation: slideInRight 0.6s ease-out forwards;
}

/* Scale In Animation */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

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

.animate-scale-in {
    animation: scaleIn 0.5s ease-out forwards;
}

/* Bounce Animation */
@keyframes bounceGentle {

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

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

.animate-bounce-gentle {
    animation: bounceGentle 1s ease-in-out infinite;
}

/* ========================================
   New Enhanced Animations v2.0
   ======================================== */

/* Icon Hover Pulse */
@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}

.icon-hover:hover {
    animation: iconPulse 0.6s ease-in-out;
}

/* Glow Effect for Brand Elements */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(0, 82, 204, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 82, 204, 0.6);
    }
}

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

/* Shimmer Effect for Cards */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.animate-shimmer {
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

/* Rotate on Hover */
.rotate-hover:hover {
    transform: rotate(360deg);
}

/* Icon Bounce */
@keyframes iconBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.icon-bounce:hover {
    animation: iconBounce 0.5s ease-in-out;
}

/* Scale Up with Shadow */
.scale-hover {
    transition: all 0.3s ease;
}

.scale-hover:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Stagger Animation Delays */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }

/* ========================================
   Custom Scrollbar
   ======================================== */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #0052cc;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #003d99;
}

/* ========================================
   Selection Style
   ======================================== */

::selection {
    background-color: #0052cc;
    color: white;
}

::-moz-selection {
    background-color: #0052cc;
    color: white;
}

/* ========================================
   Focus States (Accessibility)
   ======================================== */

/* Remove outline on mouse click, keep for keyboard users */
a:focus,
button:focus {
    outline: none;
}

/* Show outline only for keyboard navigation (accessibility) */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #0052cc;
    outline-offset: 2px;
}

/* ========================================
   Hero Section Parallax Effect
   ======================================== */

.parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (max-width: 768px) {
    .parallax-bg {
        background-attachment: scroll;
    }
}

/* ========================================
    Card Hover Effects
    ======================================== */

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Enhanced Card Effects v2.0 */
.enhance-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.enhance-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 25px 50px rgba(0, 82, 204, 0.15);
}

.enhance-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.enhance-card:hover::before {
    opacity: 1;
}

/* Icon Container Effects */
.icon-box {
    transition: all 0.3s ease;
}

.icon-box:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Button Ripple Effect */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.ripple:active::after {
    width: 300px;
    height: 300px;
}

/* Gradient Border Effect */
.gradient-border {
    position: relative;
    background: white;
}

.gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg, #0052cc, #ff9900);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* Pulse Ring for CTAs */
.pulse-ring {
    position: relative;
}

.pulse-ring::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: inherit;
    border: 2px solid currentColor;
    opacity: 0;
    animation: pulseRing 2s infinite;
}

@keyframes pulseRing {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

/* Logo Hover Glow */
.logo-hover {
    transition: all 0.3s ease;
    filter: grayscale(100%);
    opacity: 0.7;
}

.logo-hover:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(0, 82, 204, 0.3);
}

/* ========================================
   Gradient Backgrounds
   ======================================== */

.gradient-blue {
    background: linear-gradient(135deg, #0052cc 0%, #003d99 100%);
}

.gradient-orange {
    background: linear-gradient(135deg, #ff9900 0%, #cc7a00 100%);
}

.gradient-hero {
    background: linear-gradient(135deg, rgba(0, 82, 204, 0.9) 0%, rgba(0, 61, 153, 0.95) 100%);
}

/* ========================================
   Glass Morphism Effect
   ======================================== */

.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ========================================
   Counter Animation Styles
   ======================================== */

.counter-number {
    font-variant-numeric: tabular-nums;
}

/* ========================================
   Accordion Styles
   ======================================== */

.accordion-content {
    transition: max-height 0.5s ease-in-out;
    overflow: hidden;
}

/* ========================================
   Button Styles
   ======================================== */

.btn-primary {
    background-color: #0052cc;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #003d99;
    transform: scale(1.02);
}

.btn-orange {
    background-color: #ff9900;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-orange:hover {
    background-color: #cc7a00;
    transform: scale(1.02);
}

/* ========================================
   Loading Spinner
   ======================================== */

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0052cc;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ========================================
   Responsive Typography
   ======================================== */

@media (max-width: 640px) {
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }
}

/* ========================================
   Print Styles
   ======================================== */

@media print {

    header,
    footer,
    .no-print {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: black;
        background: white;
    }
}

/* ========================================
   Utilities
   ======================================== */

.text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.text-shadow-lg {
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
}

/* Hide scrollbar but keep functionality */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Aspect Ratio Boxes */
.aspect-video {
    aspect-ratio: 16 / 9;
}

.aspect-square {
    aspect-ratio: 1 / 1;
}

/* ========================================
    Button Animations (From Uiverse)
    ======================================== */

.btn-animate {
    position: relative;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0.5rem;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-animate:active {
    transform: scale(0.95);
}

.btn-animate span {
    margin-right: 0.3em;
    transition: all 0.5s ease;
}

.btn-animate svg {
    height: 0.8em;
    fill: currentColor;
    margin-right: -0.1em;
    position: relative;
    transition: all 0.5s ease;
}

.btn-animate:hover svg {
    margin-right: 0.4em;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
}

/* Arrows animation */
.btn-animate svg polygon {
    transition: all 0.4s ease;
}

.btn-animate:hover svg polygon:nth-child(1) {
    transform: translateX(0%);
    animation: arrowMove1 1s infinite 0.6s;
}

.btn-animate:hover svg polygon:nth-child(2) {
    transform: translateX(0%);
    animation: arrowMove1 1s infinite 0.4s;
}

.btn-animate:hover svg polygon:nth-child(3) {
    animation: arrowMove1 1s infinite 0.2s;
}

@keyframes arrowMove1 {
    0% { transform: translateX(0%); opacity: 1; }
    50% { transform: translateX(20px); opacity: 0; }
    100% { transform: translateX(0%); opacity: 1; }
}

/* Glow effect for buttons */
.btn-glow {
    transition: all 0.3s ease;
}

.btn-glow:hover {
    box-shadow: 0 0 20px currentColor, 0 0 40px currentColor;
    animation: glowPulse 1.5s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 10px currentColor; }
    50% { box-shadow: 0 0 25px currentColor, 0 0 50px currentColor; }
}

/* Icon hover effects with glow */
.icon-glow {
    transition: all 0.3s ease;
}

.icon-glow:hover {
    filter: drop-shadow(0 0 8px currentColor);
    transform: scale(1.15);
}

/* Ripple effect for buttons */
.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-ripple:active::before {
    width: 300px;
    height: 300px;
}

/* ========================================
   إصلاحات التصميم المتجاوب — Safari/iOS & Android
   ======================================== */

/* ── هيرو الموبايل (سلايدر أفقي 100vh، < 768px فقط) ── */
.hero-mobile {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: -webkit-fill-available;
}
.hero-track-mobile {
    height: 100%;
    transition: -webkit-transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* إصلاح Safari/WebKit — تسريع GPU لمنع تلاشي العناصر */
.hero-cinematic {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* إصلاح تداخل السطور في Samsung Internet / Android */
.hero-cinematic * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* ضمان ظهور الفيديو في WebKit */
#hero-video {
    -webkit-object-fit: cover;
    object-fit: cover;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* منع انكسار العناصر أثناء التحميل في iOS */
.hero-cinematic .relative {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* إصلاح تداخل النص في الشاشات الصغيرة */
@media (max-width: 640px) {
    .hero-cinematic h1,
    .hero-cinematic h2,
    .hero-cinematic p {
        overflow-wrap: break-word;
        word-break: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    /* منع تداخل الأسطر في Landing */
    .hero-cinematic [x-text],
    .hero-cinematic [x-html] {
        display: block;
        line-height: 1.5;
    }
}

/* ========================================
   v19: إصلاحات أعمق Safari/iOS و Samsung Internet
   ======================================== */

/* Safari/iOS - منع flicker الفيديو والصور */
@supports (-webkit-touch-callout: none) {
    #hero-video,
    .hero-cinematic video {
        -webkit-transform: translate3d(0,0,0);
        -webkit-perspective: 1000;
        will-change: transform;
    }

    /* منع شفافية الخلفيات على iOS */
    .hero-cinematic .absolute {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    /* تعطيل scroll-jank في sticky */
    .sticky {
        position: -webkit-sticky;
        position: sticky;
    }
}

/* Samsung Internet / Android - تثبيت ارتفاع viewport */
@media screen and (max-width: 768px) {
    .hero-cinematic {
        min-height: 100vh;
        min-height: -webkit-fill-available;
        min-height: 100dvh;
    }

    /* منع تداخل النصوص العربية الطويلة */
    .hero-cinematic h1,
    .hero-cinematic h2,
    .hero-cinematic h3,
    .hero-cinematic p,
    .hero-cinematic span {
        line-height: 1.6 !important;
        word-spacing: 0.05em;
    }

    /* تحسين عرض البطاقات على شاشات الهاتف */
    .container .grid {
        gap: 1rem;
    }
}

/* iOS Safari - إصلاح position: fixed مع viewport */
.whatsapp-float-btn {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    z-index: 9999;
}

/* تحسينات Animation للموبايل */
@media (max-width: 768px) {
    /* تقليل التأثيرات الثقيلة على الجوال */
    .group-hover\:scale-110,
    .hover\:scale-105 {
        transition-duration: 0.2s;
    }
}

/* ========================================
   v19: تأثير خفيف للزر فوق الصورة في الحلول
   ======================================== */
@keyframes pulse-gentle {
    0%, 100% { box-shadow: 0 10px 25px -5px rgba(255, 153, 0, 0.4); }
    50% { box-shadow: 0 15px 35px -5px rgba(255, 153, 0, 0.7); }
}
.animate-pulse-gentle {
    animation: pulse-gentle 2.5s ease-in-out infinite;
}

/* ========================================
    Card Animations (From Uiverse) - Alalama Brand Colors
    ======================================== */

.card-magic {
    --brand-blue: #0052cc;
    --brand-orange: #ff9900;
    --card-bg: #ffffff;
    position: relative;
    width: 100%;
    padding: 5px;
    border-radius: 1rem;
    overflow: visible;
    background: var(--brand-blue);
    z-index: 1;
    transition: all 0.5s ease;
}

.card-magic::after {
    content: "";
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    transform: scale(0.8);
    filter: blur(25px);
    background: var(--brand-blue);
    opacity: 0.5;
    transition: all 0.5s ease;
}

.card-magic:hover::after {
    opacity: 0;
    transform: scale(1);
}

.card-magic .card-content {
    background: var(--card-bg);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    border-radius: 0.7rem;
    overflow: visible;
    transition: all 0.5s ease;
}

.card-magic:hover .card-content {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 82, 204, 0.3);
}

/* Card with Orange glow */
.card-magic-orange {
    background: var(--brand-orange);
}

.card-magic-orange::after {
    background: var(--brand-orange);
}

.card-magic-orange:hover::after {
    background: var(--brand-orange);
}

/* Card Title */
.card-magic .card-title {
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #0052cc;
    font-family: 'Cairo', sans-serif;
    transition: all 0.5s ease;
}

.card-magic:hover .card-title {
    color: #0052cc;
    text-shadow: 0 0 20px rgba(0, 82, 204, 0.5);
}

/* Feature Cards with Glow */
.feature-card {
    position: relative;
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    overflow: hidden;
    transition: all 0.4s ease;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0052cc, #ff9900);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0, 82, 204, 0.15);
}

.feature-card:hover::before {
    transform: scaleX(1);
}

/* Icon Card with Blue Glow */
.icon-card {
    position: relative;
    border-radius: 1rem;
    padding: 1.5rem;
    background: white;
    border: 2px solid transparent;
    transition: all 0.4s ease;
    overflow: hidden;
}

.icon-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg, #0052cc, #003d99);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    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.3s ease;
}

.icon-card:hover {
    border-color: #0052cc;
    box-shadow: 0 10px 40px rgba(0, 82, 204, 0.2);
}

.icon-card:hover::after {
    opacity: 1;
}

/* ========================================
    WordPress Specific Styles
    ======================================== */

.wp-block-image img {
    max-width: 100%;
    height: auto;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alignleft {
    float: right;
    /* RTL */
    margin-left: 1rem;
    margin-bottom: 1rem;
}

.alignright {
    float: left;
    /* RTL */
    margin-right: 1rem;
    margin-bottom: 1rem;
}

/* ========================================
   Screen Reader Only
   ======================================== */

/* ========================================
   Phosphor Icons Styling
   ======================================== */

/* Base Phosphor icon sizing */
.ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    font-size: 1.25em;
    line-height: 1;
}

/* Custom sizes */
.ph-w-4 { font-size: 1rem; }
.ph-w-5 { font-size: 1.25rem; }
.ph-w-6 { font-size: 1.5rem; }
.ph-w-8 { font-size: 2rem; }
.ph-w-10 { font-size: 2.5rem; }
.ph-w-12 { font-size: 3rem; }

/* ── Phosphor icon base reset (already set inline via PHP but kept as safety) ── */
i[class*="ph-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}

/* Colors */
.ph.text-brand-blue  { color: #0052cc; }
.ph.text-brand-orange{ color: #ff9900; }
.ph.text-gray-500    { color: #6b7280; }

/* ========================================
   Screen Reader Only
   ======================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================================
   CINEMATIC HERO — Scroll-Driven Video Experience
   ============================================================ */

/* ── Slide base ── */
.hero-slide {
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
                transform 8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
    background-size: cover;
    background-position: center;
}

/* ── Active slide: fade in + slow Ken Burns zoom-out ── */
.hero-slide--active {
    opacity: 1;
    transform: scale(1);
    animation: kenBurns 8s ease-out forwards;
}

@keyframes kenBurns {
    0%   { transform: scale(1.10) translate(1%,  1%); }
    100% { transform: scale(1.00) translate(0%,  0%); }
}

/* ── Headlines cross-fade ── */
.hero-headline {
    will-change: opacity, transform;
}

.hero-headline--visible {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out, filter 0.8s ease-out;
}

.hero-headline--hidden {
    opacity: 0;
    transform: translateX(-40px); /* RTL: يدخل من اليسار ← يمين */
    filter: blur(4px);
    pointer-events: none;
    transition: opacity 0.5s ease-in, transform 0.5s ease-in, filter 0.5s ease-in;
}

/* ── Chapter label animation ── */
@keyframes heroLabelIn {
    from { opacity: 0; transform: translateX(-15px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── Progress dot ── */
.hero-dot {
    cursor: pointer;
}
.hero-dot--active {
    background-color: #ff9900 !important;
    transform: scale(1.4);
}

/* ── CTA button glow ── */
.hero-cta-primary {
    position: relative;
    overflow: hidden;
}
.hero-cta-primary::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 2px solid rgba(255, 153, 0, 0.6);
    animation: ctaPulse 2.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes ctaPulse {
    0%,100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 0;   transform: scale(1.15); }
}

.hero-cta-secondary {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ── Cinematic section ensures no gap under hero ── */
.hero-cinematic {
    will-change: transform;
}

/* Mobile: reduce scroll wrapper height a bit */
@media (max-width: 768px) {
    #hero-scroll-wrapper { height: 350vh; }
    .hero-headline--hidden { transform: translateY(14px); }
}

/* ========================================
   v36: حصر شعارات العملاء داخل بطاقاتها
   ----------------------------------------
   إضافة Imagify تلفّ الصورة بعنصر <picture> وتنقل إليه كلاسات الصورة
   وأنماطها، فيبقى <img> الداخلي بلا أي تحديد للارتفاع ويخرج عن البطاقة.
   القواعد التالية تستهدف الصورة نفسها مهما كان الغلاف، وهي في style.css
   تحديداً لأنه لا يخضع لتنقية Tailwind (purge) فلا يسقط عند إعادة البناء.
   ======================================== */
.alalama-logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    overflow: hidden;
}

/* غلاف Imagify: اجعله صندوقاً مرناً محدوداً بدل عنصر سطري */
.alalama-logo-box picture {
    display: flex !important;
    align-items: center;
    justify-content: center;
    /* أبعاد محدَّدة ضرورية: max-height بالنسبة المئوية على الصورة لا يُحتسب
       إذا كان ارتفاع الأب تلقائياً. و!important لأن Imagify يضع
       height:auto كنمط inline على <picture> وهو يتفوّق على أي محدِّد. */
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

/* الصورة: تظهر كاملة داخل الصندوق مهما كان حجمها المرفوع، وبلا تكبير للصغيرة */
.alalama-logo-box img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}

/* ========================================
   v38: تباعد شريط تصنيف العملاء
   ----------------------------------------
   المسافة معرَّفة هنا لا بكلاس Tailwind، لأن كلاسات Tailwind تخضع للتنقية:
   إذا حُذف كلاس من ملف CSS بينما تخدم إضافة الكاش صفحة HTML قديمة تستدعيه،
   يسقط التنسيق بصمت وتنهار المسافة إلى صفر. القاعدة هنا لا تُنقّى أبداً.
   ======================================== */
.alalama-filter-row {
    margin-bottom: 4.5rem; /* 72px قبل شبكة البطاقات */
}