/* All moving artwork shares one coordinate system and the original painting. */
.hero { background:#faf6ed; }
.hero-art { position:absolute; inset:0; z-index:-3; overflow:hidden; pointer-events:none; }
.hero-painting { width:100%; height:100%; display:block; }
.hero-side-note { display:none; }
.hero-overlay { background:linear-gradient(90deg,rgba(250,246,237,.98),rgba(250,246,237,.9) 28%,rgba(250,246,237,.56) 44%,rgba(250,246,237,.08) 62%,transparent 73%); }
.hero-motion-toggle { position:absolute; z-index:2; right:24px; bottom:18px; border:1px solid #fff9; border-radius:4px; background:#fff9; padding:8px 12px; font:600 11px/1.4 var(--font); color:#193756; cursor:pointer; backdrop-filter:blur(8px); }
.hero-motion-toggle:hover { background:#fff; }
.harbor-ship { animation:harbor-boat-rock 8s ease-in-out infinite; transform-origin:1005px 526px; }
.harbor-reflection { animation:harbor-reflect 8s ease-in-out infinite; transform-origin:1005px 548px; opacity:.62; }
.harbor-water { animation:harbor-water-drift 12s ease-in-out infinite; opacity:.3; }
.harbor-merchant-korean { animation:harbor-trade-bow 12s ease-in-out infinite; transform-origin:1658px 646px; }
.harbor-merchant-european { animation:harbor-trade-reply 12s ease-in-out infinite; transform-origin:1811px 638px; }
.harbor-trading-hand { animation:harbor-offer 12s ease-in-out infinite; transform-origin:1808px 507px; }
@keyframes harbor-boat-rock { 0%,100%{transform:translate(-3px,0) rotate(-.45deg)} 50%{transform:translate(4px,2px) rotate(.45deg)} }
@keyframes harbor-reflect { 0%,100%{transform:translate(-3px,0) scaleX(.98);opacity:.46} 50%{transform:translate(4px,1px) scaleX(1.035);opacity:.68} }
@keyframes harbor-water-drift { 0%,100%{transform:translate(-3px,0)} 50%{transform:translate(3px,1.5px)} }
@keyframes harbor-trade-bow { 0%,18%,58%,100%{transform:rotate(0)} 30%,44%{transform:rotate(1deg)} }
@keyframes harbor-trade-reply { 0%,33%,85%,100%{transform:rotate(0)} 47%,63%{transform:rotate(-.7deg)} }
@keyframes harbor-offer { 0%,25%,80%,100%{transform:rotate(0)} 40%,62%{transform:rotate(-3deg)} }
.hero .harbor-motion { animation-play-state:paused; }
.hero:not(.motion-paused):not(.motion-offscreen):not(.motion-out-of-view) .harbor-motion { animation-play-state:running; }
@media(max-width:1050px) and (min-width:601px) {
  .hero-copy{max-width:53%}
  .hero h1{font-size:clamp(39px,4.6vw,49px)}
  .hero-intro{font-size:14px}
  .hero-overlay{background:linear-gradient(90deg,#faf6edf7,#faf6ede6 35%,#faf6ed77 54%,transparent 76%)}
}
@media(max-width:600px) {
  .hero { min-height:0; }
  .hero-art { top:auto; height:320px; }
  .hero-overlay { background:linear-gradient(180deg,#faf6ed 0%,#faf6ed 52%,#faf6edcc 62%,transparent 78%); }
  .hero-inner { padding-top:38px; padding-bottom:315px; }
  .hero h1 { font-size:clamp(36px,9.5vw,52px); }
  .hero-motion-toggle { right:18px; bottom:14px; }
  .hero-copy { max-width:100%; }
}
@media(prefers-reduced-motion:reduce) {
  .hero .harbor-motion { animation:none!important; }
  .hero-motion-toggle { display:none; }
}