/* JOY'S BOX V54 — cinematic capability image changes + path-first guest journey */

/* --------------------------------------------------------------------------
   THE WORK BEHIND THE EXPERIENCE — image transition only
   Keep the V53 scroll-follow layout; replace the old simple clip transition.
   -------------------------------------------------------------------------- */
@media (min-width:901px){
  .cap-v52__image{
    opacity:0!important;
    clip-path:inset(0 0 0 0 round 0)!important;
    transform:translate3d(0,0,0) scale(1)!important;
    transition:none!important;
    overflow:hidden;
    z-index:0;
    will-change:transform,opacity,clip-path;
  }
  .cap-v52__image.is-active{opacity:1!important;z-index:3}
  .cap-v52__image.v54-leaving{z-index:2!important;pointer-events:none}
  .cap-v52__image.v54-enter-forward{
    animation:capV54EnterForward .92s cubic-bezier(.16,1,.3,1) both;
  }
  .cap-v52__image.v54-enter-back{
    animation:capV54EnterBack .92s cubic-bezier(.16,1,.3,1) both;
  }
  .cap-v52__image.v54-leave-forward{
    animation:capV54LeaveForward .72s cubic-bezier(.32,0,.2,1) both;
  }
  .cap-v52__image.v54-leave-back{
    animation:capV54LeaveBack .72s cubic-bezier(.32,0,.2,1) both;
  }
  .cap-v52__image.v54-enter-forward::after,
  .cap-v52__image.v54-enter-back::after{
    content:"";
    position:absolute;
    inset:-18%;
    z-index:3;
    pointer-events:none;
    background:linear-gradient(100deg,transparent 38%,rgba(255,240,200,.08) 46%,rgba(221,178,77,.25) 50%,rgba(255,248,221,.08) 54%,transparent 62%);
    mix-blend-mode:screen;
    animation:capV54LightSeam .94s cubic-bezier(.16,1,.3,1) both;
  }
  .cap-v52__image img{
    transform:scale(1.025);
    transition:transform 1.25s cubic-bezier(.16,1,.3,1)!important;
  }
  .cap-v52__image.is-active img{transform:scale(1)!important}
}

@keyframes capV54EnterForward{
  0%{opacity:.05;clip-path:inset(48% 3% 48% 3% round 22px);transform:translate3d(0,7%,0) scale(1.075)}
  45%{opacity:1;clip-path:inset(9% 1.5% 9% 1.5% round 20px)}
  100%{opacity:1;clip-path:inset(0 0 0 0 round 0);transform:translate3d(0,0,0) scale(1)}
}
@keyframes capV54EnterBack{
  0%{opacity:.05;clip-path:inset(48% 3% 48% 3% round 22px);transform:translate3d(0,-7%,0) scale(1.075)}
  45%{opacity:1;clip-path:inset(9% 1.5% 9% 1.5% round 20px)}
  100%{opacity:1;clip-path:inset(0 0 0 0 round 0);transform:translate3d(0,0,0) scale(1)}
}
@keyframes capV54LeaveForward{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1)}
  100%{opacity:0;transform:translate3d(0,-3.5%,0) scale(.985)}
}
@keyframes capV54LeaveBack{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1)}
  100%{opacity:0;transform:translate3d(0,3.5%,0) scale(.985)}
}
@keyframes capV54LightSeam{
  0%{transform:translate3d(-72%,0,0);opacity:0}
  18%{opacity:.72}
  72%{opacity:.22}
  100%{transform:translate3d(72%,0,0);opacity:0}
}

/* --------------------------------------------------------------------------
   PLAN THE EVENT... — one path-driven experience on desktop AND mobile
   -------------------------------------------------------------------------- */
.journey-v54{
  --j54-x:11%;
  --j54-y:10%;
  display:block!important;
  min-height:0!important;
  padding:0!important;
  overflow:visible!important;
  position:relative;
  background:
    radial-gradient(circle at 82% 8%,rgba(204,166,75,.09),transparent 26%),
    radial-gradient(circle at 18% 82%,rgba(33,71,68,.12),transparent 30%),
    #0a0a09!important;
  isolation:isolate;
}
.journey-v54::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:8vw 8vw;
  mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 82%,transparent 100%);
  opacity:.22;
}
.journey-v54__intro{
  position:relative;
  z-index:3;
  padding:clamp(112px,9vw,164px) var(--pad) clamp(68px,7vw,110px);
}
.journey-v54__intro-grid{
  margin-top:26px;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.52fr);
  gap:clamp(48px,8vw,130px);
  align-items:end;
}
.journey-v54__intro h2{
  margin:0;
  max-width:1180px;
  color:#f3eee5;
  font:600 clamp(72px,8.4vw,142px)/.79 var(--cond);
  text-transform:uppercase;
  letter-spacing:-.052em;
}
.journey-v54__intro h2 i{
  color:var(--gold);
  font-family:var(--serif);
  font-weight:400;
  text-transform:none;
  letter-spacing:-.028em;
}
.journey-v54__intro p{
  margin:0 0 8px;
  max-width:460px;
  color:#9e9a91;
  font:500 13px/1.72 var(--sans);
}

.journey-v54__scroll{position:relative;height:470vh;min-height:3400px}
.journey-v54__sticky{
  position:sticky;
  top:0;
  height:100vh;
  min-height:650px;
  display:flex;
  align-items:center;
  padding:clamp(74px,7vh,104px) var(--pad) clamp(34px,4vh,58px);
  overflow:hidden;
}
.journey-v54__topline{
  position:absolute;
  z-index:9;
  left:var(--pad);
  right:var(--pad);
  top:clamp(26px,3vh,42px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  color:rgba(255,255,255,.50);
  font:700 7px/1.2 var(--sans);
  letter-spacing:.17em;
  text-transform:uppercase;
}
.journey-v54__topline span:last-child{color:rgba(210,176,85,.78)}
.journey-v54__stage{
  --stage-line:rgba(255,255,255,.10);
  position:relative;
  width:100%;
  height:min(82vh,780px);
  min-height:590px;
  overflow:hidden;
  border:1px solid var(--stage-line);
  border-radius:30px;
  background:
    radial-gradient(circle at var(--j54-x) var(--j54-y),rgba(224,189,96,.105),transparent 16%),
    linear-gradient(135deg,#121210 0%,#0b0b0a 58%,#101210 100%);
  box-shadow:0 40px 120px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.025);
  isolation:isolate;
}
.journey-v54__stage::before{
  content:"";
  position:absolute;
  z-index:8;
  inset:18px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:21px;
  pointer-events:none;
}
.journey-v54__stage::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 73% 50%,transparent 0 24%,rgba(0,0,0,.16) 72%,rgba(0,0,0,.32) 100%),
    linear-gradient(90deg,rgba(0,0,0,.46) 0%,rgba(0,0,0,.18) 34%,transparent 62%);
}
.journey-v54__glow{
  position:absolute;
  z-index:2;
  width:260px;
  aspect-ratio:1;
  left:var(--j54-x);
  top:var(--j54-y);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(225,184,79,.17),rgba(225,184,79,.055) 32%,transparent 72%);
  pointer-events:none;
  transition:left .08s linear,top .08s linear;
}
.journey-v54__svg{
  position:absolute;
  z-index:4;
  right:1.5%;
  top:50%;
  width:min(60vw,810px);
  height:92%;
  transform:translateY(-50%);
  overflow:visible;
}
.journey-v54__path-shadow,
.journey-v54__path-base,
.journey-v54__path-progress{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.journey-v54__path-shadow{stroke:rgba(255,255,255,.052);stroke-width:28}
.journey-v54__path-base{stroke:rgba(232,224,202,.17);stroke-width:5}
.journey-v54__path-progress{
  stroke:#d7b75c;
  stroke-width:7;
  filter:url(#journeyGlow54);
  will-change:stroke-dashoffset;
}
.journey-v54__dot{
  opacity:.25;
  transition:opacity .35s ease,filter .45s ease;
}
.journey-v54__dot-ring{
  fill:rgba(10,10,9,.9);
  stroke:rgba(255,255,255,.30);
  stroke-width:2;
  transition:stroke .35s ease,fill .35s ease,transform .5s cubic-bezier(.16,1,.3,1);
  transform-box:fill-box;
  transform-origin:center;
}
.journey-v54__dot-core{fill:#a6a197;transition:fill .35s ease,transform .5s cubic-bezier(.16,1,.3,1);transform-box:fill-box;transform-origin:center}
.journey-v54__dot text{fill:#c7c1b5;font:700 13px var(--sans);letter-spacing:.12em}
.journey-v54__dot.is-passed{opacity:.58}
.journey-v54__dot.is-passed .journey-v54__dot-core{fill:#bca45d}
.journey-v54__dot.is-active{opacity:1;filter:drop-shadow(0 0 15px rgba(215,183,92,.52))}
.journey-v54__dot.is-active .journey-v54__dot-ring{fill:rgba(38,31,14,.94);stroke:#d7b75c;transform:scale(1.24)}
.journey-v54__dot.is-active .journey-v54__dot-core{fill:#fff0be;transform:scale(1.18)}
.journey-v54__dot.is-active text{fill:#fff1c6}
.journey-v54__traveler-halo{fill:rgba(215,183,92,.12);stroke:rgba(215,183,92,.34);stroke-width:1.5;filter:url(#journeyGlow54)}
.journey-v54__traveler{fill:#fff0bc;stroke:#d7b75c;stroke-width:3;filter:url(#journeyGlow54)}

.journey-v54__copy-stage{
  position:absolute;
  z-index:6;
  left:clamp(42px,5vw,86px);
  top:50%;
  width:min(38%,560px);
  height:330px;
  transform:translateY(-50%);
}
.journey-v54__chapter{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  opacity:0;
  transform:translate3d(0,28px,0);
  pointer-events:none;
  transition:opacity .34s ease,transform .62s cubic-bezier(.16,1,.3,1);
}
.journey-v54__chapter.is-active{opacity:1;transform:none}
.journey-v54__chapter span{
  display:block;
  margin-bottom:16px;
  color:var(--gold);
  font:700 8px/1 var(--sans);
  letter-spacing:.18em;
}
.journey-v54__chapter h3{
  margin:0;
  color:#f4efe5;
  font:600 clamp(74px,7.2vw,124px)/.72 var(--cond);
  letter-spacing:-.047em;
  text-transform:uppercase;
}
.journey-v54__chapter p{
  max-width:440px;
  margin:22px 0 0;
  color:#aaa69d;
  font:500 12px/1.65 var(--sans);
}
.journey-v54__ghost{
  position:absolute;
  z-index:2;
  left:clamp(26px,3vw,48px);
  bottom:-.08em;
  color:rgba(255,255,255,.025);
  font:600 clamp(250px,25vw,430px)/.72 var(--cond);
  letter-spacing:-.08em;
  pointer-events:none;
  user-select:none;
}
.journey-v54__counter{
  position:absolute;
  z-index:8;
  left:clamp(42px,5vw,86px);
  bottom:clamp(34px,4vw,62px);
  width:min(34%,430px);
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
  color:rgba(255,255,255,.58);
  font:700 7px/1 var(--sans);
  letter-spacing:.14em;
}
.journey-v54__counter i{height:1px;background:rgba(255,255,255,.18);overflow:hidden}
.journey-v54__counter i span{display:block;width:100%;height:100%;background:var(--gold);transform:scaleX(var(--j54-progress,0));transform-origin:left;will-change:transform}

@media (max-width:1100px) and (min-width:901px){
  .journey-v54__svg{right:-5%;width:68vw}
  .journey-v54__copy-stage{width:39%;left:42px}
  .journey-v54__counter{left:42px;width:34%}
}

@media (max-width:900px){
  .journey-v54{background:#0a0a09!important}
  .journey-v54__intro{padding:92px 18px 48px!important}
  .journey-v54__intro-grid{display:block!important;margin-top:18px!important}
  .journey-v54__intro h2{font-size:clamp(55px,14.8vw,76px)!important;line-height:.78!important;letter-spacing:-.048em!important}
  .journey-v54__intro p{margin-top:22px!important;max-width:31ch!important;font-size:11px!important;line-height:1.62!important}
  .journey-v54__scroll{height:520svh!important;min-height:3200px!important}
  .journey-v54__sticky{height:100svh!important;min-height:650px!important;padding:64px 12px 18px!important;align-items:center!important}
  .journey-v54__topline{left:18px!important;right:18px!important;top:calc(18px + env(safe-area-inset-top))!important;font-size:5.5px!important;line-height:1.3!important;letter-spacing:.13em!important}
  .journey-v54__topline span:last-child{max-width:130px;text-align:right}
  .journey-v54__stage{height:min(82svh,690px)!important;min-height:560px!important;border-radius:24px!important}
  .journey-v54__stage::before{inset:10px!important;border-radius:17px!important}
  .journey-v54__stage::after{background:linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.04) 49%,rgba(0,0,0,.83) 78%,rgba(0,0,0,.94) 100%)!important}
  .journey-v54__glow{width:170px!important}
  .journey-v54__svg{
    right:auto!important;
    left:50%!important;
    top:4%!important;
    width:116%!important;
    height:70%!important;
    transform:translateX(-50%)!important;
  }
  .journey-v54__path-shadow{stroke-width:23!important}
  .journey-v54__path-base{stroke-width:5!important}
  .journey-v54__path-progress{stroke-width:8!important}
  .journey-v54__dot text{font-size:14px!important}
  .journey-v54__copy-stage{
    left:18px!important;
    right:48px!important;
    top:auto!important;
    bottom:34px!important;
    width:auto!important;
    height:150px!important;
    transform:none!important;
  }
  .journey-v54__chapter{justify-content:flex-end!important;transform:translate3d(0,20px,0)!important}
  .journey-v54__chapter.is-active{transform:none!important}
  .journey-v54__chapter span{font-size:6px!important;margin-bottom:8px!important}
  .journey-v54__chapter h3{font-size:clamp(48px,13.2vw,66px)!important;line-height:.74!important}
  .journey-v54__chapter p{margin-top:9px!important;max-width:34ch!important;font-size:9.5px!important;line-height:1.42!important;color:#d1ccc2!important}
  .journey-v54__ghost{left:auto!important;right:9px!important;bottom:108px!important;font-size:clamp(116px,34vw,155px)!important;color:rgba(255,255,255,.055)!important}
  .journey-v54__counter{left:18px!important;right:18px!important;bottom:11px!important;width:auto!important;font-size:5.5px!important;gap:9px!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}
  .journey-v54__path-progress{stroke-dashoffset:0!important}
  .journey-v54__traveler,.journey-v54__traveler-halo{display:none!important}
  .journey-v54__scroll{height:auto!important;min-height:0!important;padding-bottom:80px}
  .journey-v54__sticky{position:relative!important;height:auto!important;min-height:720px!important}
}