/**
 * NCDE Storytelling Experience v1.0 — Foundation
 * Fixed living environment + disappearing glass header + persistent logo.
 */
:root{
  --ncde-story-header-top:clamp(14px,2.1vw,26px);
  --ncde-story-header-inline:clamp(14px,3vw,34px);
  --ncde-story-glass:rgba(3,43,32,.72);
  --ncde-story-gold:#d8b65b;
}

body.ncde-chapter-page{
  --ncde-story-header-height:86px;
  min-height:100dvh;
}

body.ncde-chapter-page .site-header.gateway-header{
  position:fixed;
  inset:var(--ncde-story-header-top) 0 auto;
  z-index:9200;
  width:100%;
  padding-inline:var(--ncde-story-header-inline);
  border:0;
  background:transparent;
  box-shadow:none;
  pointer-events:none;
  transition:filter .7s ease;
}

body.ncde-chapter-page .gateway-header .header-inner{
  width:min(1180px,100%);
  height:var(--ncde-story-header-height);
  min-height:var(--ncde-story-header-height);
  margin-inline:auto;
  padding:10px 14px 10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:1px solid rgba(219,183,91,.24);
  border-radius:24px;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.055),
      rgba(4,47,37,.20)
    );
  box-shadow:
    0 14px 36px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.075),
    0 0 24px rgba(207,166,69,.055);
  -webkit-backdrop-filter:blur(20px) saturate(1.08);
  backdrop-filter:blur(20px) saturate(1.08);
  pointer-events:auto;
  transform-origin:left center;
  transition:
    width .8s cubic-bezier(.22,1,.36,1),
    height .8s cubic-bezier(.22,1,.36,1),
    min-height .8s cubic-bezier(.22,1,.36,1),
    padding .65s ease,
    border-color .55s ease,
    background .55s ease,
    box-shadow .65s ease,
    border-radius .65s ease;
}

body.ncde-chapter-page .gateway-header .brand{
  position:relative;
  z-index:2;
  gap:14px;
  min-width:0;
}
body.ncde-chapter-page .gateway-header .brand-logo{
  width:58px;
  height:58px;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.32));
  transition:width .72s cubic-bezier(.22,1,.36,1),height .72s cubic-bezier(.22,1,.36,1),filter .72s ease,transform .72s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
body.ncde-chapter-page .gateway-header .brand-text{
  overflow:hidden;
  max-width:420px;
  opacity:1;
  transform:translateX(0);
  transition:max-width .58s cubic-bezier(.22,1,.36,1),opacity .32s ease,transform .58s cubic-bezier(.22,1,.36,1);
}
body.ncde-chapter-page .gateway-header .brand-name{
  font-family:Georgia,'Times New Roman',serif;
  color:#e2c675;
  font-size:clamp(20px,2vw,29px);
  letter-spacing:.075em;
  text-shadow:0 3px 14px rgba(0,0,0,.38),0 0 18px rgba(216,182,91,.12);
}
body.ncde-chapter-page .gateway-header .brand-tagline{display:none}
body.ncde-chapter-page .gateway-header .gateway-menu-toggle{
  display:inline-flex;
  opacity:1;
  transform:translateX(0) scale(1);
  transition:opacity .3s ease,transform .58s cubic-bezier(.22,1,.36,1),visibility 0s linear 0s;
}

/* The glass shell leaves; the mark appears to remain behind. */
body.ncde-chapter-page[data-story-header-state="compact"] .gateway-header .header-inner{
  width:72px;
  height:72px;
  min-height:72px;
  margin-left:0;
  padding:7px;
  border-color:transparent;
  border-radius:50%;
  background:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:blur(0);
  backdrop-filter:blur(0);
}
body.ncde-chapter-page[data-story-header-state="compact"] .gateway-header .brand-text{
  max-width:0;
  opacity:0;
  transform:translateX(-18px);
  pointer-events:none;
}
body.ncde-chapter-page[data-story-header-state="compact"] .gateway-header .gateway-menu-toggle{
  opacity:0;
  visibility:hidden;
  transform:translateX(18px) scale(.88);
  pointer-events:none;
  transition:opacity .24s ease,transform .48s cubic-bezier(.22,1,.36,1),visibility 0s linear .48s;
}
body.ncde-chapter-page[data-story-header-state="compact"] .gateway-header .brand-logo{
  width:58px;
  height:58px;
  transform:translateX(0) scale(1.03);
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.46)) drop-shadow(0 0 12px rgba(222,185,87,.46)) drop-shadow(0 0 30px rgba(222,185,87,.20));
  animation:ncde-logo-left-behind .9s cubic-bezier(.22,1,.36,1) both;
}
@keyframes ncde-logo-left-behind{
  0%{transform:translateX(0) scale(1)}
  36%{transform:translateX(10px) scale(.98)}
  100%{transform:translateX(0) scale(1.03)}
}

/* Storytelling has no dock, journey timeline, or persistent chapter navigation. */
body.ncde-chapter-page .ncde-journey-dock,
body.ncde-chapter-page .ncde-journey-map,
body.ncde-chapter-page .ncde-chapter-nav{display:none!important}

/* All chapter scenery remains locked to the viewport; content is the moving layer. */
body.ncde-chapter-page [data-ncde-background],
body.ncde-chapter-page .ncde-c01__background,
body.ncde-chapter-page .ncde-c02__background,
body.ncde-chapter-page .ncde-experience-exit__background{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  transform:none!important;
}

@media(max-width:680px){
  :root{--ncde-story-header-top:12px;--ncde-story-header-inline:12px}
  body.ncde-chapter-page{--ncde-story-header-height:72px}
  body.ncde-chapter-page .gateway-header .header-inner{
    height:72px;
    min-height:72px;
    padding:7px 9px 7px 10px;
    border-radius:20px;
  }
  body.ncde-chapter-page .gateway-header .brand-logo{width:52px;height:52px}
  body.ncde-chapter-page .gateway-header .brand-name{font-size:18px;letter-spacing:.045em}
  body.ncde-chapter-page[data-story-header-state="compact"] .gateway-header .header-inner{
    width:62px;
    height:62px;
    min-height:62px;
    padding:5px;
  }
  body.ncde-chapter-page[data-story-header-state="compact"] .gateway-header .brand-logo{width:52px;height:52px}
}

@media(prefers-reduced-motion:reduce){
  body.ncde-chapter-page .gateway-header .header-inner,
  body.ncde-chapter-page .gateway-header .brand-text,
  body.ncde-chapter-page .gateway-header .gateway-menu-toggle,
  body.ncde-chapter-page .gateway-header .brand-logo{transition-duration:.01ms!important;animation:none!important}
}


/* v1.5.1 — the glass shell disappears completely after reading begins. */
body.ncde-chapter-page[data-story-header-state="compact"] .gateway-header,
body.ncde-chapter-page[data-story-header-state="compact"] .gateway-header::before,
body.ncde-chapter-page[data-story-header-state="compact"] .gateway-header::after,
body.ncde-chapter-page[data-story-header-state="compact"] .gateway-header .header-inner,
body.ncde-chapter-page[data-story-header-state="compact"] .gateway-header .header-inner::before,
body.ncde-chapter-page[data-story-header-state="compact"] .gateway-header .header-inner::after{
  background:transparent!important;
  background-image:none!important;
  border-color:transparent!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
body.ncde-chapter-page[data-story-header-state="compact"] .gateway-header::before,
body.ncde-chapter-page[data-story-header-state="compact"] .gateway-header::after,
body.ncde-chapter-page[data-story-header-state="compact"] .gateway-header .header-inner::before,
body.ncde-chapter-page[data-story-header-state="compact"] .gateway-header .header-inner::after{content:none!important;display:none!important}