/* JOURNEY — "The Living Path". Loaded after style.css; uses new .journey* classes only. */
.journey{--jt-rgb:var(--main-rgb,225,29,72);--jt-accent:var(--main,#e11d48);--jt-soft:var(--main-soft,#fb7185);
  --jt-ink:var(--ink,#f4f1f1);--jt-faint:var(--ink-faint,rgba(244,241,241,.55));
  position:relative;list-style:none;margin:3.5rem auto 0;padding:0 0 2rem;max-width:1040px;isolation:isolate}
html[data-theme="light"] .journey{--jt-ink:var(--ink,#1a1416);--jt-faint:var(--ink-faint,rgba(26,20,22,.6))}
.journey-svg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 92%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 92%,transparent 100%)}
/* no-JS / pre-JS fallback line */
.journey::before{content:"";position:absolute;inset-block:0;inset-inline-start:50%;width:1px;background:rgba(var(--jt-rgb),.25);z-index:0}
.journey.jt-ready::before{display:none}

.journey-item{position:relative;z-index:1;display:grid;grid-template-columns:1fr 56px 1fr;align-items:start;
  margin-block-start:var(--jt-gap,3.4rem)}
.journey-item:first-child{margin-block-start:0}
.journey-item:nth-child(3n+2){--jt-gap:5rem}
.journey-item:nth-child(4n){--jt-gap:2.6rem}
.journey-item:nth-child(5){--jt-gap:4.2rem}
.journey-anchor{grid-column:2;grid-row:1;width:1px;height:1px;justify-self:center;margin-top:1.1rem}
.journey-content{grid-row:1;max-width:var(--jt-w,26rem);padding-block:.2rem}
.journey-item:nth-child(odd) .journey-content{grid-column:1;justify-self:end;text-align:end}
.journey-item:nth-child(even) .journey-content{grid-column:3;justify-self:start;text-align:start}
.journey-item[data-weight="major"]{--jt-w:30rem}
.journey-item:nth-child(4),.journey-item:nth-child(7){--jt-w:22rem}

.journey-meta{display:flex;gap:.8rem;align-items:center;margin:0 0 .35rem;font-size:.68rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--jt-faint)}
.journey-item:nth-child(odd) .journey-meta{justify-content:flex-end}
.journey-item:nth-child(even) .journey-meta{justify-content:flex-start}
.journey-index{font-variant-numeric:tabular-nums;opacity:.7}
.journey-cat{position:relative;padding-inline-start:1.4rem;transition:color .5s}
.journey-cat::before{content:"";position:absolute;inset-inline-start:0;top:50%;width:.9rem;height:1px;background:currentColor;
  opacity:.5;transform:scaleX(.4);transform-origin:left center;transition:transform .6s,opacity .6s}
[dir="rtl"] .journey-cat::before{transform-origin:right center}
.journey-year{display:block;font-family:Inter,sans-serif;font-weight:200;font-size:clamp(1.7rem,3.4vw,2.6rem);
  line-height:1;letter-spacing:-.04em;color:var(--jt-ink);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;
  transition:color .6s}
.journey-year i{font-style:normal;opacity:.4;margin-inline:.04em}
.journey-item:nth-child(even) .journey-year{-webkit-text-stroke:1px rgba(var(--jt-rgb),.7);color:transparent}
.journey-item:nth-child(even).is-active .journey-year{color:var(--jt-ink);-webkit-text-stroke-color:transparent}
.journey-item[data-weight="major"] .journey-year{font-weight:300}
.journey-title{margin:.7rem 0 0;font-size:clamp(1.05rem,1.9vw,1.35rem);font-weight:500;line-height:1.3;color:var(--jt-ink);
  padding-top:.7rem;border-top:1px solid rgba(var(--jt-rgb),.18);overflow-wrap:anywhere}
.journey-item[data-weight="major"] .journey-title{font-size:clamp(1.15rem,2.2vw,1.6rem)}
body.lang-ar .journey-title,body.lang-ar .journey-cat{font-family:Cairo,sans-serif;letter-spacing:0}
body.lang-ar .journey-meta{letter-spacing:.04em}

/* SVG parts */
.jt-base{fill:none;stroke:rgba(var(--jt-rgb),.22);stroke-width:1}
.jt-active{fill:none;stroke:var(--jt-accent);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;
  opacity:.85;transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1)}
.jt-shimmer{fill:none;stroke:var(--jt-soft);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:.05 .95;opacity:.5;
  animation:jt-shimmer 17s linear infinite}
@keyframes jt-shimmer{from{stroke-dashoffset:0}to{stroke-dashoffset:-1}}
.jt-branch{stroke:rgba(var(--jt-rgb),.35);stroke-width:1;fill:none}
.jt-branch-dot{fill:rgba(var(--jt-rgb),.5)}
.jt-signal{fill:var(--jt-soft);filter:drop-shadow(0 0 3px rgba(var(--jt-rgb),.7))}
.jt-m{transition:opacity .5s}
.jt-m-ring{fill:#14080d;stroke:rgba(var(--jt-rgb),.55);stroke-width:1;transition:stroke .5s,r .5s}
.jt-m-core{fill:var(--jt-accent);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.3);
  transition:opacity .5s,transform .6s cubic-bezier(.22,1,.36,1)}
.jt-m-halo{fill:none;stroke:rgba(var(--jt-rgb),.35);stroke-width:1;opacity:0;transform-box:fill-box;transform-origin:center}
html[data-theme="light"] .jt-m-ring{fill:#fff}
.jt-m.is-active .jt-m-ring{stroke:var(--jt-accent)}
.jt-m.is-active .jt-m-core{opacity:1;transform:scale(1)}
.jt-m[data-k="d"].is-active .jt-m-core{transform:rotate(45deg) scale(1)}
.jt-m.breathe .jt-m-halo{animation:jt-breathe var(--d,7s) ease-in-out var(--dl,0s) infinite}
@keyframes jt-breathe{0%,100%{opacity:0;transform:scale(1)}50%{opacity:.7;transform:scale(1.5)}}

/* active item emphasis (beyond color: marker shape, accent dash, index) */
.journey-item.is-active .journey-cat{color:var(--jt-accent)}
.journey-item.is-active .journey-cat::before{transform:scaleX(1);opacity:1}
.journey-item.is-active .journey-index{opacity:1;color:var(--jt-accent)}

/* reveal: only hidden once JS is ready, so content never depends on scripting */
.journey.jt-ready .journey-item .journey-content{opacity:0;transform:translateY(14px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.journey.jt-ready .journey-item.is-seen .journey-content{opacity:1;transform:none}

/* mobile / narrow: single-sided path beside content */
@media (max-width:720px){
  .journey{margin-top:2.5rem;padding-bottom:1rem}
  .journey::before{inset-inline-start:14px}
  .journey-item{grid-template-columns:28px 1fr;margin-block-start:2.2rem!important}
  .journey-item:first-child{margin-block-start:0!important}
  .journey-anchor{grid-column:1;margin-top:.9rem}
  .journey-item:nth-child(n) .journey-content{grid-column:2;justify-self:stretch;text-align:start;max-width:none}
  .journey-item:nth-child(n) .journey-meta{justify-content:flex-start}
  .journey-year{font-size:1.7rem}
  .journey-item:nth-child(even) .journey-year{-webkit-text-stroke:0;color:var(--jt-ink)}
  .jt-branch,.jt-branch-dot,.jt-shimmer{display:none}
  .journey-title{font-size:1.05rem!important}
}
@media (min-width:721px) and (max-width:1000px){
  .journey-item{grid-template-columns:1fr 44px 1fr}
  .journey-item:nth-child(n){--jt-gap:2.8rem}
}
@media (prefers-reduced-motion:reduce){
  .jt-shimmer,.jt-signal{display:none}
  .jt-m.breathe .jt-m-halo{animation:none}
  .jt-active{transition:none}
  .journey.jt-ready .journey-item .journey-content{opacity:1!important;transform:none!important;transition:none}
}

/* ---------- Section background: drifting contour map + survey grid + path glow ---------- */
#timeline{position:relative;isolation:isolate;overflow:hidden}
#timeline::before,#timeline::after{content:"";position:absolute;pointer-events:none;z-index:-1}
/* contour lines (tileable wavy strata), slowly drifting */
#timeline::before{inset:-40% -10%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='360' fill='none' stroke='%23e11d48' stroke-width='1'%3E%3Cpath opacity='.30' d='M0 40C200 12 400 68 600 40'/%3E%3Cpath opacity='.22' d='M0 90C200 60 400 120 600 90'/%3E%3Cpath opacity='.30' d='M0 140C200 168 400 112 600 140'/%3E%3Cpath opacity='.18' d='M0 190C200 160 400 220 600 190'/%3E%3Cpath opacity='.28' d='M0 240C200 268 400 212 600 240'/%3E%3Cpath opacity='.20' d='M0 290C200 262 400 318 600 290'/%3E%3Cpath opacity='.26' d='M0 335C200 360 400 310 600 335'/%3E%3C/svg%3E");
  background-size:600px 360px;opacity:.5;transform:rotate(-8deg);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 20%,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 20%,transparent 75%);
  animation:jt-drift 90s linear infinite}
/* survey dot grid + soft rose bloom centered on the path */
#timeline::after{inset:0;
  background:
    radial-gradient(ellipse 38% 50% at 50% 40%,rgba(var(--main-rgb,225,29,72),.10),transparent 70%),
    radial-gradient(circle,rgba(var(--main-rgb,225,29,72),.28) 1px,transparent 1.4px) 0 0/34px 34px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);opacity:.55}
@keyframes jt-drift{from{background-position:0 0}to{background-position:600px 360px}}
html[data-theme="light"] #timeline::before{opacity:.28}
html[data-theme="light"] #timeline::after{opacity:.35}
@media (max-width:720px){#timeline::before{opacity:.3;background-size:420px 252px;animation-duration:140s}#timeline::after{background-size:auto,28px 28px}}
@media (prefers-reduced-motion:reduce){#timeline::before{animation:none}}

/* ---------- Section background color: "midnight to ember" ---------- */
section#timeline.timeline-section{
  background:
    radial-gradient(ellipse 60% 45% at 85% 8%,rgba(88,28,135,.35),transparent 70%),
    radial-gradient(ellipse 55% 45% at 10% 95%,rgba(159,18,57,.38),transparent 70%),
    linear-gradient(180deg,#08060d 0%,#120914 45%,#1a0a12 100%)!important;
  border-radius:0}
html[data-theme="light"] section#timeline.timeline-section{
  background:
    radial-gradient(ellipse 60% 45% at 85% 8%,rgba(196,181,253,.45),transparent 70%),
    radial-gradient(ellipse 55% 45% at 10% 95%,rgba(253,164,175,.50),transparent 70%),
    linear-gradient(180deg,#fbf6f4 0%,#f8ecee 55%,#f6e4e8 100%)!important}
html[data-theme="light"] .jt-m-ring{fill:#fff}

/* ---------- Section edges: no lines, just depth (cast shadow + ember underglow) ----------
   NOTE: the top cast shadow was deliberately softened once the .shadow-transmission
   seam was introduced between Skills and Timeline — the seam now carries the
   atmospheric dark band, so a heavy duplicate shadow here would muddy the read.
   The inset top fade is kept so the Timeline's content still melts up into the seam. */
section#timeline.timeline-section{border-top:0!important;border-bottom:0!important;position:relative;z-index:2;
  box-shadow:
    0 -10px 30px -14px rgba(0,0,0,.35),               /* gentle hand-off into the seam above */
    0 40px 80px -24px rgba(159,18,57,.35),            /* ember glow spilling onto the section below */
    inset 0 70px 90px -50px rgba(0,0,0,.75),          /* soft fade-in at the top */
    inset 0 -80px 100px -60px rgba(225,29,72,.22)!important}  /* warm underglow at the bottom */
:has(+ #timeline){border-bottom:0!important}
#timeline + *{border-top:0!important}
html[data-theme="light"] section#timeline.timeline-section{
  box-shadow:
    0 -8px 24px -14px rgba(60,20,30,.14),
    0 36px 70px -26px rgba(225,29,72,.22),
    inset 0 60px 80px -50px rgba(60,20,30,.14),
    inset 0 -70px 90px -60px rgba(225,29,72,.14)!important}
@media (max-width:720px){section#timeline.timeline-section{box-shadow:0 -8px 24px -14px rgba(0,0,0,.35),0 26px 50px -20px rgba(159,18,57,.3),inset 0 44px 60px -36px rgba(0,0,0,.7)!important}}