/* =========================================================
   THE BACON BIN — REV274L
   LANGUAGE / ABOUT / ARCADE / NAV LETTER MOTION POLISH
   ========================================================= */

/* =========================================================
   ABOUT — family memory photo moved into the LEFT side of the
   opening montage and feathered much more aggressively so it
   reads as part of the collage, not a photo stacked behind it.
   ========================================================= */
html body#bb-test-font-lock.about-page .origin-family-vignette{
  left:-6.5%!important;
  top:15%!important;
  width:35%!important;
  z-index:11!important;
  transform:rotate(-2.15deg)!important;
  opacity:.97!important;
}

html body#bb-test-font-lock.about-page .origin-family-vignette::before{
  inset:7% 5% 5%!important;
  background:
    radial-gradient(
      ellipse at 46% 50%,
      rgba(227,58,50,.17) 0%,
      rgba(227,58,50,.075) 42%,
      rgba(35,10,12,.035) 64%,
      transparent 80%
    )!important;
  filter:blur(34px)!important;
  opacity:.72!important;
}

html body#bb-test-font-lock.about-page .origin-family-vignette img{
  filter:
    saturate(.98)
    contrast(1.045)
    brightness(.91)
    drop-shadow(0 24px 34px rgba(0,0,0,.52))!important;

  -webkit-mask-image:
    radial-gradient(
      ellipse 82% 80% at 47% 49%,
      #000 0%,
      #000 42%,
      rgba(0,0,0,.95) 54%,
      rgba(0,0,0,.72) 68%,
      rgba(0,0,0,.38) 80%,
      rgba(0,0,0,.13) 90%,
      transparent 100%
    )!important;
  mask-image:
    radial-gradient(
      ellipse 82% 80% at 47% 49%,
      #000 0%,
      #000 42%,
      rgba(0,0,0,.95) 54%,
      rgba(0,0,0,.72) 68%,
      rgba(0,0,0,.38) 80%,
      rgba(0,0,0,.13) 90%,
      transparent 100%
    )!important;
}

/* Keep archive labels above the memory photo. */
html body#bb-test-font-lock.about-page .origin-date-stamp{z-index:13!important}
html body#bb-test-font-lock.about-page .origin-caption{z-index:14!important}

@media(max-width:980px){
  html body#bb-test-font-lock.about-page .origin-family-vignette{
    left:-3%!important;
    top:14%!important;
    width:39%!important;
    transform:rotate(-1.6deg)!important;
  }
}
@media(max-width:680px){
  html body#bb-test-font-lock.about-page .origin-family-vignette{
    left:-5%!important;
    top:16%!important;
    width:45%!important;
    transform:rotate(-1deg)!important;
  }
  html body#bb-test-font-lock.about-page .origin-family-vignette img{
    -webkit-mask-image:
      radial-gradient(ellipse 84% 82% at 47% 49%,#000 0 38%,rgba(0,0,0,.93) 52%,rgba(0,0,0,.65) 70%,rgba(0,0,0,.25) 86%,transparent 100%)!important;
    mask-image:
      radial-gradient(ellipse 84% 82% at 47% 49%,#000 0 38%,rgba(0,0,0,.93) 52%,rgba(0,0,0,.65) 70%,rgba(0,0,0,.25) 86%,transparent 100%)!important;
  }
}

/* =========================================================
   ARCADE — lower the approved page logo a little more.
   Rev274I used 24px; this gives it another restrained nudge.
   ========================================================= */
html body#bb-test-font-lock.arcade-hub-page .bb-arcade-page-logo{
  transform:translateY(42px)!important;
}
@media(max-width:1100px){
  html body#bb-test-font-lock.arcade-hub-page .bb-arcade-page-logo{
    transform:translateY(36px)!important;
  }
}
@media(max-width:680px){
  html body#bb-test-font-lock.arcade-hub-page .bb-arcade-page-logo{
    transform:translateY(28px)!important;
  }
}

/* =========================================================
   NAVBAR — per-letter "neon ignition" animation.
   The parent links NEVER move, so the nav cannot jump.
   Rev274K's light rail / bloom remains underneath this.
   ========================================================= */
html body#bb-test-font-lock .bb-nav-word{
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  white-space:nowrap;
  line-height:1;
  vertical-align:middle;
}

html body#bb-test-font-lock .bb-nav-letter{
  display:inline-block;
  transform:translate3d(0,0,0);
  transform-origin:50% 72%;
  will-change:transform,filter,text-shadow;
  color:inherit;
  transition:
    color .18s ease,
    filter .22s ease,
    text-shadow .22s ease;
}

html body#bb-test-font-lock .bb-nav-space{
  display:inline-block;
  width:.34em;
  flex:0 0 .34em;
}

/* A subtle dormant sheen keeps the type razor-sharp without glowing all day. */
html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav) .bb-nav-letter{
  text-shadow:0 1px 0 rgba(0,0,0,.92);
}

@media(hover:hover) and (pointer:fine){
  html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav):hover .bb-nav-letter,
  html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav):focus-visible .bb-nav-letter,
  html body#bb-test-font-lock .shop-categories > summary:hover .bb-nav-letter,
  html body#bb-test-font-lock .shop-categories > summary:focus-visible .bb-nav-letter{
    animation:bbNavLetterIgnite .50s cubic-bezier(.16,1,.3,1) both;
    animation-delay:calc(var(--bb-nav-i,0) * 27ms);
  }
}

@keyframes bbNavLetterIgnite{
  0%{
    transform:translate3d(0,0,0) scale(1);
    color:inherit;
    filter:brightness(1);
    text-shadow:0 1px 0 rgba(0,0,0,.92);
  }
  28%{
    transform:translate3d(0,-1.7px,0) scale(1.045);
    color:#fff;
    filter:brightness(1.16);
    text-shadow:
      0 0 2px rgba(255,255,255,.92),
      0 0 8px rgba(239,59,53,.48),
      0 0 15px rgba(239,59,53,.18);
  }
  58%{
    transform:translate3d(0,.35px,0) scale(.995);
    color:#fff;
    filter:brightness(1.07);
    text-shadow:
      0 0 1px rgba(255,255,255,.75),
      0 0 7px rgba(239,59,53,.32);
  }
  100%{
    transform:translate3d(0,0,0) scale(1);
    color:#fff;
    filter:brightness(1.035);
    text-shadow:
      0 1px 0 rgba(0,0,0,.95),
      0 0 1px rgba(255,255,255,.58),
      0 0 7px rgba(239,59,53,.24);
  }
}

/* Current page gets a faintly energized word without motion. */
html body#bb-test-font-lock .shop-nav > a.active .bb-nav-letter,
html body#bb-test-font-lock .shop-nav > a[aria-current="page"] .bb-nav-letter{
  color:#fff;
}

/* Mobile: keep the word treatment sharp, but remove the wave motion. */
@media(max-width:860px){
  html body#bb-test-font-lock .bb-nav-letter{
    animation:none!important;
    transform:none!important;
    text-shadow:none!important;
  }
}

/* Respect motion preference. */
@media(prefers-reduced-motion:reduce){
  html body#bb-test-font-lock .bb-nav-letter{
    animation:none!important;
    transition:none!important;
    transform:none!important;
  }
}

/* =========================================================
   LANGUAGE — quiet visual status while full-page translation
   is being prepared by a supported browser.
   ========================================================= */
html.bb-translation-busy .language-picker select,
html.bb-translation-busy .bb-mobile-language-picker select{
  border-color:rgba(239,59,53,.72)!important;
  box-shadow:
    0 0 0 1px rgba(239,59,53,.13),
    0 0 14px rgba(239,59,53,.18)!important;
}

html.bb-translation-complete .language-picker select,
html.bb-translation-complete .bb-mobile-language-picker select{
  border-color:rgba(95,188,105,.38)!important;
}