/*
 * Egypt Magic Tours — Main CSS
 * Design tokens match design-preview/egypt-magic.html exactly.
 * Section-specific styles live in assets/css/sections/*.css (enqueued on demand).
 */

/* ===== DESIGN TOKENS ===== */
:root {
  --em-bg:        #f4ece0;   /* warm papyrus */
  --em-bg2:       #efe5d6;
  --em-ink:       #1c1813;   /* near-black warm */
  --em-muted:     #7a6f5f;
  --em-gold:      #c0883a;   /* desert gold */
  --em-gold-d:    #a06f28;
  --em-teal:      #2a7d74;
  --em-line:      rgba(28,24,19,.14);
  --em-dark:      #16130d;
  --em-ease:      cubic-bezier(.16,1,.3,1);

  --em-font-head: 'Barlow Condensed', sans-serif;
  --em-font-body: 'Barlow Semi Condensed', sans-serif;
}

/* RTL: switch to Cairo for Arabic */
html[lang="ar"] {
  --em-font-head: 'Cairo', sans-serif;
  --em-font-body: 'Cairo', sans-serif;
}

/* ===== GLOBAL RESETS ===== */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--em-font-body);
  background:  var(--em-bg);
  color:       var(--em-ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
  font-family:    var(--em-font-head);
  font-weight:    600;
  line-height:    1.02;
  letter-spacing: -.01em;
}

.em-subtitle {
  font-family:     var(--em-font-head);
  text-transform:  uppercase;
  letter-spacing:  .28em;
  font-size:       .8rem;
  font-weight:     600;
  color:           var(--em-gold);
  display:         inline-flex;
  align-items:     center;
  gap:             .7rem;
}
.em-subtitle::before {
  content:    '';
  width:      30px;
  height:     1px;
  background: var(--em-gold);
}
html[lang="ar"] .em-subtitle { letter-spacing: .06em; }

.em-title {
  font-family:    var(--em-font-head);
  font-weight:    600;
  text-transform: uppercase;
  font-size:      clamp(2.2rem, 5vw, 4.4rem);
  line-height:    .98;
  letter-spacing: -.015em;
}
.em-title em {
  font-style:     italic;
  font-weight:    500;
  color:          var(--em-gold);
  font-family:    Georgia, serif;
  text-transform: none;
  letter-spacing: 0;
}

/* ===== ANIMATION CLASSES (client-usable via Elementor CSS Classes field) =====
 * anim-reveal     — fade + rise as element enters viewport
 * anim-parallax   — parallax layer (moves at 0.5× scroll speed)
 * anim-stagger    — children stagger in sequence
 * anim-countup    — numeric count-up on scroll enter
 * anim-split      — headline word-by-word reveal
 * All activated by animations.js. Elementor editor: classes are ignored (no animation).
 */

/* Pre-animation state — elements are visible by default (progressive enhancement) */
[class*="anim-"] { /* intentionally empty — JS sets initial states */ }

/* Elementor editor: kill all animations for live editing comfort */
body.elementor-editor-active [class*="anim-"] {
  opacity:   1 !important;
  transform: none !important;
}

/* ===== SELECTION ===== */
::selection { background: var(--em-gold); color: #fff; }

/* ===== CUSTOM CURSOR ===== */
#em-cursor {
  position:       fixed;
  width:          14px;
  height:         14px;
  background:     var(--em-gold);
  border-radius:  50%;
  pointer-events: none;
  z-index:        9999;
  transform:      translate(-50%, -50%);
  transition:     width .25s var(--em-ease), height .25s var(--em-ease),
                  background .25s var(--em-ease), opacity .25s var(--em-ease);
  mix-blend-mode: multiply;
  will-change:    transform;
}
#em-cursor.em-cursor--grow {
  width:      44px;
  height:     44px;
  background: var(--em-teal);
  opacity:    .55;
}
@media (pointer: coarse) { #em-cursor { display: none; } }

/* ===== NAVIGATION ===== */
#em-nav {
  position:   fixed;
  top:        0;
  inset-inline-start: 0;
  width:      100%;
  z-index:    900;
  transition: background .35s var(--em-ease),
              box-shadow .35s var(--em-ease),
              transform  .35s var(--em-ease);
  will-change: transform;
}
#em-nav.em-nav--scrolled {
  background: rgba(22, 19, 13, .92);
  backdrop-filter: blur(14px);
  box-shadow: 0 2px 32px rgba(0,0,0,.22);
}
#em-nav.em-nav--hide {
  transform: translateY(-110%);
}

/* ===== TO-TOP PROGRESS BUTTON ===== */
.em-to-top {
  position:        fixed;
  bottom:          2rem;
  inset-inline-end: 1.8rem;
  z-index:         800;
  width:           46px;
  height:          46px;
  border:          none;
  border-radius:   50%;
  background:      var(--em-gold);
  color:           #fff;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0;
  transform:       translateY(12px);
  pointer-events:  none;
  transition:      opacity .3s var(--em-ease),
                   transform .3s var(--em-ease),
                   background .2s;
}
.em-to-top svg {
  width:  20px;
  height: 20px;
  fill:   none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.em-to-top--show {
  opacity:        1;
  transform:      translateY(0);
  pointer-events: auto;
}
.em-to-top:hover { background: var(--em-gold-d); }

/* SVG progress ring (set via JS: stroke-dashoffset) */
.em-to-top__ring {
  position: absolute;
  inset:    0;
  width:    46px;
  height:   46px;
  transform: rotate(-90deg);
}
.em-to-top__ring circle {
  fill:             none;
  stroke:           var(--em-gold-d);
  stroke-width:     2;
  stroke-dasharray: 133;   /* ≈ 2π × 21.2 */
  stroke-dashoffset: 133;
  transition:       stroke-dashoffset .12s linear;
}

/* ===== WATERMARK ===== */
.em-watermark {
  position:       absolute;
  inset-inline-start: 50%;
  top:            50%;
  transform:      translate(-50%, -50%);
  font-family:    var(--em-font-head);
  font-size:      clamp(6rem, 14vw, 16rem);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          transparent;
  -webkit-text-stroke: 1px rgba(192,136,58,.14);
  white-space:    nowrap;
  pointer-events: none;
  user-select:    none;
  z-index:        0;
  will-change:    transform;
}

/* ===== SECTION WATERMARK DRIFT (JS applies translateX via GSAP) ===== */
[data-watermark] { overflow: hidden; }
[data-watermark] > .em-watermark {
  white-space: nowrap;
}

/* ===== TEXT SPLIT REVEAL — WORD WRAPPER ===== */
.em-word {
  display:        inline-block;
  overflow:       hidden;
  vertical-align: bottom;
  line-height:    1.05;
}
.em-word-inner {
  display:    inline-block;
  will-change: transform;
}

/* ===== SHINE SWEEP ===== */
.anim-shine {
  position:   relative;
  overflow:   hidden;
}
.anim-shine::after {
  content:          '';
  position:         absolute;
  inset:            0;
  background:       linear-gradient(105deg,
                      transparent 40%,
                      rgba(255,255,255,.32) 50%,
                      transparent 60%);
  transform:        translateX(-110%);
  pointer-events:   none;
}
.anim-shine.anim-shine--active::after {
  animation: shineSweep .7s var(--em-ease) forwards;
}
@keyframes shineSweep {
  to { transform: translateX(110%); }
}

/* ===== COUNT-UP DATA BADGE ===== */
[data-count] {
  font-family:    var(--em-font-head);
  font-variant-numeric: tabular-nums;
}

/* ===== IMAGE REVEAL WRAPPERS ===== */
.anim-image-reveal {
  overflow: hidden;
  position: relative;
}
.anim-image-reveal img,
.anim-image-reveal .em-img {
  display:    block;
  width:      100%;
  will-change: transform;
}

.anim-radius-reveal {
  overflow:      hidden;
  border-radius: 2px;
}
.anim-radius-reveal.is-revealed {
  border-radius: 0;
  transition: border-radius .6s var(--em-ease);
}

.anim-scroll-zoom {
  overflow: hidden;
}
.anim-scroll-zoom > * {
  will-change: transform;
}

/* ===== STAGGER HELPERS ===== */
.anim-stagger,
.anim-stagger-left,
.anim-stagger-spread {
  /* Children animate via JS; parent is purely a container */
}
/* Reduced-motion: children always visible */
@media (prefers-reduced-motion: reduce) {
  .anim-stagger > *,
  .anim-stagger-left > *,
  .anim-stagger-spread > *,
  .anim-reveal,
  .anim-split,
  .anim-image-reveal img,
  .anim-scroll-zoom > * {
    opacity:   1 !important;
    transform: none !important;
  }
}

/* ===== PARALLAX LAYER ===== */
.anim-parallax {
  will-change: transform;
}

/* ===== TICKER / MARQUEE ===== */
.em-ticker {
  overflow:        hidden;
  white-space:     nowrap;
}
.em-ticker__track {
  display:         inline-flex;
  gap:             0;
  will-change:     transform;
}
.em-ticker__item {
  display:         inline-flex;
  align-items:     center;
  padding-inline:  1.6rem;
  font-family:     var(--em-font-head);
  font-weight:     600;
  text-transform:  uppercase;
  letter-spacing:  .12em;
  font-size:       .9rem;
  color:           var(--em-gold);
  flex-shrink:     0;
}
.em-ticker__sep {
  display:     inline-block;
  margin-inline: .4rem;
  opacity:     .4;
}

/* ===== CARD TILT CONTAINER ===== */
[data-tilt] {
  transform-style:  preserve-3d;
  transform-origin: center center;
  will-change:      transform;
}
[data-tilt] .em-tilt-inner {
  transform:     translateZ(16px);
  will-change:   transform;
}

/* ===== FAQ ACCORDION ===== */
.em-faq__item {
  border-bottom:  1px solid var(--em-line);
  overflow:       hidden;
}
.em-faq__q {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1.2rem 0;
  cursor:          pointer;
  font-family:     var(--em-font-head);
  font-weight:     600;
  font-size:       1.15rem;
  text-transform:  uppercase;
  letter-spacing:  .04em;
  gap:             1rem;
  user-select:     none;
}
.em-faq__q::after {
  content:       '+';
  font-size:     1.5rem;
  font-weight:   300;
  line-height:   1;
  flex-shrink:   0;
  transition:    transform .3s var(--em-ease);
  color:         var(--em-gold);
}
.em-faq__item.is-open .em-faq__q::after { transform: rotate(45deg); }
.em-faq__a {
  overflow:   hidden;
  height:     0;
  font-size:  .98rem;
  color:      var(--em-muted);
  line-height: 1.7;
}
.em-faq__a__inner { padding-bottom: 1.2rem; }

/* ===== LANGUAGE SWITCHER ===== */
.em-lang {
  position:   relative;
  display:    inline-block;
}
.em-lang__current {
  display:     flex;
  align-items: center;
  gap:         .35rem;
  cursor:      pointer;
  font-family: var(--em-font-head);
  font-weight: 600;
  font-size:   .85rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.em-lang__dropdown {
  position:   absolute;
  top:        calc(100% + .5rem);
  inset-inline-start: 0;
  background: var(--em-dark);
  border-radius: 6px;
  padding:    .4rem 0;
  min-width:  80px;
  overflow:   hidden;
  opacity:    0;
  pointer-events: none;
  transform:  translateY(-6px);
  transition: opacity .25s var(--em-ease), transform .25s var(--em-ease);
  z-index:    100;
}
.em-lang.is-open .em-lang__dropdown {
  opacity:        1;
  pointer-events: auto;
  transform:      translateY(0);
}
.em-lang__option {
  display:     block;
  padding:     .45rem 1rem;
  font-family: var(--em-font-head);
  font-weight: 600;
  font-size:   .82rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color:       rgba(255,255,255,.75);
  text-decoration: none;
  transition:  color .2s, background .2s;
}
.em-lang__option:hover,
.em-lang__option.is-active {
  color:      var(--em-gold);
  background: rgba(255,255,255,.04);
}

/* ===== TESTIMONIALS SLIDER ===== */
.em-testimonials {
  overflow: hidden;
}
.em-testimonials__track {
  display:      flex;
  will-change:  transform;
}
.em-tcard {
  flex-shrink:    0;
  width:          100%;
  padding-inline: 1rem;
}
.em-tcard__body {
  background:    var(--em-bg2);
  border-radius: 10px;
  padding:       2rem;
}
.em-tcard__quote {
  font-size:   1.05rem;
  line-height: 1.75;
  color:       var(--em-ink);
  margin:      0 0 1.2rem;
}
.em-tcard__author {
  font-family:    var(--em-font-head);
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size:      .82rem;
  color:          var(--em-gold);
}
.em-tcard__stars {
  color:        var(--em-gold);
  font-size:    .9rem;
  margin-bottom: .5rem;
}
.em-testimonials__dots {
  display:         flex;
  justify-content: center;
  gap:             .5rem;
  margin-top:      1.5rem;
}
.em-testimonials__dot {
  width:          8px;
  height:         8px;
  border-radius:  50%;
  background:     var(--em-muted);
  border:         none;
  cursor:         pointer;
  transition:     background .25s, transform .25s;
  padding:        0;
}
.em-testimonials__dot.is-active {
  background: var(--em-gold);
  transform:  scale(1.3);
}

/* ===== BLOG CARDS POST-HOVER ACTIVE STATE ===== */
.em-post .em-ph {
  position:            absolute;
  inset:               -8%;
  background-size:     cover;
  background-position: center;
  opacity:             0;
  transition:          opacity .6s var(--em-ease);
}
.em-post.is-active .em-ph,
.em-post:hover      .em-ph { opacity: 1; }
.em-post.is-active  .em-ph {
  animation: shaderDrift 9s ease-in-out infinite alternate;
}
@keyframes shaderDrift {
  0%   { transform: scale(1)    translateY(0); }
  50%  { transform: scale(1.06) translateY(-3%); }
  100% { transform: scale(1.03) translateY(3%); }
}

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