/**
 * v105-additions.css
 *
 * Definitive pill-visibility and hover-fade rules.
 * Supersedes all conflicting rules from v102, v103, v104.
 *
 * RULES:
 *  1. On INNER PAGES (body.cb-subpage): both pills are HIDDEN.
 *     This restores the original intent — inner pages show only the back arrow.
 *
 *  2. On FRONT PAGE (body:not(.cb-subpage)): both pills are ALWAYS VISIBLE —
 *     including while an offcanvas panel is open. Opening a bar never hides pills.
 *
 *  3. HOVER FADE: both pills use the same smooth background/colour transition.
 *     The previous v104 opacity !important override was clobbering the fade.
 *
 *  4. STAR-GATE exception: pills stay hidden until the user enters.
 *
 *  5. TOKEN LAYER: always at full opacity — slides in with the panel naturally.
 *     No separate reveal animation needed (handled by JS, not CSS).
 *
 *  6. PRODUCT GRID: stagger-in animation for real products.
 */

/* ═══════════════════════════════════════════════════════════════════
   1. INNER PAGES — hide both pills
      body.cb-subpage is added by functions.php for all non-front pages.
      We need !important to beat v103-additions.css which set opacity:1 !important
      on body:not(.front-page). This rule has higher specificity AND !important.
   ═══════════════════════════════════════════════════════════════════ */

body.cb-subpage .cb-hamburger,
body.cb-subpage .menu-button.cb-menu-dots {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease !important;
}

/* ═══════════════════════════════════════════════════════════════════
   2. FRONT PAGE — both pills always visible, even when menu is open.
      Explicitly undo any hide rules that other versions set.
      This beats body.cb-offcanvas-open rules from v104.
   ═══════════════════════════════════════════════════════════════════ */

body:not(.cb-subpage) .cb-hamburger,
body:not(.cb-subpage) .menu-button.cb-menu-dots {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════
   3. HOVER FADE — both pills get the same smooth transition.
      The transition covers background (colour swatch), box-shadow, and
      transform. The colour/visibility transitions are set separately so
      hover doesn't conflict with the opacity-based hide on subpages.
      Applied to BOTH pills on ALL pages so it's always ready.
   ═══════════════════════════════════════════════════════════════════ */

/* Left pill */
.cb-hamburger {
  transition:
    background .5s ease,
    box-shadow  .5s ease,
    transform   .2s ease !important;
}
.cb-hamburger:hover {
  background: var(--cb-hamburger-pink-hover, #ff63ac) !important;
}
.cb-hamburger:active {
  transform: translateY(1px) !important;
}

/* Right pill — exact same timing as left */
.menu-button.cb-menu-dots {
  transition:
    background .5s ease,
    box-shadow  .5s ease,
    transform   .2s ease !important;
}
.menu-button.cb-menu-dots:hover {
  background: var(--cb-menu-green-hover, #d9ff66) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.10), 0 3px 7px rgba(0,0,0,.26) !important;
}
.menu-button.cb-menu-dots:active {
  transform: translateY(1px) !important;
}

/* Dot colours inside the right pill */
.menu-button.cb-menu-dots .cb-dot {
  background: var(--cb-menu-text-color, #333);
  width: 4px; height: 4px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.menu-button.cb-menu-dots:hover .cb-dot {
  background: var(--cb-menu-text-hover, #111);
}

/* ═══════════════════════════════════════════════════════════════════
   4. STAR-GATE EXCEPTION — always hide pills before user enters
   ═══════════════════════════════════════════════════════════════════ */

body.cb-not-entered .cb-hamburger,
body.cb-not-entered .menu-button.cb-menu-dots {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   5. TOKEN LAYER — always at natural opacity, slides with panel
      v102 set opacity:0 by default; v104 set !important overrides.
      Clean slate: always 0.70 (matches main.css baseline).
      No transition needed — the layer moves with the panel transform.
   ═══════════════════════════════════════════════════════════════════ */

.cb-offcanvas .cb-menu-dyn-layer {
  opacity: 0.70 !important;
  transition: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   6. PRODUCT GRID — stagger entrance for real products
   ═══════════════════════════════════════════════════════════════════ */

@keyframes cbProductSlideIn {
  0%   { opacity: 0; transform: translateY(18px) scale(0.97); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.005); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}

.cb-home-products-grid .cb-hprod-card {
  opacity: 0;
  animation: cbProductSlideIn 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.cb-home-products-grid .cb-hprod-card:nth-child(1)  { animation-delay: 0.06s; }
.cb-home-products-grid .cb-hprod-card:nth-child(2)  { animation-delay: 0.14s; }
.cb-home-products-grid .cb-hprod-card:nth-child(3)  { animation-delay: 0.22s; }
.cb-home-products-grid .cb-hprod-card:nth-child(4)  { animation-delay: 0.30s; }
.cb-home-products-grid .cb-hprod-card:nth-child(5)  { animation-delay: 0.38s; }
.cb-home-products-grid .cb-hprod-card:nth-child(6)  { animation-delay: 0.46s; }
.cb-home-products-grid .cb-hprod-card:nth-child(7)  { animation-delay: 0.54s; }
.cb-home-products-grid .cb-hprod-card:nth-child(8)  { animation-delay: 0.62s; }
.cb-home-products-grid .cb-hprod-card:nth-child(9)  { animation-delay: 0.70s; }
.cb-home-products-grid .cb-hprod-card:nth-child(10) { animation-delay: 0.78s; }
.cb-home-products-grid .cb-hprod-card:nth-child(11) { animation-delay: 0.86s; }
.cb-home-products-grid .cb-hprod-card:nth-child(12) { animation-delay: 0.94s; }