/* Original, open movement. All decoration stays behind the classic hero copy. */
.hero-classic .clockwork {
  --cw-scalp:#b095d4;
  --cw-day:#f7931a;
  --cw-swing:#8caed5;
  --cw-position:#83bda7;
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:clip;
  pointer-events:none;
  user-select:none;
  container-type:size;
}
.clockwork-assembly {
  position:absolute;
  width:min(1050px,120vw);
  aspect-ratio:1200/940;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.clockwork-svg {display:block;width:100%;height:100%;overflow:visible}
.clockwork-assembly::after {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 35% 37% at 50% 46%,rgba(8,9,11,.96) 0%,rgba(8,9,11,.89) 46%,rgba(8,9,11,.5) 78%,transparent 100%);
  pointer-events:none;
}
.clockwork-wheel--scalp {--cw-accent:var(--cw-scalp)}
.clockwork-wheel--day {--cw-accent:var(--cw-day)}
.clockwork-wheel--swing {--cw-accent:var(--cw-swing)}
.clockwork-wheel--position {--cw-accent:var(--cw-position)}
.clockwork-seat {fill:none;stroke:#b3becc;stroke-opacity:.08;stroke-width:.8}
.clockwork-tooth-shadow {fill:#030405;stroke:#030405;stroke-width:1.3}
.clockwork-accent-track {fill:none;stroke:var(--cw-accent);stroke-opacity:.48;stroke-width:1.05}
.clockwork-hub-accent {fill:none;stroke:var(--cw-accent);stroke-opacity:.68;stroke-width:1.35}
.clockwork-machining {fill:none;stroke:#e0e8f2;stroke-opacity:.25;stroke-width:.7}
.clockwork-bearing {opacity:.85}
.clockwork-case {fill:none;stroke:#b1bdcd;stroke-width:.8;stroke-opacity:.19}
.clockwork-case-marks {stroke-width:.9;stroke-opacity:.65}
.clockwork-bridge {fill:none;stroke:#0b0e13;stroke-width:24;stroke-linejoin:round}
.clockwork-bridge .clockwork-bridge-light {stroke:#b7c4d4;stroke-width:.7;stroke-opacity:.12}
.clockwork-guides {fill:none;stroke-width:.8;stroke-opacity:.46}
.clockwork-guide--scalp {stroke:var(--cw-scalp)}
.clockwork-guide--day {stroke:var(--cw-day)}
.clockwork-guide--swing {stroke:var(--cw-swing)}
.clockwork-guide--position {stroke:var(--cw-position)}
.clockwork-rotor {
  transform-box:fill-box;
  transform-origin:center;
  animation:ccm-clockwork-turn var(--cw-duration,60s) linear infinite;
  animation-direction:var(--cw-direction,normal);
  will-change:transform;
}
.clockwork-name {
  position:absolute;
  z-index:1;
  width:max-content;
  max-width:44%;
  color:#bcc5d2;
  font-family:inherit;
  font-size:10px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
  text-shadow:0 1px 4px #08090b,0 0 12px #08090b;
}
.clockwork-name span {display:block}
.clockwork-name--scalp {left:17.9%;top:2.5%;transform:translateX(-100%);color:var(--cw-scalp)}
.clockwork-name--day {left:65.8%;top:.4%;color:var(--cw-day)}
.clockwork-name--swing {right:5%;top:41.5%;color:var(--cw-swing)}
.clockwork-name--position {left:16.25%;top:96.2%;color:var(--cw-position)}
.clockwork.is-paused .clockwork-rotor,
.clockwork.is-dormant .clockwork-rotor,
.clockwork.is-reduced .clockwork-rotor,
.hero-classic.is-paused .clockwork-rotor {animation-play-state:paused;will-change:auto}
@keyframes ccm-clockwork-turn {to{transform:rotate(1turn)}}
@supports(width:1cqh) {
  .clockwork-assembly {width:min(1240px,120vw,108cqh)}
}
@media(max-width:900px) {
  .clockwork-assembly {top:50%}
  .clockwork-name {font-size:9px;letter-spacing:.12em}
  .clockwork-name--swing {right:12%}
}
@media(max-width:900px) {
  .hero.hero-classic.hero-clockwork {padding-top:min(calc(100vw + 14px),660px)}
  .clockwork-assembly {width:min(716.8px,112vw);top:clamp(24px,5vw,40px);transform:translateX(-50%)}
  .clockwork-name {letter-spacing:.06em}
  .clockwork-name--scalp {left:18%;top:1.5%;transform:translateX(-70%)}
  .clockwork-name--day {left:63%;top:-1.5%}
  .clockwork-name--swing {right:12%;top:42%}
  .clockwork-name--position {left:19%;top:97%}
  .clockwork-assembly::after {background:none}
}
@media(max-width:640px) {
  .clockwork-name {font-size:8.5px}
}
@media(prefers-reduced-motion:reduce) {
  .clockwork .clockwork-rotor {animation:none;will-change:auto}
}
@media(forced-colors:active) {
  .clockwork {display:none}
}

/* V16 opt-in study. V15 retains its original palette, layout and motion. */
.clockwork.clockwork--study {
  --cw-scalp:#b095d4;
  --cw-day:#f7931a;
  --cw-swing:#8caed5;
  --cw-position:#83bda7;
  position:relative;
  inset:auto;
  z-index:0;
  width:min(700px,100%);
  margin:0 auto;
  overflow:visible;
  container-type:normal;
  pointer-events:none;
}
.clockwork--study .clockwork-assembly {
  position:relative;
  inset:auto;
  width:100%;
  aspect-ratio:1200/1140;
  transform:none;
}
.clockwork--study .clockwork-assembly::after {display:none}
.clockwork--study .clockwork-seat {stroke:#b4b4b4;stroke-opacity:.12}
.clockwork--study .clockwork-tooth-shadow {fill:#030303;stroke:#030303}
.clockwork--study .clockwork-metal-tint {fill:var(--cw-accent);opacity:.11}
.clockwork--study .clockwork-accent-track {stroke:var(--cw-accent);stroke-opacity:.42;stroke-width:.8}
.clockwork--study .clockwork-hub-accent {stroke:var(--cw-accent);stroke-opacity:.4}
.clockwork--study .clockwork-machining {stroke:#dddddd;stroke-opacity:.29}
.clockwork--study .clockwork-bridge {stroke:#0b0b0b}
.clockwork--study .clockwork-bridge .clockwork-bridge-light {stroke:#bdbdbd;stroke-opacity:.15}
.clockwork--study .clockwork-case {stroke:#c2c2c2;stroke-opacity:.5;stroke-width:1}
.clockwork--study .clockwork-case-marks {stroke:#d6d6d6;stroke-opacity:.8;stroke-width:1.1}
.clockwork--study .clockwork-hour-index {stroke-width:3;stroke-opacity:1}
.clockwork--study .clockwork-name {
  color:#bbb9b6;
  font-size:10px;
  font-weight:500;
  letter-spacing:.15em;
  max-width:none;
  right:auto;
  transform:translate(-50%,-50%);
  text-shadow:0 1px 3px #000,0 -1px 3px #000,1px 0 3px #000,-1px 0 3px #000;
}
.clockwork--study .clockwork-name--scalp {left:27.5%;top:30%;color:var(--cw-scalp)}
.clockwork--study .clockwork-name--day {left:51.5%;top:30%;color:var(--cw-day)}
.clockwork--study .clockwork-name--swing {left:70.833%;top:55.3%;color:var(--cw-swing)}
.clockwork--study .clockwork-name--position {left:31.914%;top:65.7%;color:var(--cw-position)}
.clockwork-dial-numbers {fill:#b7b7b7;stroke:#050505;stroke-width:3;paint-order:stroke;dominant-baseline:middle;text-anchor:middle;font-family:inherit;font-size:20px;font-weight:400;letter-spacing:.06em}
.clockwork-hands {pointer-events:none}
.clockwork-hand-hour,.clockwork-hand-minute {stroke:#080808;stroke-width:3;stroke-linejoin:round;paint-order:stroke;opacity:.97}
.clockwork-hand-inlay {fill:none;stroke:#3e3e3e;stroke-width:1.2;opacity:.7}
.clockwork-hand-second-shadow {fill:none;stroke:#000;stroke-width:5;stroke-linecap:round;opacity:.7}
.clockwork-hand-second {fill:none;stroke:#ededed;stroke-width:1.9;stroke-linecap:round}
.clockwork-second-counter {fill:#111;stroke:#dedede;stroke-width:1.7}
.clockwork-hand-collet {stroke:#080808;stroke-width:3;paint-order:stroke}
@media(max-width:640px) {
  .clockwork--study .clockwork-name {font-size:8.5px;letter-spacing:.04em}
}