/* ══════════════════════════════════════
   SECTION SUBMENU + PAGE SLIDE
   Second-level menu for Adventure/Creative/Life pages, attached to the
   dock as ONE masked glass piece (below the top/header dock, above the
   bottom dock). Hidden until you hover the dock (fine pointers) or tap
   the active tab (touch). Plus the left/right slide transition between
   the real pages.
   ══════════════════════════════════════ */

/* Labels row — an IN-FLOW second row of the dock itself. The dock's own
   glass wraps the tab row AND this row as ONE piece (the unified T), so
   there is no separate panel, no anchoring math, and no seam. Opening
   simply grows the dock's slab; the bar row itself never moves. */
.dock-menu-wrap {
  flex: 0 0 auto;
  width: 100%;
  order: 10; /* below the bar row in the top/header dock */
  display: flex;
  justify-content: center;
  pointer-events: none;
  overflow: hidden; /* clips the strip's slide-in */
  max-height: 0;
  opacity: 0;
  transition: max-height 280ms ease, opacity 240ms ease;
}
.dock-menu-wrap.submenu-open {
  max-height: 64px;
  opacity: 1;
  /* Hover-safe while open: the labels strip only spans its own group's width
     (right-aligned under that tab), but the dock's glass makes the whole row
     look like one target. Left pointer-events:none, everything either side of
     the strip fell through to the dock, which reads as "blank dock space" and
     closes the menu — so drifting a few px off the labels dismissed them.
     Closed, the row is max-height:0 and cannot be hit regardless. Tab drags
     are unaffected: bottom-dock.js only starts one from a .dock-tab. */
  pointer-events: auto;
}
/* mobile bottom dock: the row sits ABOVE the tabs and grows upward
   (the dock is anchored to the bottom of the screen) */
.bottom-dock:not(.dock-top) .dock-menu-wrap { order: -1; }

/* the ONE glass piece — masked into the full two-story silhouette in JS */
.dock-shell {
  position: fixed;
  top: auto;
  bottom: calc(6px + env(safe-area-inset-bottom, 0px)); /* same anchor as the dock */
  z-index: 966; /* behind the tint, the dock, and the labels */
  /* ONE unified surface for the whole T: while the menu is open the bar
     and the slab share this near-opaque tone (busy photos can't bleed
     through), instead of a translucent bar over a solid slab */
  background: var(--glass-bg-solid);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  /* NOTE: no drop-shadow here — the mask below is applied after filters,
     so a shadow would be cropped to the T silhouette and never show. The
     dock keeps its own box-shadow while the shell is on instead (see
     .bottom-dock.shell-on), so the header's shadow never blinks. */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
  transition: transform 320ms ease, opacity 280ms ease, visibility 0s linear 280ms;
}

/* lighter tint (color B) masked to JUST the T — submenu row + neck + the
   active tab's pill. No blur, so it just brightens those regions, no seams. */
.dock-shell-hi {
  position: fixed;
  top: auto;
  bottom: calc(6px + env(safe-area-inset-bottom, 0px)); /* same anchor as the dock */
  z-index: 967; /* over the glass shell, under the dock/labels */
  background: rgba(255, 255, 255, 0.13); /* same lift as the dock pill it replaces */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
  transition: transform 320ms ease, opacity 280ms ease, visibility 0s linear 280ms;
}

/* hairline rim stroked along the T outline — the 3D edge (like the dock) */
.dock-shell-edge {
  position: fixed;
  top: auto;
  bottom: calc(6px + env(safe-area-inset-bottom, 0px)); /* same anchor as the dock */
  z-index: 967; /* over shell + tint, under the dock/labels */
  background-repeat: no-repeat;
  pointer-events: none;
  transition: transform 320ms ease, opacity 280ms ease, visibility 0s linear 280ms;
}

/* ── Closed by default; .submenu-open reveals them (retired shells) ── */
.dock-shell,
.dock-shell-hi,
.dock-shell-edge {
  opacity: 0;
  visibility: hidden;
}
.dock-shell.submenu-open,
.dock-shell-hi.submenu-open,
.dock-shell-edge.submenu-open {
  opacity: 1;
  visibility: visible;
  transition: transform 320ms ease, opacity 280ms ease;
}

/* While opening/closing, the glass layers swap with the dock's own glass in
   the SAME frame (snap is set around the toggle in JS) — fading them would
   leave the bar glass-less for a beat (a visible blink). The label strip
   keeps its slide/fade; dock-hidden keeps its slide+fade too, because snap
   comes right back off. */
.dock-shell.snap,
.dock-shell-hi.snap,
.dock-shell-edge.snap {
  transition: transform 320ms ease;
}

/* The labels slide out from behind the dock edge while the glass fades —
   the menu grows out of the dock instead of popping into place. (The
   inner strip is transformed, so this never fights the wrap's own
   dock-hidden / tray transforms.) */
.dock-menu-wrap .dock-submenu {
  transition: transform 340ms cubic-bezier(0.3, 0.7, 0.25, 1), opacity 280ms ease;
}
.dock-menu-wrap:not(.submenu-open):not(.dock-top) .dock-submenu {
  transform: translateY(16px); /* tucked down toward the bottom dock */
  opacity: 0;
}
.dock-menu-wrap.dock-top:not(.submenu-open) .dock-submenu {
  transform: translateY(-16px); /* tucked up toward the header dock */
  opacity: 0;
}

/* ── Hidden together with the dock (mobile top/bottom swap) ──
   The wrap is a CHILD of the dock now: it rides the dock's own hide
   transform automatically, so it must NOT add its own (that would
   double-shift it). The retired shell layers keep the lockstep rule. */
.dock-menu-wrap.dock-hidden { transform: none; }
.dock-shell.dock-hidden,
.dock-shell-hi.dock-hidden,
.dock-shell-edge.dock-hidden {
  transform: translateY(240px); /* same distance as the dock — lockstep */
  opacity: 0;
}

/* Top (header) dock variants — same layers, mirrored: the submenu hangs
   BELOW the dock row and everything hides UPWARD, in lockstep with the
   top dock. The shells share the top dock's CSS anchor so they can't
   drift; the labels' top offset is set in JS (depends on dock height). */
.dock-shell.dock-top,
.dock-shell-hi.dock-top,
.dock-shell-edge.dock-top {
  top: var(--dock-top-offset, calc(10px + env(safe-area-inset-top, 0px))); /* same anchor as the top dock */
  bottom: auto;
}

/* Desktop: the header dock is full-bleed and flush with the top — the
   shell that replaces its glass while the submenu is open must share
   that exact anchor, or the header visibly jumps on hover */
@media (min-width: 769px) {
  .dock-shell.dock-top,
  .dock-shell-hi.dock-top,
  .dock-shell-edge.dock-top {
    top: var(--dock-top-offset, env(safe-area-inset-top, 0px));
  }
}
.dock-menu-wrap.dock-top.dock-hidden { transform: none; } /* child rides the dock */
.dock-shell.dock-top.dock-hidden,
.dock-shell-hi.dock-top.dock-hidden,
.dock-shell-edge.dock-top.dock-hidden {
  transform: translateY(-240px);
}

/* The header NEVER swaps its glass. The old "one masked T" approach
   repainted the bar via the shell layers whenever a submenu opened or
   the hovered group changed — the bar visibly shifted tone and blinked
   between hovers. The dock now keeps its own glass permanently and the
   submenu is a self-contained panel (see .dock-submenu); the shell
   layers are retired. */
.dock-shell,
.dock-shell-hi,
.dock-shell-edge { display: none !important; }

/* Drag tray retired — during a pill drag the submenu stays in its
   in-flow row and live-swaps its items (unified with hover/tap). */

.dock-submenu {
  pointer-events: auto;
  position: relative; /* anchors the drag pill */
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  justify-content: center; /* width set to match the dock in JS */
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  /* no surface of its own — the row lives INSIDE the dock, whose single
     glass slab wraps bar + menu as one unified piece */
  background: none;
  padding: 2px 6px;
  touch-action: none; /* the submenu owns horizontal drags, like the dock */
}
.dock-submenu::-webkit-scrollbar { display: none; }

/* drag pill — appears only while scrubbing, same look as the active pill */
.sm-pill {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 60px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  opacity: 0;
  pointer-events: none;
}
.dock-submenu.is-dragging .sm-pill { opacity: 1; }
/* while scrubbing, the pill is the indicator — quiet the items' own pills */
.dock-submenu.is-dragging .sm-item.is-active { background: none; box-shadow: none; }

/* same type as the dock labels, compact */
.sm-item {
  pointer-events: auto;
  -webkit-user-drag: none;     /* no iOS link-lift — the strip owns drags */
  -webkit-touch-callout: none;
  flex: 0 0 auto;
  white-space: nowrap;
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-strong);
  padding: 8px 9px;
  border-radius: var(--radius-md);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); /* legible over the glass */
  transition: color 0.25s, background 0.25s;
}
.sm-item:hover { color: #fff; }
/* hairline "|" divider between items */
.sm-item + .sm-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 26%;
  bottom: 26%;
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
}
/* no dividers touching the highlighted item — its pill already separates */
.sm-item.is-active::before,
.sm-item.is-active + .sm-item::before { display: none; }
/* active sub-page = a clean brighter frosted pill + white text */
.sm-item.is-active {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.sm-item:focus-visible {
  outline: 2px solid var(--text-strong);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .dock-menu-wrap,
  .dock-shell,
  .dock-shell-hi,
  .dock-shell-edge,
  .dock-menu-wrap .dock-submenu { transition: none; }
}

/* ── Page slide transition (content slides; dock/menu stay put) ── */
html.slide-out-left main,
html.slide-out-left footer {
  animation: pageOutLeft 200ms ease forwards;
}
html.slide-out-right main,
html.slide-out-right footer {
  animation: pageOutRight 200ms ease forwards;
}
html.slide-in-from-right main,
html.slide-in-from-right footer {
  animation: pageInFromRight 320ms cubic-bezier(0.25, 0.7, 0.3, 1) both;
}
html.slide-in-from-left main,
html.slide-in-from-left footer {
  animation: pageInFromLeft 320ms cubic-bezier(0.25, 0.7, 0.3, 1) both;
}

@keyframes pageOutLeft  { to { transform: translateX(-24vw); opacity: 0; } }
@keyframes pageOutRight { to { transform: translateX(24vw);  opacity: 0; } }
@keyframes pageInFromRight { from { transform: translateX(24vw);  opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pageInFromLeft  { from { transform: translateX(-24vw); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html.slide-out-left main, html.slide-out-left footer,
  html.slide-out-right main, html.slide-out-right footer,
  html.slide-in-from-right main, html.slide-in-from-right footer,
  html.slide-in-from-left main, html.slide-in-from-left footer { animation: none; }
}