/* the pinned journey: captions on the right (RTL), the invitation on the left (invite.css) */
.journey{position:relative;height:1100vh;z-index:1}
.hud{position:sticky;top:0;height:100svh;overflow:hidden}
.cap{position:absolute;right:var(--gut);bottom:clamp(5rem,13vh,8rem);max-width:min(32rem,calc(100% - 2*var(--gut)));opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .8s var(--ease);pointer-events:none;text-shadow:0 2px 20px #fffc}
.cap.on{opacity:1;transform:none;pointer-events:auto}
.cap h2{margin-block:.4rem .8rem}
.cap p:not(.label){color:var(--ink-2);max-width:40ch}
.cap--hero{max-width:min(44rem,calc(100% - 2*var(--gut)));top:50%;bottom:auto;transform:translateY(calc(-50% + 18px))}
.cap--hero.on{transform:translateY(-50%)}
.cap--hero h1{margin-block:1rem 1.2rem}
.cap--hero .row{margin-top:1.6rem}
.cap--world em{color:var(--c)}
.cap--world h2{font-size:clamp(2.6rem,1.4rem + 4.6vw,5.6rem)}
.hint{font-size:.9rem;color:var(--ink-2)}
.hint::before{content:"";display:inline-block;width:1px;height:1.6rem;margin-inline-end:.7rem;vertical-align:middle;background:currentColor;animation:rise 1.8s var(--ease) infinite}
@keyframes rise{from{transform:scaleY(0);transform-origin:bottom}50%{transform:scaleY(1);transform-origin:bottom}51%{transform-origin:top}to{transform:scaleY(0);transform-origin:top}}
/* chapters: dots on the left edge; the label shows for the current one, on hover and on focus */
.chapters{position:absolute;left:calc(var(--gut) * .5);top:50%;transform:translateY(-50%);display:grid;gap:0;justify-items:end;direction:ltr;transition:opacity .5s}
.chapters.dim{opacity:0;pointer-events:none}
.chapters button{display:flex;align-items:center;gap:.6rem;min-height:28px;padding-inline:.4rem;font-size:.82rem;color:var(--ink-2);direction:rtl}
.chapters button::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.45;transition:transform var(--fast),opacity var(--fast)}
.chapters span{opacity:0;transform:translateX(6px);transition:opacity var(--fast),transform var(--fast);white-space:nowrap}
.chapters button:is(:hover,:focus-visible,[aria-current=true]) span{opacity:1;transform:none}
.chapters button:is(:hover,[aria-current=true])::before{opacity:1;transform:scale(1.5)}
.chapters button[aria-current=true]{color:var(--ink);font-weight:500}
.progress{position:absolute;inset:auto var(--gut) 2rem;height:2px;border-radius:2px;background:var(--line)}
.progress i{position:absolute;inset:0;border-radius:2px;background:linear-gradient(270deg,var(--red),var(--orange),var(--yellow),var(--green),var(--blue),var(--purple));transform-origin:right;transform:scaleX(0)}

/* the configurator: a white card on the right; the invitation on the left shows it */
.cfg{top:50%;bottom:auto;transform:translateY(calc(-50% + 18px));width:min(30rem,calc(100% - 2*var(--gut)));display:grid;gap:.85rem;background:#ffffffeb;backdrop-filter:blur(10px);border-radius:2rem;padding:clamp(1.2rem,2.4vw,2rem);box-shadow:0 40px 80px -40px #2b1a3d66;text-shadow:none}
.cfg.on{transform:translateY(-50%)}
.cfg h2{font-size:var(--s-2);margin:0}
.pick{display:grid;grid-template-columns:48px 1fr 48px;gap:.5rem;align-items:center}
.pick button{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line);transition:background var(--fast),color var(--fast)}
.pick svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.pick button:hover{background:var(--ink);color:#fff}}
.cfg select,.cfg input:not([type=checkbox]){width:100%;min-height:48px;padding:.5rem .8rem;border-radius:.9rem;border:1.5px solid var(--line);background:#fff;transition:border-color var(--fast)}
.cfg select{font:600 1.1rem var(--f-d);text-align:center;cursor:pointer}
.cfg :is(select,input):focus{border-color:var(--purple);outline:none}
.cfg__row{display:grid;grid-template-columns:1.3fr .6fr 1.2fr;gap:.6rem}
.cfg label,.extras legend{display:grid;gap:.25rem;font-size:.82rem;font-weight:500;color:var(--ink-2)}
.extras{border:0;display:flex;flex-wrap:wrap;gap:.5rem}
.extras legend{margin-bottom:.35rem}
.extras label{display:block;cursor:pointer}
.extras input{position:absolute;opacity:0}
.extras span{display:inline-flex;align-items:center;gap:.4rem;min-height:40px;padding:.35rem .9rem;border-radius:99px;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink);font-size:.92rem;transition:background var(--fast),box-shadow var(--fast)}
.extras span::before{content:"";width:.9rem;height:.9rem;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;transition:background var(--fast)}
.extras input:checked+span{background:#9519ac14;box-shadow:inset 0 0 0 1.5px var(--purple)}
.extras input:checked+span::before{background:var(--purple);box-shadow:inset 0 0 0 2.5px #fff,0 0 0 1.5px var(--purple)}
.extras input:focus-visible+span{outline:3px solid var(--purple);outline-offset:2px}
.price{font-size:.95rem}
.price b{font:600 1.5rem var(--f-d)}
.price s{font-size:.95rem}
.price small{display:block;font-size:.8rem;color:var(--ink-2)}
.cfg .btn{width:100%}
.cfg .note{margin-top:-.3rem}
@media (max-width:760px){
  .chapters{display:none}
  .cap{bottom:clamp(3.5rem,8vh,5rem)}
  .cap--hero{top:auto;bottom:clamp(3.5rem,8vh,5rem);transform:translateY(18px)}
  .cap--hero.on{transform:none}
  .cfg{top:auto;bottom:.8rem;right:.8rem;width:calc(100% - 1.6rem);transform:translateY(18px);gap:.55rem;padding:1rem}
  .cfg.on{transform:none}
  .cfg .label,.cfg .note,.extras legend{display:none}
  .cfg h2{font-size:1.4rem}
  .cfg__row{grid-template-columns:1fr .5fr 1.25fr;gap:.4rem}
  .cfg__row input{padding-inline:.5rem!important}
  .extras{gap:.35rem;flex-wrap:nowrap}
  .extras span{padding:.3rem .6rem;font-size:.82rem;gap:.3rem}
  .price{font-size:.85rem}
}
@media (max-width:760px) and (max-height:700px){.cfg h2{display:none}}