/* ── s-journey: scroll-driven cinematic carousel ─────────────── */
.s-journey{background:var(--color-primary);position:relative;height:1200vh;}

.jrn-sticky{
  position:sticky;top:0;height:100vh;overflow:hidden;
}

/* ── Portrait (left side, drifts further left on scroll) ─────── */
.jrn-portrait{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  perspective:900px;perspective-origin:50% 42%;
  width:clamp(220px,22vw,340px);
  pointer-events:none;will-change:transform;
}
.jrn-glow{
  position:absolute;inset:-40% -25%;
  background:radial-gradient(ellipse at 50% 55%,rgba(20,70,220,.5) 0%,rgba(20,70,220,.18) 42%,transparent 70%);
  filter:blur(32px);pointer-events:none;
}
.jrn-card{
  position:relative;width:100%;aspect-ratio:3/4;
  border-radius:1.25rem;overflow:hidden;background:#04080f;
  box-shadow:0 0 0 1px rgba(30,90,255,.18),0 24px 70px rgba(0,0,0,.8),0 0 100px rgba(15,55,200,.25);
  will-change:transform;
}
.jrn-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center center;display:block;
  filter:contrast(1.07) brightness(.93);
}
.jrn-depth-shadow{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse 72% 62% at 50% 36%,transparent 28%,rgba(4,8,18,.6) 100%),
             linear-gradient(to bottom,transparent 50%,rgba(4,8,18,.9) 100%);
}
.jrn-grid{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background-image:linear-gradient(rgba(40,100,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(40,100,255,.055) 1px,transparent 1px);
  background-size:30px 30px;
}
.jrn-rim{
  position:absolute;inset:0;pointer-events:none;z-index:3;mix-blend-mode:screen;
  background:linear-gradient(to right,rgba(30,90,255,.15) 0%,transparent 30%),
             linear-gradient(to left,rgba(30,90,255,.1) 0%,transparent 30%),
             linear-gradient(to bottom,rgba(30,90,255,.08) 0%,transparent 25%);
}
.jrn-scanline{
  position:absolute;inset:0;pointer-events:none;z-index:4;
  background:repeating-linear-gradient(to bottom,transparent,transparent 3px,rgba(0,0,0,.055) 3px,rgba(0,0,0,.055) 4px);
}

/* ── Stage (right panel, carousel cards) ─────────────────────── */
.jrn-stage{
  position:absolute;right:0;top:0;bottom:0;
  width:46vw;display:flex;flex-direction:column;
  justify-content:center;padding:0 5vw 0 4vw;
  pointer-events:none;
}
.jrn-heading{
  font:700 min(7vw,4.75rem)/1 var(--font-family-bigger);
  text-transform:uppercase;color:var(--color-secondary);
  margin:0 0 1.25rem;letter-spacing:-.02em;
}
/* Slot wrapper */
.jrn-ms-wrap{
  position:relative;min-height:18rem;overflow:hidden;
}
/* Each A/B slot */
.jrn-ms{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-start;
}
.jrn-ms.idle{opacity:0;visibility:hidden;pointer-events:none;}
.jrn-ms.active{opacity:1;visibility:visible;}
.jrn-ms.entering{visibility:visible;animation:jrnEnter .7s cubic-bezier(.22,1,.36,1) both;}
.jrn-ms.exiting{visibility:visible;animation:jrnExit .5s cubic-bezier(.22,1,.36,1) both;}

@keyframes jrnEnter{
  from{opacity:0;transform:translateY(60px);filter:blur(12px);clip-path:inset(0 100% 0 0);}
  to{opacity:1;transform:translateY(0);filter:blur(0px);clip-path:inset(0 0% 0 0);}
}
@keyframes jrnExit{
  from{opacity:1;transform:translateY(0);filter:blur(0px);}
  to{opacity:0;transform:translateY(-60px);filter:blur(12px);}
}

/* Milestone card content */
.jrn-ms-date{
  font:700 10px/1 var(--font-family-fraktion);
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--color-secondary);margin-bottom:.85rem;
}
.jrn-ms-rule{
  width:2.5rem;height:1px;
  background:rgba(255,206,27,.35);margin-bottom:1.5rem;
}
.jrn-ms-title{
  font:700 min(5vw,2.5rem)/1.15 var(--font-family-editorial);
  color:var(--color-white);margin-bottom:1rem;
}
.jrn-ms-desc{
  font:300 1rem/1.65 var(--font-family-editorial);
  color:rgba(248,251,255,.52);max-width:38ch;
}

/* ── Upcoming teaser (below portrait, last item only) ────────── */
.jrn-teaser{
  position:absolute;left:50%;bottom:6vh;
  transform:translateX(-50%);
  text-align:center;white-space:nowrap;
  pointer-events:none;
}
.jrn-teaser-label,
.jrn-teaser-title{opacity:0;}
.jrn-teaser-label{
  display:block;
  font:700 11px/1 var(--font-family-fraktion);
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--color-secondary);margin-bottom:.85rem;
}
.jrn-teaser-title{
  display:block;
  font:700 clamp(2rem,3.5vw,2.75rem)/1 var(--font-family-editorial);
  color:var(--color-white);letter-spacing:.02em;
}

@keyframes teaserLabelIn{
  from{opacity:0;letter-spacing:.6em;}
  to{opacity:.6;letter-spacing:.28em;}
}
@keyframes teaserTitleIn{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}
.jrn-teaser.is-visible .jrn-teaser-label{
  animation:teaserLabelIn .55s .1s cubic-bezier(.22,1,.36,1) forwards;
}
.jrn-teaser.is-visible .jrn-teaser-title{
  animation:teaserTitleIn .9s .38s cubic-bezier(.22,1,.36,1) forwards;
}

/* ── Shockwave unlock (final milestone) ───────────────────── */
.jrn-sw{position:absolute;inset:0;pointer-events:none;z-index:20;}
/* radial burst — very fast, centered on portrait */
.jrn-sw-flash{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 62% 82% at 34vw 50%,
    rgba(255,252,210,.97) 0%,
    rgba(255,206,27,.44) 22%,
    rgba(20,55,200,.1) 50%,
    transparent 68%);
  opacity:0;mix-blend-mode:screen;
}
/* ring origin — anchored at portrait centre */
.jrn-sw-rings{position:absolute;left:34vw;top:50%;width:0;height:0;}
.jrn-ring{
  position:absolute;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
  width:22vw;height:22vw;
}
.jrn-ring:nth-child(1){
  border:2px solid rgba(255,252,200,.95);
  box-shadow:0 0 18px 5px rgba(255,220,60,.6),inset 0 0 12px 3px rgba(255,220,60,.25);
  --rd:0s;--rdur:.85s;
}
.jrn-ring:nth-child(2){
  border:1.5px solid rgba(255,206,27,.68);
  box-shadow:0 0 10px 2px rgba(255,206,27,.38);
  --rd:.13s;--rdur:1.1s;
}
.jrn-ring:nth-child(3){
  border:1px solid rgba(140,200,255,.5);
  box-shadow:0 0 8px 1px rgba(80,160,255,.28);
  --rd:.28s;--rdur:1.4s;
}
.jrn-ring:nth-child(4){
  border:1px solid rgba(30,90,255,.35);
  --rd:.44s;--rdur:1.75s;
}
/* keyframes */
@keyframes swFlash{
  0%  {opacity:0;}
  3%  {opacity:1;}
  18% {opacity:0;}
  100%{opacity:0;}
}
@keyframes ringOut{
  0%  {transform:translate(-50%,-50%) scale(0);opacity:1;}
  55% {opacity:.5;}
  82% {opacity:.12;}
  100%{transform:translate(-50%,-50%) scale(12);opacity:0;}
}
/* card: border pulses electric-white → settles back */
@keyframes cardStrike{
  0%  {box-shadow:0 0 0 1px rgba(30,90,255,.18),0 24px 70px rgba(0,0,0,.8),0 0 100px rgba(15,55,200,.25);}
  4%  {box-shadow:0 0 0 3px rgba(255,252,200,1),0 0 55px rgba(255,220,50,1),0 0 130px rgba(255,200,30,.88),0 0 240px rgba(255,180,20,.38);}
  18% {box-shadow:0 0 0 1px rgba(255,206,27,.5),0 22px 65px rgba(0,0,0,.7),0 0 70px rgba(255,206,27,.28);}
  100%{box-shadow:0 0 0 1px rgba(30,90,255,.18),0 24px 70px rgba(0,0,0,.8),0 0 100px rgba(15,55,200,.25);}
}
/* photo: momentary overexposure like a camera flash */
@keyframes photoStrike{
  0%  {filter:contrast(1.07) brightness(.93);}
  4%  {filter:contrast(.9) brightness(2.1);}
  16% {filter:contrast(1.12) brightness(1.04);}
  100%{filter:contrast(1.07) brightness(.93);}
}
.jrn-sticky.is-striking .jrn-sw-flash{animation:swFlash .75s ease-out forwards;}
.jrn-sticky.is-striking .jrn-ring{animation:ringOut var(--rdur) var(--rd) cubic-bezier(.08,.82,.14,1) forwards;}
.jrn-sticky.is-striking #jrnCard{animation:cardStrike 1.8s cubic-bezier(.22,1,.36,1) forwards;}
.jrn-sticky.is-striking .jrn-photo{animation:photoStrike 1.5s cubic-bezier(.22,1,.36,1) forwards;}

/* ── Mobile fallback ──────────────────────────────────────────── */
@media(max-width:767px){
  .s-journey{height:auto;padding:5rem 0 6rem;}
  .jrn-sticky{position:relative;height:auto;overflow:visible;display:block;}
  .jrn-portrait{position:relative;left:auto;top:auto;transform:none;
                 width:clamp(180px,55vw,280px);margin:0 auto 2.5rem;}
  .jrn-stage{position:relative;width:100%;padding:0 5vw;height:auto;}
  .jrn-heading{font-size:min(15vw,3rem);margin-bottom:1rem;}
  .jrn-counter,.jrn-progress{display:none;}
  .jrn-ms-wrap{position:relative;min-height:auto;overflow:visible;}
  .jrn-ms{position:relative;inset:auto;opacity:1!important;visibility:visible!important;
           animation:none!important;margin-bottom:2.5rem;}
  .jrn-ms.idle{display:none;}
  .jrn-ms-title{font-size:min(7vw,1.5rem);}
}
/* ── Reduced-motion fallback ─────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .s-journey{height:auto;padding:5rem 0 6rem;}
  .jrn-sticky{position:relative;height:auto;overflow:visible;}
  .jrn-portrait{position:relative;left:auto;top:auto;transform:none;
                 width:clamp(240px,28vw,380px);margin:0 auto 3rem;}
  .jrn-stage{position:relative;width:100%;padding:0 5vw;height:auto;}
  .jrn-counter,.jrn-progress{display:none;}
  .jrn-ms-wrap{position:relative;min-height:auto;overflow:visible;}
  .jrn-ms{position:relative;inset:auto;opacity:1!important;visibility:visible!important;
           animation:none!important;margin-bottom:2.5rem;}
  .jrn-ms.idle{display:none;}
}