/* Store additions on top of the v3 landing styles: a far more visible scroll story. */
.cart-pill b{display:inline-grid;place-items:center;min-width:1.4em;height:1.4em;margin-left:.4em;border-radius:99px;background:var(--gold);color:var(--night);font-size:.72rem}
.cart-pill b[hidden]{display:none}
.card{text-decoration:none;color:inherit;display:block}

/* hero scroll cue: labelled, animated */
.cue2{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.6rem;text-decoration:none;color:var(--cream);z-index:3}
.cue2-txt{font:600 .7rem var(--ui);letter-spacing:.3em;text-transform:uppercase;color:var(--gold2);opacity:0;animation:cuefade 1s 1.6s forwards}
.cue2-mouse{position:relative;width:26px;height:42px;border-radius:14px;box-shadow:inset 0 0 0 1.5px rgba(242,234,215,.7)}
.cue2-mouse i{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:var(--cream);animation:cue 1.8s ease-in-out infinite}
.cue2-chev{width:12px;height:12px;border-right:1.5px solid var(--gold2);border-bottom:1.5px solid var(--gold2);transform:rotate(45deg);animation:chev 1.6s ease-in-out infinite}
@keyframes cuefade{to{opacity:1}}
@keyframes chev{0%,100%{transform:translateY(-4px) rotate(45deg);opacity:.3}50%{transform:translateY(4px) rotate(45deg);opacity:1}}

/* journey: longer, layered, wipes between chapters */
.journey{height:560vh}
.stage{isolation:isolate}
.ch{opacity:1;will-change:clip-path,transform}
.ch0{z-index:1}.ch1{z-index:2;clip-path:inset(100% 0 0 0)}.ch2{z-index:3;clip-path:circle(0% at 50% 55%)}
.ch::after{content:"";position:absolute;inset:0;background:#070b09;opacity:var(--dim,0);pointer-events:none;z-index:6}
.ch-num{position:absolute;right:5vw;top:14vh;font:400 clamp(12rem,30vw,26rem)/1 var(--display);color:rgba(242,234,215,.075);z-index:1;will-change:transform;pointer-events:none;user-select:none;letter-spacing:-.04em}
.ch0 .ch-num{color:rgba(22,33,27,.09)}
.ch2 .ch-num{color:rgba(255,236,200,.06);left:5vw;right:auto}
.fg{position:absolute;left:-5%;right:-5%;pointer-events:none;will-change:transform}
.reeds{bottom:-6vh;height:42vh;background:url(/assets/reeds.svg) repeat-x bottom/600px 100%;z-index:4;opacity:.92}
.ch1 .p1{z-index:4}
.ch-cta{margin-top:1.4rem}
.ch-text{z-index:7}

.jbar{position:absolute;left:var(--pad);right:var(--pad);top:clamp(70px,10vh,92px);z-index:20;pointer-events:none}
.jbar-track{height:3px;background:rgba(242,234,215,.2);border-radius:3px;overflow:hidden}
.jbar-fill{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--gold),var(--gold2))}
.jbar-labels{display:flex;justify-content:space-between;list-style:none;margin:.6rem 0 0;padding:0;font:600 .68rem var(--ui);letter-spacing:.22em;text-transform:uppercase;color:var(--cream)}
.jbar-labels li{opacity:.45;transition:opacity .4s,color .4s}
.jbar-labels li b{font:italic 500 .95rem var(--display);letter-spacing:0;margin-right:.35rem;color:var(--gold2)}
.jbar-labels li.on{opacity:1}
.stage.light-top .jbar-labels{color:#16211b}.stage.light-top .jbar-track{background:rgba(22,33,27,.18)}
.jcount{position:absolute;right:var(--pad);bottom:clamp(2rem,9vh,6rem);z-index:20;display:flex;align-items:center;gap:.7rem;font:italic 400 1.5rem var(--display);color:var(--cream)}
.jcount i{width:40px;height:1px;background:currentColor;opacity:.6}
.stage.light-top .jcount{color:#16211b}
.jhint{position:absolute;left:50%;bottom:clamp(1rem,3vh,2rem);transform:translateX(-50%);z-index:20;display:flex;flex-direction:column;align-items:center;gap:.5rem;font:600 .68rem var(--ui);letter-spacing:.28em;text-transform:uppercase;color:#16211b;transition:opacity .5s}
.jhint i{width:12px;height:12px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;animation:chev 1.6s ease-in-out infinite}
.jhint.off{opacity:0}
.rail{display:none}

/* studio canvas */
.mock-canvas{position:relative;width:100%;max-width:520px;aspect-ratio:1;border-radius:14px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);transition:opacity .35s var(--ease),transform .5s var(--ease)}
.mock-canvas.busy{opacity:.55;transform:scale(.985)}
.rail-arts button img{object-fit:contain}

@media (max-width:900px){
  .ch-num{font-size:44vw;top:14vh;right:2vw}
  .jbar-labels{font-size:.58rem;letter-spacing:.14em}.jbar-labels li b{font-size:.8rem}
  .jcount{display:none}
  .reeds{height:30vh}
}
@media (prefers-reduced-motion:reduce){
  .journey{height:auto}
  .ch,.ch1,.ch2{clip-path:none!important;transform:none!important}
  .ch::after{display:none}
  .jbar,.jcount,.jhint,.cue2-chev{display:none}
  .fg,.ch-num{transform:none!important}
}