/* Four ways in (v12, 2026-10-01): portals on a slow arc, in the showcase language (showcase.css). Daniel: the four image
   cards were "really cool but they do not hit the actual spot"; this is the moment a visitor chooses where to step next. */
.ways-head{max-width:880px;margin:0 auto 6px;text-align:center}
.ways-head .lead{margin-left:auto;margin-right:auto}
/* the plain links: for crawlers and anyone without scripts; hidden once the portals are built */
.pt-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:20px}
.pt-links a{display:block;padding:22px;border-radius:22px;text-decoration:none;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.pt-links b{display:block;font:600 20px/1.2 var(--serif);letter-spacing:-.02em}.pt-links span{color:var(--ink2);font-size:15px}
.pt-ready .pt-links{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:700px){ .pt-links{grid-template-columns:1fr} }
.pt-stage{position:relative;width:100%;margin:0 auto;height:560px;perspective:1800px;perspective-origin:50% 40%;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none}
.pt-track{position:absolute;inset:0;transform-style:preserve-3d}
/* a portal: an arch of glass, its edge drawn by light */
.pt{position:absolute;left:50%;top:22px;width:var(--w,300px);margin-left:calc(var(--w,300px) / -2);display:block;text-decoration:none;
 transform-style:preserve-3d;will-change:transform,filter,opacity}
.pt-win{position:relative;display:block;aspect-ratio:3/4.35;overflow:hidden;isolation:isolate;
 border-radius:calc(var(--w,300px) / 2) calc(var(--w,300px) / 2) 26px 26px;background:#07090d;
 box-shadow:0 50px 120px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.22)}
.pt-win::before{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;padding:1px;pointer-events:none;
 background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.08) 40%,rgba(226,178,138,.28));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
/* the photograph fills the whole arch: max-width:none undoes the global img cap (it left a dark strip on the right), and the
   10% margin on every side is larger than the parallax travel, so no edge can show */
.pt-img{position:absolute;top:-10%;left:-10%;width:120%;height:120%;max-width:none;object-fit:cover;pointer-events:none;transition:transform 1.4s var(--ease),opacity 1s var(--ease)}
.pt-img{z-index:1;transform:translate(calc(var(--px,0) * -12px),calc(var(--py,0) * -10px)) scale(1.03);filter:saturate(.92)}
/* the floor: a soft mirror of the photograph only */
.pt-refl{position:absolute;left:0;right:0;top:calc(100% + 8px);height:calc(var(--w,300px) * .2);overflow:hidden;border-radius:26px 26px 0 0;pointer-events:none;opacity:.24;
 -webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%)}
.pt-refl img{position:absolute;left:0;bottom:0;width:100%;max-width:none;height:calc(var(--w,300px) * 1.45);object-fit:cover;transform:scaleY(-1);transform-origin:center bottom;filter:blur(3px) saturate(.8)}
.pt:not(.on) .pt-refl{opacity:.12}
.pt-sheen{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.14) 46%,rgba(255,255,255,.02) 52%,transparent 62%);
 transform:translateX(-120%);animation:pt-sheen 9s ease-in-out infinite}
.pt:nth-child(2) .pt-sheen{animation-delay:-2.2s}.pt:nth-child(3) .pt-sheen{animation-delay:-4.5s}.pt:nth-child(4) .pt-sheen{animation-delay:-6.7s}
@keyframes pt-sheen{0%,62%{transform:translateX(-120%)}86%,100%{transform:translateX(120%)}}
.pt-k{position:absolute;left:0;right:0;bottom:22px;text-shadow:0 1px 2px rgba(0,0,0,.5),0 2px 22px rgba(0,0,0,.65);z-index:5;text-align:center;font:600 clamp(18px,1.5vw,22px)/1 var(--sans);letter-spacing:-.02em;color:var(--ink);text-shadow:0 2px 18px rgba(0,0,0,.6)}
.pt.on .pt-win{box-shadow:0 60px 140px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.16),0 0 80px -10px rgba(143,208,242,.18),inset 0 1px 0 rgba(255,255,255,.28)}
/* the promise under the focused portal */
.pt-cap{position:relative;text-align:center;min-height:120px;margin-top:-34px;transition:height .5s var(--ease)}
.pt-cap>div{position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(8px);filter:blur(4px);transition:opacity .6s var(--ease),transform .6s var(--ease),filter .6s var(--ease);pointer-events:none}
.pt-cap>div.on{opacity:1;transform:none;filter:none;pointer-events:auto}
.pt-cap .w{font:500 13.5px var(--sans);color:var(--iris)}
.pt-cap h3{font:600 clamp(28px,2.7vw,40px)/1.08 var(--serif);letter-spacing:-.03em;margin:8px auto 8px;max-width:17em}
.pt-cap p{color:var(--ink2);margin:0 auto;max-width:32em;font-size:16.5px}
.pt-cap .btn{margin-top:16px}
.pt-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:22px}
.pt-swipe{display:none}
.pt-nav button.arr{width:46px;height:46px;border-radius:50%;padding:0;justify-content:center;font-size:18px}
.pt-dots{display:flex;gap:8px}.pt-dots button{width:7px;height:7px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.22);cursor:pointer;transition:all .4s var(--ease)}
.pt-dots button.on{width:26px;border-radius:99px;background:linear-gradient(90deg,var(--copper),var(--iris))}
.pt-stage:focus-visible{box-shadow:0 0 0 2px rgba(143,208,242,.5);border-radius:24px}
.pt-ui{position:relative;width:100%}
@media (max-width:700px){ .pt-stage{perspective:1100px}.pt{top:14px}.pt-cap{min-height:0}.pt-cap h3{font-size:26px}.pt-cap p{font-size:15px;padding:0 8px}
 .pt-cap .btn{margin-top:14px;padding:10px 18px;font-size:14px}
 .pt-nav{flex-direction:column;gap:8px;margin-top:18px}.pt-nav .arr{display:none}
 .pt-swipe{display:block;font:500 12.5px var(--sans);color:var(--ink3)} }
@media (prefers-reduced-motion:reduce){ .pt-sheen{animation:none;display:none} }