/* Motion layer. One motif runs through it: the watch dial, with gold reserved for the seconds hand.
   Hidden starting states only apply under html.motion, so reduced-motion visitors and no-JS see everything. */

:root { --gold: #b8955a; --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.76, 0, .24, 1); }

/* Loader: a dial whose minute ticks fill as the frames arrive ------------- */
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
.loader { --p: 0; gap: 18px; transition: --p .45s var(--ease-out), clip-path 1s var(--ease-io) .25s, visibility 0s 1.3s; clip-path: inset(0 0 0 0); }
.loader.done { opacity: 1; clip-path: inset(0 0 100% 0); visibility: hidden; }
.loader__dial { position: relative; width: 132px; height: 132px; margin-bottom: 10px; transition: opacity .45s, transform .6s var(--ease-io); }
.loader__ticks, .loader__ticks::before { position: absolute; inset: 0; border-radius: 50%; }
.loader__ticks {
  background: conic-gradient(var(--ink) calc(var(--p) * 360deg), rgba(0, 0, 0, .13) 0);
  -webkit-mask: repeating-conic-gradient(from -.5deg, #000 0 1deg, #0000 1deg 6deg), radial-gradient(closest-side, #0000 calc(100% - 9px), #000 calc(100% - 9px));
  -webkit-mask-composite: source-in;
  mask: repeating-conic-gradient(from -.5deg, #000 0 1deg, #0000 1deg 6deg), radial-gradient(closest-side, #0000 calc(100% - 9px), #000 calc(100% - 9px));
  mask-composite: intersect;
}
/* Longer hour markers */
.loader__ticks::before {
  content: ""; background: inherit;
  -webkit-mask: repeating-conic-gradient(from -1deg, #000 0 2deg, #0000 2deg 30deg), radial-gradient(closest-side, #0000 calc(100% - 16px), #000 calc(100% - 16px));
  -webkit-mask-composite: source-in;
  mask: repeating-conic-gradient(from -1deg, #000 0 2deg, #0000 2deg 30deg), radial-gradient(closest-side, #0000 calc(100% - 16px), #000 calc(100% - 16px));
  mask-composite: intersect;
}
.loader__hand { position: absolute; left: calc(50% - .5px); top: 14px; width: 1px; height: calc(50% - 14px + 16px); background: var(--gold); transform-origin: 50% calc(100% - 16px); animation: sweep 6s linear infinite; }
.loader__pin { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--gold); }
.loader__brand, .loader__pct { transition: opacity .4s, transform .6s var(--ease-io); }
.loader.done .loader__dial { opacity: 0; transform: scale(.88) rotate(-30deg); }
.loader.done .loader__brand, .loader.done .loader__pct { opacity: 0; transform: translateY(-14px); }
@keyframes sweep { to { transform: rotate(360deg); } }

/* Homepage entrance, once the loader lifts ---------------------------- */
.motion .hero__l, .motion .hero__r { display: inline-flex; overflow: hidden; padding: .04em 0; }
.motion .hero__title .ch { display: inline-block; transform: translateY(108%); }
.motion.is-ready .hero__title .ch { transform: none; transition: transform 1.3s var(--ease-out) calc(.45s + var(--i) * .07s); }
.motion body[data-page="home"] .hero__model > *, .motion body[data-page="home"] .hero__scroll { opacity: 0; transform: translateY(14px); }
.motion.is-ready body[data-page="home"] .hero__model > *, .motion.is-ready body[data-page="home"] .hero__scroll { opacity: 1; transform: none; transition: opacity 1s 1.1s, transform 1.2s var(--ease-out) 1.1s; }
.motion body[data-page="home"] .nav > * { opacity: 0; transform: translateY(-10px); }
.motion.is-ready body[data-page="home"] .nav > * { opacity: 1; transform: none; transition: opacity .9s .9s, transform 1s var(--ease-out) .9s; }

/* Headings rise word by word ----------------------------------------- */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
[data-split] .wi { display: inline-block; }
.motion [data-split] .wi { transform: translateY(105%); }
.motion [data-split].in .wi { transform: none; transition: transform 1.1s var(--ease-out) calc(var(--i) * .06s); }

/* Watch cards: image unveils, body follows ----------------------------- */
.motion .card .card__img { clip-path: inset(100% 0 0 0); }
.motion .card .card__body, .motion .card .card__add { opacity: 0; transform: translateY(10px); }
.motion .card.in .card__img { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease-io) calc(var(--i) * .08s), transform .6s var(--ease-out); }
.motion .card.in .card__body, .motion .card.in .card__add { opacity: 1; transform: none; transition: opacity .8s calc(.35s + var(--i) * .08s), transform .9s var(--ease-out) calc(.35s + var(--i) * .08s); }
.motion .card.in .card__add { transition-property: opacity, transform; }
.motion .card.in .card__add:hover { opacity: 1; }

/* Tilt toward the pointer and a light sweep across the crystal */
.card__img { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease-out); will-change: transform; }
.card__img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 42%);
  mix-blend-mode: soft-light;
}
.card:hover .card__img::after { opacity: 1; }
.card__img img { transition: transform 1.4s var(--ease-out); }

/* Product magnifier --------------------------------------------------- */
[data-zoom] { cursor: zoom-in; }
[data-zoom] img { transition: transform .5s var(--ease-out); transform-origin: var(--zx, 50%) var(--zy, 50%); }
[data-zoom].zooming img { transform: scale(2.1); }

/* Parallax frame ------------------------------------------------------ */
.specs__img { overflow: hidden; border-radius: 4px; }
[data-parallax] { will-change: transform; transform: scale(1.18); }

/* Fly to bag ---------------------------------------------------------- */
.fly { position: fixed; z-index: 400; object-fit: cover; pointer-events: none; transform-origin: center; box-shadow: 0 18px 40px rgba(0, 0, 0, .18); }
.nav__cart.bump { animation: bump .6s var(--ease-out); }
@keyframes bump { 30% { transform: scale(1.12); } 60% { transform: scale(.96); } }
.nav__count.tick { animation: tick .7s var(--ease-out); }
@keyframes tick { 0% { transform: rotate(-90deg) scale(.4); } 100% { transform: none; } }

/* Primary buttons ease after the pointer */
.btn { transition: background .25s, color .25s, border-color .25s, opacity .25s, translate .5s var(--ease-out); }

/* Section indicator in the navbar slides rather than blinks */
.nav__links a::after { transition: transform .6s var(--ease-out); }

/* Service promises: icons draw themselves ------------------------------ */
.service__icon { display: block; width: 34px; height: 34px; margin-bottom: 18px; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.motion [data-draw] .service__icon * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.motion [data-draw].in .service__icon * { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease-io) .2s; }

/* Footer: wordmark and the boutique clock ------------------------------ */
.site-footer__mark { font-family: var(--display); font-weight: 200; font-size: clamp(40px, 17.5vw, 300px); line-height: .8; letter-spacing: -.02em; margin: 0 0 clamp(40px, 6vw, 80px) -.04em; color: var(--light); white-space: nowrap; }
.clock { display: flex; align-items: center; gap: 14px; }
.clock__dial { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); flex: none; }
.clock__dial i { position: absolute; left: 50%; bottom: 50%; width: 1px; transform-origin: 50% 100%; background: var(--light); border-radius: 1px; }
.clock__h { height: 11px; width: 2px !important; margin-left: -1px; transform: rotate(var(--h, 0deg)); }
.clock__m { height: 16px; margin-left: -.5px; transform: rotate(var(--m, 0deg)); }
.clock__s { height: 19px; margin-left: -.5px; background: var(--gold) !important; transform: rotate(var(--s, 0deg)); transition: transform .35s cubic-bezier(.4, 2.2, .5, 1); }
.clock__dial::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--gold); }
.clock__text { display: flex; flex-direction: column; gap: 2px; }
.clock__text b { font-family: var(--display); font-weight: 300; font-size: 18px; color: var(--light); font-variant-numeric: tabular-nums; }
.clock__text span { color: #8a8a8a; font-size: 13px; }

/* Cursor (fine pointers only; created by motion.js) -------------------- */
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor label, .has-cursor select { cursor: none; }
.has-cursor [data-zoom] { cursor: none; }
.cursor { position: fixed; inset: 0; z-index: 1000; pointer-events: none; opacity: 0; transition: opacity .3s; }
.cursor.on { opacity: 1; }
.cursor__dot, .cursor__ring { position: absolute; left: 0; top: 0; }
.cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); }
.cursor__ring { width: 0; height: 0; }
.cursor__ring::before {
  content: ""; position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .35);
  transition: transform .45s var(--ease-out), background .3s, border-color .3s;
}
.cursor.hover .cursor__ring::before { transform: scale(1.6); }
.cursor.down .cursor__ring::before { transform: scale(.8); }
.cursor.text .cursor__ring::before { transform: scale(.4); }
/* Over a watch: a compact black disc with the label */
.cursor.label .cursor__ring::before { transform: scale(1.65); background: #000; border-color: #000; box-shadow: none; }
.cursor.label .cursor__dot { opacity: 0; }
.cursor__label { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(.6); opacity: 0; color: #fff; font-size: 8.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; transition: opacity .25s, transform .45s var(--ease-out); }
.cursor.label .cursor__label { opacity: 1; transform: translate(-50%, -50%); }

/* Page transitions (Chrome / Edge; other browsers simply navigate) ----- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .45s var(--ease-io) both; }
::view-transition-new(root) { animation: vt-in .6s var(--ease-out) both; }
::view-transition-group(watch) { animation-duration: .75s; animation-timing-function: var(--ease-io); }
@keyframes vt-out { to { opacity: 0; transform: translateY(-1.5%); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(1.5%); } }

@media (prefers-reduced-motion: reduce) {
  .loader { transition: opacity .4s, visibility 0s .4s; clip-path: none; }
  .loader.done { opacity: 0; clip-path: none; }
  .loader__hand { animation: none; }
  .card__img, .card__img img, [data-zoom] img { transition: none; transform: none; }
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(watch) { animation: none; }
}