/* JOY'S BOX V57 — refined capability reveal + compact path journey */

/* Header nav — requested weight/size */
.header-v14__nav a{
  font:700 8.5px/1 var(--sans)!important;
}

/* THE WORK BEHIND THE EXPERIENCE — remove chapter tick line */
.cap-v52__chapter::before{
  content:none!important;
  display:none!important;
}

/* Replace all previous image change effects with a clean blur -> reveal. */
@media (min-width:901px){
  .cap-v52__image{
    clip-path:none!important;
    overflow:hidden!important;
    transform:translate3d(0,0,0) scale(1)!important;
    filter:none!important;
    transition:none!important;
  }
  .cap-v52__image::before,
  .cap-v52__image::after{
    content:none!important;
    display:none!important;
    animation:none!important;
  }

  .cap-v52__image.v54-enter-forward,
  .cap-v52__image.v54-enter-back{
    animation:capV57BlurRevealIn .78s cubic-bezier(.16,1,.3,1) both!important;
  }
  .cap-v52__image.v54-leave-forward,
  .cap-v52__image.v54-leave-back{
    animation:capV57BlurRevealOut .38s cubic-bezier(.4,0,1,1) both!important;
  }
  .cap-v52__image img{
    transform:translate3d(0,0,0) scale(1)!important;
    filter:none!important;
    transition:none!important;
  }
}

@keyframes capV57BlurRevealIn{
  0%{
    opacity:0;
    transform:translate3d(0,10px,0) scale(1.025);
    filter:blur(13px) brightness(.84) saturate(.90);
  }
  48%{
    opacity:.92;
    filter:blur(4px) brightness(.94) saturate(.96);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:blur(0) brightness(1) saturate(1);
  }
}
@keyframes capV57BlurRevealOut{
  0%{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:blur(0) brightness(1);
  }
  100%{
    opacity:0;
    transform:translate3d(0,-5px,0) scale(1.008);
    filter:blur(7px) brightness(.9);
  }
}

/* --------------------------------------------------------------------------
   PLAN THE EVENT... — same path idea, but lighter, shorter and more integrated
   -------------------------------------------------------------------------- */
.journey-v54{
  background:
    radial-gradient(52% 38% at 78% 42%,rgba(207,168,68,.045),transparent 70%),
    radial-gradient(40% 32% at 17% 74%,rgba(31,69,66,.065),transparent 74%),
    #0a0a09!important;
}
.journey-v54::before{opacity:.055!important}

.journey-v54__intro{
  padding:clamp(78px,6.2vw,112px) var(--pad) clamp(34px,3.6vw,58px)!important;
}
.journey-v54__intro-grid{
  margin-top:18px!important;
  grid-template-columns:minmax(0,1.16fr) minmax(260px,.46fr)!important;
  gap:clamp(34px,5vw,82px)!important;
}
.journey-v54__intro h2{
  max-width:980px!important;
  font-size:clamp(58px,6.35vw,106px)!important;
  line-height:.82!important;
  letter-spacing:-.047em!important;
}
.journey-v54__intro p{
  max-width:410px!important;
  margin:0 0 4px!important;
  font-size:12px!important;
  line-height:1.62!important;
}

/* Shorter journey: still six chapters, but no oversized dead travel. */
.journey-v54__scroll{
  height:365vh!important;
  min-height:2500px!important;
}
.journey-v54__sticky{
  min-height:610px!important;
  padding:clamp(54px,5.5vh,78px) 0 clamp(24px,3vh,38px)!important;
}
.journey-v54__topline{
  left:var(--pad)!important;
  right:auto!important;
  top:clamp(22px,2.5vh,32px)!important;
  justify-content:flex-start!important;
}
.journey-v54__topline span:last-child{display:none!important}

.journey-v54__stage{
  height:min(74vh,680px)!important;
  min-height:520px!important;
}
.journey-v54__stage::after{
  background:
    radial-gradient(50% 48% at 76% 48%,transparent 0 36%,rgba(0,0,0,.08) 76%,rgba(0,0,0,.16) 100%),
    linear-gradient(90deg,rgba(10,10,9,.76) 0%,rgba(10,10,9,.34) 28%,rgba(10,10,9,.02) 53%,transparent 72%)!important;
}

.journey-v54__svg{
  right:1.5%!important;
  width:min(55vw,760px)!important;
  height:91%!important;
}
.journey-v54__path-shadow{stroke-width:22!important;stroke:rgba(255,255,255,.035)!important}
.journey-v54__path-base{stroke-width:4!important;stroke:rgba(232,224,202,.13)!important}
.journey-v54__path-progress{stroke-width:6!important}

.journey-v54__copy-stage{
  left:var(--pad)!important;
  width:min(34%,500px)!important;
  height:278px!important;
}
.journey-v54__chapter span{
  margin-bottom:12px!important;
  font-size:7px!important;
}
.journey-v54__chapter h3{
  font-size:clamp(62px,5.8vw,100px)!important;
  line-height:.75!important;
}
.journey-v54__chapter p{
  max-width:390px!important;
  margin-top:16px!important;
  font-size:11px!important;
  line-height:1.58!important;
}
.journey-v54__ghost{
  left:var(--pad)!important;
  font-size:clamp(170px,18vw,300px)!important;
  color:rgba(255,255,255,.018)!important;
}

/* The bottom meter line shown in the screenshot is intentionally removed. */
.journey-v54__counter{display:none!important}

@media (max-width:1100px) and (min-width:901px){
  .journey-v54__svg{right:-4%!important;width:62vw!important}
  .journey-v54__copy-stage{width:37%!important;left:42px!important}
}

@media (max-width:900px){
  .journey-v54__intro{
    padding:72px 18px 26px!important;
  }
  .journey-v54__intro-grid{
    display:block!important;
    margin-top:14px!important;
  }
  .journey-v54__intro h2{
    max-width:95%!important;
    font-size:clamp(46px,12.8vw,64px)!important;
    line-height:.81!important;
    letter-spacing:-.045em!important;
  }
  .journey-v54__intro p{
    margin-top:16px!important;
    max-width:31ch!important;
    font-size:10px!important;
    line-height:1.55!important;
  }

  .journey-v54__scroll{
    height:405svh!important;
    min-height:2320px!important;
  }
  .journey-v54__sticky{
    min-height:590px!important;
    padding:48px 0 0!important;
  }
  .journey-v54__topline{
    left:18px!important;
    top:calc(15px + env(safe-area-inset-top))!important;
    font-size:5.5px!important;
  }
  .journey-v54__stage{
    height:calc(100svh - 48px)!important;
    min-height:542px!important;
  }
  .journey-v54__stage::after{
    background:
      linear-gradient(180deg,rgba(10,10,9,0) 0%,rgba(10,10,9,.015) 38%,rgba(10,10,9,.50) 61%,#0a0a09 78%,#0a0a09 100%)!important;
  }
  .journey-v54__svg{
    left:51%!important;
    top:-2%!important;
    width:126vw!important;
    height:60%!important;
  }
  .journey-v54__path-shadow{stroke-width:16!important}
  .journey-v54__path-base{stroke-width:4!important}
  .journey-v54__path-progress{stroke-width:6!important}
  .journey-v54__dot text{font-size:12px!important}

  .journey-v54__copy-stage{
    left:18px!important;
    right:20px!important;
    bottom:34px!important;
    width:auto!important;
    height:160px!important;
  }
  .journey-v54__chapter span{
    margin-bottom:8px!important;
    font-size:5.8px!important;
  }
  .journey-v54__chapter h3{
    font-size:clamp(44px,11.8vw,60px)!important;
    line-height:.76!important;
  }
  .journey-v54__chapter p{
    margin-top:9px!important;
    max-width:35ch!important;
    font-size:9.5px!important;
    line-height:1.45!important;
  }
  .journey-v54__ghost{
    right:6px!important;
    left:auto!important;
    bottom:110px!important;
    font-size:clamp(92px,27vw,126px)!important;
    color:rgba(255,255,255,.025)!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .cap-v52__image.v54-enter-forward,
  .cap-v52__image.v54-enter-back,
  .cap-v52__image.v54-leave-forward,
  .cap-v52__image.v54-leave-back{animation:none!important;filter:none!important}
}