/* ================================================================
   History of Bickfaya — horizontal scroll timeline (index.php #heritage)
   Markup: inc/heritage_timeline.php   Behaviour: assets/js/heritage-timeline.js
   ================================================================ */
.hx{
  --hx-bg:#00302A;--hx-ink:#F3EEE2;--hx-muted:rgba(243,238,226,.62);--hx-gold:#5EC7B8;
  --hx-line:rgba(94,199,184,.2);--hx-w:clamp(260px,24vw,360px);--hx-top:0px;
  --hx-ease:cubic-bezier(.22,1,.36,1);
  position:relative;background:
    radial-gradient(900px 500px at 12% 20%,rgba(94,199,184,.10),transparent 60%),
    radial-gradient(900px 600px at 90% 90%,rgba(0,122,107,.22),transparent 60%),var(--hx-bg);
  color:var(--hx-ink);font-family:'Inter','Cairo','Segoe UI',sans-serif;overflow:hidden;
}
body.lang-ar .hx{font-family:'Cairo','Segoe UI',sans-serif}
.hx *,.hx *::before,.hx *::after{box-sizing:border-box}
/* ScrollTrigger pinning needs instant scrolling (see heritage-timeline.js) */
html:has(.hx-anim){scroll-behavior:auto}
.hx em{font-style:italic;color:var(--hx-gold)}
body.lang-ar .hx em{font-style:normal}

.hx-pin{height:calc(100vh - var(--hx-top));min-height:540px;overflow:hidden;display:flex;align-items:center}
.hx-track{display:flex;align-items:center;gap:clamp(2.5rem,5vw,6rem);height:100%;width:max-content;padding-inline:clamp(1.25rem,5vw,5rem) 10vw;will-change:transform}

/* Intro */
.hx-intro{flex:none;width:clamp(280px,30vw,460px)}
.hx-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:max(.75rem, var(--fs-min, 12px));font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--hx-gold)}
.hx-eyebrow::before{content:"";width:30px;height:1px;background:currentColor}
.hx-title{font-family:'Montserrat', 'Inter', 'Cairo', sans-serif;font-weight:700;font-size:clamp(2.5rem,4.4vw, 4.4rem);line-height:.98;letter-spacing:-.02em;margin:1rem 0 1.2rem;color:var(--hx-ink)}
body.lang-ar .hx-title{font-family:'Cairo',sans-serif;font-weight:800;line-height:1.25;letter-spacing:0}
.hx-lead{color:var(--hx-muted);line-height:1.75;font-size:1rem;margin:0 0 1.4rem}
.hx-period{font-family:'Montserrat', 'Inter', 'Cairo', sans-serif;font-style:italic;font-size:clamp(1.25rem,1.8vw, 1.5rem);color:var(--hx-gold);margin:0 0 1.2rem}
body.lang-ar .hx-period{font-family:'Cairo',sans-serif;font-style:normal;font-weight:700}
.hx-hint{display:inline-flex;align-items:center;gap:10px;font-size:max(.75rem, var(--fs-min, 12px));font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--hx-muted)}
.hx-hint i{color:var(--hx-gold);animation:hxNudge 1.6s ease-in-out infinite}
body.lang-ar .hx-hint i{transform:scaleX(-1);animation-name:hxNudgeRtl}
@keyframes hxNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@keyframes hxNudgeRtl{0%,100%{transform:scaleX(-1) translateX(0)}50%{transform:scaleX(-1) translateX(6px)}}

/* Photo */
.hx-photo{flex:none;position:relative;margin:0;width:clamp(260px,27vw,420px);height:min(64vh,540px);border-radius:22px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.45),0 0 0 1px rgba(94,199,184,.18)}
.hx-photo img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:center}
.hx-photo figcaption{position:absolute;inset-inline:0;bottom:0;padding:3rem 1.2rem 1rem;font-size:.8125rem;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent)}

/* Rail + line */
.hx-rail{flex:none;position:relative;height:min(68vh,600px);padding-inline:2.5rem}
.hx-line{position:absolute;top:50%;inset-inline:0;display:flex;align-items:center;transform:translateY(-50%)}
.hx-line i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--hx-gold)}
.hx-line::before{content:"";position:absolute;inset-inline:10px;height:1px;background:var(--hx-line)}
.hx-line-fill{flex:1;height:2px;background:linear-gradient(90deg,var(--hx-gold),#009383);transform-origin:left center}
body.lang-ar .hx-line-fill{transform-origin:right center;background:linear-gradient(270deg,var(--hx-gold),#009383)}

/* Milestones: alternate above / below, interleaved */
.hx-items{list-style:none;margin:0;padding:0;display:flex;height:100%}
.hx-item{flex:none;position:relative;width:var(--hx-w);height:100%}
.hx-item+.hx-item{margin-inline-start:calc(var(--hx-w) * -.32)}
.hx-stem{position:absolute;inset-inline-start:0;width:1px;background:var(--hx-gold)}
.hx-up .hx-stem{top:4%;bottom:50%;transform-origin:bottom}
.hx-down .hx-stem{top:50%;bottom:4%;transform-origin:top}
.hx-dot{position:absolute;top:50%;inset-inline-start:0;width:16px;height:16px;margin-top:-8px;margin-inline-start:-8px;border-radius:50%;
  background:var(--hx-gold);box-shadow:0 0 0 6px rgba(94,199,184,.18),0 0 24px rgba(94,199,184,.5)}
.hx-copy{position:absolute;inset-inline-start:22px;inset-inline-end:0;display:flex;flex-direction:column;gap:.55rem}
.hx-up .hx-copy{top:2%;max-height:44%}
.hx-down .hx-copy{bottom:2%;max-height:44%;justify-content:flex-end}
.hx-mask{display:block;overflow:hidden;margin:0}
.hx-mask>span,.hx-mask>div{display:block}
.hx-year{font-family:'Montserrat', 'Inter', 'Cairo', sans-serif;font-style:italic;font-weight:700;font-size:clamp(1.5rem,2.4vw, 2.5rem);line-height:1.1;color:var(--hx-gold)}
body.lang-ar .hx-year{font-family:'Cairo',sans-serif;font-style:normal;font-weight:800}
.hx-item-title{font-family:'Montserrat', 'Inter', 'Cairo', sans-serif;font-weight:700;font-size:clamp(1.125rem,1.4vw, 1.25rem);line-height:1.25;color:var(--hx-ink)}
body.lang-ar .hx-item-title{font-family:'Cairo',sans-serif;font-weight:800}
.hx-item-title i{color:var(--hx-gold);font-size:.85em;margin-inline-end:4px}
.hx-desc{font-size:.875rem;line-height:1.6;color:var(--hx-muted)}
.hx-desc p{margin:0}
.hx-desc>div{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}

/* Hidden start states are set by GSAP (heritage-timeline.js), so without JS everything stays visible */

/* Static fallback (no GSAP / reduced motion): swipeable row, nothing hidden */
.hx-static .hx-pin{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.hx-static .hx-hint i{animation:none}

@media (max-width:767px){
  .hx{--hx-w:78vw}
  .hx-pin{min-height:600px}
  .hx-intro{width:84vw}
  .hx-photo{width:80vw;height:46vh}
  .hx-rail{height:min(76vh,640px);padding-inline:1.5rem}
  .hx-item+.hx-item{margin-inline-start:calc(var(--hx-w) * -.2)}
  .hx-desc>div{-webkit-line-clamp:4}
}
@media (prefers-reduced-motion:reduce){
  .hx-hint i{animation:none}
}