/* THE BACON BIN — REV275J
   Smooth-feather system + unified title scale + navbar balance + Arcade neon hover.
   Loads after Rev275I.

   Key rule: environment ART is never masked or GPU-forced. The artwork stays sharp
   and any darkness/feathering is performed by separate, soft overlays.
*/

:root{
  --bb-j-red:#e33b35;
}

/* =========================================================
   1) UNIFIED PAGE TITLES — one scale everywhere that uses the unified hero.
   Rev274C excluded category pages, which is why Action Figures / Collectibles /
   Grail could jump back to the giant legacy scale.
   ========================================================= */
html body#bb-test-font-lock.bb-unified-title-page .bb-unified-page-title{
  font-size:clamp(52px,5.35vw,84px)!important;
  line-height:.82!important;
  letter-spacing:-.055em!important;
}
html body#bb-test-font-lock.bb-unified-title-page .bb-unified-page-hero.bb-title-long .bb-unified-page-title{
  font-size:clamp(46px,4.8vw,74px)!important;
  line-height:.85!important;
  letter-spacing:-.05em!important;
}
html body#bb-test-font-lock.bb-unified-title-page .bb-unified-page-hero.bb-title-xlong .bb-unified-page-title{
  font-size:clamp(40px,4.25vw,64px)!important;
  line-height:.88!important;
  letter-spacing:-.045em!important;
}
html body#bb-test-font-lock.bb-unified-title-page .bb-unified-page-hero::before{
  font-size:clamp(92px,10.5vw,154px)!important;
  bottom:-26px!important;
}
@media(max-width:680px){
  html body#bb-test-font-lock.bb-unified-title-page .bb-unified-page-title{
    font-size:clamp(44px,13vw,64px)!important;
    line-height:.84!important;
  }
  html body#bb-test-font-lock.bb-unified-title-page .bb-unified-page-hero.bb-title-long .bb-unified-page-title{
    font-size:clamp(40px,11.5vw,56px)!important;
  }
  html body#bb-test-font-lock.bb-unified-title-page .bb-unified-page-hero.bb-title-xlong .bb-unified-page-title{
    font-size:clamp(35px,10vw,48px)!important;
  }
  html body#bb-test-font-lock.bb-unified-title-page .bb-unified-page-hero::before{
    font-size:clamp(70px,21vw,104px)!important;
    bottom:-8px!important;
  }
}

/* =========================================================
   2) ENVIRONMENT RASTER QUALITY — no CSS alpha masks on scene art.
   These were the main source of visibly stepped / pixelated feather contours.
   ========================================================= */
html body#bb-test-font-lock.category-page::before,
html body#bb-test-font-lock.shop-landing-page::before,
html body#bb-test-font-lock.cart-page::before,
html body#bb-test-font-lock.contact-page .bb-contact-shell::before,
html body#bb-test-font-lock .home-ambient-static-v231,
html body#bb-test-font-lock .home-storefront-environment-image-v238{
  -webkit-mask-image:none!important;
  mask-image:none!important;
  image-rendering:auto!important;
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important;
  will-change:auto!important;
}

html body#bb-test-font-lock.category-page::after,
html body#bb-test-font-lock.shop-landing-page::after,
html body#bb-test-font-lock.cart-page::after,
html body#bb-test-font-lock.contact-page .bb-contact-shell::after,
html body#bb-test-font-lock .home-ambient-video-shell::after,
html body#bb-test-font-lock.bits-page .bits-video-environment-v239::after{
  -webkit-mask-image:none!important;
  mask-image:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  image-rendering:auto!important;
  will-change:auto!important;
}

/* Category art uses a soft optical vignette on an independent layer.
   A blurred inset shadow breaks up the hard contour without touching source detail. */
html body#bb-test-font-lock.category-page::after{
  background:
    radial-gradient(ellipse 76% 74% at 50% 40%,transparent 0%,transparent 55%,rgba(0,0,0,.10) 70%,rgba(0,0,0,.38) 86%,rgba(0,0,0,.78) 96%,#000 100%),
    linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.08) 13%,transparent 31%,transparent 66%,rgba(0,0,0,.20) 82%,rgba(0,0,0,.68) 94%,#000 100%)!important;
  box-shadow:
    inset 0 0 120px 34px rgba(0,0,0,.20),
    inset 0 0 260px 92px rgba(0,0,0,.22)!important;
}


/* Utility / account / newsletter / wishlist canvases were still using an old radial
   mask on the full-page background. Remove that mask too; this is the large oval
   contour visible on Email Preferences and some policy/account pages. */
html body#bb-test-font-lock:is(.info-page,.account-page,.newsletter-page,.wishlist-page)::before{
  -webkit-mask-image:none!important;
  mask-image:none!important;
  filter:none!important;
  opacity:1!important;
  image-rendering:auto!important;
  background:
    radial-gradient(ellipse 82% 72% at 50% 34%,rgba(5,5,6,.03) 0%,rgba(5,5,6,.14) 57%,rgba(5,5,6,.52) 84%,#050506 100%),
    linear-gradient(90deg,#050506 0%,rgba(5,5,6,.77) 7%,rgba(5,5,6,.31) 23%,rgba(5,5,6,.18) 50%,rgba(5,5,6,.31) 77%,rgba(5,5,6,.77) 93%,#050506 100%),
    linear-gradient(180deg,rgba(5,5,6,.56) 0%,rgba(5,5,6,.22) 16%,rgba(5,5,6,.20) 62%,rgba(5,5,6,.66) 90%,#050506 100%),
    url('images/home-wall-static-after.webp') center 26%/cover no-repeat!important;
  box-shadow:inset 0 0 150px 52px rgba(0,0,0,.16),inset 0 -190px 210px -85px rgba(0,0,0,.62)!important;
}

/* =========================================================
   3) VINTAGE — 2x source + baked high-resolution alpha feather.
   Downsampling this asset is smoother than scaling the old 1203px cutout.
   ========================================================= */
html body#bb-test-font-lock.category-page.category-vintage-toys::before{
  background-image:url('images/rev275j/vintage-toys-bg-v275j-smooth.png?v=275j')!important;
  background-position:center 20px!important;
  background-repeat:no-repeat!important;
  background-size:min(1203px,96vw) auto!important;
  opacity:.19!important;
  filter:brightness(.76) saturate(1.08) contrast(1.035)!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  transform:none!important;
}
html body#bb-test-font-lock.category-page.category-vintage-toys::after{
  background:
    radial-gradient(ellipse 74% 70% at 50% 34%,transparent 0%,transparent 56%,rgba(0,0,0,.12) 72%,rgba(0,0,0,.42) 87%,rgba(0,0,0,.82) 96%,#000 100%),
    linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.08) 14%,transparent 33%,transparent 63%,rgba(0,0,0,.18) 80%,rgba(0,0,0,.66) 94%,#000 100%)!important;
  box-shadow:inset 0 0 150px 45px rgba(0,0,0,.18),inset 0 0 300px 108px rgba(0,0,0,.22)!important;
}
@media(max-width:800px){
  html body#bb-test-font-lock.category-page.category-vintage-toys::before{
    background-size:auto 800px!important;
    background-position:center 34px!important;
    opacity:.17!important;
  }
}
@media(max-width:520px){
  html body#bb-test-font-lock.category-page.category-vintage-toys::before{
    background-size:auto 670px!important;
    background-position:center 38px!important;
    opacity:.15!important;
  }
}

/* =========================================================
   4) CONTACT — replace the masked/GPU-rasterized communicator with a 2x asset.
   The room/background fade is now built from ordinary overlays, never mask-image.
   ========================================================= */
html body#bb-test-font-lock.contact-page .bb-contact-shell::before{
  background:url('images/rev275j/communicate-bg-v275j-smooth.png?v=275j') center/contain no-repeat!important;
  width:min(1040px,92vw)!important;
  top:12px!important;
  opacity:.15!important;
  filter:brightness(.88) saturate(.82) contrast(1.01)!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  transform:translateX(-50%)!important;
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important;
}
html body#bb-test-font-lock.contact-page .bb-contact-shell::after{
  opacity:1!important;
  filter:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  background:
    radial-gradient(ellipse 78% 74% at 50% 42%,rgba(5,5,6,.08) 0%,rgba(5,5,6,.16) 54%,rgba(5,5,6,.54) 84%,#050506 100%),
    linear-gradient(90deg,#050506 0%,rgba(5,5,6,.76) 8%,rgba(5,5,6,.27) 25%,rgba(5,5,6,.13) 50%,rgba(5,5,6,.27) 75%,rgba(5,5,6,.76) 92%,#050506 100%),
    linear-gradient(180deg,#050506 0%,rgba(5,5,6,.65) 6%,rgba(5,5,6,.30) 20%,rgba(5,5,6,.20) 58%,rgba(5,5,6,.58) 86%,#050506 100%),
    url('images/home-wall-static-after.webp') center 42%/cover no-repeat!important;
  box-shadow:inset 0 0 150px 55px rgba(0,0,0,.18),inset 0 -170px 190px -72px rgba(0,0,0,.64)!important;
}
@media(max-width:900px){
  html body#bb-test-font-lock.contact-page .bb-contact-shell::before{width:min(900px,104vw)!important;opacity:.125!important}
}
@media(max-width:680px){
  html body#bb-test-font-lock.contact-page .bb-contact-shell::before{width:122vw!important;top:62px!important;opacity:.105!important}
}

/* =========================================================
   5) NAVBAR — just a little more breathing room, still balanced with tools.
   Mobile drawer geometry is deliberately left alone.
   ========================================================= */
@media(min-width:1180px){
  html body:not(.bb-cabinet-embed) .bb-site-header .bb-site-nav{
    gap:clamp(29px,2.18vw,42px)!important;
    justify-content:center!important;
  }
}
@media(min-width:901px) and (max-width:1179px){
  html body:not(.bb-cabinet-embed) .bb-site-header .bb-site-nav{
    gap:clamp(20px,1.75vw,28px)!important;
  }
}

/* =========================================================
   6) ARCADE NAV — restore the multicolor neon-sign ignition hover.
   This final rule intentionally wins over later generic nav hover rules.
   ========================================================= */
@media (hover:hover) and (pointer:fine){
  html body:not(.bb-cabinet-embed) .bb-site-header .bb-site-nav > a[href="arcade.html"]:not(.bb-ebay-nav){
    transform-origin:center!important;
    transition:color .22s ease,transform .32s cubic-bezier(.16,1,.3,1),letter-spacing .32s cubic-bezier(.16,1,.3,1),text-shadow .24s ease!important;
  }
  html body:not(.bb-cabinet-embed) .bb-site-header .bb-site-nav > a[href="arcade.html"]:not(.bb-ebay-nav):hover,
  html body:not(.bb-cabinet-embed) .bb-site-header .bb-site-nav > a[href="arcade.html"]:not(.bb-ebay-nav):focus-visible{
    color:#fffaff!important;
    letter-spacing:2.35px!important;
    transform:translateY(-1px) scale(1.045)!important;
    text-shadow:
      0 0 2px rgba(255,255,255,1),
      0 0 7px rgba(255,54,213,.96),
      0 0 14px rgba(255,43,193,.72),
      0 0 22px rgba(38,218,255,.62),
      0 0 34px rgba(131,74,255,.34)!important;
  }
  html body:not(.bb-cabinet-embed) .bb-site-header .bb-site-nav > a[href="arcade.html"]:not(.bb-ebay-nav):hover::before,
  html body:not(.bb-cabinet-embed) .bb-site-header .bb-site-nav > a[href="arcade.html"]:not(.bb-ebay-nav):focus-visible::before{
    opacity:1!important;
    height:2px!important;
    background:linear-gradient(90deg,transparent 0%,#20dbff 17%,#8d7cff 34%,#fff 50%,#ff39dc 69%,#ff5470 83%,transparent 100%)!important;
    box-shadow:0 0 7px rgba(255,255,255,.72),0 0 15px rgba(255,47,216,.72),0 0 24px rgba(33,211,255,.58)!important;
  }
}
@media(prefers-reduced-motion:reduce){
  html body:not(.bb-cabinet-embed) .bb-site-header .bb-site-nav > a[href="arcade.html"]:not(.bb-ebay-nav):hover,
  html body:not(.bb-cabinet-embed) .bb-site-header .bb-site-nav > a[href="arcade.html"]:not(.bb-ebay-nav):focus-visible{
    transform:none!important;
  }
}