/* ============================================================
   cinematic.css — طبقة الهوية السينمائية (أخضر داكن + ذهبي)
   تُحمَّل بعد style.css وتتعامل معه كـ base — لا تعدّل أي منطق.
   الحركات الثقيلة مشروطة بـ html.motion (يضيفها js/motion.js)
   حتى يبقى المحتوى ظاهراً بالكامل بدون JavaScript.
   ============================================================ */

/* ================ 1) Palette ================ */
:root {
  --gold: #C9A646;
  --gold-light: #E4C76A;
  --gold-deep: #A8862F;
  --ease-out: cubic-bezier(.22, .61, .36, 1);

  /* Light theme — عاجي دافئ مع أخضر/ذهبي */
  --primary: #0F3D2E;
  --primary-light: #155C43;
  --primary-dark: #082A1F;
  --accent: #C9A646;
  --accent-light: #E4C76A;
  --bg: #FAF8F1;
  --bg-alt: #F0EBDD;
  --card: #FFFFFF;
  --border: #E4DECB;
}

html.dark {
  --primary: #145C41;
  --primary-light: #1A7A57;
  --primary-dark: #061A14;
  --accent: #C9A646;
  --accent-light: #E4C76A;
  --bg: #07130E;
  --bg-alt: #0A1D15;
  --card: #0C231A;
  --border: #1B3529;
  --text: #F5F2E8;
  --text-muted: #B8B3A4;
  --text-light: #8A857A;
}

::selection { background: rgba(201, 166, 70, .35); }

h1, h2, h3 { text-wrap: balance; }

/* ================ 2) Header ================ */
html.dark .header {
  background: rgba(6, 18, 13, .78);
  border-bottom-color: rgba(201, 166, 70, .14);
}
html.dark .nav-menu a:hover,
html.dark .nav-menu a.active { color: var(--gold-light); }
html.dark .nav-menu a::after { background: var(--gold); }

/* ================ 3) Buttons ================ */
.btn {
  position: relative;
  overflow: hidden;
  transition:
    transform .45s var(--ease-out),
    box-shadow .45s var(--ease-out),
    background .45s var(--ease-out),
    border-color .45s var(--ease-out),
    color .45s var(--ease-out);
}
/* لمعة ذهبية تعبر الزر عند الـ hover */
.btn::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -70%;
  width: 50%;
  background: linear-gradient(105deg, transparent, rgba(255, 245, 214, .22), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
.btn:hover::after {
  transform: skewX(-20deg) translateX(340%);
  transition: transform .8s var(--ease-out);
}

.btn-primary {
  background: linear-gradient(135deg, #0E3B2C 0%, #145C41 100%);
  border-color: rgba(201, 166, 70, .45);
  color: #F5F2E8;
  box-shadow: 0 4px 18px rgba(4, 20, 14, .3);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #124A37 0%, #17654A 100%);
  border-color: rgba(228, 199, 106, .75);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(6, 26, 20, .45), 0 0 24px rgba(201, 166, 70, .2);
}

.btn-ghost {
  background: rgba(201, 166, 70, .06);
  border-color: rgba(201, 166, 70, .38);
  color: #F0E9D8;
}
.btn-ghost:hover {
  background: rgba(201, 166, 70, .14);
  border-color: rgba(228, 199, 106, .65);
  color: #fff;
  transform: translateY(-2px);
}

.btn-outline:hover { border-color: var(--gold); }

/* ================ 4) Hero — سينمائي ================ */
.hero-bg {
  background:
    radial-gradient(ellipse at 25% 20%, #0F3D2E 0%, transparent 55%),
    radial-gradient(ellipse at 80% 85%, rgba(201, 166, 70, .12) 0%, transparent 50%),
    linear-gradient(160deg, #082A1F 0%, #061A14 55%, #04120D 100%);
}
.hero-bg::after {
  background: radial-gradient(circle at 30% 30%, rgba(20, 92, 65, .25), transparent 60%);
}

/* تدرّج التعتيم فوق الصورة — تينت أخضر سينمائي + قاعدة داكنة للنص */
.hero-overlay {
  background:
    linear-gradient(180deg, rgba(4, 18, 13, .6) 0%, rgba(8, 42, 31, .48) 45%, rgba(3, 12, 8, .92) 100%),
    radial-gradient(ellipse at 50% 40%, rgba(11, 46, 36, .25), transparent 70%);
}

/* طبقة المؤثرات الزخرفية (aria-hidden في الـ HTML) */
.hero-fx {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.fx-orb {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: .6;
}
.fx-orb-green {
  width: 60vmax; height: 60vmax;
  top: -25vmax;
  inset-inline-start: -18vmax;
  background: radial-gradient(circle, rgba(20, 92, 65, .5) 0%, rgba(20, 92, 65, 0) 60%);
}
.fx-orb-gold {
  width: 44vmax; height: 44vmax;
  bottom: -18vmax;
  inset-inline-end: -12vmax;
  background: radial-gradient(circle, rgba(201, 166, 70, .26) 0%, rgba(201, 166, 70, 0) 60%);
}
html.motion .fx-orb-green { animation: orbDrift 22s ease-in-out infinite alternate; }
html.motion .fx-orb-gold  { animation: orbDrift 26s ease-in-out infinite alternate-reverse; }
@keyframes orbDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6vmax, -4vmax, 0) scale(1.12); }
}

/* خطوط ضوئية subtle */
.fx-streak {
  position: absolute;
  width: 1px;
  height: 38vh;
  top: 8%;
  background: linear-gradient(180deg, transparent, rgba(228, 199, 106, .5), transparent);
  transform: rotate(24deg);
  opacity: .32;
}
.fx-streak-2 {
  height: 28vh;
  top: 44%;
  opacity: .2;
}
.fx-streak-1 { inset-inline-start: 16%; }
.fx-streak-2 { inset-inline-start: 78%; }
html.motion .fx-streak { animation: streakFloat 9s ease-in-out infinite alternate; }
@keyframes streakFloat {
  from { transform: rotate(24deg) translateY(0); }
  to   { transform: rotate(24deg) translateY(5vh); }
}

/* حبيبات فيلم سينمائي — SVG noise خفيف جداً (بدون أي تحميل خارجي) */
.fx-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: .055;
  mix-blend-mode: overlay;
}
.fx-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 42%, transparent 52%, rgba(3, 10, 7, .6) 100%);
}

/* Spotlight ذهبي ناعم خلف العنوان */
.hero-inner::before {
  content: '';
  position: absolute;
  top: -14%;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, 92vw);
  height: 360px;
  background: radial-gradient(ellipse at center, rgba(201, 166, 70, .15), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
html.motion .hero-inner::before { animation: spotPulse 7s ease-in-out infinite alternate; }
@keyframes spotPulse {
  from { opacity: .65; }
  to   { opacity: 1; }
}

/* Badge */
.badge-pill {
  background: rgba(6, 26, 20, .5);
  border: 1px solid rgba(201, 166, 70, .35);
  color: #EFE7CF;
  box-shadow: inset 0 0 20px rgba(201, 166, 70, .06);
}
.badge-pill .dot {
  background: var(--gold-light);
  box-shadow: 0 0 14px rgba(228, 199, 106, .9);
}

/* العنوان — سطر ذهبي متلألئ */
.hero-title { text-shadow: 0 2px 30px rgba(3, 12, 8, .6); }
.gradient-text {
  background: linear-gradient(100deg, #E4C76A 0%, #C9A646 30%, #F3E3AD 50%, #C9A646 70%, #E4C76A 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html.motion .gradient-text { animation: goldShimmer 8s linear infinite; }
@keyframes goldShimmer {
  to { background-position: 200% 0; }
}

.hero-desc { color: rgba(245, 242, 232, .82); }

/* دخول عناصر الـ Hero — keyframes بـ backwards fill (مشروطة بـ JS) */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
html.motion .hero .badge-pill { animation: heroRise .7s var(--ease-out) .1s backwards; }
html.motion .hero-title       { animation: heroRise .85s var(--ease-out) .25s backwards; }
html.motion .hero-desc        { animation: heroRise .85s var(--ease-out) .42s backwards; }
html.motion .hero-actions     { animation: heroRise .85s var(--ease-out) .58s backwards; }

/* Scroll indicator — دائرة ذهبية أنيقة */
.scroll-indicator {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(201, 166, 70, .4);
  border-radius: 50%;
  background: rgba(6, 26, 20, .35);
  backdrop-filter: blur(4px);
  color: rgba(228, 199, 106, .8);
  font-size: .95rem;
  z-index: 3;
  transition: border-color .3s, color .3s;
}
.scroll-indicator:hover {
  border-color: var(--gold-light);
  color: var(--gold-light);
}

/* ================ 5) Sections & Cards ================ */
.eyebrow { color: var(--gold-deep); }
html.dark .eyebrow { color: var(--gold-light); }
/* شرطتان ذهبيتان حول الـ eyebrow — متماثلة فتعمل مع RTL */
.section-head .eyebrow::before,
.section-head .eyebrow::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
  margin-inline: 12px;
  opacity: .7;
}
.section-head .eyebrow::after {
  background: linear-gradient(90deg, var(--gold), transparent);
}

.ach-card, .service-card, .project-card, .blog-card, .testimonial-card {
  transition:
    transform .5s var(--ease-out),
    box-shadow .5s var(--ease-out),
    border-color .5s var(--ease-out);
}
.ach-card:hover,
.service-card:hover,
.project-card:hover,
.blog-card:hover,
.testimonial-card:hover {
  border-color: rgba(201, 166, 70, .5);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, .25),
    0 0 0 1px rgba(201, 166, 70, .2),
    0 0 30px rgba(201, 166, 70, .07);
}

.ach-icon {
  background: linear-gradient(135deg, #0F3D2E, #145C41);
  box-shadow: inset 0 0 0 1px rgba(201, 166, 70, .35);
}
html.dark .service-icon {
  background: rgba(201, 166, 70, .1);
  color: var(--gold-light);
}
html.dark .pill {
  background: rgba(201, 166, 70, .08);
  color: var(--gold-light);
  border-color: rgba(201, 166, 70, .28);
}

.about-media {
  background: linear-gradient(135deg, #0F3D2E, #C9A646);
  box-shadow: 0 24px 60px rgba(4, 20, 14, .35), 0 0 0 1px rgba(201, 166, 70, .2);
}
.about-opening { border-inline-start-color: var(--gold); }
.team-statement p.highlight { border-inline-start-color: var(--gold); }
html.dark .team-statement h3 { color: var(--gold-light); }

.mission-card {
  background: linear-gradient(135deg, #0B2E24 0%, #145C41 100%);
  border: 1px solid rgba(201, 166, 70, .35);
  position: relative;
  overflow: hidden;
}
.mission-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(201, 166, 70, .14), transparent 60%);
  pointer-events: none;
}

#marketing-cta {
  background: linear-gradient(135deg, #04120D 0%, #0B2E24 60%, #0F3D2E 100%);
}
#marketing-cta::before {
  background: radial-gradient(ellipse at 70% 50%, rgba(201, 166, 70, .12) 0%, transparent 65%);
}

.blog-hero { background: linear-gradient(135deg, #04120D, #0F3D2E); }

/* فورمات — focus ذهبي (شكل فقط، لا مساس بالمنطق) */
.form-group input:focus,
.form-group textarea:focus,
.popup-form input:focus,
.mkt-fields input:focus,
.blog-search input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 166, 70, .18);
}

.footer {
  background: #04120D;
  border-top: 1px solid rgba(201, 166, 70, .15);
}

/* ================ 6) Scroll reveal (يفعّلها motion.js) ================ */
html.motion .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .75s var(--ease-out),
    transform .75s var(--ease-out);
}
html.motion .reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ================ 7) Reduced motion — احترام تفضيل المستخدم ================ */
@media (prefers-reduced-motion: reduce) {
  .hero-fx *,
  .badge-pill .dot,
  .scroll-indicator,
  .gradient-text,
  .hero .badge-pill,
  .hero-title,
  .hero-desc,
  .hero-actions,
  .hero-inner::before,
  .marquee-track {
    animation: none !important;
  }
  html.motion .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .btn:hover::after { transition: none; }
}

/* ================ 8) Mobile ================ */
@media (max-width: 768px) {
  .fx-streak { display: none; }             /* أنظف على الشاشات الصغيرة */
  .fx-orb-green { width: 90vmax; height: 90vmax; top: -40vmax; }
  .fx-orb-gold  { width: 70vmax; height: 70vmax; bottom: -30vmax; }
  .hero-inner::before { height: 260px; }
  .section-head .eyebrow::before,
  .section-head .eyebrow::after { width: 16px; margin-inline: 8px; }
}