/* JisrLanguages V3.2A — Premium Emotional Motion System
   CSS-first motion, accessible defaults, no heavy libraries. */
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.2,.9,.18,1.12);
  --motion-slow:9s;
  --motion-medium:4.8s;
  --motion-fast:.42s;
}
.skip-link{
  position:absolute;left:18px;top:10px;z-index:1000;
  transform:translateY(-160%);background:#fff;border:2px solid var(--ink);border-radius:999px;
  padding:10px 14px;box-shadow:4px 4px 0 var(--ink);font-weight:950;
}
.skip-link:focus{transform:translateY(0)}
.premium-motion{
  background:
    radial-gradient(circle at 76% 8%, rgba(236,58,134,.20), transparent 28%),
    radial-gradient(circle at 7% 21%, rgba(24,183,165,.18), transparent 30%),
    radial-gradient(circle at 54% 93%, rgba(255,180,54,.22), transparent 28%),
    linear-gradient(180deg,#fff3bd 0%, #fff9df 46%, #fffdf4 100%);
}
.motion-canvas{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;isolation:isolate}
.glow-orb{position:absolute;border-radius:999px;filter:blur(2px);opacity:.75;mix-blend-mode:multiply;transform:translate3d(0,0,0)}
.glow-a{width:44vw;max-width:540px;height:44vw;max-height:540px;background:rgba(236,58,134,.16);right:-12vw;top:4vh;animation:driftA 16s ease-in-out infinite alternate}
.glow-b{width:39vw;max-width:490px;height:39vw;max-height:490px;background:rgba(24,183,165,.15);left:-14vw;top:26vh;animation:driftB 18s ease-in-out infinite alternate}
.glow-c{width:31vw;max-width:380px;height:31vw;max-height:380px;background:rgba(255,180,54,.18);left:37vw;bottom:-10vh;animation:driftC 14s ease-in-out infinite alternate}
.grain{position:absolute;inset:0;opacity:.18;background-image:radial-gradient(rgba(23,23,19,.10) 1px, transparent 1px);background-size:18px 18px;mask-image:linear-gradient(180deg,#000,transparent 85%)}
@keyframes driftA{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-44px,38px,0) scale(1.08)}}
@keyframes driftB{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(52px,-34px,0) scale(1.06)}}
@keyframes driftC{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-20px,-48px,0) scale(1.12)}}
.glass-nav{background:rgba(255,249,223,.70);box-shadow:0 8px 30px rgba(45,31,0,.06)}
.motion-toggle{
  display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.16);border-radius:999px;
  padding:10px 13px;background:rgba(255,255,255,.62);font-weight:900;color:#5a4b30;cursor:pointer;
}
.motion-toggle:hover{background:#fff}
.motion-toggle:focus-visible,.magnetic-link:focus-visible,.destination-card:focus-visible,.btn:focus-visible{outline:4px solid rgba(24,183,165,.35);outline-offset:3px}
.premium-hero:before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:110px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,253,244,.65));
}
.hero-copy h1{animation:heroTitleIn .95s var(--ease-out) both;transform-origin:left bottom}
.hero-copy .lead{animation:heroCopyIn 1.05s var(--ease-out) both;animation-delay:.12s}
.hero-copy .lead.ar{animation-delay:.20s}
@keyframes heroTitleIn{0%{opacity:0;transform:translateY(26px) scale(.975)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes heroCopyIn{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:translateY(0)}}
.trust-ribbon{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
.trust-ribbon span{
  border:1px solid rgba(0,0,0,.11);background:rgba(255,255,255,.72);border-radius:999px;padding:8px 11px;
  font-size:12px;font-weight:950;color:#675028;box-shadow:0 10px 24px rgba(30,20,0,.06);
}
.choice-motion{perspective:900px}
.destination-card{
  isolation:isolate;transform-style:preserve-3d;
  animation:choiceRise .78s var(--ease-out) both;
}
.destination-card:nth-child(2){animation-delay:.1s}
.destination-card:after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.52) 45%,transparent 70%);
  transform:translateX(-120%);transition:transform .9s var(--ease-out);
}
.destination-card:hover:after{transform:translateX(120%)}
.destination-card:hover b span{display:inline-block;animation:arrowNudge .74s ease-in-out infinite alternate}
@keyframes arrowNudge{to{transform:translateX(4px)}}
@keyframes choiceRise{0%{opacity:0;transform:translateY(28px) rotateX(8deg)}100%{opacity:1;transform:translateY(0) rotateX(0)}}
.cinematic-bridge{transform-style:preserve-3d;background:
  radial-gradient(circle at 50% 45%, rgba(255,255,255,.88), rgba(255,255,255,.28) 40%, transparent 68%),
  linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,244,199,.60));
}
.bridge-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:.96}
.bridge-shadow{fill:none;stroke:rgba(23,23,19,.12);stroke-width:18;stroke-linecap:round;filter:url(#softGlow)}
.bridge-path{fill:none;stroke:url(#bridgeGradient);stroke-width:10;stroke-linecap:round;stroke-dasharray:980;stroke-dashoffset:980;animation:drawBridge 2.2s var(--ease-out) .35s forwards, bridgeBreathe 4.2s ease-in-out 2.7s infinite}
@keyframes drawBridge{to{stroke-dashoffset:0}}
@keyframes bridgeBreathe{0%,100%{stroke-width:9;filter:drop-shadow(0 0 10px rgba(255,180,54,.22))}50%{stroke-width:12;filter:drop-shadow(0 0 18px rgba(236,58,134,.28))}}
.moving-light{fill:#fff;filter:drop-shadow(0 0 10px rgba(255,180,54,.95));offset-path:path("M86 285 C 190 130, 310 388, 394 260 S 563 130, 678 270");animation:moveOnBridge 7.4s ease-in-out infinite;opacity:.95}
.light-two{animation-delay:-2.2s;opacity:.8}.light-three{animation-delay:-4.5s;opacity:.7}
@keyframes moveOnBridge{0%{offset-distance:0%;opacity:0}10%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}
.depth-card{will-change:transform;transition:transform .45s var(--ease-out)}
.premium-core{filter:drop-shadow(0 24px 38px rgba(0,0,0,.16))}
.orbit-dot{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--pink);left:50%;top:0;box-shadow:0 0 0 7px rgba(236,58,134,.12);animation:orbitDot 5.4s linear infinite;transform-origin:0 95px}
@keyframes orbitDot{to{transform:rotate(360deg)}}
.micro-proof{
  position:absolute;background:#171713;color:#fff;border-radius:999px;padding:9px 12px;font-size:12px;font-weight:950;box-shadow:0 16px 35px rgba(0,0,0,.18);animation:microFloat 5.6s ease-in-out infinite;
}
.proof-one{left:42px;bottom:34px}.proof-two{right:42px;top:34px;animation-delay:-2.4s;background:#fff;color:#171713;border:1px solid rgba(0,0,0,.12)}
@keyframes microFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.animated-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.trust-step{
  position:relative;overflow:hidden;background:rgba(255,255,255,.74);border:2px solid rgba(0,0,0,.13);border-radius:28px;padding:22px;box-shadow:var(--shadow);min-height:218px;
}
.trust-step:before{content:"";position:absolute;inset:auto -60px -80px auto;width:160px;height:160px;border-radius:50%;background:rgba(255,180,54,.14);transition:transform .5s var(--ease-out)}
.trust-step:hover:before{transform:scale(1.35)}
.trust-step:hover{transform:translateY(-5px)}
.step-number{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:18px;border:2px solid var(--ink);background:#fff3bf;box-shadow:4px 4px 0 var(--ink);font-weight:950;margin-bottom:18px}
.trust-step p{color:var(--muted);line-height:1.65;font-weight:620;margin:0}
.premium-journey .journey-step{transition:transform .32s var(--ease-out), box-shadow .32s var(--ease-out)}
.premium-journey .journey-step:hover{transform:translateY(-5px);box-shadow:0 24px 60px rgba(30,20,0,.14)}
.premium-journey .journey-arrow{animation:arrowPulse 1.6s ease-in-out infinite alternate}
@keyframes arrowPulse{to{transform:translateX(5px);opacity:.72}}
.final-actions{margin-top:22px}
.reveal-up{transition-duration:.82s;transition-timing-function:var(--ease-out)}
.stagger-1{transition-delay:.08s;animation-delay:.08s}.stagger-2{transition-delay:.16s;animation-delay:.16s}.stagger-3{transition-delay:.24s;animation-delay:.24s}.stagger-4{transition-delay:.32s;animation-delay:.32s}
body.motion-paused *,body.motion-paused *:before,body.motion-paused *:after{animation-play-state:paused!important}
@media(max-width:1040px){
  .animated-steps{grid-template-columns:1fr 1fr}
  .bridge-svg{opacity:.72}
}
@media(max-width:700px){
  .motion-toggle{width:100%}
  .trust-ribbon span{font-size:11px}
  .animated-steps{grid-template-columns:1fr}
  .premium-hero{min-height:auto}
  .bridge-svg{inset:auto 0 0 0;height:80%;top:12%}
  .micro-proof{display:none}
  .orbit-dot{transform-origin:0 78px}
}
@media (prefers-reduced-motion: reduce){
  .premium-motion .glow-orb,.premium-motion .bridge-path,.premium-motion .moving-light,.premium-motion .orbit-dot,.premium-motion .destination-card,.premium-motion h1,.premium-motion .lead{animation:none!important}
  .bridge-path{stroke-dashoffset:0!important}
}

/* V3.2B — restored Name in Arabic emotional conversion preview */
.destination-mini-link{display:block;margin-top:8px;color:#6b604c;font-weight:900;font-size:12px;letter-spacing:0;text-transform:none}
.name-home-section{padding-top:clamp(2rem,5vw,4rem);padding-bottom:clamp(2rem,5vw,4rem)}
.name-home-section .name-bridge-zone{max-width:1180px}