/* The rotation: a section of its own after Lavori. Opaque, so the scene behind it can rest. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
.rot{--n:14;--step:88vh;position:relative;height:calc(var(--n) * var(--step) + 170vh);background:#07060c;pointer-events:auto}
.rot-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;perspective:1500px;perspective-origin:50% 46%;contain:layout paint}
.rot-tints,.rot-tints i{position:absolute;inset:0}.rot-tints i{opacity:0;will-change:opacity}
.rot-pin::after{content:'';position:absolute;inset:0 0 auto;height:110px;background:linear-gradient(#000a,#0000);pointer-events:none;z-index:3}
.rot-intro{position:absolute;inset:0;z-index:2;display:grid;align-content:center;gap:18px;padding:0 clamp(20px,8vw,120px);pointer-events:none;will-change:transform,opacity}
.rot-intro p{margin:0;max-width:46ch;font:400 clamp(17px,1.5vw,21px)/1.45 var(--sans);color:var(--dim,#c9bfd4)}
.rot-intro h2{margin:0;max-width:13ch;font:400 clamp(52px,10vw,158px)/.94 var(--serif);letter-spacing:-.02em;color:var(--ink,#f5eefa);text-wrap:balance}
.rot-ring{position:absolute;inset:0;margin:0;padding:0;list-style:none;transform-style:preserve-3d;opacity:0;will-change:transform,opacity}
.rot-card{position:absolute;left:50%;top:50%;width:min(84vw,1480px);height:min(80svh,860px);margin:calc(min(80svh,860px) / -2) 0 0 calc(min(84vw,1480px) / -2);visibility:hidden;will-change:transform,opacity;backface-visibility:hidden}
.rot-card a{position:absolute;inset:0;display:grid;grid-template-columns:minmax(300px,.37fr) minmax(0,1fr);overflow:hidden;border-radius:10px;background:var(--bg);color:var(--fg);text-decoration:none;box-shadow:0 0 0 1px color-mix(in srgb,var(--fg) 16%,transparent)}
.rot-card a:focus-visible{outline:3px solid var(--ac);outline-offset:4px}
.rot-media{position:relative;order:2;overflow:hidden;background:color-mix(in srgb,var(--fg) 8%,var(--bg))}
.rot-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 0;display:block}
.rot-text{order:1;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:clamp(20px,2.6vw,40px);will-change:transform,opacity}
.rot-text small{margin-bottom:auto;font:500 14px/1.35 var(--sans);opacity:.86}
.rot-text strong{font:400 clamp(40px,4.6vw,78px)/.98 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.rot-hook{font:400 clamp(17px,1.35vw,20px)/1.36 var(--sans)}
.rot-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:8px}
.rot-foot em{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:var(--fg);color:var(--bg);font:500 15px/1 var(--sans);font-style:normal;transition:translate .35s var(--ease,ease)}
.rot-card a:hover .rot-foot em{translate:6px 0}
.rot-foot i{font:400 14px/1.3 var(--sans);font-style:normal;opacity:.8}
.rot-card--type .rot-media{background:radial-gradient(90% 90% at 80% 10%,color-mix(in srgb,var(--ac) 42%,transparent),transparent)}
.rot-count{position:absolute;right:clamp(20px,3vw,44px);top:clamp(76px,10vh,96px);z-index:3;font:500 14px/1 var(--sans);font-variant-numeric:tabular-nums;color:#fff;mix-blend-mode:difference}
.rot-index{position:absolute;left:50%;bottom:6px;z-index:3;display:flex;translate:-50% 0}
.rot-index button{width:30px;height:30px;padding:0;border:0;background:none;cursor:pointer}
.rot-index button::after{content:'';display:block;width:14px;height:2px;margin:auto;background:#fff;mix-blend-mode:difference;opacity:.45;transition:opacity .25s,scale .25s}
.rot-index button[data-on]::after{opacity:1;scale:1.5 1}.rot-index button:focus-visible{outline:2px solid #fff;outline-offset:-4px}
html[data-chapter=vetrine] :is(.rail,.scala){opacity:0;pointer-events:none}.rail,.scala{transition:opacity .3s}
.is-mobile .rot{--step:78svh}
.is-mobile .rot-card{width:88vw;height:72svh;margin:calc(72svh / -2 + 18px) 0 0 -44vw}
.is-mobile .rot-index{display:none}
.is-mobile .rot-card a{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
.is-mobile .rot-media{order:1}.is-mobile .rot-text{order:2;padding:18px 18px 16px;gap:8px}.is-mobile .rot-text small{margin:0}
.is-mobile .rot-text strong{font-size:clamp(34px,10vw,46px)}.is-mobile .rot-hook{font-size:17px}
/* Reduced motion: the same cases, standing still */
.rot--still{height:auto;padding:clamp(80px,14vh,140px) clamp(20px,5vw,64px)}
.rot--still .rot-pin{position:static;height:auto;overflow:visible;perspective:none;contain:none}.rot--still .rot-pin::after,.rot--still .rot-tints,.rot--still .rot-index,.rot--still .rot-count{display:none}
.rot--still .rot-intro{position:static;padding:0 0 48px}
.rot--still .rot-ring{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:20px;opacity:1}
.rot--still .rot-card{position:relative;left:auto;top:auto;width:auto;height:min(70vh,520px);margin:0;visibility:visible}
.rot--still .rot-card a{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}.rot--still .rot-media{order:1}.rot--still .rot-text{order:2}.rot--still .rot-text small{margin:0}
.rot--still .rot-text strong{font-size:clamp(34px,3.4vw,52px)}
.rot-sg{width:clamp(64px,6vw,104px);height:clamp(64px,6vw,104px);color:var(--ac);margin-bottom:6px}
.is-mobile .rot-sg{display:none}