/* JOY'S BOX V55 — liquid capability transitions + borderless path journey */

/* --------------------------------------------------------------------------
   THE WORK BEHIND THE EXPERIENCE — water-drop / liquid image reveal
   Keep the approved V53 scroll-follow behavior; only replace image switching.
   -------------------------------------------------------------------------- */
@media (min-width:901px){
  .cap-v52__image{
    overflow:hidden!important;
    clip-path:circle(160% at 50% 54%)!important;
    filter:none!important;
    transform:translate3d(0,0,0) scale(1)!important;
    transition:none!important;
  }
  .cap-v52__image.is-active{opacity:1!important;z-index:3!important}
  .cap-v52__image.v54-leaving{z-index:2!important;pointer-events:none}

  .cap-v52__image.v54-enter-forward,
  .cap-v52__image.v54-enter-back{
    animation:capV55WaterDropIn 1.02s cubic-bezier(.16,1,.3,1) both!important;
  }
  .cap-v52__image.v54-leave-forward,
  .cap-v52__image.v54-leave-back{
    animation:capV55WaterDropOut .64s cubic-bezier(.32,0,.2,1) both!important;
  }

  .cap-v52__image.v54-enter-forward::before,
  .cap-v52__image.v54-enter-back::before{
    content:"";
    position:absolute;
    z-index:4;
    left:50%;
    top:54%;
    width:17%;
    aspect-ratio:1;
    border-radius:50%;
    border:1px solid rgba(255,239,194,.52);
    box-shadow:
      0 0 0 1px rgba(218,180,84,.16) inset,
      0 0 34px rgba(218,180,84,.24),
      0 0 82px rgba(72,162,154,.12);
    transform:translate(-50%,-50%) scale(.08);
    opacity:0;
    pointer-events:none;
    animation:capV55RippleRing .96s cubic-bezier(.12,.7,.18,1) both;
  }

  .cap-v52__image.v54-enter-forward::after,
  .cap-v52__image.v54-enter-back::after{
    content:"";
    position:absolute;
    z-index:5;
    inset:-20%;
    pointer-events:none;
    background:
      radial-gradient(circle at 50% 54%,
        rgba(255,248,220,.34) 0 1.5%,
        rgba(222,188,100,.18) 2.2% 3.1%,
        transparent 4.2% 10%,
        rgba(255,244,205,.11) 10.6% 11.4%,
        transparent 12.4% 18%,
        rgba(62,177,168,.09) 18.8% 19.8%,
        transparent 21% 100%);
    mix-blend-mode:screen;
    transform:scale(.24);
    opacity:0;
    animation:capV55RippleLight 1.08s cubic-bezier(.12,.72,.18,1) both;
  }

  .cap-v52__image img{
    transform:scale(1.055)!important;
    filter:saturate(.82) contrast(1.04) brightness(.86)!important;
    transition:none!important;
    will-change:transform,filter;
  }
  .cap-v52__image.is-active img{
    animation:capV55ImageSettle 1.18s cubic-bezier(.16,1,.3,1) both;
  }
}

@keyframes capV55WaterDropIn{
  0%{opacity:.04;clip-path:circle(0% at 50% 54%);transform:scale(1.045);filter:blur(3px)}
  16%{opacity:.86;clip-path:circle(8% at 50% 54%);filter:blur(1.7px)}
  48%{opacity:1;clip-path:circle(44% at 50% 54%);transform:scale(1.018);filter:blur(.3px)}
  76%{clip-path:circle(92% at 50% 54%)}
  100%{opacity:1;clip-path:circle(160% at 50% 54%);transform:scale(1);filter:blur(0)}
}
@keyframes capV55WaterDropOut{
  0%{opacity:1;transform:scale(1);filter:blur(0)}
  100%{opacity:0;transform:scale(1.018);filter:blur(1.6px)}
}
@keyframes capV55RippleRing{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.08)}
  16%{opacity:.86}
  68%{opacity:.34}
  100%{opacity:0;transform:translate(-50%,-50%) scale(7.8)}
}
@keyframes capV55RippleLight{
  0%{opacity:0;transform:scale(.20)}
  12%{opacity:.78}
  62%{opacity:.30}
  100%{opacity:0;transform:scale(3.35)}
}
@keyframes capV55ImageSettle{
  0%{transform:scale(1.055);filter:saturate(.78) contrast(1.03) brightness(.79)}
  52%{transform:scale(1.018);filter:saturate(.86) contrast(1.045) brightness(.89)}
  100%{transform:scale(1);filter:saturate(.82) contrast(1.04) brightness(.86)}
}

/* --------------------------------------------------------------------------
   PLAN THE EVENT... — let the journey live in the page, not inside a card.
   -------------------------------------------------------------------------- */
.journey-v54{
  overflow:hidden!important;
  background:
    radial-gradient(64% 42% at 78% 47%,rgba(214,177,79,.055),transparent 66%),
    radial-gradient(52% 40% at 13% 70%,rgba(32,74,70,.095),transparent 70%),
    #0a0a09!important;
}
.journey-v54::before{opacity:.10!important}
.journey-v54__sticky{
  padding-left:0!important;
  padding-right:0!important;
}
.journey-v54__topline{
  left:var(--pad)!important;
  right:var(--pad)!important;
}
.journey-v54__stage{
  width:100%!important;
  height:min(88vh,840px)!important;
  min-height:620px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
.journey-v54__stage::before{display:none!important}
.journey-v54__stage::after{
  background:
    radial-gradient(54% 52% at 78% 48%,transparent 0 34%,rgba(0,0,0,.10) 72%,rgba(0,0,0,.20) 100%),
    linear-gradient(90deg,rgba(10,10,9,.86) 0%,rgba(10,10,9,.44) 29%,rgba(10,10,9,.05) 54%,transparent 72%)!important;
}

/* The old HTML glow was mapped from SVG coordinates into stage percentages,
   which caused the visible light to drift away from the path. V55 keeps all
   moving light inside the SVG coordinate system, so it is pixel-locked to it. */
.journey-v54__glow{display:none!important}
.journey-v55__traveler-glow{
  fill:rgba(229,190,85,.18);
  stroke:rgba(229,190,85,.15);
  stroke-width:2;
  filter:url(#journeyTravelerGlow55);
  pointer-events:none;
}
.journey-v54__traveler-halo{
  fill:rgba(215,183,92,.08)!important;
  stroke:rgba(230,195,95,.46)!important;
  stroke-width:1.8!important;
}
.journey-v54__traveler{
  fill:#fff1bf!important;
  stroke:#d9b95f!important;
  stroke-width:2.5!important;
}

.journey-v54__svg{
  right:0!important;
  width:min(63vw,900px)!important;
  height:96%!important;
}
.journey-v54__copy-stage{
  left:var(--pad)!important;
  width:min(38%,560px)!important;
}
.journey-v54__counter{
  left:var(--pad)!important;
}

/* Mobile: same path-first experience, but composed as part of the page rather
   than a rounded inset panel. The path owns the upper 60%, copy owns the lower. */
@media (max-width:900px){
  .journey-v54__intro{
    padding:86px 18px 38px!important;
  }
  .journey-v54__intro h2{
    font-size:clamp(54px,14.5vw,74px)!important;
    line-height:.79!important;
  }
  .journey-v54__intro p{
    margin-top:18px!important;
    max-width:33ch!important;
  }
  .journey-v54__scroll{
    height:480svh!important;
    min-height:2860px!important;
  }
  .journey-v54__sticky{
    height:100svh!important;
    min-height:620px!important;
    padding:54px 0 0!important;
    align-items:stretch!important;
  }
  .journey-v54__topline{
    left:18px!important;
    right:18px!important;
    top:calc(17px + env(safe-area-inset-top))!important;
  }
  .journey-v54__stage{
    height:calc(100svh - 54px)!important;
    min-height:566px!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:transparent!important;
  }
  .journey-v54__stage::after{
    background:
      linear-gradient(180deg,rgba(10,10,9,0) 0%,rgba(10,10,9,.02) 42%,rgba(10,10,9,.64) 64%,#0a0a09 82%,#0a0a09 100%)!important;
  }
  .journey-v54__svg{
    left:53%!important;
    right:auto!important;
    top:-1%!important;
    width:142vw!important;
    height:66%!important;
    transform:translateX(-50%)!important;
    overflow:visible!important;
  }
  .journey-v54__path-shadow{stroke-width:19!important;stroke:rgba(255,255,255,.045)!important}
  .journey-v54__path-base{stroke-width:4.5!important;stroke:rgba(232,224,202,.14)!important}
  .journey-v54__path-progress{stroke-width:7!important}
  .journey-v55__traveler-glow{opacity:.88}
  .journey-v54__dot text{font-size:13px!important}
  .journey-v54__copy-stage{
    left:18px!important;
    right:22px!important;
    top:auto!important;
    bottom:42px!important;
    width:auto!important;
    height:178px!important;
    transform:none!important;
  }
  .journey-v54__chapter{
    justify-content:flex-end!important;
  }
  .journey-v54__chapter span{
    margin-bottom:9px!important;
    font-size:6px!important;
  }
  .journey-v54__chapter h3{
    font-size:clamp(50px,13.4vw,68px)!important;
    line-height:.75!important;
  }
  .journey-v54__chapter p{
    margin-top:10px!important;
    max-width:36ch!important;
    font-size:10px!important;
    line-height:1.46!important;
  }
  .journey-v54__ghost{
    right:5px!important;
    bottom:126px!important;
    font-size:clamp(112px,32vw,150px)!important;
    color:rgba(255,255,255,.035)!important;
  }
  .journey-v54__counter{
    left:18px!important;
    right:18px!important;
    bottom:12px!important;
    width:auto!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,
  .cap-v52__image.is-active img,
  .cap-v52__image::before,
  .cap-v52__image::after{animation:none!important}
}