/* VMV V8.0 — Navigation & Menu Prestige Polish
   Mega menu, rail interaction, detail chrome and mobile navigation. */

:root{
  --v80-nav-bg:#03080d;
  --v80-nav-bg2:#061018;
  --v80-nav-text:#f4efe4;
  --v80-nav-muted:rgba(244,239,228,.52);
  --v80-nav-faint:rgba(244,239,228,.28);
  --v80-nav-gold:#d6b15b;
  --v80-nav-rule:rgba(214,177,91,.18);
  --v80-nav-serif:'Noto Serif Display','Times New Roman',serif;
}

/* Side rail stays restrained when menu opens; no gold slab. */
body.menu-open .side-rail{
  background:#02070b!important;
  border-right-color:rgba(214,177,91,.18)!important;
}
.rail-menu{
  transition:background .3s ease!important;
}
.rail-menu i{
  transform-origin:center;
  transition:transform .35s cubic-bezier(.2,.75,.25,1),opacity .22s ease,width .3s ease!important;
}
body.menu-open .rail-menu i:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .rail-menu i:nth-child(2){opacity:0;transform:scaleX(.3)}
body.menu-open .rail-menu i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body.menu-open .rail-menu:hover i{width:24px!important}

/* Mega menu — dark editorial, not a utility drawer. */
.mega-menu{
  background:
    radial-gradient(circle at 84% 18%,rgba(214,177,91,.055),transparent 28%),
    linear-gradient(145deg,#02070b 0%,#061018 68%,#071019 100%)!important;
  color:var(--v80-nav-text)!important;
  transform:translateX(-3%)!important;
  opacity:0;
  transition:
    transform .65s cubic-bezier(.19,1,.22,1),
    opacity .42s ease,
    visibility .65s!important;
}
body.menu-open .mega-menu{
  transform:translateX(0)!important;
  opacity:1;
}
.mega-menu:before{
  background:
    linear-gradient(90deg,rgba(2,7,11,.98) 0%,rgba(2,7,11,.91) 42%,rgba(3,9,14,.72) 100%)!important;
}
.mega-watermark{
  width:min(42vw,650px)!important;
  right:3vw!important;
  bottom:-14vh!important;
  opacity:.028!important;
  filter:brightness(0) invert(1)!important;
}
.mega-inner{
  grid-template-columns:minmax(420px,46%) minmax(320px,1fr)!important;
  gap:clamp(50px,7vw,120px)!important;
  padding:clamp(82px,10vh,124px) clamp(48px,6vw,96px) clamp(70px,8vh,100px)!important;
}
.mega-primary{
  counter-reset:v80nav;
  gap:0!important;
  transform:translateY(12px)!important;
  transition:opacity .42s .14s ease,transform .62s .1s cubic-bezier(.19,1,.22,1)!important;
}
body.menu-open .mega-primary{transform:none!important}
.mega-item{
  counter-increment:v80nav;
  position:relative;
  width:100%;
  padding:10px 0 12px 48px!important;
  border-bottom:1px solid rgba(244,239,228,.085)!important;
  font-family:var(--v80-nav-serif)!important;
  font-size:clamp(31px,3.15vw,54px)!important;
  font-weight:500!important;
  line-height:1!important;
  letter-spacing:-.028em!important;
  text-transform:none!important;
  color:rgba(244,239,228,.5)!important;
  transform:none!important;
  transition:color .28s ease,padding .35s cubic-bezier(.19,1,.22,1),border-color .28s ease!important;
}
.mega-item:before{
  content:counter(v80nav,decimal-leading-zero);
  position:absolute;
  left:0;
  top:19px;
  color:rgba(214,177,91,.48);
  font:600 8px/1 Inter,Arial,sans-serif;
  letter-spacing:.12em;
}
.mega-item:after{
  content:'';
  position:absolute;
  left:48px;
  bottom:-1px;
  width:0;
  height:1px;
  background:rgba(214,177,91,.7);
  transition:width .45s cubic-bezier(.19,1,.22,1);
}
.mega-item:hover,.mega-item:focus-visible,.mega-item.active,.mega-item.sub-active{
  padding-left:56px!important;
  color:var(--v80-nav-text)!important;
  transform:none!important;
}
.mega-item:hover:after,.mega-item:focus-visible:after,.mega-item.sub-active:after{width:88px}
.mega-item:focus-visible{
  outline:none!important;
  box-shadow:inset 2px 0 0 rgba(214,177,91,.75);
}

.mega-secondary-links{
  flex-direction:row!important;
  flex-wrap:wrap;
  gap:10px 20px!important;
  margin-top:28px!important;
  padding-left:48px;
}
.mega-secondary-links a{
  position:relative;
  padding-bottom:4px;
  font:600 8px/1.2 Inter,Arial,sans-serif!important;
  letter-spacing:.16em;
  text-transform:uppercase!important;
  color:rgba(244,239,228,.38)!important;
  transform:none!important;
  transition:color .25s ease!important;
}
.mega-secondary-links a:hover,.mega-secondary-links a:focus-visible{
  color:rgba(214,177,91,.88)!important;
  transform:none!important;
  outline:none;
}

.mega-submenus{
  height:58vh!important;
  min-height:420px!important;
}
.mega-submenu{
  top:16%!important;
  gap:30px!important;
  transform:translateY(14px)!important;
  transition:opacity .38s ease,transform .55s cubic-bezier(.19,1,.22,1),visibility .38s!important;
}
.mega-submenu.active{transform:none!important}
.submenu-rule{
  width:56px!important;
  flex-basis:56px!important;
  margin-top:16px!important;
  background:rgba(214,177,91,.42)!important;
}
.mega-submenu>div{gap:0!important;min-width:min(100%,520px)}
.mega-submenu button{
  position:relative;
  width:100%;
  padding:14px 0 15px!important;
  border-bottom:1px solid rgba(244,239,228,.08)!important;
  color:rgba(244,239,228,.58)!important;
  font-family:var(--v80-nav-serif)!important;
  font-size:clamp(19px,1.6vw,28px)!important;
  font-weight:400!important;
  line-height:1.15!important;
  letter-spacing:-.012em!important;
  text-align:left;
  transform:none!important;
  transition:color .25s ease,padding .32s cubic-bezier(.19,1,.22,1),border-color .25s ease!important;
}
.mega-submenu button:hover,.mega-submenu button:focus-visible{
  padding-left:10px!important;
  color:var(--v80-nav-text)!important;
  border-bottom-color:rgba(214,177,91,.34)!important;
  transform:none!important;
  outline:none!important;
}
.mega-submenu button:after{
  content:'↗';
  position:absolute;
  right:2px;
  top:50%;
  transform:translateY(-50%);
  color:rgba(214,177,91,.52);
  font:300 15px/1 Arial;
  opacity:0;
  transition:opacity .25s ease,transform .3s ease;
}
.mega-submenu button:hover:after,.mega-submenu button:focus-visible:after{
  opacity:1;
  transform:translate(2px,-60%);
}

/* Detail page chrome — thin, theme-aware and editorial. */
.detail-page{
  transition:transform .72s cubic-bezier(.19,1,.22,1),visibility .72s!important;
}
.detail-topbar{
  height:72px!important;
  padding:0 clamp(22px,3vw,42px)!important;
  border-bottom:1px solid color-mix(in srgb,var(--chapter-line) 78%,transparent)!important;
  backdrop-filter:blur(18px) saturate(.9)!important;
  -webkit-backdrop-filter:blur(18px) saturate(.9)!important;
}
.detail-brand{
  min-width:170px;
  gap:10px!important;
  color:var(--chapter-text)!important;
  font:600 8px/1.2 Inter,Arial,sans-serif!important;
  letter-spacing:.16em!important;
  text-transform:uppercase;
}
.detail-brand img{width:28px!important;height:28px!important}
.detail-brand span{
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  opacity:.72;
}
.detail-progress{
  margin:0 clamp(24px,4vw,62px)!important;
  background:color-mix(in srgb,var(--chapter-line) 70%,transparent)!important;
}
.detail-progress i{
  background:var(--chapter-accent)!important;
  transition:width .65s cubic-bezier(.19,1,.22,1)!important;
}
.detail-close{
  min-width:96px;
  justify-content:flex-end;
  gap:12px!important;
  color:var(--chapter-text)!important;
  font:600 8px/1 Inter,Arial,sans-serif!important;
  letter-spacing:.15em!important;
  text-transform:uppercase;
}
.detail-close span{opacity:.64;transition:opacity .25s ease}
.detail-close b{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border:1px solid color-mix(in srgb,var(--chapter-text) 18%,transparent);
  border-radius:50%;
  font:300 20px/1 Arial!important;
  transition:border-color .25s ease,transform .35s cubic-bezier(.19,1,.22,1);
}
.detail-close:hover span,.detail-close:focus-visible span{opacity:1}
.detail-close:hover b,.detail-close:focus-visible b{
  border-color:color-mix(in srgb,var(--chapter-accent) 70%,transparent);
  transform:rotate(90deg);
}
.detail-close:focus-visible{outline:none!important}

.detail-scroll{inset:72px 0 58px!important}
.detail-host{
  padding-top:clamp(42px,5vw,66px)!important;
  transition:opacity .45s ease,transform .58s cubic-bezier(.19,1,.22,1)!important;
}
.detail-nav{
  height:58px!important;
  padding:0 clamp(22px,3vw,42px)!important;
  border-top:1px solid color-mix(in srgb,var(--chapter-line) 78%,transparent)!important;
  backdrop-filter:blur(18px) saturate(.9)!important;
  -webkit-backdrop-filter:blur(18px) saturate(.9)!important;
}
.detail-nav button{
  min-width:min(42%,360px);
  gap:12px!important;
  color:var(--chapter-text)!important;
  font:600 8px/1.1 Inter,Arial,sans-serif!important;
  letter-spacing:.12em!important;
  text-transform:uppercase;
  opacity:.58;
  transition:opacity .25s ease,color .25s ease,gap .3s cubic-bezier(.19,1,.22,1)!important;
}
.detail-nav button:last-child{justify-content:flex-end;text-align:right}
.detail-nav button span{
  color:var(--chapter-accent);
  font:300 18px/1 Arial!important;
}
.detail-nav button small{
  max-width:280px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:8px!important;
}
.detail-nav button:hover,.detail-nav button:focus-visible{
  opacity:1;
  gap:17px!important;
  outline:none!important;
}
.panel-loading{
  font-family:var(--v80-nav-serif)!important;
  font-size:clamp(30px,4vw,50px)!important;
  font-weight:500!important;
  letter-spacing:-.02em!important;
}

/* Keep dark chapters visually continuous through navigation chrome. */
.detail-page[data-theme="film-thd"] .detail-topbar,
.detail-page[data-theme="film-thd"] .detail-nav,
.detail-page[data-theme="cinema"] .detail-topbar,
.detail-page[data-theme="cinema"] .detail-nav,
.detail-page[data-theme="technology"] .detail-topbar,
.detail-page[data-theme="technology"] .detail-nav,
.detail-page[data-theme="ecosystem"] .detail-topbar,
.detail-page[data-theme="ecosystem"] .detail-nav,
.detail-page[data-theme="partnerships"] .detail-topbar,
.detail-page[data-theme="partnerships"] .detail-nav,
.detail-page[data-theme="people"] .detail-topbar,
.detail-page[data-theme="people"] .detail-nav,
.detail-page[data-theme="roadmap"] .detail-topbar,
.detail-page[data-theme="roadmap"] .detail-nav,
.detail-page[data-theme="company"] .detail-topbar,
.detail-page[data-theme="company"] .detail-nav{
  background:rgba(3,8,13,.88)!important;
}

/* Mobile: menu becomes a calm vertical index rather than a cramped mega menu. */
@media(max-width:760px){
  body.menu-open .side-rail{background:#02070b!important}
  .mega-menu{
    top:66px!important;
    background:linear-gradient(180deg,#02070b,#061018)!important;
    overflow:auto!important;
  }
  .mega-menu:before{background:transparent!important}
  .mega-watermark{
    width:82vw!important;
    right:-24vw!important;
    bottom:-6vh!important;
    opacity:.02!important;
  }
  .mega-inner{
    display:block!important;
    height:auto!important;
    min-height:100%;
    padding:38px 22px 70px!important;
  }
  .mega-primary{width:100%;transform:none!important}
  .mega-item{
    padding:15px 0 16px 36px!important;
    font-size:clamp(30px,9vw,44px)!important;
  }
  .mega-item:before{top:24px!important;font-size:7px}
  .mega-item:after{left:36px!important}
  .mega-item:hover,.mega-item:focus-visible,.mega-item.sub-active{padding-left:42px!important}
  .mega-secondary-links{
    padding-left:36px!important;
    margin-top:24px!important;
    gap:6px 18px!important;
  }
  .mega-secondary-links a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding:0!important;
    font-size:9px!important;
  }
  .mega-submenus{
    height:auto!important;
    min-height:0!important;
    margin:24px 0 0 36px!important;
  }
  .mega-submenu{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    display:none!important;
    gap:0!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
  .mega-submenu.active{display:block!important}
  .submenu-rule{display:none!important}
  .mega-submenu>div{width:100%;min-width:0}
  .mega-submenu button{
    padding:12px 28px 13px 0!important;
    font-size:19px!important;
  }
  .mega-submenu button:hover,.mega-submenu button:focus-visible{padding-left:6px!important}

  .detail-topbar{height:62px!important;padding:0 16px!important}
  .detail-brand{min-width:0;flex:1}
  .detail-brand img{width:25px!important;height:25px!important}
  .detail-brand span{max-width:150px;font-size:8px}
  .detail-progress{display:none!important}
  .detail-close{
    flex:0 0 44px;
    width:44px;
    height:44px;
    min-width:44px;
    justify-content:center;
  }
  .detail-close b{width:32px;height:32px}
  .detail-close span{display:none}
  .detail-scroll{inset:62px 0 54px!important}
  .detail-host{width:min(100% - 36px,1240px)!important;padding-top:36px!important}
  .detail-nav{height:54px!important;padding:0 16px!important}
  .detail-nav button{min-width:0;max-width:47%;min-height:44px;font-size:9px!important}
  .detail-nav button small{max-width:130px;font-size:9px!important}
}

@media(prefers-reduced-motion:reduce){
  .mega-menu,.mega-primary,.mega-submenu,.mega-item,.mega-submenu button,
  .detail-page,.detail-host,.detail-progress i,.detail-close b,.detail-nav button{
    transition:none!important;
  }
}


/* J.4 — Opt-in cinematic sound control */
.rail-sound{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(214,177,91,.22);
  border-radius:50%;
  color:rgba(244,239,228,.48);
  background:rgba(4,9,14,.26);
  cursor:pointer;
  transition:border-color .3s ease,color .3s ease,background .3s ease,transform .3s ease;
}
.rail-sound:hover,.rail-sound:focus-visible{
  color:#d6b15b;
  border-color:rgba(214,177,91,.56);
  background:rgba(214,177,91,.07);
  outline:none;
}
.rail-sound>span{
  width:17px;
  height:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
}
.rail-sound>span i{
  display:block;
  width:2px;
  height:5px;
  border-radius:2px;
  background:currentColor;
  transform-origin:center;
  transition:height .28s ease,opacity .28s ease;
}
.rail-sound>span i:nth-child(2){height:10px}
.rail-sound>span i:nth-child(3){height:7px}
.rail-sound[aria-pressed="true"]{
  color:#d6b15b;
  border-color:rgba(214,177,91,.5);
  background:rgba(214,177,91,.08);
}
.rail-sound[aria-pressed="true"]>span i{animation:v80-sound-meter 1.15s ease-in-out infinite alternate}
.rail-sound[aria-pressed="true"]>span i:nth-child(2){animation-delay:-.32s}
.rail-sound[aria-pressed="true"]>span i:nth-child(3){animation-delay:-.64s}
@keyframes v80-sound-meter{
  from{transform:scaleY(.55);opacity:.62}
  to{transform:scaleY(1.08);opacity:1}
}
@media(max-width:760px){
  .rail-sound{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){
  .rail-sound[aria-pressed="true"]>span i{animation:none!important}
}

/* V8.1 — Universal Home logo */
.detail-brand{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  display:flex;
  align-items:center;
  cursor:pointer;
  text-align:left;
}
.detail-brand:hover span,.detail-brand:focus-visible span{opacity:1;color:var(--v80-nav-gold)}
.detail-brand:focus-visible{outline:1px solid rgba(214,177,91,.55);outline-offset:8px}
.v73-footer-brand{text-decoration:none;color:inherit}


/* V8.1 — Unified deep-page chrome across every chapter theme */
.detail-page[data-theme] .detail-topbar,
.detail-page[data-theme] .detail-nav{
  background:rgba(3,8,13,.94)!important;
  color:#f4efe4!important;
  border-color:rgba(214,177,91,.16)!important;
}
.detail-page[data-theme] .detail-brand{
  color:#f4efe4!important;
}
.detail-page[data-theme] .detail-brand img{
  filter:none!important;
}
.detail-page[data-theme] .detail-scroll{
  background:
    radial-gradient(circle at 78% 0%,rgba(214,177,91,.045),transparent 30%),
    linear-gradient(145deg,#05090d 0%,#08121a 55%,#071019 100%)!important;
  color:#f4efe4!important;
}