/* =========================================================
   Anatomy scene (anatomy.js)
   ========================================================= */
.anatomy { position: relative; background: var(--paper); color: var(--ink); }

/* ---------------- live, pinned scene ---------------- */
.anatomy.an-live { height: 340vh; height: 340svh; }

.an-stage {
  position: sticky; top: var(--top-h);
  height: calc(100vh - var(--top-h)); height: calc(100svh - var(--top-h));
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  overflow: hidden; isolation: isolate;
  --sub: var(--mute);
}
.an-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.an-bg i { position: absolute; inset: 0; opacity: 0; }
.an-bg-soft { background: var(--soft); }
.an-bg-stone { background: var(--stone); }
.an-bg-night { background: var(--night); }

/* the camera view spans the whole stage on desktop, so a zoomed photo
   is only ever cut by the screen edge; the watch sits in the left part */
.an-view { position: absolute; inset: 0; overflow: hidden; container-type: size; }
.an-layer {
  --S: min(94cqh, 57cqw);
  position: absolute; left: 29.6%; top: 50%;
  width: var(--S); height: var(--S); margin: calc(var(--S) / -2) 0 0 calc(var(--S) / -2);
  transform-origin: 50% 50%;
}
img.an-layer { object-fit: contain; }
.an-b, .an-c, .an-d { opacity: 0; }
.anatomy.is-near .an-layer { will-change: transform, opacity; }
.an-b img { width: 100%; height: 100%; object-fit: contain; }
/* the side photo's bracelet runs off the photo's right edge: fade it out
   instead of showing a hard cut mid-screen */
.an-b img {
  -webkit-mask-image: linear-gradient(to right, #000 74%, transparent 97%);
  mask-image: linear-gradient(to right, #000 74%, transparent 97%);
}

/* brass thickness line on the side profile */
.an-dim { position: absolute; height: 0; transform-origin: 0 50%; pointer-events: none; }
.an-dim-line {
  position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: var(--brass); transform-origin: 0 50%; transform: scaleX(0);
}
.an-dim-end {
  position: absolute; left: -1px; top: -9px; width: 2px; height: 18px;
  background: var(--brass); opacity: 0;
}
.an-dim-end-b { left: auto; right: -1px; }
.an-dim-label {
  position: absolute; font-family: var(--serif); font-size: clamp(26px, 3.4cqmin, 40px); line-height: 1;
  color: var(--ink); white-space: nowrap; opacity: 0; pointer-events: none;
}

/* text column */
.an-text {
  grid-column: 2; z-index: 1;
  position: relative; display: flex; flex-direction: column; justify-content: center;
  padding: 48px var(--gut) 112px 24px; min-width: 0;
  transition: color 400ms var(--ease);
}
.an-stage.is-dark { color: #f1f0ec; --sub: #a9a8a3; }
.an-stage.is-dark .an-text { color: #f1f0ec; }
.an-panels { display: grid; max-width: 30rem; }
.an-panel {
  grid-area: 1 / 1; align-self: center;
  opacity: 0; transform: translate3d(0, 18px, 0); visibility: hidden;
  transition: opacity 380ms var(--ease), transform 560ms var(--ease), visibility 0s linear 560ms;
}
.an-panel.is-on {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity 520ms var(--ease) 120ms, transform 640ms var(--ease) 120ms, visibility 0s;
}
.an-panel h2 { text-wrap: balance; font-family: var(--serif); font-size: clamp(52px, 5.4vw, 88px); line-height: .95; letter-spacing: -0.01em; max-width: 10ch; }
.an-panel h3 { font-family: var(--serif); font-size: clamp(44px, 4.4vw, 72px); line-height: 1; letter-spacing: -0.01em; }
.an-panel p { margin: 20px 0 0; font-size: 18px; max-width: 30ch; color: var(--sub); }
.an-panel[data-step="0"] p { color: var(--ink); }

/* step indicator */
.an-steps {
  position: absolute; left: 24px; right: var(--gut); bottom: 40px;
  display: flex; gap: 12px; max-width: 30rem;
}
.an-step {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 12px 0 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  font-size: 14px; color: var(--sub); text-align: left;
  transition: color 300ms;
}
.an-step i { display: block; width: 100%; height: 2px; background: color-mix(in srgb, currentColor 22%, transparent); overflow: hidden; }
.an-step b { display: block; height: 100%; background: var(--brass); transform-origin: 0 50%; transform: scaleX(0); }
.an-step[aria-current="step"] { color: inherit; }
.an-stage.is-dark .an-step[aria-current="step"] { color: #f1f0ec; }
.an-step:hover { color: inherit; }

/* final card */
.an-name { font-family: var(--serif); font-size: clamp(44px, 4.4vw, 72px); line-height: 1; letter-spacing: -0.01em; }
.an-panel .an-variant, .an-still .an-variant { margin: 14px 0 0; font-size: 17px; color: var(--mute); }
.an-panel .an-price, .an-still .an-price { margin: 22px 0 0; font-family: var(--serif); font-size: 38px; line-height: 1; color: var(--ink); }
.an-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.an-cta .ghost-btn { min-height: 52px; padding: 0 22px; }
.an-cta .wa-btn { width: auto; padding: 0 22px; }

/* ---------------- phone and tablet ---------------- */
@media (max-width: 960px) {
  .anatomy.an-live { height: 300vh; height: 300svh; }
  .an-panel h2 { font-size: 40px; max-width: 12ch; }
  .an-panel h3, .an-name { font-size: 36px; }
  .an-panel p { margin-top: 10px; font-size: 16px; max-width: 36ch; }
  .an-panel .an-variant { margin-top: 6px; font-size: 15px; }
  .an-panel .an-price { margin-top: 10px; font-size: 30px; }
  .an-cta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; margin-top: 14px; }
  .an-cta .ghost-btn, .an-cta .wa-btn { min-height: 48px; padding: 0 16px; min-width: 0; }
  .an-dim-label { font-size: 22px; }
  /* the closing card carries its own WhatsApp link (with this watch in the
     message), so the fixed bar steps aside instead of stacking a second
     green button under it; anatomy.js sets the class */
  html.an-at-end .mobile-bar { transform: translateY(110%); }
}

/* portrait: photo on top, text below, clear of the fixed WhatsApp bar */
@media (max-width: 960px) and (orientation: portrait) {
  .an-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
  /* static fade at the foot of the photo, so a zoomed bracelet melts into
     the ground instead of stopping on a hard line above the step bar */
  .an-view {
    position: relative; inset: auto; grid-row: 1;
    -webkit-mask-image: linear-gradient(#000 84%, transparent);
    mask-image: linear-gradient(#000 84%, transparent);
  }
  .an-layer { --S: 96cqmin; left: 50%; }
  .an-text { grid-column: 1; justify-content: flex-start; padding: 4px var(--gut) 16px; }
  .an-steps { position: static; order: -1; margin-bottom: 14px; max-width: none; }
  .an-panels { max-width: none; }
  .an-panel { align-self: start; }
}
/* tablet portrait: two equal buttons instead of a small pill beside a long bar */
@media (max-width: 960px) and (min-width: 480px) and (orientation: portrait) {
  .an-cta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 32rem; }
}

/* landscape phone (short screen): photo left, text right, like desktop,
   so the photo keeps the full height above the WhatsApp bar */
@media (max-width: 960px) and (orientation: landscape) {
  .an-stage { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .an-view { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .an-layer { left: 31%; }
  .an-text {
    padding: 12px var(--gut) calc(84px + env(safe-area-inset-bottom, 0px)) 8px;
    justify-content: center;
  }
  .an-steps { position: static; order: -1; margin-bottom: 12px; max-width: none; }
  .an-panels { max-width: none; }
}
@media (max-width: 960px) and (orientation: landscape) and (max-height: 500px) {
  .an-panel h2 { font-size: 32px; }
  .an-panel h3, .an-name { font-size: 30px; }
  .an-panel p { margin-top: 6px; font-size: 15px; line-height: 1.4; }
  .an-panel .an-variant { margin-top: 4px; font-size: 14px; }
  .an-panel .an-price { margin-top: 6px; font-size: 24px; }
  .an-cta { margin-top: 10px; }
  .an-cta .ghost-btn, .an-cta .wa-btn { min-height: 44px; }
  .an-step { padding-top: 8px; gap: 6px; }
}
@media (max-width: 360px) {
  .an-cta { grid-template-columns: 1fr; }
}

/* ---------------- still list (reduced motion / no IntersectionObserver) ---------------- */
.anatomy.an-still { padding: 120px var(--gut) 112px; }
.an-head h2 { text-wrap: balance; font-family: var(--serif); font-size: clamp(44px, 5vw, 72px); line-height: 1; max-width: 12ch; }
.an-head p { margin: 16px 0 0; font-size: 18px; max-width: 40ch; }
.an-list { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.an-list h3 { font-family: var(--serif); font-size: 34px; line-height: 1.05; margin-top: 20px; }
.an-list p { margin: 8px 0 0; font-size: 16px; max-width: 34ch; color: var(--mute); }
.an-crop { margin: 0; position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 4px; }
.an-crop.tone-night { background: var(--night); }
.an-crop.tone-stone { background: var(--stone); }
.an-crop.tone-soft { background: var(--soft); }
.an-crop > img { width: 100%; height: 100%; object-fit: contain; }
.an-b-still { position: absolute; inset: 0; }
.an-b-still img { width: 100%; height: 100%; object-fit: contain; }
.an-still .an-dim-line { transform: none; }
.an-still .an-dim-end, .an-still .an-dim-label { opacity: 1; }
.an-still .an-dim-label { font-size: 24px; }
.an-final-still { margin-top: 72px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.an-final-still > img { width: 100%; max-width: 520px; height: auto; justify-self: center; }
@media (max-width: 960px) {
  .anatomy.an-still { padding: 80px var(--gut); }
  .an-list { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 36px; }
  .an-final-still { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 48px; }
  .an-final-still > img { max-width: 360px; }
  .an-final-still .an-name { font-size: 40px; }
}