/* MiyaTube Explorer — scroll-aware chrome v2.1
   Gold brand header + auto-hiding top/bottom navigation while reading. */

:root {
  --smart-header-visible-top: calc(var(--refined-header-height, 80px) + env(safe-area-inset-top));
  --smart-header-hidden-top: env(safe-area-inset-top);
  --chrome-ease: cubic-bezier(.2, .7, .2, 1);
}

.app-header {
  color: var(--premium-navy);
  background: var(--premium-gold);
  border-bottom-color: rgba(118, 79, 15, .18);
  box-shadow: 0 8px 24px rgba(105, 72, 17, .14);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: translateY(0);
  transition: transform .2s var(--chrome-ease), box-shadow .2s ease;
  will-change: transform;
}

.app-header .brand-lockup h1 {
  color: var(--premium-navy);
}

.app-header .brand-lockup p {
  color: #fff;
  text-shadow: 0 1px 1px rgba(92, 58, 7, .12);
}

.app-header .brand-icon {
  box-shadow: 0 8px 20px rgba(7, 26, 56, .2), inset 0 1px 0 rgba(255,255,255,.12);
}

.app-header.is-hidden {
  transform: translateY(calc(-100% - 2px));
  box-shadow: none;
}

.header-status.is-offline {
  border: 1px solid rgba(255,255,255,.28);
  background: var(--premium-navy);
  color: #fff;
}

/* Bottom navigation participates in the same scroll-aware chrome behavior.
   IMPORTANT: premium-v1 centers the fixed bar with left:50% + translateX(-50%).
   Preserve that X transform while animating only the Y axis. */
.bottom-nav {
  transform: translateX(-50%) translateY(0);
  transition: transform .2s var(--chrome-ease), box-shadow .2s ease, border-color .2s ease;
  will-change: transform;
}

.bottom-nav.is-hidden {
  transform: translateX(-50%) translateY(calc(100% + env(safe-area-inset-bottom) + 10px));
  box-shadow: none;
  border-color: transparent;
}

/* Keep Explore navigation attached to the viewport when the brand header leaves. */
.explore-view .intent-tabs,
.dimension-tabs {
  transition: top .2s var(--chrome-ease);
}

body.header-collapsed .explore-view .intent-tabs {
  top: var(--smart-header-hidden-top);
}

body.header-collapsed .dimension-tabs {
  top: calc(var(--smart-header-hidden-top) + 60px);
}

@media (max-width: 420px) {
  body.header-collapsed .dimension-tabs {
    top: calc(var(--smart-header-hidden-top) + 58px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-header,
  .bottom-nav,
  .explore-view .intent-tabs,
  .dimension-tabs {
    transition: none;
  }
}