/*
Theme Name: Multaqa Al-Thaqafat
Theme URI: https://multaqa.org
Author: Noor Al-Aboodi
Description: A premium gold and black WordPress theme converted from React. High performance, SEO friendly, and translation ready.
Version: 2.5.0
Text Domain: multaqa-theme
*/

/* --- CORE VARIABLES --- */
:root {
  --font-primary: 'Cairo', sans-serif;
  --font-serif: 'Amiri', serif;
  --gold-primary: #d4af37;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  background-color: #fcfbf7;
  color: #18181b;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.font-amiri {
  font-family: var(--font-serif);
}

/* --- UTILITIES --- */
.text-gold-3d {
  color: #d4af37;
  text-shadow: 
    0 1px 0 #b38728,
    0 2px 0 #9c731e,
    0 3px 0 #856015,
    0 4px 6px rgba(0,0,0,0.3);
  font-weight: 900 !important;
}

.bg-gold-gradient {
  background: linear-gradient(135deg, #b48811 0%, #f3d45e 50%, #b48811 100%) !important;
  box-shadow: 
    0 0 15px rgba(212, 175, 55, 0.5),
    inset 0 0 10px rgba(255, 255, 255, 0.3);
  position: relative !important;
  overflow: hidden !important;
  z-index: 1;
}

/* =========================================
   HEADER ANIMATIONS PACK (10 Logo + 10 Title)
   ========================================= */

/* --- LOGO ANIMATIONS --- */

/* 1. Drop Bounce (Default) */
@keyframes logoDropBounce { 0% { transform: translateY(-200px); opacity: 0; } 60% { transform: translateY(20px); opacity: 1; } 80% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
.anim-logo-dropBounce { animation: logoDropBounce 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards; }

/* 2. Fade In Zoom */
@keyframes logoFadeZoom { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.anim-logo-fadeZoom { animation: logoFadeZoom 1s ease-out forwards; }

/* 3. Rotate In */
@keyframes logoRotateIn { 0% { transform: rotate(-180deg) scale(0); opacity: 0; } 100% { transform: rotate(0) scale(1); opacity: 1; } }
.anim-logo-rotateIn { animation: logoRotateIn 1s ease-out forwards; }

/* 4. Flip Y */
@keyframes logoFlipY { 0% { transform: perspective(400px) rotateY(90deg); opacity: 0; } 100% { transform: perspective(400px) rotateY(0deg); opacity: 1; } }
.anim-logo-flipY { animation: logoFlipY 1s ease-out forwards; }

/* 5. Elastic Pop */
@keyframes logoElastic { 0% { transform: scale(0); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
.anim-logo-elastic { animation: logoElastic 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards; }

/* 6. Slide Down */
@keyframes logoSlideDown { 0% { transform: translateY(-100%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.anim-logo-slideDown { animation: logoSlideDown 0.8s ease-out forwards; }

/* 7. Roll In Left */
@keyframes logoRollIn { 0% { transform: translateX(-100%) rotate(-120deg); opacity: 0; } 100% { transform: translateX(0) rotate(0deg); opacity: 1; } }
.anim-logo-rollIn { animation: logoRollIn 1s ease-out forwards; }

/* 8. Pulse Entrance */
@keyframes logoPulseEnt { 0% { transform: scale(0.8); opacity: 0; } 50% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } }
.anim-logo-pulse { animation: logoPulseEnt 1s ease-in-out forwards; }

/* 9. Swing */
@keyframes logoSwing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } }
.anim-logo-swing { animation: logoSwing 1.5s ease-out forwards; transform-origin: top center; }

/* 10. Glitch Entrance */
@keyframes logoGlitch { 0% { transform: translate(0); } 20% { transform: translate(-2px, 2px); } 40% { transform: translate(-2px, -2px); } 60% { transform: translate(2px, 2px); } 80% { transform: translate(2px, -2px); } 100% { transform: translate(0); opacity: 1; } }
.anim-logo-glitch { animation: logoGlitch 0.5s ease-out forwards; opacity: 0; animation-fill-mode: forwards; animation-delay: 0.2s; }


/* --- TITLE ANIMATIONS --- */

/* 1. Slide Side (Language Aware) - Handled dynamically, usually translates from X */
/* We will define specific LTR/RTL classes in utility or rely on these neutral ones */

/* Slide Right (For RTL) */
@keyframes titleSlideRight { 0% { transform: translateX(100px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
.anim-title-slideSide-rtl { animation: titleSlideRight 1s ease-out forwards; }
/* Slide Left (For LTR) */
@keyframes titleSlideLeft { 0% { transform: translateX(-100px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
.anim-title-slideSide-ltr { animation: titleSlideLeft 1s ease-out forwards; }

/* 2. Fade Up */
@keyframes titleFadeUp { 0% { transform: translateY(30px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.anim-title-fadeUp { animation: titleFadeUp 1s ease-out forwards; }

/* 3. Tracking Expand (Letter Spacing) */
@keyframes titleTracking { 0% { letter-spacing: -0.5em; opacity: 0; } 40% { opacity: 0.6; } 100% { opacity: 1; letter-spacing: normal; } }
.anim-title-tracking { animation: titleTracking 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards; }

/* 4. Blur In */
@keyframes titleBlurIn { 0% { filter: blur(12px); opacity: 0; } 100% { filter: blur(0); opacity: 1; } }
.anim-title-blurIn { animation: titleBlurIn 1.2s ease-out forwards; }

/* 5. Scale Down */
@keyframes titleScaleDown { 0% { transform: scale(2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.anim-title-scaleDown { animation: titleScaleDown 0.8s ease-out forwards; }

/* 6. 3D Rotate X */
@keyframes titleRotateX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0; } 100% { transform: perspective(400px) rotateX(0deg); opacity: 1; } }
.anim-title-rotateX { animation: titleRotateX 1s ease-out forwards; }

/* 7. Clip Reveal */
@keyframes titleClip { 0% { clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); opacity: 0; } 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); opacity: 1; } }
.anim-title-clip { animation: titleClip 1.2s ease-out forwards; }

/* 8. Skew Slide */
@keyframes titleSkew { 0% { transform: skewX(-20deg) translateX(-50px); opacity: 0; } 100% { transform: skewX(0deg) translateX(0); opacity: 1; } }
.anim-title-skew { animation: titleSkew 0.8s ease-out forwards; }

/* 9. Focus In */
@keyframes titleFocus { 0% { filter: blur(10px); transform: scale(1.2); opacity: 0; } 100% { filter: blur(0); transform: scale(1); opacity: 1; } }
.anim-title-focus { animation: titleFocus 1s ease-out forwards; }

/* 10. Elastic Right */
@keyframes titleElasticRight { 0% { transform: translateX(100%); opacity: 0; } 60% { transform: translateX(-20px); opacity: 1; } 80% { transform: translateX(10px); } 100% { transform: translateX(0); } }
.anim-title-elastic { animation: titleElasticRight 1s ease-out forwards; }


/* --- PROFESSIONAL SCROLL ANIMATIONS (Page Body) --- */

.reveal-up {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, opacity;
}
.reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.8s ease-out;
}
.reveal-scale.active {
    opacity: 1;
    transform: scale(1);
}

.stagger-parent .stagger-item {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.stagger-parent.active .stagger-item {
    opacity: 1;
    transform: translateY(0);
}

.stagger-parent.active .stagger-item:nth-child(1) { transition-delay: 0.1s; }
.stagger-parent.active .stagger-item:nth-child(2) { transition-delay: 0.2s; }
.stagger-parent.active .stagger-item:nth-child(3) { transition-delay: 0.3s; }
.stagger-parent.active .stagger-item:nth-child(4) { transition-delay: 0.4s; }
.stagger-parent.active .stagger-item:nth-child(5) { transition-delay: 0.5s; }
.stagger-parent.active .stagger-item:nth-child(6) { transition-delay: 0.6s; }
.stagger-parent.active .stagger-item:nth-child(7) { transition-delay: 0.7s; }
.stagger-parent.active .stagger-item:nth-child(8) { transition-delay: 0.8s; }

.reveal-left { opacity: 0; transform: translateX(-50px); transition: all 1s ease; }
.reveal-right { opacity: 0; transform: translateX(50px); transition: all 1s ease; }
.reveal-left.active, .reveal-right.active { opacity: 1; transform: translateX(0); }


/* --- CATEGORIES DRAG SCROLL --- */
.drag-scroll-container {
    cursor: grab;
    user-select: none; /* Prevent text selection while dragging */
    -webkit-overflow-scrolling: touch;
}
.drag-scroll-container:active {
    cursor: grabbing;
}
.drag-scroll-container::-webkit-scrollbar {
    display: none;
}


/* --- CATEGORY CARD EFFECTS --- */
.cat-card-shine {
  position: relative;
  overflow: hidden;
}
.cat-card-shine::after {
  content: "";
  position: absolute;
  inset: -150%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.28) 50%, transparent 100%);
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}
.cat-card-shine:hover::after {
  opacity: 1;
  animation: catShine 1s linear;
}
@keyframes catShine {
  to {
    transform: translateX(100%);
  }
}

.cat-orbit {
  animation: catOrbit 22s linear infinite;
  transform-origin: center center;
}
@keyframes catOrbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.glass-pill {
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}


/* --- NEWS TICKER & SLIDER --- */
.ticker-wrap { width: 100%; overflow: hidden; white-space: nowrap; }
.ticker-move { display: inline-block; white-space: nowrap; padding-right: 100%; animation: ticker-rtl 30s linear infinite; }
.ticker-item { display: inline-block; padding: 0 2rem; }

@keyframes ticker-rtl { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(100%, 0, 0); } }
html[dir="ltr"] .ticker-move { animation-name: ticker-ltr; }
@keyframes ticker-ltr { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } }

.news-fade-wrapper { position: relative; width: 100%; height: 100%; overflow: hidden; }
.news-fade-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; opacity: 0; transform: translateY(10px); transition: opacity 0.5s, transform 0.5s; pointer-events: none; }
.news-fade-item.active { opacity: 1; transform: translateY(0); pointer-events: auto; }

.hero-slider-slide { display: none; opacity: 0; transition: opacity 1s ease-in-out; }
.hero-slider-slide.active { display: block; opacity: 1; }

/* --- WP UTILS --- */
.aligncenter { display: block; margin: 0 auto; }
.alignleft { float: left; margin-right: 1.5em; }
.alignright { float: right; margin-left: 1.5em; }
.wp-caption { max-width: 100%; }
img { max-width: 100%; height: auto; }