/* ==================================================================
   VOLT — launch homepage motion ("Now in Egypt").
   Loaded on the home page only. Monochrome, V-derived geometry.
   Everything is disabled under prefers-reduced-motion.
   ================================================================== */

/* ---------- 1. Intro overlay (plays once per browser session) ---------- */
.lx-intro { display: none; }
.lx-play .lx-intro {
  display: block; position: fixed; inset: 0; z-index: 1000;
  color: #fff; overflow: hidden; cursor: pointer;
}
.lx-play body { overflow: hidden; }

.lx-intro__half {
  position: absolute; inset: 0; background: #0F0F0F;
  transition: transform .95s cubic-bezier(.77,0,.18,1);
}
.lx-intro__half--a { clip-path: polygon(0 0, 100% 0, 100% 38%, 0 72%); }
.lx-intro__half--b { clip-path: polygon(0 71.8%, 100% 37.8%, 100% 100%, 0 100%); }
.lx-intro.is-out .lx-intro__half--a { transform: translate(-6%, -105%); }
.lx-intro.is-out .lx-intro__half--b { transform: translate(6%, 105%); }

.lx-intro__lines {
  position: absolute; inset: -20%; z-index: 1; pointer-events: none;
  background-image: repeating-linear-gradient(-64deg, transparent 0 34px, rgba(255,255,255,.07) 34px 35px);
  animation: lxLines 3.6s cubic-bezier(.2,.6,.2,1) both;
}
.lx-intro.is-out .lx-intro__lines { opacity: 0; transition: opacity .4s; }

.lx-intro__stage {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 2.4vh, 26px);
  transition: opacity .45s, transform .9s cubic-bezier(.77,0,.18,1);
}
.lx-intro.is-out .lx-intro__stage { opacity: 0; transform: scale(1.12); }

.lx-intro__v {
  width: clamp(120px, 18vw, 230px); height: auto;
  animation: lxV 1.1s cubic-bezier(.16,1,.3,1) .25s both;
  filter: drop-shadow(0 0 0 rgba(255,255,255,0));
}
.lx-intro__flash {
  position: absolute; left: 50%; top: 50%; width: 140vmax; height: 2px; z-index: 3;
  background: linear-gradient(90deg, transparent, #fff 45%, #fff 55%, transparent);
  transform: translate(-50%, -50%) rotate(-26deg) scaleX(0);
  animation: lxFlash .9s cubic-bezier(.7,0,.2,1) .95s both;
  pointer-events: none;
}
.lx-intro__word {
  width: clamp(170px, 26vw, 360px); height: auto;
  animation: lxWipe .8s cubic-bezier(.77,0,.18,1) 1.15s both;
}
.lx-intro__tag {
  margin: .6rem 0 0; font-family: var(--display); text-transform: uppercase;
  display: flex; align-items: baseline; gap: .6em; line-height: 1;
}
.lx-intro__tag span {
  font-weight: 500; font-size: clamp(.8rem, 1.4vw, 1.05rem); letter-spacing: .5em; color: var(--cool);
  animation: lxTrack 1s cubic-bezier(.16,1,.3,1) 1.7s both;
}
.lx-intro__tag b {
  font-weight: 700; font-size: clamp(2.2rem, 6vw, 4.4rem); letter-spacing: .06em;
  animation: lxRise .8s cubic-bezier(.16,1,.3,1) 1.95s both;
}
.lx-intro__ar {
  margin: 0; font-size: clamp(1rem, 2vw, 1.35rem); color: var(--light);
  font-family: "Segoe UI", Tahoma, "Geeza Pro", "Noto Sans Arabic", sans-serif; font-weight: 600;
  animation: lxFade .8s ease 2.3s both;
}
.lx-intro__skip {
  position: absolute; right: 22px; bottom: 22px; z-index: 4;
  background: none; border: 1px solid rgba(255,255,255,.3); color: var(--cool);
  font: 500 .66rem/1 var(--display); letter-spacing: .24em; text-transform: uppercase;
  padding: .7rem 1rem; cursor: pointer; transition: color var(--t), border-color var(--t);
}
.lx-intro__skip:hover { color: #fff; border-color: #fff; }
.lx-intro.is-out .lx-intro__skip { opacity: 0; }

@keyframes lxLines { from { opacity: 0; transform: translateX(-8%); } to { opacity: 1; transform: translateX(0); } }
@keyframes lxV {
  0%   { opacity: 0; transform: scale(1.6) translateY(-6%); clip-path: inset(0 0 100% 0); }
  60%  { opacity: 1; clip-path: inset(0 0 0 0); }
  100% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}
@keyframes lxFlash {
  0% { transform: translate(-50%,-50%) rotate(-26deg) scaleX(0); opacity: 1; }
  60% { transform: translate(-50%,-50%) rotate(-26deg) scaleX(1); opacity: 1; }
  100% { transform: translate(-50%,-50%) rotate(-26deg) scaleX(1); opacity: 0; }
}
@keyframes lxWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes lxTrack { from { opacity: 0; letter-spacing: 1.4em; } to { opacity: 1; letter-spacing: .5em; } }
@keyframes lxRise { from { opacity: 0; transform: translateY(60%); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
@keyframes lxFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- 2. Launch hero ---------- */
.lx-hero { min-height: min(100svh, 980px); display: flex; flex-direction: column; isolation: isolate; }
.lx-hero .hero__in { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.lx-slides { overflow: hidden; will-change: transform; }
.lx-slides .lx-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; filter: grayscale(1) contrast(1.15) brightness(.9);
  transform: scale(1.12);
  transition: opacity 1.6s ease;
}
.lx-slides .lx-slide.is-on { opacity: .62; animation: lxKen 8.5s linear forwards; }
.lx-slides .lx-slide.is-on:nth-child(2n) { animation-name: lxKen2; }
@keyframes lxKen  { from { transform: scale(1.14) translate(1.5%, 1%); } to { transform: scale(1.02) translate(-1%, -1%); } }
@keyframes lxKen2 { from { transform: scale(1.02) translate(-1.5%, 0); } to { transform: scale(1.14) translate(1.5%, -1.2%); } }

/* diagonal light bar that sweeps across on every photo change */
.lx-sweep {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
}
.lx-sweep::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 22%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  transform: skewX(-26deg) translateX(0); opacity: 0;
}
.lx-sweep.is-run::before { animation: lxSweep 1.3s cubic-bezier(.6,0,.2,1); }
@keyframes lxSweep { 0% { opacity: 1; transform: skewX(-26deg) translateX(0); } 100% { opacity: 1; transform: skewX(-26deg) translateX(820%); } }

.lx-hero .motion-lines { animation: lxDrift 18s linear infinite; background-size: 200% 200%; }
@keyframes lxDrift { from { background-position: 0 0; } to { background-position: 400px 0; } }

/* entrance — waits for the intro to finish (html.lx-go) */
.lx-k, .lx-rotor, .lx-hero .hero__text, .lx-hero .hero__cta, .lx-dots, .lx-ring {
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.lx-js:not(.lx-go) .lx-k,
.lx-js:not(.lx-go) .lx-rotor,
.lx-js:not(.lx-go) .lx-hero .hero__text,
.lx-js:not(.lx-go) .lx-hero .hero__cta,
.lx-js:not(.lx-go) .lx-dots { opacity: 0; transform: translateY(24px); }
.lx-js:not(.lx-go) .lx-ring { opacity: 0; transform: scale(.7) rotate(-40deg); }
.lx-go .lx-k { transition-delay: .05s; }
.lx-go .lx-rotor { transition-delay: .75s; }
.lx-go .lx-hero .hero__text { transition-delay: .9s; }
.lx-go .lx-hero .hero__cta { transition-delay: 1.05s; }
.lx-go .lx-dots { transition-delay: 1.2s; }
.lx-go .lx-ring { transition-delay: .6s; transition-duration: 1.4s; }

.lx-title { max-width: none !important; margin-bottom: 1.2rem; line-height: .9; }
.lx-line { display: block; overflow: hidden; padding-bottom: .04em; }
.lx-line > span { display: inline-block; transition: transform 1s cubic-bezier(.16,1,.3,1); }
.lx-js:not(.lx-go) .lx-line > span { transform: translateY(110%); }
.lx-go .lx-line:nth-child(1) > span { transition-delay: .1s; }
.lx-go .lx-line:nth-child(2) > span { transition-delay: .22s; }
.lx-go .lx-line:nth-child(3) > span { transition-delay: .36s; }
.lx-line--sm { font-size: .56em; letter-spacing: .02em; color: var(--light); }

/* EGYPT — outlined, then filled by a moving light */
.lx-egypt {
  position: relative; font-size: clamp(4.4rem, 15vw, 12.5rem); letter-spacing: -.02em; line-height: .86;
  color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.9);
}
.lx-egypt::after {
  content: attr(data-text); position: absolute; inset: 0;
  color: #fff; -webkit-text-stroke: 0;
  background: linear-gradient(100deg, #fff 0%, #fff 40%, #9DA2A5 50%, #fff 60%, #fff 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  clip-path: inset(0 100% 0 0);
}
html:not(.lx-js) .lx-egypt::after { clip-path: none; }
.lx-go .lx-egypt::after { animation: lxFill 1.1s cubic-bezier(.77,0,.18,1) 1.1s forwards, lxShine 4.5s linear 2.4s infinite; }
@keyframes lxFill { to { clip-path: inset(0 0 0 0); } }
@keyframes lxShine { from { background-position: 150% 0; } to { background-position: -100% 0; } }

/* rotating word line */
.lx-rotor {
  font-family: var(--display); font-weight: 500; text-transform: uppercase;
  letter-spacing: .2em; font-size: clamp(.78rem, 1.2vw, .95rem); color: var(--cool);
  margin: 0 0 1.2rem; display: flex; align-items: center; gap: .7em; flex-wrap: wrap;
}
.lx-rotor__box { position: relative; display: inline-block; height: 1.3em; overflow: hidden; vertical-align: bottom; color: #fff; min-width: 20ch; }
.lx-rotor__w { position: absolute; left: 0; top: 0; white-space: nowrap; }

/* rotating seal: V + "Now in Egypt" ring */
.lx-ring {
  position: absolute; right: clamp(24px, 6vw, 110px); top: 50%; margin-top: -120px;
  width: 240px; height: 240px; z-index: 2; pointer-events: none;
}
.lx-ring svg { width: 100%; height: 100%; animation: lxSpin 22s linear infinite; }
.lx-ring text { fill: #fff; font-family: var(--display); font-weight: 500; font-size: 13.4px; letter-spacing: 3.6px; text-transform: uppercase; }
.lx-ring img { position: absolute; left: 50%; top: 50%; width: 92px; height: auto; transform: translate(-50%, -50%); animation: lxPulse 3.2s ease-in-out infinite; }
.lx-ring::before { content: ""; position: absolute; inset: 44px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; }
@keyframes lxSpin { to { transform: rotate(360deg); } }
@keyframes lxPulse { 0%,100% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 50% { opacity: .75; transform: translate(-50%,-50%) scale(.94); } }

/* slide indicator */
.lx-dots { display: flex; gap: 10px; align-items: center; margin-top: 2.6rem; font: 500 .66rem/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--cool); }
.lx-dots button { width: 44px; height: 14px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.lx-dots button::before, .lx-dots button::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: rgba(255,255,255,.22); }
.lx-dots button::after { background: #fff; transform: scaleX(0); transform-origin: left; }
.lx-dots button.is-on::after { animation: lxBar var(--lx-dur, 6s) linear forwards; }
.lx-dots button.is-done::after { transform: scaleX(1); }
.lx-dots__label { margin-left: .8rem; min-width: 16ch; }
@keyframes lxBar { to { transform: scaleX(1); } }

/* facts count up + underline draw */
.lx-hero .hero__fact { position: relative; }
.lx-hero .hero__fact::after { content: ""; position: absolute; left: var(--gut); bottom: 0; height: 2px; width: 34px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.lx-go .lx-hero .hero__fact::after { transform: scaleX(1); }
.lx-go .lx-hero .hero__fact:nth-child(2)::after { transition-delay: .15s; }
.lx-go .lx-hero .hero__fact:nth-child(3)::after { transition-delay: .3s; }
.lx-go .lx-hero .hero__fact:nth-child(4)::after { transition-delay: .45s; }

/* ---------- 3. Marquee band ---------- */
.lx-marquee { background: #fff; color: var(--carbon); overflow: hidden; border-bottom: 1px solid var(--line); }
.lx-marquee__track { display: flex; width: max-content; animation: lxMarquee 38s linear infinite; }
.lx-marquee:hover .lx-marquee__track { animation-play-state: paused; }
.lx-marquee__track span {
  font-family: var(--display); font-weight: 700; text-transform: uppercase; white-space: nowrap;
  font-size: clamp(1.4rem, 3.2vw, 2.6rem); letter-spacing: -.01em; padding: 1.1rem 0; line-height: 1;
}
.lx-marquee__track span.is-ghost { color: transparent; -webkit-text-stroke: 1.2px var(--carbon); }
.lx-marquee__track span[lang="ar"] { font-family: "Segoe UI", Tahoma, "Geeza Pro", "Noto Sans Arabic", sans-serif; letter-spacing: 0; }
.lx-marquee__track i {
  flex: none; align-self: center; width: 26px; height: 18px; margin: 0 clamp(18px, 2.4vw, 36px);
  background: var(--carbon); clip-path: polygon(0 0, 100% 0, 50% 100%);
}
@keyframes lxMarquee { to { transform: translateX(-50%); } }

/* ---------- 4. Image strip: diagonal wipe reveal + slow zoom ---------- */
.lx-strip figure { overflow: hidden; position: relative; }
.lx-strip img { transition: transform 1.2s cubic-bezier(.16,1,.3,1), filter .6s; }
.lx-strip figure:hover img { transform: scale(1.06); filter: grayscale(0) !important; }
.lx-js .lx-strip figure { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transition: clip-path 1.1s cubic-bezier(.77,0,.18,1); }
.lx-js .lx-strip figure.is-in { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.lx-strip figure:nth-child(2) { transition-delay: .12s; }
.lx-strip figure:nth-child(3) { transition-delay: .24s; }

/* ---------- 5. Responsive ---------- */
@media (max-width: 1100px) { .lx-ring { display: none; } }
@media (max-width: 640px) {
  .lx-hero { min-height: 92svh; }
  .lx-egypt { -webkit-text-stroke-width: 1.5px; font-size: 23vw; }
  .lx-line--sm { font-size: .4em; letter-spacing: .04em; }
  .lx-rotor__box { min-width: 0; flex: 1; }
  .lx-dots__label { display: none; }
  .lx-intro__skip { right: 14px; bottom: 14px; }
}

/* ---------- 6. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .lx-intro { display: none !important; }
  .lx-slides .lx-slide.is-on, .lx-ring svg, .lx-ring img, .lx-marquee__track, .lx-hero .motion-lines { animation: none !important; }
  .lx-egypt::after { animation: none !important; clip-path: none !important; }
  .lx-js .lx-strip figure { clip-path: none; }
}