/* A moving woodblock landscape; content remains ordinary, accessible HTML. */
.hero { height: auto; min-height: 0; max-height: none; overflow: visible; background: #060e13; }
.hero-frame { height: 100svh; min-height: 680px; position: relative; overflow: hidden; isolation: isolate; }
.hero.scene-ready:not(.scene-reduced) { height: calc(var(--scene-frame-height,100svh) * 2.9); min-height: 0; }
.scene-ready .hero-frame { position: sticky; top: 0; }
.hero-art { inset: 0; z-index: 0; transform: none !important; will-change: auto; opacity: 1; }
.scene-ready .hero-art { background: #070e13; }
.hero-scene { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .7s ease; }
.scene-ready .hero-scene { opacity: 1; }
/* Keep the artwork's brightness without a dark overlay at any screen size. */
.hero-shade { display: none; }
.hero-content { z-index: 3; padding-top: clamp(142px,17svh,190px); opacity: var(--scene-copy,1); transform: none; will-change: opacity; }
.scene-ready .hero-content { -webkit-mask-image:var(--scene-copy-mask,none); mask-image:var(--scene-copy-mask,none); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; mask-mode:alpha; }
.hero-description { max-width: 610px; text-wrap: pretty; }
.hero-side-label { z-index: 3; opacity: var(--scene-copy,1); }
.scene-motion { opacity: var(--scene-controls,1); }
.scene-motion { position: absolute; right: var(--gutter); bottom: 102px; z-index: 5; min-height: 44px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; background: #05121c94; border: 1px solid #aad7e84d; border-radius: 30px; font: 400 12px/1.4 var(--ui); color: #e3f0f2; backdrop-filter: blur(8px); transition: border-color .2s,background .2s; }
.scene-motion:hover { background: #0b2d39e6; border-color: var(--cyan); }
.scene-motion>span:first-child { color: var(--cyan); font-size: 16px; min-width: 15px; }
.scene-exit { position: absolute; inset: 0; z-index: 2; background: linear-gradient(0deg,#090e10 0%,#090e10db 20%,#090e1000 100%); opacity: var(--scene-exit,0); pointer-events: none; }
.hero.scene-reduced .hero-frame { position: relative; }
.hero.scene-reduced .hero-content { transform: none; opacity: 1; }
.hero.scene-fallback .hero-frame { position: relative; }
.scene-service { background: #090d10; display: flow-root; }
.scene-service-inner { position: relative; display: flow-root; transform-origin: 0 0; }
.scene-service.is-active { position: relative; z-index: 6; margin-top: calc(-1 * var(--scene-frame-height)); overflow: clip; will-change: transform,clip-path; }
.scene-service[inert] { pointer-events: none; }
.scene-service.is-active .reveal { opacity: 1; transform: none; transition: none; }
.scene-service.is-active .scene-service-inner { will-change: transform; }
.scene-service.is-active:after { content: ''; position: absolute; left: var(--portal-x); top: var(--portal-y); width: var(--portal-diameter); height: var(--portal-diameter); transform: translate(-50%,-50%); border: 1px solid #55dcf257; border-radius: 50%; box-shadow: inset 0 0 35px #1acde815; opacity: var(--portal-rim-opacity,0); pointer-events: none; }
.scene-service #service:focus { outline: none; }
@media(min-width:801px) {
  .scene-motion { right: 24px; }
}
@media(max-width:1100px) {
  .hero h1 { font-size: clamp(46px,5vw,62px); }
  .hero-english { font-size: clamp(25px,2.65vw,34px); max-width: 560px; }
}
@media(max-width:800px) {
  .hero-frame { min-height: 730px; }
  .hero.scene-ready:not(.scene-reduced) { height: calc(var(--scene-frame-height,100svh) * 2.65); min-height: 0; }
  .hero-content { padding-top: 150px; }
  .hero-location { font-size: 11px; }
  .hero h1 { font-size: 47px; }
  .scene-motion { bottom: 78px; }
}
@media(max-width:520px) {
  .hero-frame { min-height: 760px; }
  .hero-content { padding-top: 136px; }
  .hero h1 { font-size: clamp(29px,8.4vw,41px); line-height: 1.65; }
  .hero-location { font-size: 10px; max-width: 270px; }
  .hero-english { font-size: 24px; max-width: 310px; }
  .hero-description { font-size: 14px; max-width: 300px; }
  .scene-motion { padding: 7px 11px; font-size: 11px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero.scene-ready { height: auto; min-height: 0; }
  .hero-frame { position: relative !important; }
  .hero-scene { transition: none; }
  .scene-motion { display: none; }
}

/* The same live crystal fades in at the sun before joining SERVICE. */
.scene-service.is-active .koi-heading,
.scene-service.is-active .koi-links,
.scene-service.is-active .koi-footer,
.scene-service.is-active .koi-interaction { opacity:var(--koi-intro-copy,1); }