/* VORLUX Academy — Journey visual « Von Marokko nach Deutschland »
   (owner order 2026-10-27 04:53 « Dir image dual Deutschland et Maroc
   reel — avec JS et CSS »). Self-contained: every class is jr-prefixed,
   colours come from the site tokens in site.css (logo palette
   #2E9BFF → #38E1FF → #7C5CFF). Real photos only
   (assets/journey/*.webp). Transform/opacity animation only. */
.journey{overflow:clip}
.jr-darija{margin:8px 0 0;font-size:1.18rem;font-weight:800;line-height:1.9;color:var(--brand-d)}
[data-theme="dark"] .jr-darija{color:#7CC4FF}

/* Stage: arc layer above, cards below */
.jr-stage{position:relative}
.jr-arcwrap{position:absolute;top:-4px;left:0;right:0;height:118px;z-index:0;pointer-events:none;will-change:transform}
@media(min-width:860px){.jr-arcwrap{height:196px}}
.jr-arc{position:absolute;inset:0;width:100%;height:100%}
.jr-arc-bg{fill:none;stroke:var(--line2);stroke-width:2.5;stroke-dasharray:1 11;stroke-linecap:round;opacity:.85}
.jr-arc-line{fill:none;stroke:url(#jrGrad);stroke-width:3.5;stroke-linecap:round;
  filter:drop-shadow(0 3px 7px rgba(56,225,255,.45))}
.jr-node{position:absolute;width:15px;height:15px;border-radius:50%;background:var(--panel);
  border:3.5px solid var(--brand);transform:translate(-50%,-50%);z-index:1}
.jr-node-de{left:7.5%;top:83.8%}
.jr-node-ma{left:92.5%;top:83.8%;border-color:var(--violet)}
.jr-dot{position:absolute;left:92.5%;top:83.8%;width:17px;height:17px;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 35% 35%,#ffffff,#bdeaff 55%,#38E1FF);
  border:2.5px solid #2E9BFF;transform:translate(-50%,-50%);
  box-shadow:0 0 0 5px rgba(56,225,255,.22),0 0 18px 6px rgba(56,225,255,.55)}
.jr-dot.jr-arrive{animation:jrPulse .8s ease-in-out infinite alternate}
@keyframes jrPulse{from{box-shadow:0 0 0 4px rgba(124,92,255,.25),0 0 14px 5px rgba(124,92,255,.5)}
  to{box-shadow:0 0 0 9px rgba(124,92,255,.10),0 0 22px 9px rgba(124,92,255,.65)}}

/* Cards — chunky white, 2px border, very rounded (site language) */
.jr-cards{position:relative;z-index:1;display:grid;gap:20px;padding-top:104px}
@media(min-width:860px){
  .jr-cards{grid-template-columns:1fr 1fr;gap:36px;padding-top:158px}
  .jr-de{grid-column:1;grid-row:1}
  .jr-ma{grid-column:2;grid-row:1}
}
.jr-card{margin:0;background:var(--panel);border:2px solid var(--line);border-radius:24px;
  padding:12px;box-shadow:var(--shadow);transform-style:preserve-3d}
.jr-photo{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:var(--panel2)}
.jr-photo img{width:100%;height:100%;object-fit:cover;will-change:transform;
  animation:jrKen 26s ease-in-out infinite alternate}
.jr-ma .jr-photo img{animation-delay:-13s}
@keyframes jrKen{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.15) translate(-1.6%,1.6%)}}
.jr-chip{position:absolute;top:12px;inset-inline-start:12px;z-index:2;padding:5px 13px;border-radius:999px;
  background:rgba(12,26,54,.74);color:#fff;font-size:.78rem;font-weight:800;letter-spacing:.08em;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.jr-chip b{color:var(--cyan);font-weight:800}
.jr-cap{display:flex;align-items:center;gap:12px;padding:14px 8px 6px}
.jr-flag{width:46px;height:auto;border-radius:8px;border:2px solid var(--line);
  box-shadow:var(--shadow-sm);flex-shrink:0}
.jr-cap-text{display:flex;flex-direction:column;line-height:1.3}
.jr-city{font-weight:800;color:var(--ink);font-size:1.06rem}
.jr-sub{color:var(--mut);font-size:.88rem;font-weight:600}
.jr-ar{margin-inline-start:auto;font-weight:800;font-size:1.25rem;color:var(--brand-d);line-height:1}
[data-theme="dark"] .jr-ar{color:#7CC4FF}

/* Scroll reveal — hidden only when journey.js is alive (html.jr-js) */
html.jr-js .jr-reveal{opacity:0;transform:translateY(24px);
  transition:opacity .7s ease,transform .7s ease}
html.jr-js .jr-reveal.in{opacity:1;transform:none}
html.jr-js .jr-ma.jr-reveal{transition-delay:.14s}

/* Reduced motion: everything static, arc fully drawn, dot parked */
@media(prefers-reduced-motion:reduce){
  .jr-photo img{animation:none}
  .jr-dot{animation:none !important}
  html.jr-js .jr-reveal{opacity:1;transform:none;transition:none}
}