/* ══════════════════════════════════════
   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.
   ══════════════════════════════════════ */

/* The submenu is anchored outside the dock. Its reveal never changes
   the header's height or repaints its glass while the pointer moves. */
.dock-menu-wrap {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex: 0 0 auto;
  width: 100%;
  /* Positioned below the header; horizontal alignment is measured in JS. */
  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;
}
/* The bottom dock reveals its menu upward without moving its tab row. */
.bottom-dock:not(.dock-top) .dock-menu-wrap { top: auto; bottom: 100%; }

/* 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-sheen), 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; /* scroll/offset origin for the scrub maths */
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  justify-content: flex-start; /* overflowing labels must remain reachable by scrolling */
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  /* Match the selected tab: the same white tint over the shared glass. */
  background: linear-gradient(var(--dock-highlight), var(--dock-highlight)),
              var(--glass-sheen), var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--radius-md);
  padding: 2px 6px;
  touch-action: none; /* the submenu owns horizontal drags, like the dock */
}
.dock-submenu::-webkit-scrollbar { display: none; }

/* Scrubbing used to slide a translucent box behind the nearest label. The
   label's own .is-active highlight already says which one you're on — same
   marker the current page uses — so the box was saying it twice. */

/* same type as the dock labels, compact */
.sm-item {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  line-height: 1.4;
  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: var(--type-small);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  /* Match the visible main-menu labels, including unselected sub-pages. */
  color: var(--text);
  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;
}
.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);
}
/* Active sub-page = the hover treatment, one step further: white and heavier,
   with no pill behind it. A filled box read as a control in a row that is
   otherwise plain text; weight carries the same "you are here" without
   interrupting the strip. 500 is the heaviest Montserrat weight the site
   loads — 600+ would be synthesised into a smeary faux bold at 10px.
   Dividers are left alone now: with no pill edge to collide with, the
   hairlines keep their even rhythm across the whole row. */
.sm-item.is-active {
  color: #fff;
  font-weight: 500;
}
.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; }
}