/* =========================================================
   Motion layer (motion.js). Everything here is optional:
   hidden starting states only apply under html.motion-on,
   which motion.js adds. Transform and opacity only.
   ========================================================= */

/* ---------- split text (mask reveals) ---------- */
.m-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.m-word { display: inline-block; white-space: nowrap; }
/* the mask: padding gives room to serif ascenders and descenders, negative margin keeps the layout unchanged */
.m-w {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding: .1em .06em .16em; margin: -.1em -.06em -.16em;
}
.m-i { display: inline-block; }
.motion-on .m-split .m-i {
  transition: transform 1000ms cubic-bezier(.2, .8, .2, 1) var(--d, 0ms);
}
.motion-on .m-split:not(.m-in) .m-i { transform: translate3d(0, 112%, 0); }
.motion-on .m-split.m-now .m-i { transition: none; }

/* app.js fades chapter titles with .rise; motion.js takes the title over */
.motion-on .chapter-body h2.m-split { opacity: 1; animation: none; }

/* ---------- "Why buy it here": words fill with ink ---------- */
.m-ink { transition: none; }

/* ---------- opening: optional <head> flag holds the headline back from the first paint ---------- */
html.motion-intro .intro h1,
html.motion-intro .intro p,
html.motion-intro [data-stage] { opacity: 0; }

/* ---------- hero exit + chapter and visit photos: driven inline by motion.js ---------- */
/* the stage shrinks while you scroll out; keep the name, price and controls painted above it */
html.motion-on .look .now,
html.motion-on .look .controls { position: relative; z-index: 2; }
.motion-on .chapter-pic img,
.motion-on .visit-pic img { transition: none; will-change: transform; }
/* Edge: the strap is cropped at the top-right of the photo; soften that cut so the tilt never shows a hard edge */
.motion-on .chapter.tone-paper .chapter-pic img {
  -webkit-mask-image: linear-gradient(225deg, transparent 0, #000 16%);
  mask-image: linear-gradient(225deg, transparent 0, #000 16%);
}
/* tablet: the square photo sits in a 4:3 frame, so the cut is the photo's own right edge, 12.5% in from the frame (before the img is scaled) */
@media (min-width: 600px) and (max-width: 960px) {
  .motion-on .chapter.tone-paper .chapter-pic img {
    -webkit-mask-image: linear-gradient(to left, transparent 13%, #000 30%);
    mask-image: linear-gradient(to left, transparent 13%, #000 30%);
  }
}

/* ---------- catalogue cards ---------- */
.motion-on .card.m-wait { opacity: 0; transform: translate3d(0, 48px, 0); }
.motion-on .card.m-wait.m-show {
  opacity: 1; transform: none;
  transition: opacity 700ms var(--ease) var(--d, 0ms), transform 1000ms var(--ease) var(--d, 0ms);
}

/* ---------- marquee band ---------- */
.marquee:empty { display: none; }
.marquee {
  position: relative; overflow: hidden; background: var(--soft); color: var(--ink);
  padding: 2.4vw 0 2vw;
  contain: paint;
}
.mq-track { display: flex; width: max-content; will-change: transform; }
.mq-seq { display: flex; align-items: center; flex: none; }
.mq-word {
  font-family: var(--serif); font-size: 12vw; line-height: .92; letter-spacing: -0.025em;
  white-space: nowrap; padding: 0 .06em;
}
.mq-moon {
  width: .2em; height: .2em; flex: none; margin: 0 .42em; font-size: 12vw;
  stroke: none; transform: translateY(.04em);
}
@media (max-width: 960px) {
  .marquee { padding: 22px 0 18px; }
  .mq-word, .mq-moon { font-size: 64px; }
}

/* ---------- scroll dial (desktop only) ---------- */
.scroll-dial:empty { display: none; }
/* a small watch face only; the section name slides out beside it on hover */
.scroll-dial {
  position: fixed; z-index: 32;
  left: calc(20px + env(safe-area-inset-left, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: 56px; height: 56px; border-radius: 50%;
  --dial-bg: var(--paper); --dial-fg: var(--ink); --dial-ring: var(--line);
  color: var(--dial-fg);
  cursor: pointer; user-select: none; -webkit-user-select: none;
  opacity: 0; transform: translate3d(0, 12px, 0); pointer-events: none;
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.scroll-dial.is-dark { --dial-bg: rgba(15, 16, 18, .42); --dial-fg: var(--paper); --dial-ring: rgba(255, 255, 255, .2); }
.scroll-dial.is-on { opacity: 1; transform: none; pointer-events: auto; }
.dial-face {
  position: relative; display: block; width: 56px; height: 56px; border-radius: 50%;
  background: var(--dial-bg); box-shadow: inset 0 0 0 1px var(--dial-ring);
  transition: background-color 400ms var(--ease), box-shadow 400ms var(--ease);
}
.dial-face svg { width: 56px; height: 56px; display: block; stroke: none; }
.dial-hand {
  position: absolute; left: 27px; top: 11px; width: 2px; height: 17px; border-radius: 2px;
  background: var(--brass); transform-origin: 50% 100%; will-change: transform;
}
.dial-pin { position: absolute; left: 25px; top: 25px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dial-label {
  position: absolute; left: 64px; top: 9px; overflow: hidden; height: 38px; padding: 8px 16px;
  border-radius: 999px; background: var(--dial-bg); box-shadow: inset 0 0 0 1px var(--dial-ring);
  font-size: 14px; font-weight: 500; line-height: 22px; white-space: nowrap;
  opacity: 0; transform: translate3d(-8px, 0, 0); pointer-events: none;
  transition: opacity 300ms var(--ease), transform 400ms var(--ease);
}
.dial-label span { display: block; }
.scroll-dial:hover .dial-label { opacity: 1; transform: none; }
/* out of the way while the watch detail is open */
body:has([data-detail]:not([hidden])) .scroll-dial { opacity: 0; pointer-events: none; }
@media (max-width: 960px) { .scroll-dial { display: none !important; } }

/* ---------- cursor follower (fine pointers only) ---------- */
.cursor:empty { display: none; }
.cursor {
  position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 90;
  pointer-events: none; opacity: 0; transition: opacity 300ms var(--ease);
}
.cursor.is-live { opacity: 1; }
/* a small ring on the pointer; over a watch the label disc sits below-right of the pointer, never on what it points at */
.cursor-ring, .cursor-fill {
  position: absolute; left: -32px; top: -32px; width: 64px; height: 64px; border-radius: 50%;
  transition: transform 420ms var(--ease), opacity 300ms var(--ease);
}
.cursor-ring { border: 3px solid var(--brass); transform: scale(.44); }
.cursor-fill { background: var(--brass); transform: scale(.44); opacity: 0; }
.cursor-text {
  position: absolute; left: -32px; top: -11px; width: 64px; text-align: center;
  font: 600 14px/22px var(--sans); color: var(--ink);
  opacity: 0; transform: scale(.6); transition: opacity 260ms var(--ease), transform 420ms var(--ease);
}
.cursor.is-view .cursor-ring, .cursor.is-drag .cursor-ring { transform: translate3d(42px, 42px, 0) scale(1); opacity: 0; }
.cursor.is-view .cursor-fill, .cursor.is-drag .cursor-fill { transform: translate3d(42px, 42px, 0) scale(1); opacity: 1; }
.cursor.is-view .cursor-text, .cursor.is-drag .cursor-text { opacity: 1; transform: translate3d(42px, 42px, 0); transition-delay: 80ms; }
/* buttons and links: an open ring only, so icons and arrows stay visible */
.cursor.is-link .cursor-ring { transform: scale(.62); opacity: .6; }
.cursor.is-link .cursor-fill { opacity: 0; }
.cursor.is-down .cursor-ring { transform: scale(.34); }
@media not all and (hover: hover) and (pointer: fine) { .cursor { display: none !important; } }

/* ---------- reduced motion: final states, nothing travels ---------- */
@media (prefers-reduced-motion: reduce) {
  .motion-on .m-split:not(.m-in) .m-i { transform: none; }
  .chapter-pic img, .chapter.in .chapter-pic img { transform: none !important; transition: none !important; }
  html.motion-intro .intro h1, html.motion-intro .intro p, html.motion-intro [data-stage] { opacity: 1; }
  .motion-on .card.m-wait { opacity: 1; transform: none; }
  .cursor { display: none !important; }
}