/* Cătălina Stanciu — original Bewegung 1 styles, project copy. */
/* 3Art Flow Standard 1.0. No injected styles or exhibition-specific overrides. */
:root {
  color-scheme:dark;
  --poster-width-desktop:92%; --poster-width-mobile:100%;
  --artist-photo-desktop:240px; --artist-photo-mobile:180px;
  --page-bg:#0d1b2a; --text:#ddd9d2; --gold:#c8a96b;
}
* {box-sizing:border-box; margin:0; padding:0;}
html {width:100%; overflow-x:hidden; background:var(--page-bg); text-size-adjust:100%; -webkit-text-size-adjust:100%;}
body {width:100%; min-width:0; min-height:100vh; min-height:100dvh; background:var(--page-bg); color:var(--text); font-family:Arial,sans-serif;}
button,a {touch-action:manipulation; -webkit-tap-highlight-color:transparent;}
button {font:inherit; color:inherit; cursor:pointer; background:none; border:0;}
button:disabled {cursor:default; opacity:.65;}
button:focus-visible,a:focus-visible {outline:2px solid var(--gold); outline-offset:5px;}
[hidden] {display:none !important;}
img {display:block; max-width:100%;}
p {line-height:1.7;}
h1,h2 {font-weight:500;}
a {color:var(--gold);}
.pageShell {width:100%;}
.page {max-width:900px; margin:2px auto 20px; padding:20px;}
.screen {display:none;}
.screen.is-active {display:block;}
body.is-fullscreen {background:#000; overflow:hidden;}
body.is-fullscreen .pageShell {display:none;}
.topBar,.artistTopBar {padding-bottom:8px; margin-bottom:12px; border-bottom:1px solid #ffffff28;}
.modeBar,.navGroup,.artistLangBar {display:flex; align-items:center; gap:18px;}
.modeBar {justify-content:space-between;}
.topTextBtn,.langBtn {font-size:15px; color:var(--gold); padding:6px 0;}
.topTextBtn:hover,.contactLink:hover {color:#e2c58c;}
.langBtn {opacity:.6;}
.langBtn.is-soft-active {opacity:1; border-bottom:1px solid var(--gold);}
.posterStage {display:flex; justify-content:center;}
.posterFrame {width:var(--poster-width-desktop); height:clamp(360px,58vh,680px);}
.posterMediaSlot {height:100%; display:flex; align-items:center; justify-content:center;}
.posterImage {width:100%; height:100%; object-fit:contain; cursor:pointer;}
.posterMeta {text-align:center; margin:20px auto 0;}
.posterMeta h1 {font-size:19px; line-height:1.2; margin-bottom:5px; white-space:pre-line;}
.posterMeta h2 {font-size:16px; color:#ddd9d2d1; white-space:pre-line;}
.posterMotto {color:#ffffaa; margin-top:16px; font-size:14px; white-space:pre-line;}
.posterMotto:empty {display:none;}
.artistActions {display:flex; justify-content:center; margin:42px auto 14px;}
.primaryActionBtn {min-width:190px; padding:13px 24px; border:1px solid #c8a96b6b; border-radius:999px; background:#070a0e; color:#f2f4f6; font-size:15px;}
.primaryActionBtn:hover {background:#111b25;}
.posterInstructions {text-align:center; font-size:13px; opacity:.85; margin:24px auto 0; white-space:pre-line;}
.loadStatus {text-align:center; color:#efc799; font-size:14px; margin-top:12px; overflow-wrap:anywhere;}
.loadStatus:empty {display:none;}
.artistPanel {padding-top:10px;}
.artistIntroText h1 {text-align:center; font-size:24px; margin:10px auto 26px;}
.artistText {max-width:760px; margin:auto;}
.artistBioRow {display:flex; align-items:flex-start; gap:24px;}
.artistBioPhotoWrap {flex:0 0 var(--artist-photo-desktop); width:var(--artist-photo-desktop);}
.artistBioPhotoWrap img {width:100%; height:auto; border-radius:8px;}
.artistBioCopy {flex:1; min-width:0;}
.artistBioCopy p {font-size:14px; white-space:pre-line;}
.artistContactWrap {display:flex; flex-wrap:wrap; gap:14px; margin-top:22px;}
.contactLink {font-size:14px; text-decoration:none; overflow-wrap:anywhere;}
.screen-cinematic,.screen-end {position:fixed; inset:0; width:100%; height:100vh; height:100dvh; z-index:100; background:#000;}
.cinematicFrame {position:absolute; inset:0; overflow:hidden; isolation:isolate; background:#000; cursor:pointer;}
.cinematicMediaSlot {position:absolute; inset:0; background:#000; overflow:hidden; isolation:isolate;}
/* Opacity and transforms belong exclusively to the shared JS timeline. */
.mediaLayer {position:absolute; inset:0; background:#000; opacity:0; overflow:hidden; will-change:opacity;}
.mediaBg {position:absolute; inset:0; background:#000 center/cover no-repeat; pointer-events:none;}
.mediaStage {position:absolute; inset:0; display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; padding:10px; padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); overflow:hidden;}
.mediaInner {flex:0 1 100%; width:100%; height:100%; min-width:0; min-height:0; max-width:100%; max-height:100%; will-change:transform;}
.mediaInner img {display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; object-position:center; user-select:none; -webkit-user-drag:none;}
.cinematicFinalText {position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:28px; text-align:center; white-space:pre-line; font:clamp(20px,3vw,34px)/1.4 Georgia,serif; color:#eee8dc; opacity:0; pointer-events:none;}
.cinematicNav {position:absolute; top:0; right:0; z-index:3; padding:16px; padding-top:max(16px,env(safe-area-inset-top)); opacity:0; pointer-events:none;}
.is-paused .cinematicNav,.cinematicNav:focus-within {opacity:1; pointer-events:auto;}
.cinematicNavBtn {width:42px; height:42px; border-radius:50%; background:#080a0ee6; border:1px solid #ffffff40; font-size:28px;}
.pausePanel {position:absolute; bottom:max(24px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:min(90%,640px); padding:18px 22px; z-index:2; background:#080a0ee8; border:1px solid #ffffff24; border-radius:16px; white-space:pre-line;}
.pausePanel h2 {font:20px/1.3 Georgia,serif; margin-bottom:8px;}
.pausePanel p {font-size:15px;}
.pausePanel small {display:block; color:#bcb6ac; font-size:12px; margin-top:12px;}
.soundButton {position:absolute; top:16px; left:16px; z-index:4; padding:8px 14px; border-radius:20px; background:#080a0ee6; border:1px solid #ffffff40; font-size:13px;}
.endWrap {height:100%; display:flex; align-items:center; justify-content:center; padding:24px; overflow:auto;}
.endContent {width:min(100%,360px); text-align:center;}
.endActions {display:flex; flex-direction:column; gap:16px;}
.endBranding {margin-top:32px; font-size:14px; color:#cfc8bd;}
.endBrandingTagline {margin-bottom:10px;}
.endBrandingCredit {font-size:13px;}
.endBrandingCopyright {font-size:12px; color:#afa79a; margin-top:6px;}
.initError {position:fixed; top:20px; left:5%; right:5%; z-index:200; background:#261813; padding:24px; border:1px solid #efc799; overflow-wrap:anywhere;}
.initError h2 {font-size:20px; margin-bottom:12px;}
@media (max-width:640px) {
  .page {padding:12px; margin:0;}
  .modeBar,.navGroup,.artistLangBar {gap:12px;}
  .topTextBtn,.langBtn {font-size:14px;}
  .posterFrame {width:var(--poster-width-mobile); height:clamp(300px,58vh,620px);}
  .posterMeta h1 {font-size:18px;}
  .posterMeta h2 {font-size:14px;}
  .artistBioRow {flex-direction:column; align-items:center; gap:20px;}
  .artistBioPhotoWrap {flex:none; width:var(--artist-photo-mobile);}
  .artistIntroText h1 {font-size:22px;}
  .cinematicNav {padding:12px;}
}
/* Bewegung 1: the viewer starts the flow explicitly.
   Its gentle JS zoom stays active regardless of the system motion preference. */

/* Mobile intro: reserve room for controls and instructions before sizing the poster.
   Small viewport height accounts for expanded browser bars and avoids layout jumps.
   Minimum poster height allows natural scrolling with large accessibility text.
   Only the intro is affected; artist page and cinematic layout keep their rules. */
@media (max-width:640px) {
  #expoScreen.is-active {
    display:grid;
    grid-template-rows:auto minmax(120px,1fr) auto auto auto;
    gap:10px;
    height:calc(100vh - 24px);
    height:calc(100svh - 24px - env(safe-area-inset-bottom, 0px));
    overflow:visible;
  }
  #expoScreen > .topBar {
    margin:0;
    padding-bottom:4px;
  }
  #expoScreen .topTextBtn,
  #expoScreen .langBtn { min-height:40px; }
  #expoScreen > .posterStage { min-width:0; min-height:0; }
  #expoScreen .posterFrame {
    width:var(--poster-width-mobile);
    height:100%;
    min-height:0;
  }
  #expoScreen .posterMediaSlot { min-height:0; }
  #expoScreen .posterImage { object-fit:contain; }
  #expoScreen > .posterMeta { width:100%; margin:0; }
  #expoScreen .posterMeta h1 { line-height:1.2; margin-bottom:4px; }
  #expoScreen .posterMeta h2 { line-height:1.3; }
  #expoScreen .posterMotto { margin-top:6px; line-height:1.4; }
  #expoScreen > .artistActions { margin:2px 0 0; }
  #expoScreen .primaryActionBtn { min-height:46px; padding:12px 24px; }
  #expoScreen > .posterInstructions {
    width:100%;
    margin:0;
    font-size:13px;
    line-height:1.45;
    overflow-wrap:anywhere;
  }
  #expoScreen > .loadStatus { margin:0; }
}