/* Restrained motion, using the established Dongbao palette and typography. */
:root{--motion-fast:140ms;--motion-ui:220ms;--motion-reveal:520ms;--ease-out:cubic-bezier(.22,1,.36,1);--shadow-card:0 14px 34px #102b4c15;--header-offset:110px}
html{scroll-padding-top:var(--header-offset)}
header{transition:box-shadow var(--motion-ui) ease}
header.is-scrolled{box-shadow:0 6px 24px #102b4c12}
.reading-track{position:absolute;bottom:-1px;left:0;right:0;height:3px;pointer-events:none}
#readingProgress{display:block;width:100%;height:100%;background:var(--blue);transform:scaleX(0);transform-origin:left}
#navigation a{position:relative}
#navigation a:after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform var(--motion-ui) var(--ease-out)}
#navigation a[aria-current="location"]{color:var(--blue)}
#navigation a[aria-current="location"]:after{transform:scaleX(1)}
button,.btn{touch-action:manipulation}
.btn{transition:transform var(--motion-fast) ease,background var(--motion-ui) ease,box-shadow var(--motion-ui) ease}
.btn:active{transform:scale(.98)}
.arrow{transition:transform var(--motion-ui) var(--ease-out)}
.service{transition:transform var(--motion-ui) var(--ease-out),box-shadow var(--motion-ui) ease,background var(--motion-ui) ease}
.service:focus-within{box-shadow:var(--shadow-card);background:#edf4f8}
.activity-card{transition:box-shadow var(--motion-ui) ease}
.activity-image img{transition:transform var(--motion-reveal) var(--ease-out)}
#activityFilters button,#activityRegions button,.profile-languages button,.langs button,.hero-scene-choices button{transition:background var(--motion-ui) ease,color var(--motion-ui) ease,transform var(--motion-fast) ease}
#activityFilters button:active,#activityRegions button:active,.profile-languages button:active,.hero-scene-choices button:active{transform:scale(.98)}
.langs button,.menu-toggle{min-height:44px}
.text-link{min-height:44px}
.hero h1,.section-heading,.section-top h2{text-wrap:balance}
.hero{background-image:radial-gradient(ellipse at 90% 15%,#1b56793b,transparent 65%)}
.hero-art.hero-showcase{height:auto;display:block;border:0;width:100%;max-width:560px;justify-self:end;min-width:0}
.hero-showcase:before{content:"";position:absolute;inset:-14px 14px 14px -14px;border:1px solid #9bd4f14d;z-index:-1;pointer-events:none}
.hero-photo-card{margin:0;background:var(--deep);border:1px solid #9bd4f14d;box-shadow:0 20px 50px #030e1a30}
.hero-photo-frame{aspect-ratio:4/3;overflow:hidden;background:var(--deep)}
.hero-photo-frame img{display:block;width:100%;height:100%;object-fit:contain}
.hero-photo-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:20px 22px;border-top:1px solid #ffffff20}
.hero-photo-meta>div{min-width:0}
.hero-photo-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--sky)}
.hero-photo-meta h2{font-size:17px;line-height:1.6;font-weight:500;margin-top:5px}
.hero-photo-count{font-size:11px;color:var(--sky);white-space:nowrap;font-variant-numeric:tabular-nums;padding-top:4px}
.hero-photo-controls{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:18px}
.hero-scene-choices{display:flex;gap:8px}
.hero-scene-choices button{width:44px;min-height:44px;border:1px solid #93b7d3;background:transparent;color:#e1eef7;font-size:12px;font-variant-numeric:tabular-nums}
.hero-scene-choices button[aria-pressed="true"]{background:var(--sky);color:var(--deep);border-color:var(--sky)}
.hero-gallery-link{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:12px;color:#d6e8f6;text-decoration:underline;text-underline-offset:5px}
.hero-gallery-link svg{width:18px;height:18px;flex-shrink:0;transition:transform var(--motion-ui) var(--ease-out)}
.hero-scene-status{font-size:12px;line-height:1.7;padding:12px 0;color:#d6e8f6}
.faq details[open] p{animation:answer-in var(--motion-ui) var(--ease-out)}
@keyframes answer-in{from{opacity:.5;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@media(hover:hover) and (pointer:fine){
  #navigation a:hover:after{transform:scaleX(1)}
  .btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px #030e1a18}
  .btn:hover .arrow,.text-link:hover .arrow,.hero-gallery-link:hover svg{transform:translateX(4px)}
  .service:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
  .activity-card:hover{box-shadow:var(--shadow-card)}
  .activity-image:hover img{transform:scale(1.025)}
  .hero-scene-choices button:hover:not([aria-pressed="true"]){background:#ffffff18}
}
@media(max-width:1050px){.hero-inner{grid-template-columns:1.05fr 1fr}}
@media(max-width:800px){.hero-inner{grid-template-columns:1fr;gap:38px}.hero-art.hero-showcase{max-width:600px;justify-self:start}.hero-showcase:before{inset:-10px 10px 10px -10px}}
@media(max-width:560px){.hero-photo-meta{padding:16px;gap:12px}.hero-photo-meta h2{font-size:16px}.hero-photo-controls{gap:12px;flex-wrap:wrap;margin-top:14px}.hero-gallery-link{font-size:11px}.hero-photo-label{font-size:9px}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .btn:hover,.btn:active,.service:hover,.activity-image:hover img,.btn:hover .arrow,.text-link:hover .arrow,.hero-gallery-link:hover svg,#activityFilters button:active,#activityRegions button:active,.profile-languages button:active,.hero-scene-choices button:active{transform:none}
}
@media print{.reading-track,.hero-photo-controls,.hero-showcase:before{display:none}}