/* SEOUL 2.0 | Cinematic motion system – design first, reduced motion always */
:root{--cinema-gold:#d7a73d;--cinema-maple:#963e34;--cinema-ivory:#faf5eb}
/* Hero retains its verified full-resolution source, without raster upscaling. */
#top.hero{background-image:none!important;overflow:hidden;isolation:isolate}
#top.hero .cinema-hero-media{position:absolute;inset:-7% 0;z-index:-2;pointer-events:none;background:#31271c url('img/d4-11-8719d9f7.webp') center 48%/cover no-repeat;transform:translate3d(0,var(--cinema-hero-y,0px),0) scale(var(--cinema-hero-scale,1.07));transform-origin:center center;will-change:transform}
#top.hero .cinema-hero-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(27,18,9,.46),rgba(37,24,13,.13) 38%,rgba(26,16,8,.57))}
#top.hero .cine2-center{transform:translate3d(0,var(--cinema-title-y,0px),0);opacity:var(--cinema-title-opacity,1);will-change:transform,opacity}
/* Architectural scene banners: image moves behind a stationary ivory frame. */
.c3-scene{background-image:none!important;isolation:isolate;contain:paint}
.c3-scene::before{content:"";position:absolute;inset:-17% 0;z-index:-2;background-image:var(--scene-image);background-size:cover;background-position:center center;transform:translate3d(0,var(--cinema-parallax-y,0px),0) scale(1.04);will-change:transform;pointer-events:none}
.c3-scene::after{z-index:4!important}
.c3-scene .cinema-scene-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(30,21,12,.55) 0%,rgba(29,18,11,.18) 46%,rgba(22,16,12,.7) 100%);pointer-events:none}
.c3-scene-inner{transform:translate3d(0,var(--cinema-heading-y,0px),0);opacity:var(--cinema-scene-opacity,1);transition:opacity .8s ease;will-change:transform,opacity}
/* Immersive expanded chapter, small closed preview remains compact. */
@media(min-width:801px){.cc-group-section.cc-is-open .c3-scene{height:clamp(360px,43vw,540px)!important}}
@media(max-width:800px){.cc-group-section.cc-is-open .c3-scene{height:clamp(245px,45vw,340px)!important}}
/* Narrative interlude gets the same film-like layered movement without duplicated sections. */
.cine2-interlude{background-image:none!important;isolation:isolate;overflow:hidden}
.cine2-interlude .cinema-interlude-media{position:absolute;inset:-12% 0;z-index:-2;background:#573e26 url('img/d4-10-eb85596c-m.webp') center/cover no-repeat;transform:translate3d(0,var(--cinema-parallax-y,0px),0) scale(1.04);will-change:transform;pointer-events:none}
.cine2-interlude:before{z-index:-1!important}
.cine2-interlude-content{transform:translate3d(0,var(--cinema-heading-y,0px),0);opacity:var(--cinema-scene-opacity,1)}
.cine2-intro-visual{overflow:hidden}
.cine2-intro-visual img{transform:translate3d(0,var(--cinema-parallax-y,0px),0) scale(1.1);will-change:transform}
/* Gentle entrance: only for section content, not interactive overlays, buttons or fixed controls. */
@media(prefers-reduced-motion:no-preference){
 .cinema-reveal{opacity:0;transform:translate3d(0,26px,0);transition:opacity .75s cubic-bezier(.19,1,.22,1),transform .9s cubic-bezier(.19,1,.22,1)}
 .cinema-reveal.cinema-visible{opacity:1;transform:translate3d(0,0,0)}
 .cc-tab img,.cine2-topic img,.cine2-day img{transition:transform .7s cubic-bezier(.19,1,.22,1)!important}
 .cc-tab:hover img,.cine2-topic:hover img,.cine2-day:hover img{transform:scale(1.055)!important}
}
/* Scroll bars and backgrounds stay restrained; key UI surfaces remain readable. */
.c3-scene-label,.c3-scene-en,.c3-scene-zh{color:#fff9ed!important;text-shadow:0 2px 19px rgba(20,13,7,.68)}
.c3-scene-en{font-weight:400;letter-spacing:-.035em}
.c3-scene-inner{max-width:1060px;padding:clamp(20px,5vw,64px)}
@media(max-width:700px){
 #top.hero .cinema-hero-media{inset:-5% 0;background-position:48% center}
 .c3-scene::before{inset:-14% 0}
 .c3-scene-en{font-size:clamp(24px,6.7vw,47px)!important}
 .c3-scene-label{letter-spacing:.17em}
 .cine2-intro-visual img{will-change:auto}
}
@media(prefers-reduced-motion:reduce){
 #top.hero .cinema-hero-media,.c3-scene::before,.cine2-interlude .cinema-interlude-media,.cine2-intro-visual img{transform:none!important;will-change:auto!important}
 .c3-scene-inner,.cine2-interlude-content,#top.hero .cine2-center{transform:none!important;opacity:1!important;will-change:auto!important}
 .cinema-reveal{opacity:1!important;transform:none!important;transition:none!important}
}
/* Keep the previously supported ?hero=original image choice. */
html.jsl-hero-original #top.hero .cinema-hero-media{background-image:url('img/seoul-hero-ginkgo-retina.webp')}

/* CINEMATIC RESTORATION — visible layers, stable stacking, usable closed chapter covers */
#top.hero{position:relative!important;isolation:isolate!important;overflow:hidden!important;background:#342719 url('img/d4-11-8719d9f7.webp') center center/cover no-repeat!important}
#top.hero .cinema-hero-media{
  display:block!important;position:absolute!important;inset:-5% 0!important;
  z-index:1!important;opacity:1!important;
  background-image:url('img/d4-11-8719d9f7.webp')!important;
  background-size:cover!important;background-position:center center!important;
  background-repeat:no-repeat!important;pointer-events:none!important;
}
#top.hero .cinema-hero-shade{display:block!important;z-index:2!important;background:linear-gradient(180deg,rgba(23,17,10,.36),rgba(23,17,10,.14) 42%,rgba(23,17,10,.62))!important}
#top.hero>.cine2-hero-content{z-index:3!important;position:relative!important}
#top.hero>.sunwrap,#top.hero>.layer{display:none!important}
.c3-scene{display:grid!important;position:relative!important;isolation:isolate!important;overflow:hidden!important;background:#42331d!important}
.c3-scene::before{z-index:0!important;display:block!important;inset:-15% 0!important;opacity:1!important;
  background-image:var(--scene-image)!important;background-size:cover!important;background-position:center!important;
  background-repeat:no-repeat!important}
.c3-scene .cinema-scene-shade{z-index:1!important;display:block!important;inset:0!important;background:linear-gradient(180deg,rgba(20,15,10,.35),rgba(20,15,10,.31) 45%,rgba(20,15,10,.62))!important}
.c3-scene .c3-scene-inner{z-index:2!important;position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  text-align:center!important;width:100%!important;max-width:min(1100px,96vw)!important;padding:clamp(22px,3vw,48px)!important;box-sizing:border-box!important}
.c3-scene::after{z-index:4!important}
/* Even a collapsed cover is an intentional photographic image, not a sliced title. */
.cc-group-section.cc-is-collapsed .c3-scene{height:clamp(215px,23vw,310px)!important;min-height:215px!important}
.cc-group-section.cc-is-open .c3-scene{height:clamp(320px,43vw,490px)!important;min-height:320px!important}
.cc-group-section.cc-is-collapsed .c3-scene-en{font-size:clamp(25px,4.5vw,57px)!important;line-height:1.09!important;max-width:96%!important;white-space:normal!important;overflow-wrap:normal!important}
.cc-group-section.cc-is-open .c3-scene-en{font-size:clamp(34px,6.5vw,78px)!important;line-height:1.05!important;max-width:98%!important}
.c3-scene-zh{font-size:clamp(16px,2.5vw,28px)!important;margin-top:14px!important;color:#fff5dc!important}
.c3-scene-label{font-size:10px!important;letter-spacing:.17em!important;margin-bottom:9px!important}
/* Remove the huge empty gap introduced by folding the original dynamic content. */
.cc-group-section.cc-is-collapsed>.wrap{padding:clamp(18px,2.5vw,30px) clamp(18px,3vw,35px) 22px!important;min-height:0!important;height:auto!important}
.cc-group-section.cc-is-collapsed>.wrap>.sec-head{margin:0!important;padding:0!important;min-height:0!important}
.cc-group-section.cc-is-collapsed>.wrap>.sec-head h2{margin:6px 0!important}
.cc-group-section.cc-is-collapsed>.wrap>.sec-head p{margin:6px 0!important}
.cc-group-section.cc-is-collapsed>.wrap>.sec-head .cc-toggle{margin:14px 0 0!important}
.cc-group-section.cc-is-collapsed{min-height:0!important;height:auto!important;margin-bottom:0!important;padding-bottom:0!important}
/* Interlude photo is visible again, with layered shading and framed words. */
.cine2-interlude{position:relative!important;isolation:isolate!important;background:#513a24 url('img/d4-10-eb85596c-m.webp') center/cover no-repeat!important}
.cine2-interlude .cinema-interlude-media{z-index:0!important;display:block!important;inset:-12% 0!important;opacity:1!important}
.cine2-interlude::before{z-index:1!important;pointer-events:none!important}
.cine2-interlude .cine2-interlude-frame{z-index:3!important;pointer-events:none!important}
.cine2-interlude .cine2-interlude-content{z-index:2!important;position:relative!important}
/* Hero title remains centered on all viewports; never obscure it with motion. */
#top.hero .cine2-center{width:100%!important;max-width:950px!important;margin-inline:auto!important;text-align:center!important;align-items:center!important;justify-content:center!important}
@media(max-width:800px){
  .cc-group-section.cc-is-collapsed .c3-scene{height:clamp(205px,34vw,265px)!important;min-height:205px!important}
  .cc-group-section.cc-is-open .c3-scene{height:clamp(315px,58vw,425px)!important;min-height:315px!important}
  .cc-group-section.cc-is-collapsed .c3-scene-en{font-size:clamp(26px,5vw,43px)!important}
}
@media(max-width:520px){
  .cc-group-section.cc-is-collapsed .c3-scene{height:230px!important;min-height:230px!important}
  .cc-group-section.cc-is-open .c3-scene{height:340px!important;min-height:340px!important}
  .cc-group-section.cc-is-collapsed .c3-scene-en{font-size:clamp(25px,7vw,38px)!important}
  .cc-group-section.cc-is-open .c3-scene-en{font-size:clamp(33px,9vw,48px)!important}
  .c3-scene-label{font-size:9px!important;letter-spacing:.1em!important}
  #top.hero .cinema-hero-media{background-position:50% center!important}
}
html.jsl-hero-original #top.hero .cinema-hero-media{background-image:url('img/seoul-hero-ginkgo-retina.webp')!important}
@media(prefers-reduced-motion:reduce){
 #top.hero .cinema-hero-media,.c3-scene::before,.cine2-interlude .cinema-interlude-media{transform:none!important;will-change:auto!important}
}