/* Arcord Web Studio, casi studio (studio-96/). Il resto del sito (header, footer, superficie, contatti) viene da
   style.css; l'apertura sta nel CSS critico della pagina. Qui: le sezioni, la scena ferma (montaggio, varianti,
   fondello) e i telefoni. Nelle scene si muovono solo transform e opacity, scritti da case.js. */

/* Sections: the same rhythm as the home, the same 12 columns */
.cs-s{padding-block:var(--sec2);row-gap:var(--s4);align-items:start}
.cs-l{grid-column:1/span 3;padding-top:.6em}
.cs-idea{--body:var(--ink)}  /* next to the night: through the variable, so the tx-* steps still win */
.cs-big{grid-column:4/span 9;font-size:var(--fs-l);line-height:1.04;font-weight:500;letter-spacing:-.038em;font-stretch:88%;text-wrap:pretty}
.cs-p{font-size:var(--fs-lead);line-height:1.35;letter-spacing:-.012em;color:var(--body);max-width:34em;text-wrap:pretty}
.cs-narrow{grid-column:4/span 6}
.cs-side .label,.cs-cap .label{margin-bottom:var(--s3)}

/* The still scene: the section is tall, its stage stays on screen while you scroll through it. One movement on the
   night: the watch put together, its variants, then it turns over to the caseback. */
.cs-lay{height:calc(var(--vh) * 590)}
.cs-st{position:sticky;top:0;height:calc(var(--vh) * 100);align-items:center;padding-top:var(--hd)}
.cs-side{grid-column:1/span 3;align-self:center}
.cs-st .cs-p{font-size:var(--fs-body);line-height:1.5}
.cs-lay:not(.tx-l0){color:var(--on-night);--body:var(--on-night);--muted:var(--on-night-muted);--focus:var(--on-night)}
html:not(.js) .cs-lay{background:var(--night)}
/* the watch frame: big (half the width, the screen's height); its square is the configurator's frame, the watch
   itself is the middle 62% of it. Desktop: the case's left edge a step past column 4 */
.wl-box{grid-column:4/-1;justify-self:start;margin-left:calc(var(--s6) - var(--W) * .2126);--W:min(50vw,calc(var(--vh) * 100 - var(--hd) - 64px))}
.wl{position:relative;display:block;width:var(--W);aspect-ratio:1;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;perspective:1800px;pointer-events:none;-webkit-tap-highlight-color:transparent}
.wl .ly-i{pointer-events:auto}
.wl:focus-visible{outline-offset:-12%}
.wl-r{position:absolute;inset:0;display:block;transform-style:preserve-3d;transform-origin:50.0087% 44.7562%;will-change:transform}
.wl-f,.wl-b{position:absolute;inset:0;display:block;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.wl-b{transform:rotateY(180deg);opacity:0}  /* shown by case.js only when it faces (see layPose) */
.ly{position:absolute;inset:0;display:block;transform-origin:50.0087% 44.7562%;will-change:transform,opacity}
.ly-i{position:absolute;display:block;margin:0;will-change:opacity}
.ly-i img{display:block;width:100%;height:auto}
.ly .ly-i+.ly-i{opacity:0}
.wl-rot{transform-origin:49.9023% 47.8516%;will-change:transform}
/* the name of what comes in or changes: one at a time, next to it, at the size of a section title */
.wl-ns{position:absolute;left:calc(82.95% + var(--s5));top:0;bottom:0;width:30vw;pointer-events:none}
.ly-n{position:absolute;left:0;right:0;top:var(--y);height:0;display:flex;align-items:center;opacity:0;will-change:transform,opacity}
.ly-n>span{display:block;overflow:hidden;padding:.08em 0 .16em;margin:-.08em 0 -.16em;font-size:var(--fs-m);line-height:.95;font-weight:500;letter-spacing:-.045em;font-stretch:88%;text-align:left;text-wrap:balance}
/* each name changes like every title of the site: the old one leaves upwards through its mask, the new one rises */
.ly-n>span>i{display:block;font-style:normal;transform:translateY(120%);will-change:transform}

/* The configurator on the phone, two moments side by side: each phone with its words under it, the second a step
   lower, so the two read as one composition and not as two screens */
.cs-pair{align-items:start;visibility:visible}
.cs-fig{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s5)}
.cs-fig:first-child{grid-column:2/span 4}
.cs-fig:last-child{grid-column:8/span 4;margin-top:var(--s8)}
.cs-ph2{width:min(64%,320px);margin-left:var(--s3)}  /* never from --vh: it is far below the opening, and a measure that follows the height moved it */
.cs-cap .cs-p{font-size:var(--fs-body);line-height:1.5;color:var(--ink);max-width:30em}
.ph-v{pointer-events:none}

/* The close: the question, big, on the night, and the way to the form */
/* a whole screen of night (the fixed 100svh of --vh): the footer is uncovered only past it; the question and the
   way on composed in the middle of the screen, under the header */
.ct.cs-end{display:flex;flex-direction:column;justify-content:center;min-height:calc(var(--vh) * 100);padding-block:calc(var(--hd) + var(--s5)) var(--s6)}
.cs-end-in{width:100%;row-gap:var(--s5)}
.ct .cs-q{grid-column:1/span 10;font-size:var(--fs-l);line-height:1;letter-spacing:-.045em;font-stretch:88%;font-weight:500;text-wrap:balance}
.cs-go{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5)}
.cs-go .u{display:inline-flex;align-items:center;min-height:44px}

/* text on the change to night follows the ground (same steps as the home, see .tx-* in style.css) */
.cs-s.tx-l1,.cs-lay.tx-l1{color:#000;--body:#000;--muted:#000}
.cs-s.tx-d1,.cs-lay.tx-d1{color:#fff;--body:#fff;--muted:#fff}
.cs-s.tx-d0{color:var(--on-night);--body:var(--on-night);--muted:var(--on-night-muted)}

@media (max-width:960px){
  .cs-l,.cs-big,.cs-narrow{grid-column:1/-1}
  .cs-l{padding-top:0}
  /* phones: the words first, in the page; they scroll away, then only the watch (big, centred) and its name stay */
  .cs-lay{height:auto}
  .cs-st{position:relative;display:block;height:auto;padding:var(--s7) var(--g) 0}
  /* the stage's run: inside the content box (a sticky element never moves into its parent's padding) */
  .cs-st::after{content:"";display:block;height:calc(var(--vh) * 520)}
  .cs-side{align-self:auto}
  .cs-st .cs-p{line-height:1.45}
  /* the watch (not its frame, which is wider) centred on the screen: 85% of the width, less if the height asks;
     the watch's middle is 52.105% across its frame. The name under it, as wide as the page, centred, on two lines
     if it needs them */
  .wl-box{position:sticky;top:0;height:calc(var(--vh) * 100);margin:0;justify-self:stretch;width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:var(--hd) 0 calc(var(--s4) + 2 * .95 * var(--fs-m) + var(--s3) + env(safe-area-inset-bottom,0px));--W:min(calc(100vw * .85 / .6168),calc(var(--vh) * 100 - var(--hd) - var(--s4) * 2 - 2 * .95 * var(--fs-m) - var(--s3) * 2 - env(safe-area-inset-bottom,0px)))}
  .wl{flex:none;margin-left:calc(50% - var(--W) * .52105)}
  .wl-ns{left:calc(52.105% - 50vw + var(--g));width:calc(100vw - 2 * var(--g));top:calc(100% + var(--s4));bottom:auto}
  .ly-n{top:0;align-items:flex-start;justify-content:center}
  .ly-n>span{text-align:center}
  .cs-pair{row-gap:var(--s7)}
  .cs-fig:first-child,.cs-fig:last-child{grid-column:1/-1;margin-top:0;align-items:stretch}
  .cs-ph2{align-self:center;margin-left:0;width:min(64vw,340px)}
  .ct .cs-q{grid-column:1/-1}
}

/* tablets: still wide enough for the two phones side by side */
@media (min-width:701px) and (max-width:960px){
  .cs-fig:first-child{grid-column:1/span 2}  /* the grid has 4 columns below 960 */
  .cs-fig:last-child{grid-column:3/span 2;margin-top:var(--s8)}
  .cs-ph2{width:min(70%,300px)}
}

/* Reduced motion (and no JS): no still scene, the watch complete and still with the names of its pieces in a column
   next to it (under it on phones); a tap still turns it over */
@media (prefers-reduced-motion:reduce){
  .cs-lay{height:auto}
  .cs-st{position:relative;height:auto;padding-block:var(--sec)}
  .wl-box{position:relative;height:auto;padding:0 0 calc(var(--s5) * 3)}
  .cs-st::after{display:none}
  .wl-ns{display:flex;flex-direction:column;justify-content:center;gap:var(--s1)}
  .ly-n{position:static;height:auto;opacity:1}
  .ly-n>span>i{transform:none}
  .ly-v{display:none}
}
html:not(.js) .cs-lay{height:auto}
html:not(.js) .cs-st{position:relative;height:auto;padding-block:var(--sec)}
html:not(.js) .wl-box{position:relative;height:auto}
html:not(.js) .cs-st::after{display:none}
html:not(.js) .wl-ns{display:flex;flex-direction:column;justify-content:center;gap:var(--s1)}
html:not(.js) .ly-n{position:static;height:auto;opacity:1}
html:not(.js) .ly-n>span>i{transform:none}
html:not(.js) .ly-v{display:none}