/* Homepage motion, Dr Catherine Chow. Homepage only. Slow, ink and paper.
   Everything is gated on html.mw (set by motion.js when motion is allowed and
   IntersectionObserver exists), so no-JS and reduced-motion show the settled page. */

/* ---- 1. Hero line-work draws itself in, then drifts ---- */
.mw-hero-lines{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 46%,#000 68%);mask-image:linear-gradient(90deg,transparent 46%,#000 68%)}
.mw-hero-lines svg{width:100%;height:100%;display:block;overflow:hidden}
.mw-hero-lines .mw-drift path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.mw-hero-lines .r{stroke:#B5637F;stroke-opacity:.78}
.mw-hero-lines .g{stroke:#A98443;stroke-opacity:.82}
.mw-hero-lines .n{stroke:#23273A;stroke-opacity:.7}
.mw .mw-hero-lines .mw-drift path{stroke-dasharray:var(--l);stroke-dashoffset:var(--l)}
.mw .mw-hero-lines.mw-go .mw-drift path{
  animation:mw-draw var(--dur,1.8s) cubic-bezier(.5,0,.2,1) var(--del,0s) forwards}
@keyframes mw-draw{to{stroke-dashoffset:0}}
.mw .mw-hero-lines .mw-drift{animation:mw-drift-hero 30s ease-in-out infinite alternate;animation-play-state:paused}
.mw .mw-hero-lines.mw-live .mw-drift{animation-play-state:running}
@keyframes mw-drift-hero{from{transform:translate(0,0)}to{transform:translate(-6px,5px)}}

/* ---- 2. Thyroid section: contour drift + fact reveal ---- */
.mw .signature .band-art{will-change:transform;animation:mw-contour 26s ease-in-out infinite alternate;animation-play-state:paused}
.mw .signature.mw-live .band-art{animation-play-state:running}
@media (pointer:coarse){.mw .signature .band-art{animation:none;will-change:auto}}
@keyframes mw-contour{
  from{transform:translate(0,0) rotate(0deg) scale(1)}
  to{transform:translate(7px,-5px)}}

.mw .signature .sig-facts strong,
.mw .signature .sig-facts span{opacity:0;transform:translateY(12px)}
.mw .signature.mw-in .sig-facts strong,
.mw .signature.mw-in .sig-facts span{
  animation:mw-rise 1.2s cubic-bezier(.22,.6,.2,1) calc(var(--i) * 120ms + 250ms) both}
@keyframes mw-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---- 3. Three doors: painting drawn while scrolling (progress set by motion.js) ---- */
.mw .door-art{position:relative}
.mw .door-art img{--mw-r:0%;opacity:0;will-change:opacity}
@media (pointer:fine){
.mw .door-art img{
  -webkit-mask-image:
    radial-gradient(ellipse 100% 100% at 50% 52%,#000 calc(var(--mw-r) - 26%),transparent var(--mw-r)),
    radial-gradient(ellipse 100% 100% at 34% 40%,#000 calc(var(--mw-r) * .86 - 26%),transparent calc(var(--mw-r) * .86)),
    radial-gradient(ellipse 100% 100% at 68% 62%,#000 calc(var(--mw-r) * .92 - 26%),transparent calc(var(--mw-r) * .92));
  mask-image:
    radial-gradient(ellipse 100% 100% at 50% 52%,#000 calc(var(--mw-r) - 26%),transparent var(--mw-r)),
    radial-gradient(ellipse 100% 100% at 34% 40%,#000 calc(var(--mw-r) * .86 - 26%),transparent calc(var(--mw-r) * .86)),
    radial-gradient(ellipse 100% 100% at 68% 62%,#000 calc(var(--mw-r) * .92 - 26%),transparent calc(var(--mw-r) * .92));
}
}
.mw-ink{position:absolute;left:0;width:100%;pointer-events:none;overflow:visible;opacity:0}
.mw-ink path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.mw-ink .n{stroke:#23273A;stroke-width:3.1}
.mw-ink .g{stroke:#A98443;stroke-width:3}

@media (prefers-reduced-motion:reduce){
  .mw-hero-lines .mw-drift path{animation:none!important;stroke-dashoffset:0!important}
}