/* ============================================================
   SMILE & DIAL — "Inside the Watch" scroll-explode graphics
   Used by the home page hero and anatomy.html.
   All watch imagery is real photography (see images/anatomy/CREDITS.txt).
   ============================================================ */

/* ---------------- Home hero: exploding Waltham ---------------- */
.sd-xhero { position: relative; background: linear-gradient(168deg, var(--navy) 0%, var(--navy-deep) 78%, #0c1a36 100%); }
.sd-xhero-track { height: 320vh; position: relative; }
.sd-xhero-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; }
.sd-xhero-grid { flex: 1; max-width: 80rem; width: 100%; margin: 0 auto; padding: 96px 1.5rem 2rem; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); align-items: center; gap: 2rem; }
.sd-xhero-copy { position: relative; z-index: 30; text-align: left; }
.sd-xhero-copy .sd-hero-headline { margin-bottom: 1.1rem; }
.sd-xhero-copy .sd-hero-sub { margin: 0 0 1.6rem; }
.sd-xhero-note { display: inline-flex; align-items: center; gap: .55rem; font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #D8C9A0; margin-bottom: 1.75rem; }
.sd-xhero-note::before { content: ""; width: 26px; height: 1px; background: var(--brass); flex-shrink: 0; }

/* Stage & layers */
.sd-xhero-stage { position: relative; z-index: 10; width: min(44vw, 540px); aspect-ratio: 1; margin: 0 auto; }
.sd-xlayer { position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 1; will-change: transform; transform: translate(-50%, -50%); }
.sd-xlayer img { width: 100%; height: 100%; display: block; border-radius: 50%; box-shadow: 0 18px 60px rgba(4, 12, 30, .55), 0 0 0 1px rgba(250, 246, 237, .1); }
.sd-xlayer::after { content: ""; position: absolute; inset: -7%; border-radius: 50%; border: 1px solid rgba(216, 201, 160, 0); transition: border-color .5s; pointer-events: none; }
.sd-xhero.is-open .sd-xlayer::after { border-color: rgba(216, 201, 160, .28); }
#xl-caseback { z-index: 1; }
#xl-movement { z-index: 3; }
#xl-balance  { z-index: 5; width: 27%; }
#xl-face     { z-index: 7; }

/* Floating part labels */
.sd-xlabel { position: absolute; left: var(--lx); top: var(--ly); z-index: 20; transform: translate(-50%, -50%); opacity: 0; transition: opacity .5s ease, translate .5s ease; pointer-events: none; text-align: center; }
.sd-xlabel .t { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 10px rgba(4, 12, 30, .8); white-space: nowrap; }
.sd-xlabel .s { display: block; font-size: .66rem; letter-spacing: .06em; color: rgba(216, 201, 160, .95); margin-top: .15rem; white-space: nowrap; }
.sd-xlabel::before { content: ""; display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 4px rgba(172, 157, 114, .25); margin: 0 auto .4rem; }
.sd-xlabel.is-on { opacity: 1; }

/* Scroll hint */
.sd-xhero-scrollhint { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 30; display: flex; flex-direction: column; align-items: center; gap: .3rem; color: rgba(250, 246, 237, .82); font-size: .68rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; transition: opacity .45s; }
.sd-xhero-scrollhint svg { animation: sd-bob 1.8s ease-in-out infinite; }
@keyframes sd-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
.sd-xhero-scrollhint.is-hidden { opacity: 0; }

@media (max-width: 1023px) {
  .sd-xhero-track { height: 300vh; }
  .sd-xhero-grid { grid-template-columns: 1fr; gap: .75rem; padding-top: 88px; align-content: start; }
  .sd-xhero-copy { text-align: center; }
  .sd-xhero-copy .sd-hero-headline { font-size: clamp(2rem, 8vw, 2.9rem); margin-bottom: .8rem; }
  .sd-xhero-copy .sd-hero-sub { display: none; }
  .sd-xhero-note { margin-bottom: .9rem; }
  .sd-xhero-copy .flex { justify-content: center; }
  .sd-xhero-stage { width: min(72vw, 340px); margin-top: 1.5rem; }
  .sd-xlabel .s { display: none; }
}

/* Reduced motion: skip the scroll theatre, show the exploded diagram */
@media (prefers-reduced-motion: reduce) {
  .sd-xhero-track { height: auto; }
  .sd-xhero-sticky { position: static; height: auto; min-height: 92vh; }
  .sd-xhero-scrollhint { display: none; }
}

/* ---------------- Anatomy page ---------------- */
.an-subnav { position: sticky; top: 70px; z-index: 40; background: rgba(250, 246, 237, .92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(28, 53, 101, .12); }
.an-subnav-inner { max-width: 72rem; margin: 0 auto; padding: .65rem 1.25rem; display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.an-subnav a { padding: .45rem 1.1rem; border-radius: 9999px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); border: 1px solid rgba(28, 53, 101, .25); transition: all .2s; }
.an-subnav a:hover, .an-subnav a.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }

.an-section { padding: 4.5rem 0 5.5rem; }
.an-section.an-dark { background: linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 100%); }
.an-head { max-width: 46rem; margin: 0 auto 3rem; padding: 0 1.25rem; text-align: center; }
.an-head .sd-h2 { margin-bottom: 1rem; }
.an-dark .sd-h2 { color: #fff; }
.an-head p { color: #46536f; line-height: 1.7; }
.an-dark .an-head p { color: rgba(250, 246, 237, .8); }

/* Scrollytelling layout: sticky stage + step column */
.an-scrolly { max-width: 76rem; margin: 0 auto; padding: 0 1.25rem; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: start; }
.an-stage-wrap { position: sticky; top: 108px; height: calc(100vh - 128px); min-height: 460px; display: flex; align-items: center; justify-content: center; }
.an-stage { position: relative; width: min(100%, 520px); aspect-ratio: 1; }

/* Layer group (exploded watch) */
.an-layers { position: absolute; inset: 0; transition: opacity .55s ease, transform .55s ease; }
.an-stage.mode-detail .an-layers { opacity: 0; transform: scale(.92); pointer-events: none; }
.an-layer { position: absolute; left: 50%; top: 50%; width: 58%; aspect-ratio: 1; transform: translate(-50%, -50%); transition: transform .8s cubic-bezier(.22, .8, .28, 1), opacity .6s ease, filter .6s ease; }
.an-layer img { width: 100%; height: 100%; display: block; border-radius: 50%; box-shadow: 0 16px 50px rgba(10, 20, 44, .35), 0 0 0 1px rgba(28, 53, 101, .12); }
.an-dark .an-layer img { box-shadow: 0 18px 60px rgba(4, 12, 30, .6), 0 0 0 1px rgba(250, 246, 237, .12); }
.an-layer.is-dim { opacity: .28; filter: saturate(.55); }
.an-layer.is-focus { z-index: 30 !important; }
.an-layer.is-focus img { box-shadow: 0 22px 70px rgba(10, 20, 44, .5), 0 0 0 3px var(--brass); }
.an-layer.is-hidden { opacity: 0; }

/* Detail viewer */
.an-detail { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; opacity: 0; transform: scale(.94); transition: opacity .55s ease, transform .55s ease; pointer-events: none; }
.an-stage.mode-detail .an-detail { opacity: 1; transform: none; }
.an-detail img { max-width: 100%; max-height: 82%; border-radius: 1.1rem; box-shadow: 0 20px 60px rgba(10, 20, 44, .35), 0 0 0 1px rgba(28, 53, 101, .12); object-fit: cover; }
.an-dark .an-detail img { box-shadow: 0 20px 60px rgba(4, 12, 30, .6), 0 0 0 1px rgba(250, 246, 237, .14); }
.an-detail figcaption { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: #6b7a96; text-align: center; }
.an-dark .an-detail figcaption { color: rgba(216, 201, 160, .9); }

/* Steps */
.an-steps { display: flex; flex-direction: column; gap: 38vh; padding: 16vh 0 30vh; }
.an-step { opacity: .3; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.an-step.is-active { opacity: 1; transform: none; }
.an-step-num { font-family: var(--app-font-serif); font-size: .95rem; color: var(--brass); letter-spacing: .14em; margin-bottom: .5rem; display: block; }
.an-step h3 { font-family: var(--app-font-serif); font-size: clamp(1.45rem, 2.4vw, 1.9rem); font-weight: 500; color: var(--navy); line-height: 1.2; margin-bottom: .8rem; }
.an-dark .an-step h3 { color: #fff; }
.an-step p { font-size: .95rem; line-height: 1.75; color: #46536f; }
.an-dark .an-step p { color: rgba(250, 246, 237, .82); }
.an-step p + p { margin-top: .7rem; }
.an-fact { margin-top: 1rem; padding: .9rem 1.1rem; border-left: 3px solid var(--brass); background: rgba(172, 157, 114, .1); border-radius: 0 .6rem .6rem 0; font-size: .85rem; line-height: 1.65; color: #46536f; }
.an-dark .an-fact { background: rgba(250, 246, 237, .07); color: rgba(250, 246, 237, .85); }

/* Power-flow strip */
.an-flow { max-width: 72rem; margin: 4rem auto 0; padding: 0 1.25rem; }
.an-flow-inner { border: 1px solid rgba(28, 53, 101, .14); background: #fff; border-radius: 1.25rem; padding: 2rem clamp(1.25rem, 3vw, 2.5rem); box-shadow: 0 10px 34px rgba(18, 37, 72, .08); }
.an-dark .an-flow-inner { background: rgba(250, 246, 237, .06); border-color: rgba(250, 246, 237, .16); box-shadow: none; }
.an-flow h4 { font-family: var(--app-font-serif); color: var(--navy); font-size: 1.3rem; margin-bottom: 1.4rem; text-align: center; }
.an-dark .an-flow h4 { color: #fff; }
.an-flow-steps { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: .6rem; }
.an-flow-step { flex: 1 1 150px; max-width: 200px; text-align: center; padding: .9rem .7rem; border-radius: .8rem; background: rgba(28, 53, 101, .05); }
.an-dark .an-flow-step { background: rgba(250, 246, 237, .07); }
.an-flow-step b { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); margin-bottom: .3rem; }
.an-dark .an-flow-step b { color: #D8C9A0; }
.an-flow-step span { font-size: .74rem; line-height: 1.5; color: #6b7a96; }
.an-dark .an-flow-step span { color: rgba(250, 246, 237, .7); }
.an-flow-arrow { align-self: center; color: var(--brass); font-size: 1.1rem; }

/* Credits */
.an-credits { max-width: 72rem; margin: 0 auto; padding: 2.5rem 1.25rem 3.5rem; }
.an-credits h4 { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--navy); margin-bottom: .8rem; }
.an-credits p { font-size: .72rem; line-height: 1.8; color: #8a96a8; }
.an-credits a { color: #6b7a96; text-decoration: underline; }

@media (max-width: 1023px) {
  .an-scrolly { grid-template-columns: 1fr; }
  .an-stage-wrap { position: sticky; top: 82px; height: auto; min-height: 0; background: inherit; z-index: 10; padding: .5rem 0 .75rem; }
  .an-section:not(.an-dark) .an-stage-wrap { background: var(--cream); }
  .an-section.an-dark .an-stage-wrap { background: transparent; }
  .an-stage { width: min(62vw, 330px); }
  .an-steps { gap: 30vh; padding: 6vh 0 22vh; }
  .an-step { background: rgba(255, 255, 255, .0); }
}

@media (prefers-reduced-motion: reduce) {
  .an-layer, .an-layers, .an-detail, .an-step { transition: none; }
  .an-step { opacity: 1; transform: none; }
}