@import url('foundation.css');
:root{--ink:#08090b;--panel:#101216;--red:#d82920;--soft:#a8adb5;--line:rgba(255,255,255,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#08090b;color:#f4f4f2;font-family:Arial,Helvetica,sans-serif}.home-header{height:78px;display:flex;align-items:center;padding:0 5vw;position:absolute;z-index:20;width:100%;border-bottom:1px solid rgba(255,255,255,.12)}.home-brand{display:flex;gap:12px;align-items:center;color:#fff;text-decoration:none}.home-brand img{width:46px}.home-brand b{font-size:18px;letter-spacing:1px}.home-brand strong,.red{color:var(--red)}.home-brand small{display:block;font-size:8px;letter-spacing:2px;color:#aaa;margin-top:3px}.home-nav{margin-left:auto;display:flex;gap:28px;align-items:center}.home-nav a{color:#ddd;text-decoration:none;font-size:12px;font-weight:bold;letter-spacing:1.5px}.home-nav a:hover{color:#fff}.ebay-mascot{display:flex!important;align-items:center;justify-content:center;width:48px;height:62px;margin:-8px -8px -8px -10px;overflow:visible;position:relative}.ebay-mascot img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));transition:transform .18s ease}.ebay-mascot:hover img{transform:scale(1.1) rotate(-2deg)}.cart-pill{border:1px solid #555;padding:9px 12px;border-radius:20px}.hero-home{min-height:92vh;display:flex;align-items:center;padding:130px 8vw 90px;position:relative;background:linear-gradient(90deg,rgba(5,5,7,.96) 0%,rgba(5,5,7,.72) 36%,rgba(5,5,7,.16) 72%,rgba(5,5,7,.08) 100%),linear-gradient(0deg,#08090b 0%,rgba(8,9,11,.72) 13%,transparent 38%),linear-gradient(180deg,rgba(8,9,11,.28) 0%,transparent 22%),url('images/boxed-figures-faded.webp') center center/cover no-repeat;background-size:auto,auto,auto,cover;background-color:#08090b}.hero-copy{max-width:820px}.hero-lockup{display:flex;align-items:center;gap:28px;margin:20px 0 18px}.hero-lockup h1{margin:0!important}.hero-lockup>img{width:clamp(110px,14vw,190px);height:clamp(110px,14vw,190px);object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 0 26px rgba(216,41,32,.18))}.kicker{font-size:11px;letter-spacing:4px;font-weight:bold;color:#c8c8c8}.hero-home h1{font-size:clamp(55px,7vw,104px);line-height:.86;margin:20px 0 18px;letter-spacing:-4px}.hero-home h1 span{display:block;color:var(--red)}.hero-home p{font-size:19px;line-height:1.6;color:#c8c8c8;max-width:560px}.actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}.btn{padding:14px 21px;border:1px solid #666;color:#fff;text-decoration:none;font-size:11px;font-weight:bold;letter-spacing:1.5px}.btn.primary{background:var(--red);border-color:var(--red)}.btn:hover{filter:brightness(1.15)}.section{padding:80px 7vw}.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:30px}.section-head h2{font-size:clamp(32px,5vw,60px);margin:7px 0 0;letter-spacing:-2px}.section-head p{color:#9fa3aa;max-width:460px;line-height:1.6}.fresh{background:#0b0c0f}.product-row{display:grid;grid-template-columns:minmax(250px,1fr) repeat(3,minmax(180px,.72fr));gap:16px}.home-product,.teaser{background:#121419;border:1px solid var(--line);min-height:360px;overflow:hidden}.home-product img{width:100%;height:260px;object-fit:contain;background:#e8e8e8}.home-product .info{padding:18px}.home-product small{color:#8f949d;letter-spacing:1px}.home-product h3{font-size:24px;margin:8px 0}.price{font-size:22px;font-weight:bold}.teaser{display:flex;flex-direction:column;justify-content:end;padding:25px;background:linear-gradient(0deg,rgba(8,9,11,.98),rgba(8,9,11,.15)),url('images/red-showcase.webp') center/cover}.teaser h3{font-size:24px;margin:8px 0}.teaser p{color:#aaa}.grail-home{min-height:620px;display:grid;grid-template-columns:1.15fr .85fr;align-items:stretch;padding:0}.grail-image{background:linear-gradient(90deg,transparent 65%,#0c0d10 100%),url('images/grail.webp') center/cover no-repeat;min-height:620px}.grail-copy{padding:80px 7vw 70px 5vw;background:#0c0d10;display:flex;flex-direction:column;justify-content:center}.grail-copy h2{font-size:64px;margin:12px 0}.grail-copy blockquote{font-size:24px;margin:0 0 24px;color:#bbb}.grail-copy p{line-height:1.7;color:#999}.world-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.world{height:270px;position:relative;display:flex;align-items:end;padding:20px;text-decoration:none;color:#fff;background-position:center;background-size:cover;overflow:hidden}.world:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,.05))}.world span{position:relative;z-index:1;font-size:18px;font-weight:bold;letter-spacing:1px}.bits-home{background:#0d0e11}.bits-grid{display:grid;grid-template-columns:1.3fr .7fr .7fr;gap:14px}.bit{min-height:300px;padding:28px;display:flex;flex-direction:column;justify-content:end;border:1px solid var(--line);background:linear-gradient(0deg,rgba(8,8,10,.95),rgba(8,8,10,.1)),url('images/bits-header.png') center/cover}.bit:nth-child(2){background-image:linear-gradient(0deg,rgba(8,8,10,.95),rgba(8,8,10,.15)),url('images/workbench-wide.webp')}.bit:nth-child(3){background-image:linear-gradient(0deg,rgba(8,8,10,.95),rgba(8,8,10,.15)),url('images/vault.webp')}.bit h3{font-size:25px;margin:8px 0}.bit p{color:#bbb;line-height:1.5}.identity{display:grid;grid-template-columns:.7fr 1.3fr;align-items:center;gap:50px;background:radial-gradient(circle at 20% 50%,rgba(216,41,32,.14),transparent 28%),#090a0c}.identity img{width:100%;max-height:440px;object-fit:contain}.identity h2{font-size:52px;margin:10px 0}.identity p{color:#aaa;line-height:1.8;font-size:17px}.signup-home{text-align:center;background:linear-gradient(rgba(8,9,11,.8),rgba(8,9,11,.96)),url('images/castle-scene.jpg') center/cover;padding:100px 7vw}.signup-home h2{font-size:58px;margin:10px}.signup-home p{color:#bbb}.signup-home form{display:flex;max-width:620px;margin:28px auto 0}.signup-home input{flex:1;background:#fff;border:0;padding:17px;font-size:15px}.signup-home button{background:var(--red);border:0;color:#fff;font-weight:bold;padding:0 24px;letter-spacing:1px}.home-footer{display:flex;justify-content:space-between;padding:26px 7vw;border-top:1px solid var(--line);color:#777;font-size:11px;letter-spacing:1px}@media(max-width:900px){.home-nav{display:none}.product-row{grid-template-columns:1fr 1fr}.grail-home{grid-template-columns:1fr}.grail-image{min-height:420px}.world-grid{grid-template-columns:1fr 1fr}.bits-grid{grid-template-columns:1fr}.identity{grid-template-columns:1fr}.identity img{max-height:300px}.section{padding:60px 5vw}}@media(max-width:560px){.hero-lockup{gap:12px}.hero-lockup>img{width:92px;height:92px}.product-row,.world-grid{grid-template-columns:1fr}.hero-home{padding-left:6vw}.hero-home h1{letter-spacing:-2px}.section-head{display:block}.grail-copy h2,.signup-home h2{font-size:42px}.signup-home form{display:block}.signup-home button{width:100%;padding:16px}.signup-home input{width:100%}.home-footer{display:block;line-height:2}}

/* Rev4: supplied brand artwork */
.hero-lockup>img{filter:drop-shadow(0 0 22px rgba(216,41,32,.24));}


/* Rev6: restore boxed-figure hero, deepen fade, and strengthen original Bacon Bin wordmark */
.home-header{background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.18));}
.home-brand{gap:10px;}
.home-brand>img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 2px 7px rgba(0,0,0,.65));}
.home-brand .brand-words{display:flex;flex-direction:column;align-items:flex-start;line-height:1;}
.home-brand .brand-words em{font-style:normal;font-size:9px;font-weight:900;letter-spacing:1.8px;color:#fff;margin:0 0 1px 2px;}
.home-brand .brand-words b{font-family:"Arial Narrow",Impact,Haettenschweiler,sans-serif;font-stretch:condensed;font-size:27px;line-height:.9;letter-spacing:-.6px;color:#fff;white-space:nowrap;}
.home-brand .brand-words strong{color:var(--red);font-weight:900;}
.home-brand .brand-words small{font-size:7px;letter-spacing:1.35px;margin-top:6px;color:#e0e0e0;white-space:nowrap;}
.hero-home{background:
 linear-gradient(90deg,rgba(5,5,7,.97) 0%,rgba(5,5,7,.88) 30%,rgba(5,5,7,.72) 52%,rgba(5,5,7,.58) 74%,rgba(5,5,7,.72) 100%),
 linear-gradient(0deg,#08090b 0%,rgba(8,9,11,.84) 16%,rgba(8,9,11,.30) 46%,rgba(8,9,11,.20) 72%,rgba(8,9,11,.56) 100%),
 url('images/boxed-figures-faded.webp') center center/cover no-repeat;
}
.hero-lockup{align-items:center;gap:26px;}
.hero-lockup h1{display:flex;flex-direction:column;align-items:flex-start;line-height:.78;letter-spacing:-3px;}
.hero-lockup h1 small{font-family:"Arial Narrow",Impact,Haettenschweiler,sans-serif;font-size:clamp(16px,1.6vw,24px);letter-spacing:1px;color:#fff;line-height:1;margin:0 0 8px 5px;}
.hero-lockup h1 b{font-family:"Arial Narrow",Impact,Haettenschweiler,sans-serif;font-size:clamp(58px,7.2vw,108px);font-weight:900;white-space:nowrap;color:#fff;}
.hero-lockup h1 b span{display:inline;color:var(--red);}
.hero-lockup>img{width:clamp(105px,12vw,165px);height:clamp(105px,12vw,165px);}
@media(max-width:560px){.home-brand .brand-words b{font-size:22px}.hero-lockup h1 b{white-space:normal}.hero-lockup>img{width:86px;height:86px}}

/* Rev7: larger Bat Pig badge shifted toward center-right of hero */
.hero-lockup{width:min(1120px,84vw);justify-content:flex-start;gap:0;}
.hero-lockup>img{width:clamp(175px,18vw,275px);height:clamp(175px,18vw,275px);margin-left:clamp(70px,10vw,175px);}
@media(max-width:900px){.hero-lockup{width:100%;}.hero-lockup>img{width:clamp(130px,20vw,190px);height:clamp(130px,20vw,190px);margin-left:clamp(30px,6vw,70px);}}
@media(max-width:560px){.hero-lockup{gap:14px;}.hero-lockup>img{width:105px;height:105px;margin-left:8px;}}


/* =========================================================
   Rev 9 — Wide cinematic collector-vault video
   Spans the upper half of the homepage with richer color and
   a broad feathered blend into the surrounding black UI.
   ========================================================= */
.home-video-stage {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: min(64vh, 720px);
  min-height: 500px;
  overflow: hidden;
  pointer-events: none;
  background: #000;
  opacity: .88;
  -webkit-mask-image:
    linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,.88) 74%, rgba(0,0,0,.42) 88%, transparent 100%),
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.65) 5%, #000 13%, #000 87%, rgba(0,0,0,.65) 95%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,.88) 74%, rgba(0,0,0,.42) 88%, transparent 100%),
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.65) 5%, #000 13%, #000 87%, rgba(0,0,0,.65) 95%, transparent 100%);
  mask-composite: intersect;
}

.home-video-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.20) 0%, transparent 20%, transparent 58%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.94) 100%),
    linear-gradient(to right, rgba(0,0,0,.58) 0%, rgba(0,0,0,.20) 18%, transparent 38%, transparent 72%, rgba(0,0,0,.18) 90%, rgba(0,0,0,.58) 100%);
}

.home-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: brightness(.64) contrast(1.32) saturate(1.18);
  transform: scale(1.025);
}

/* Keep homepage content above the ambient video. */
.home-header, main, .home-footer { position: relative; z-index: 2; }
body::before { z-index: -4 !important; }

@media (max-width: 900px) {
  .home-video-stage {
    height: 60vh;
    min-height: 460px;
    opacity: .80;
  }
  .home-bg-video { filter: brightness(.61) contrast(1.27) saturate(1.14); }
}

@media (max-width: 560px) {
  .home-video-stage {
    width: 100%;
    height: 56vh;
    min-height: 410px;
    opacity: .70;
  }
  .home-bg-video { object-position: center center; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .home-video-stage { display: none; }
}

/* =========================================================
   Rev 10 — let the moving vault show through the hero art.
   The boxed-figure still is now a feathered atmospheric layer
   instead of an opaque hero background.
   ========================================================= */
.hero-home{
  isolation:isolate;
  background:
    linear-gradient(90deg,rgba(5,5,7,.82) 0%,rgba(5,5,7,.48) 31%,rgba(5,5,7,.16) 58%,rgba(5,5,7,.10) 78%,rgba(5,5,7,.30) 100%),
    linear-gradient(0deg,#08090b 0%,rgba(8,9,11,.62) 13%,rgba(8,9,11,.08) 42%,rgba(8,9,11,.06) 72%,rgba(8,9,11,.28) 100%);
}
.hero-home::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:url('images/boxed-figures-faded.webp') center center/cover no-repeat;
  opacity:.40;
  filter:contrast(1.10) saturate(1.06);
  -webkit-mask-image:radial-gradient(ellipse 72% 62% at 58% 47%,#000 0%,rgba(0,0,0,.88) 38%,rgba(0,0,0,.42) 67%,transparent 100%);
  mask-image:radial-gradient(ellipse 72% 62% at 58% 47%,#000 0%,rgba(0,0,0,.88) 38%,rgba(0,0,0,.42) 67%,transparent 100%);
}
.home-video-stage{height:min(78vh,860px);opacity:.94;}
.home-bg-video{filter:brightness(.82) contrast(1.38) saturate(1.30);}
@media(max-width:900px){.hero-home::before{opacity:.34}.home-video-stage{height:70vh}.home-bg-video{filter:brightness(.78) contrast(1.32) saturate(1.24)}}
@media(max-width:560px){.hero-home::before{opacity:.28}.home-video-stage{height:62vh}}

/* Rev 11 — soften the moving video itself without changing its coverage. */
.home-video-stage{opacity:.72;}
@media(max-width:900px){.home-video-stage{opacity:.66;}}
@media(max-width:560px){.home-video-stage{opacity:.58;}}

/* Rev 12 — crossfaded loop + darker ambient video grade. */

/* Rev 13 — new Firefly void-corridor clip; slightly more transparent blend. */
.home-video-stage{opacity:.64;}
.home-bg-video{filter:brightness(.72) contrast(1.34) saturate(1.20);}
@media(max-width:900px){.home-video-stage{opacity:.58;}.home-bg-video{filter:brightness(.69) contrast(1.30) saturate(1.16);}}
@media(max-width:560px){.home-video-stage{opacity:.52;}}

/* Rev14 — video-only hero + boxed-figure art moved to BITS */
.hero-home::before{display:none!important;content:none!important;background:none!important;}
.hero-home{
  background:
    linear-gradient(90deg,rgba(5,5,7,.82) 0%,rgba(5,5,7,.48) 31%,rgba(5,5,7,.16) 58%,rgba(5,5,7,.10) 78%,rgba(5,5,7,.30) 100%),
    linear-gradient(0deg,#08090b 0%,rgba(8,9,11,.62) 13%,rgba(8,9,11,.08) 42%,rgba(8,9,11,.06) 72%,rgba(8,9,11,.28) 100%)!important;
}
.bits-grid .bit:first-child{
  background-image:
    linear-gradient(0deg,rgba(8,8,10,.96) 0%,rgba(8,8,10,.62) 38%,rgba(8,8,10,.10) 100%),
    url('images/boxed-figures-faded.webp')!important;
  background-position:center center!important;
  background-size:cover!important;
}

/* Rev15 — animated illuminated navigation + franchise category menu */
.home-nav>a:not(.ebay-mascot),.home-categories>summary{position:relative;transition:color .55s cubic-bezier(.2,.8,.2,1),text-shadow .55s cubic-bezier(.2,.8,.2,1),transform .55s cubic-bezier(.2,.8,.2,1);}
.home-nav>a:not(.ebay-mascot)::after,.home-categories>summary::after{content:"";position:absolute;left:50%;right:50%;bottom:-10px;height:1px;background:linear-gradient(90deg,transparent,#d82920 18%,#fff 50%,#d82920 82%,transparent);box-shadow:0 0 8px rgba(216,41,32,.85),0 0 16px rgba(216,41,32,.35);opacity:0;transition:left .48s cubic-bezier(.16,1,.3,1),right .48s cubic-bezier(.16,1,.3,1),opacity .35s ease;}
.home-nav>a:not(.ebay-mascot):hover,.home-nav>a:not(.ebay-mascot):focus-visible,.home-categories>summary:hover,.home-categories>summary:focus-visible,.home-categories[open]>summary{color:#fff;text-shadow:0 0 4px rgba(255,255,255,.9),0 0 11px rgba(216,41,32,.8),0 0 24px rgba(216,41,32,.38);transform:translateY(-1px);}
.home-nav>a:not(.ebay-mascot):hover::after,.home-nav>a:not(.ebay-mascot):focus-visible::after,.home-categories>summary:hover::after,.home-categories>summary:focus-visible::after,.home-categories[open]>summary::after{left:0;right:0;opacity:1;}
.home-categories{position:relative;}
.home-categories>summary{cursor:pointer;list-style:none;color:#ddd;font-size:12px;font-weight:bold;letter-spacing:1.5px;}
.home-categories>summary::-webkit-details-marker{display:none;}
.home-category-menu{position:absolute;top:31px;left:50%;width:270px;transform:translate(-50%,-8px);display:grid;padding:12px;background:rgba(7,8,10,.96);border:1px solid rgba(255,255,255,.12);box-shadow:0 22px 55px rgba(0,0,0,.7),0 0 30px rgba(216,41,32,.08);opacity:0;visibility:hidden;transition:opacity .28s ease,transform .42s cubic-bezier(.16,1,.3,1),visibility .28s;backdrop-filter:blur(12px);}
.home-categories[open] .home-category-menu{opacity:1;visibility:visible;transform:translate(-50%,0);}
.home-category-menu a{padding:8px 10px;color:#bbb!important;font-size:10px!important;letter-spacing:1.2px!important;transition:color .25s ease,background .25s ease,padding-left .3s cubic-bezier(.16,1,.3,1),text-shadow .25s ease;}
.home-category-menu a:hover{color:#fff!important;background:linear-gradient(90deg,rgba(216,41,32,.18),transparent);padding-left:16px;text-shadow:0 0 9px rgba(216,41,32,.65);}
.home-category-menu .menu-label{padding:8px 10px 5px;color:#d82920;font-size:8px;font-weight:900;letter-spacing:2.4px;border-top:1px solid rgba(255,255,255,.07);margin-top:5px;}
.home-category-menu .menu-label:first-child{border-top:0;margin-top:0;}
@media(prefers-reduced-motion:reduce){.home-nav>a,.home-categories>summary,.home-category-menu,.home-category-menu a{transition:none!important;}}


/* Rev16 — canonical Shop-page Bacon Bin logo across the site */
.home-header .shop-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;flex:0 0 auto;}
.home-header .shop-brand img{width:45px;height:45px;object-fit:contain;}
.home-header .shop-brand b{display:block;font-size:23px;font-weight:900;letter-spacing:-.3px;color:#fff;}
.home-header .shop-brand strong{color:var(--red);}
.home-header .shop-brand small{display:block;color:#e7e2da;font-size:9px;font-weight:700;letter-spacing:.3px;margin-top:2px;}
@media(max-width:560px){.home-header .shop-brand b{font-size:19px}.home-header .shop-brand small{display:none}.home-header .shop-brand img{width:42px;height:42px}}


/* =========================================================
   Rev51 — Static creature-hand collector wall homepage hero
   ========================================================= */
.home-static-stage{
  position:absolute;
  z-index:0;
  left:0;
  top:0;
  width:100%;
  height:min(88vh,940px);
  min-height:610px;
  overflow:hidden;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(4,5,7,.90) 0%,
      rgba(4,5,7,.62) 25%,
      rgba(4,5,7,.22) 49%,
      rgba(4,5,7,.12) 68%,
      rgba(4,5,7,.37) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,.18) 0%,
      rgba(0,0,0,.02) 36%,
      rgba(0,0,0,.12) 62%,
      #08090b 100%),
    url('images/home-creature-shelf.webp') center 42% / cover no-repeat;
  opacity:.90;
  filter:contrast(1.04) saturate(.92);
  -webkit-mask-image:
    linear-gradient(to bottom,#000 0%,#000 63%,rgba(0,0,0,.90) 73%,rgba(0,0,0,.46) 88%,transparent 100%),
    linear-gradient(to right,rgba(0,0,0,.55) 0%,#000 7%,#000 93%,rgba(0,0,0,.55) 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to bottom,#000 0%,#000 63%,rgba(0,0,0,.90) 73%,rgba(0,0,0,.46) 88%,transparent 100%),
    linear-gradient(to right,rgba(0,0,0,.55) 0%,#000 7%,#000 93%,rgba(0,0,0,.55) 100%);
  mask-composite:intersect;
}
.home-static-stage::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 38% 52% at 52% 47%,transparent 0%,rgba(0,0,0,.06) 52%,rgba(0,0,0,.35) 100%),
    linear-gradient(90deg,rgba(0,0,0,.38) 0%,transparent 30%,transparent 76%,rgba(0,0,0,.28) 100%);
}
.home-header,main,.home-footer{position:relative;z-index:2;}

@media(max-width:900px){
  .home-static-stage{
    height:76vh;
    min-height:540px;
    background-position:55% 42%;
    opacity:.83;
  }
}
@media(max-width:560px){
  .home-static-stage{
    height:70vh;
    min-height:500px;
    background-position:57% 40%;
    opacity:.74;
  }
}


/* =========================================================
   Rev52 — Firefly creature-hand wall reveal video
   Plays once and intentionally holds on the final Bat Pig
   reveal rather than hard-looping back to the opening frame.
   ========================================================= */
.home-static-stage{display:none!important;}
.home-reveal-stage{
  position:absolute;
  z-index:0;
  inset:0 0 auto 0;
  width:100%;
  height:min(92vh,980px);
  min-height:640px;
  overflow:hidden;
  pointer-events:none;
  background:#050607;
  opacity:.92;
  -webkit-mask-image:
    linear-gradient(to bottom,#000 0%,#000 68%,rgba(0,0,0,.92) 77%,rgba(0,0,0,.50) 91%,transparent 100%),
    linear-gradient(to right,rgba(0,0,0,.62) 0%,#000 6%,#000 94%,rgba(0,0,0,.62) 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to bottom,#000 0%,#000 68%,rgba(0,0,0,.92) 77%,rgba(0,0,0,.50) 91%,transparent 100%),
    linear-gradient(to right,rgba(0,0,0,.62) 0%,#000 6%,#000 94%,rgba(0,0,0,.62) 100%);
  mask-composite:intersect;
}
.home-reveal-stage::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(2,3,5,.74) 0%,rgba(2,3,5,.48) 24%,rgba(2,3,5,.12) 44%,transparent 63%,rgba(0,0,0,.10) 100%),
    linear-gradient(180deg,rgba(0,0,0,.15) 0%,transparent 35%,transparent 67%,rgba(8,9,11,.92) 100%);
}
.home-reveal-video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  filter:brightness(.76) contrast(1.13) saturate(.96);
  transform:scale(1.012);
}
/* The movie now provides the central Bat Pig reveal, so avoid a duplicate hero badge. */
.hero-home .hero-lockup>img{display:none!important;}
.hero-home .hero-lockup{width:auto!important;gap:0!important;}
.hero-home{
  background:
    linear-gradient(90deg,rgba(5,5,7,.78) 0%,rgba(5,5,7,.48) 28%,rgba(5,5,7,.12) 54%,rgba(5,5,7,.03) 78%,rgba(5,5,7,.12) 100%),
    linear-gradient(0deg,#08090b 0%,rgba(8,9,11,.38) 15%,rgba(8,9,11,.04) 46%,rgba(8,9,11,.04) 78%,rgba(8,9,11,.20) 100%)!important;
}
.home-header,main,.home-footer{position:relative;z-index:2;}

@media(max-width:900px){
  .home-reveal-stage{height:82vh;min-height:560px;opacity:.88;}
  .home-reveal-video{object-position:56% center;filter:brightness(.72) contrast(1.10) saturate(.92);}
}
@media(max-width:560px){
  .home-reveal-stage{height:76vh;min-height:520px;opacity:.80;}
  .home-reveal-video{object-position:58% center;transform:scale(1.06);filter:brightness(.67) contrast(1.08) saturate(.90);}
  .hero-home{padding-top:120px;}
}
@media(prefers-reduced-motion:reduce){
  .home-reveal-video{display:none;}
  .home-reveal-stage{
    background:
      linear-gradient(90deg,rgba(4,5,7,.82),rgba(4,5,7,.20) 62%,rgba(4,5,7,.38)),
      linear-gradient(180deg,transparent 55%,#08090b 100%),
      url('images/home-creature-shelf.webp') center 42%/cover no-repeat;
  }
}


/* =========================================================
   Rev53 — cinematic intro handoff
   Slightly smaller centered film. After playback completes,
   the movie dissolves away, hero copy fades in, and the normal
   circular Bat Pig mark resolves on the page underneath.
   ========================================================= */

/* A little smaller than full-bleed so it feels like a cinematic window
   floating naturally inside the black homepage. */
.home-reveal-stage{
  left:50%!important;
  right:auto!important;
  top:82px!important;
  inset:auto!important;
  width:min(90vw,1560px)!important;
  height:auto!important;
  aspect-ratio:16/9;
  min-height:0!important;
  max-height:none!important;
  transform:translateX(-50%);
  opacity:.96;
  background:#030405;
  border-radius:2px;
  transition:
    opacity 1.55s cubic-bezier(.22,.61,.36,1),
    transform 1.75s cubic-bezier(.22,.61,.36,1),
    filter 1.55s ease,
    visibility 0s linear 2s;
  -webkit-mask-image:
    linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.72) 4%,#000 10%,#000 78%,rgba(0,0,0,.72) 91%,transparent 100%),
    linear-gradient(to right,transparent 0%,rgba(0,0,0,.70) 4%,#000 10%,#000 90%,rgba(0,0,0,.70) 96%,transparent 100%)!important;
  mask-image:
    linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.72) 4%,#000 10%,#000 78%,rgba(0,0,0,.72) 91%,transparent 100%),
    linear-gradient(to right,transparent 0%,rgba(0,0,0,.70) 4%,#000 10%,#000 90%,rgba(0,0,0,.70) 96%,transparent 100%)!important;
}
.home-reveal-stage::after{
  background:
    linear-gradient(180deg,rgba(0,0,0,.08) 0%,transparent 45%,rgba(0,0,0,.14) 72%,rgba(8,9,11,.82) 100%),
    radial-gradient(ellipse 82% 78% at 50% 46%,transparent 54%,rgba(0,0,0,.20) 82%,rgba(0,0,0,.60) 100%)!important;
}
.home-reveal-video{
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
  filter:brightness(.81) contrast(1.10) saturate(.96)!important;
}

/* Hero content exists underneath the movie but waits for the reveal. */
.hero-home{
  min-height:92vh;
}
.hero-home .hero-copy{
  position:relative;
  z-index:3;
  opacity:1;
  transform:translateY(0);
  transition:
    opacity 1.1s ease,
    transform 1.35s cubic-bezier(.16,1,.3,1);
}
.hero-home .hero-lockup>img{
  display:block!important;
  opacity:1;
  transform:scale(1);
  transition:
    opacity 1.05s ease,
    transform 1.35s cubic-bezier(.16,1,.3,1),
    filter 1.2s ease;
  filter:drop-shadow(0 0 30px rgba(216,41,32,.24));
}
.hero-home .hero-lockup{
  width:min(1120px,84vw)!important;
  gap:0!important;
}

/* While the film is playing, keep the hero message hidden. */
body.home-intro-active .hero-home .hero-copy{
  opacity:0;
  transform:translateY(18px);
  pointer-events:none;
}
body.home-intro-active .hero-home .hero-lockup>img{
  opacity:0;
  transform:scale(.92);
}

/* End of film: movie dissolves first; copy begins shortly afterward. */
body.home-intro-complete .home-reveal-stage{
  opacity:0!important;
  transform:translateX(-50%) scale(.975);
  filter:brightness(.45);
  visibility:hidden;
}
body.home-intro-complete .hero-home .hero-copy{
  transition-delay:.42s;
  opacity:1;
  transform:translateY(0);
}
body.home-intro-complete .hero-home .hero-lockup>img{
  transition-delay:1.05s;
  opacity:1;
  transform:scale(1);
  filter:drop-shadow(0 0 34px rgba(216,41,32,.30));
}
.home-reveal-stage.is-gone{display:none!important;}

/* Once the movie disappears, the hero becomes a cleaner black stage for
   the copy and Bat Pig mark rather than swapping to another busy image. */
body.home-intro-complete .hero-home{
  background:
    radial-gradient(circle at 64% 42%,rgba(216,41,32,.055),transparent 28%),
    linear-gradient(90deg,rgba(5,5,7,.98) 0%,rgba(5,5,7,.88) 32%,rgba(5,5,7,.48) 61%,rgba(5,5,7,.82) 100%),
    #08090b!important;
}

@media(max-width:900px){
  .home-reveal-stage{
    top:76px!important;
    width:94vw!important;
  }
  .home-reveal-video{
    object-position:54% center!important;
  }
}
@media(max-width:560px){
  .home-reveal-stage{
    top:74px!important;
    width:98vw!important;
    aspect-ratio:16/10;
  }
  .home-reveal-video{
    object-position:56% center!important;
  }
  .hero-home{padding-top:118px;}
}

/* Respect reduced motion: skip the cinematic intro entirely. */
@media(prefers-reduced-motion:reduce){
  .home-reveal-stage{display:none!important;}
  .hero-home .hero-copy,
  .hero-home .hero-lockup>img{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}


/* =========================================================
   Rev54 — hard-center fix for cinematic intro
   Uses symmetric viewport insets instead of translate centering,
   avoiding the left-side rendering issue seen in Chrome/file://.
   ========================================================= */
.home-reveal-stage{
  position:absolute!important;
  top:86px!important;
  left:8vw!important;
  right:8vw!important;
  inset:auto 8vw auto 8vw!important;
  width:auto!important;
  height:auto!important;
  aspect-ratio:16/9!important;
  min-height:0!important;
  transform:none!important;
  overflow:hidden!important;
  opacity:.96!important;
  background:#030405!important;
  border-radius:4px!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  box-shadow:0 0 80px rgba(0,0,0,.72);
}
.home-reveal-stage::before{
  content:"";
  position:absolute;
  z-index:3;
  inset:-2px;
  pointer-events:none;
  background:
    linear-gradient(90deg,#08090b 0%,rgba(8,9,11,.42) 3%,transparent 9%,transparent 91%,rgba(8,9,11,.42) 97%,#08090b 100%),
    linear-gradient(180deg,#08090b 0%,rgba(8,9,11,.20) 5%,transparent 12%,transparent 78%,rgba(8,9,11,.50) 91%,#08090b 100%);
}
.home-reveal-stage::after{
  z-index:2!important;
  background:
    radial-gradient(ellipse 90% 88% at 50% 47%,transparent 58%,rgba(0,0,0,.15) 79%,rgba(0,0,0,.55) 100%)!important;
}
.home-reveal-video{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  object-position:50% 50%!important;
  transform:none!important;
}
body.home-intro-complete .home-reveal-stage{
  opacity:0!important;
  transform:scale(.985)!important;
  filter:brightness(.42)!important;
}

/* Keep the static Bat Pig reveal centered once the movie is gone. */
.hero-home .hero-lockup{
  align-items:center!important;
}
.hero-home .hero-lockup>img{
  width:clamp(115px,12vw,170px)!important;
  height:clamp(115px,12vw,170px)!important;
}

@media(max-width:900px){
  .home-reveal-stage{
    top:80px!important;
    left:4vw!important;
    right:4vw!important;
    inset:auto 4vw auto 4vw!important;
  }
}
@media(max-width:560px){
  .home-reveal-stage{
    top:76px!important;
    left:2vw!important;
    right:2vw!important;
    inset:auto 2vw auto 2vw!important;
    aspect-ratio:16/10!important;
  }
  .home-reveal-video{
    object-position:54% 50%!important;
  }
}


/* =========================================================
   Rev55 — persistent wall image after cinematic intro
   The movie still plays first. Once it dissolves, this supplied
   collector-wall image remains in place behind the homepage copy.
   ========================================================= */
.hero-home{
  background:#08090b!important;
}

/* Reveal the supplied still only after the video has finished. */
body.home-intro-complete .hero-home{
  background:
    linear-gradient(90deg,
      rgba(5,5,7,.94) 0%,
      rgba(5,5,7,.76) 25%,
      rgba(5,5,7,.34) 49%,
      rgba(5,5,7,.25) 69%,
      rgba(5,5,7,.52) 100%),
    linear-gradient(180deg,
      rgba(8,9,11,.12) 0%,
      rgba(8,9,11,.04) 42%,
      rgba(8,9,11,.24) 70%,
      #08090b 100%),
    url('images/home-wall-static-after.webp') center 43% / cover no-repeat!important;
  transition:background-color .8s ease;
}

/* Additional soft vignette so the still feels integrated instead of pasted in. */
body.home-intro-complete .hero-home::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 66% 64% at 54% 42%,
      transparent 0%,
      rgba(0,0,0,.05) 50%,
      rgba(0,0,0,.32) 82%,
      rgba(0,0,0,.62) 100%);
}

/* Keep the revealed homepage content above the still. */
body.home-intro-complete .hero-home .hero-copy{
  position:relative;
  z-index:3;
}

@media(max-width:900px){
  body.home-intro-complete .hero-home{
    background-position:54% 40%!important;
    background-size:cover!important;
  }
}
@media(max-width:560px){
  body.home-intro-complete .hero-home{
    background-position:58% 38%!important;
  }
}


/* =========================================================
   Rev56 — FINAL containment fix for homepage intro
   The movie now lives INSIDE .hero-home instead of at body level.
   This guarantees it begins below the navigation/header and can
   never sit behind or under the menu.
   ========================================================= */

.hero-home{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate;
  min-height:92vh!important;
}

/* Header always stays outside / above the intro movie. */
.home-header{
  position:relative!important;
  z-index:20!important;
}

/* Override all older body-level positioning rules. */
.hero-home .home-reveal-stage{
  position:absolute!important;
  z-index:1!important;
  top:18px!important;
  left:7%!important;
  right:7%!important;
  inset:18px 7% auto 7%!important;
  width:auto!important;
  height:auto!important;
  aspect-ratio:16/9!important;
  min-height:0!important;
  max-height:none!important;
  transform:none!important;
  overflow:hidden!important;
  opacity:.96!important;
  background:#030405!important;
  border-radius:4px!important;
  box-shadow:0 0 90px rgba(0,0,0,.72);
  -webkit-mask-image:none!important;
  mask-image:none!important;
  transition:
    opacity 1.45s cubic-bezier(.22,.61,.36,1),
    filter 1.45s ease,
    transform 1.55s cubic-bezier(.22,.61,.36,1),
    visibility 0s linear 1.8s!important;
}

/* Smooth black feather without fragile CSS masks. */
.hero-home .home-reveal-stage::before{
  content:"";
  position:absolute;
  z-index:3;
  inset:-2px;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      #08090b 0%,
      rgba(8,9,11,.50) 3%,
      transparent 9%,
      transparent 91%,
      rgba(8,9,11,.50) 97%,
      #08090b 100%),
    linear-gradient(180deg,
      rgba(8,9,11,.72) 0%,
      transparent 8%,
      transparent 77%,
      rgba(8,9,11,.42) 90%,
      #08090b 100%);
}
.hero-home .home-reveal-stage::after{
  content:"";
  position:absolute;
  z-index:2!important;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 91% 86% at 50% 47%,
      transparent 58%,
      rgba(0,0,0,.12) 78%,
      rgba(0,0,0,.52) 100%)!important;
}

.hero-home .home-reveal-video{
  position:absolute!important;
  z-index:1!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:50% 50%!important;
  transform:none!important;
  filter:brightness(.82) contrast(1.08) saturate(.96)!important;
}

/* Copy stays over the intro but invisible until the handoff. */
.hero-home .hero-copy{
  position:relative!important;
  z-index:5!important;
}

/* On completion, fade the movie away while the supplied still remains
   as the hero background underneath. */
body.home-intro-complete .hero-home .home-reveal-stage{
  opacity:0!important;
  filter:brightness(.40)!important;
  transform:scale(.985)!important;
  visibility:hidden!important;
}

/* Prevent any legacy body-level rule from shifting the movie. */
body.home-intro-complete .home-reveal-stage{
  transform:scale(.985)!important;
}

/* Static wall after the film: same image, integrated into the hero only. */
body.home-intro-complete .hero-home{
  background:
    linear-gradient(90deg,
      rgba(5,5,7,.93) 0%,
      rgba(5,5,7,.73) 24%,
      rgba(5,5,7,.30) 51%,
      rgba(5,5,7,.24) 70%,
      rgba(5,5,7,.48) 100%),
    linear-gradient(180deg,
      rgba(8,9,11,.10) 0%,
      rgba(8,9,11,.02) 40%,
      rgba(8,9,11,.20) 72%,
      #08090b 100%),
    url('images/home-wall-static-after.webp') center 44% / cover no-repeat!important;
}

@media(max-width:900px){
  .hero-home .home-reveal-stage{
    top:12px!important;
    left:4%!important;
    right:4%!important;
    inset:12px 4% auto 4%!important;
  }
}
@media(max-width:560px){
  .hero-home .home-reveal-stage{
    top:8px!important;
    left:2%!important;
    right:2%!important;
    inset:8px 2% auto 2%!important;
    aspect-ratio:16/10!important;
  }
  .hero-home .home-reveal-video{
    object-position:54% 50%!important;
  }
}


/* =========================================================
   Rev57 — refined cinematic scale + softer hero reveal
   ========================================================= */

/* Pull the movie in just a little more while keeping it perfectly
   contained inside the hero and below the navigation. */
.hero-home .home-reveal-stage{
  top:24px!important;
  left:10%!important;
  right:10%!important;
  inset:24px 10% auto 10%!important;
  border-radius:5px!important;
  box-shadow:0 0 78px rgba(0,0,0,.76);
}

/* Slightly smaller, more contemporary hero title. */
.hero-lockup h1{
  letter-spacing:-1.5px!important;
}
.hero-lockup h1 small{
  font-family:Bahnschrift Condensed,"Arial Narrow","Segoe UI",sans-serif!important;
  font-size:clamp(13px,1.25vw,19px)!important;
  font-weight:500!important;
  letter-spacing:4px!important;
  margin:0 0 7px 4px!important;
  opacity:.86;
}
.hero-lockup h1 b{
  font-family:Bahnschrift Condensed,"Arial Narrow","Segoe UI",sans-serif!important;
  font-size:clamp(48px,5.9vw,86px)!important;
  font-weight:700!important;
  letter-spacing:-1.8px!important;
  line-height:.86!important;
}
.hero-lockup h1 b span{
  font-weight:700!important;
}

/* Logo + new slogan behave as one restrained brand mark. */
.hero-mark{
  display:flex;
  flex:0 0 auto;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.hero-mark>img{
  display:block;
  width:clamp(108px,11vw,158px)!important;
  height:clamp(108px,11vw,158px)!important;
  object-fit:contain;
  filter:drop-shadow(0 0 26px rgba(216,41,32,.24));
}
.hero-slogan{
  font-family:Bahnschrift Condensed,"Arial Narrow","Segoe UI",sans-serif;
  color:#f4f4f2;
  font-size:clamp(10px,.9vw,13px);
  font-weight:650;
  letter-spacing:2.4px;
  white-space:nowrap;
  text-transform:uppercase;
  text-shadow:0 0 12px rgba(216,41,32,.50);
  opacity:.92;
}

/* Make the handoff slower and more polished rather than simply appearing. */
.hero-home .hero-copy{
  transition:
    opacity 1.85s cubic-bezier(.16,1,.3,1),
    transform 2.05s cubic-bezier(.16,1,.3,1),
    filter 1.9s ease!important;
}
body.home-intro-active .hero-home .hero-copy{
  opacity:0!important;
  transform:translateY(22px)!important;
  filter:blur(4px);
}
body.home-intro-complete .hero-home .hero-copy{
  opacity:1!important;
  transform:translateY(0)!important;
  filter:blur(0);
  transition-delay:.62s!important;
}

/* Let the title resolve a fraction ahead of the supporting copy. */
body.home-intro-active .hero-lockup h1,
body.home-intro-active .hero-home .kicker,
body.home-intro-active .hero-home> .hero-copy > p,
body.home-intro-active .hero-home .actions{
  opacity:0;
}
.hero-lockup h1,
.hero-home .kicker,
.hero-home> .hero-copy > p,
.hero-home .actions{
  transition:opacity 1.55s ease;
}
body.home-intro-complete .hero-home .kicker{
  transition-delay:.72s;
}
body.home-intro-complete .hero-lockup h1{
  transition-delay:.88s;
}
body.home-intro-complete .hero-home> .hero-copy > p{
  transition-delay:1.18s;
}
body.home-intro-complete .hero-home .actions{
  transition-delay:1.42s;
}

/* The circular mark follows the title, then the slogan softly arrives last. */
.hero-mark{
  opacity:1;
  transform:translateY(0) scale(1);
  transition:
    opacity 1.65s ease,
    transform 1.9s cubic-bezier(.16,1,.3,1);
}
.hero-slogan{
  transition:
    opacity 1.7s ease,
    transform 1.8s cubic-bezier(.16,1,.3,1),
    letter-spacing 1.8s cubic-bezier(.16,1,.3,1);
}
body.home-intro-active .hero-mark{
  opacity:0;
  transform:translateY(10px) scale(.94);
}
body.home-intro-active .hero-slogan{
  opacity:0;
  transform:translateY(7px);
  letter-spacing:5px;
}
body.home-intro-complete .hero-mark{
  transition-delay:1.02s;
}
body.home-intro-complete .hero-slogan{
  transition-delay:1.55s;
  opacity:.92;
  transform:translateY(0);
  letter-spacing:2.4px;
}

/* Neutralize older direct-image sizing rules now that the logo lives in .hero-mark. */
.hero-home .hero-lockup>img{
  display:none!important;
}

@media(max-width:900px){
  .hero-home .home-reveal-stage{
    top:18px!important;
    left:7%!important;
    right:7%!important;
    inset:18px 7% auto 7%!important;
  }
  .hero-lockup h1 b{
    font-size:clamp(46px,8vw,72px)!important;
  }
}
@media(max-width:560px){
  .hero-home .home-reveal-stage{
    top:12px!important;
    left:4%!important;
    right:4%!important;
    inset:12px 4% auto 4%!important;
  }
  .hero-lockup{
    gap:14px!important;
  }
  .hero-lockup h1 b{
    font-size:clamp(42px,12vw,62px)!important;
    white-space:normal!important;
  }
  .hero-mark>img{
    width:90px!important;
    height:90px!important;
  }
  .hero-slogan{
    font-size:9px;
    letter-spacing:1.6px;
  }
}


/* =========================================================
   Rev58 — centered oversized hero composition
   ========================================================= */

.hero-home{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* Center the entire post-intro hero composition. */
.hero-home .hero-copy{
  width:min(1420px,94vw)!important;
  max-width:none!important;
  margin:0 auto!important;
  padding:clamp(48px,7vw,110px) clamp(20px,3vw,44px)!important;
  text-align:center!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
}

/* Top kicker: centered and roughly doubled from the earlier treatment. */
.hero-home .hero-copy>.kicker{
  width:100%;
  text-align:center!important;
  font-size:clamp(18px,1.65vw,28px)!important;
  letter-spacing:clamp(3px,.42vw,7px)!important;
  margin-bottom:clamp(22px,2.2vw,36px)!important;
}

/* Balanced title/logo unit centered as a whole.
   The logo is deliberately nudged a little right of the wordmark. */
.hero-home .hero-lockup{
  width:auto!important;
  max-width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(34px,4vw,68px)!important;
  margin:0 auto!important;
}
.hero-title-group{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:0;
}
.hero-title-group h1{
  margin:0!important;
  text-align:center!important;
}
.hero-title-group h1 small{
  display:block!important;
  font-size:clamp(22px,2vw,34px)!important;
  letter-spacing:clamp(5px,.55vw,9px)!important;
  margin:0 0 10px!important;
}
.hero-title-group h1 b{
  display:block!important;
  font-size:clamp(92px,10vw,154px)!important;
  line-height:.82!important;
  letter-spacing:-2.5px!important;
  white-space:nowrap!important;
}

/* Slogan now belongs directly beneath THE BACON BIN. */
.hero-slogan{
  margin-top:clamp(18px,1.8vw,28px)!important;
  font-size:clamp(18px,1.55vw,26px)!important;
  letter-spacing:clamp(2.5px,.30vw,5px)!important;
  font-weight:700!important;
  line-height:1!important;
  text-align:center!important;
  white-space:nowrap!important;
}

/* Larger circular mark, offset slightly to the right for asymmetrical balance. */
.hero-mark{
  flex:0 0 auto!important;
  transform:translateX(clamp(8px,1vw,18px));
}
.hero-mark>img{
  width:clamp(205px,18vw,290px)!important;
  height:clamp(205px,18vw,290px)!important;
  object-fit:contain!important;
  filter:drop-shadow(0 0 38px rgba(216,41,32,.30))!important;
}

/* Supporting line approximately doubles in presence and stays centered. */
.hero-home .hero-copy>p{
  width:min(1040px,90vw)!important;
  max-width:none!important;
  margin:clamp(34px,3.6vw,58px) auto 0!important;
  text-align:center!important;
  font-size:clamp(20px,1.7vw,29px)!important;
  line-height:1.55!important;
}

/* Center and enlarge both actions as part of the hero composition. */
.hero-home .actions{
  width:100%;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:clamp(18px,2vw,30px)!important;
  margin-top:clamp(30px,3vw,48px)!important;
}
.hero-home .actions .btn{
  min-width:clamp(190px,17vw,270px)!important;
  min-height:58px!important;
  padding:18px 28px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:clamp(15px,1.15vw,19px)!important;
  letter-spacing:1.4px!important;
}

/* Preserve the slower cinematic reveal while adapting to the new hierarchy. */
body.home-intro-active .hero-title-group,
body.home-intro-active .hero-mark{
  opacity:0;
}
.hero-title-group{
  opacity:1;
  transition:
    opacity 1.9s cubic-bezier(.16,1,.3,1),
    transform 2s cubic-bezier(.16,1,.3,1),
    filter 1.9s ease;
}
body.home-intro-active .hero-title-group{
  transform:translateY(16px);
  filter:blur(4px);
}
body.home-intro-complete .hero-title-group{
  transform:translateY(0);
  filter:blur(0);
  transition-delay:.82s;
}
body.home-intro-complete .hero-mark{
  transform:translateX(clamp(8px,1vw,18px)) translateY(0) scale(1);
  transition-delay:1.15s;
}
body.home-intro-active .hero-mark{
  transform:translateX(clamp(8px,1vw,18px)) translateY(10px) scale(.93);
}
body.home-intro-complete .hero-slogan{
  transition-delay:1.35s!important;
}

/* Tablet: retain the centered side-by-side feel, just tighter. */
@media(max-width:980px){
  .hero-home .hero-lockup{
    gap:26px!important;
  }
  .hero-title-group h1 b{
    font-size:clamp(76px,12vw,112px)!important;
  }
  .hero-mark>img{
    width:clamp(170px,21vw,220px)!important;
    height:clamp(170px,21vw,220px)!important;
  }
  .hero-home .hero-copy>p{
    font-size:clamp(18px,2.4vw,24px)!important;
  }
}

/* Mobile: stack the logo under the title to avoid crowding,
   while keeping the overall composition centered and large. */
@media(max-width:680px){
  .hero-home .hero-copy{
    width:96vw!important;
    padding:54px 14px 42px!important;
  }
  .hero-home .hero-copy>.kicker{
    font-size:13px!important;
    letter-spacing:2.4px!important;
    margin-bottom:22px!important;
  }
  .hero-home .hero-lockup{
    flex-direction:column!important;
    gap:22px!important;
  }
  .hero-title-group h1 small{
    font-size:18px!important;
    letter-spacing:4px!important;
  }
  .hero-title-group h1 b{
    font-size:clamp(58px,18vw,86px)!important;
    white-space:normal!important;
  }
  .hero-slogan{
    font-size:14px!important;
    margin-top:14px!important;
    letter-spacing:2px!important;
  }
  .hero-mark,
  body.home-intro-active .hero-mark,
  body.home-intro-complete .hero-mark{
    transform:none!important;
  }
  .hero-mark>img{
    width:150px!important;
    height:150px!important;
  }
  .hero-home .hero-copy>p{
    width:94%!important;
    font-size:17px!important;
    line-height:1.5!important;
    margin-top:26px!important;
  }
  .hero-home .actions{
    flex-direction:column!important;
    gap:12px!important;
    margin-top:26px!important;
  }
  .hero-home .actions .btn{
    width:min(310px,92vw)!important;
    min-width:0!important;
    font-size:14px!important;
    min-height:54px!important;
    padding:15px 20px!important;
  }
}


/* =========================================================
   Rev60 — high-resolution display polish
   Smoother cinematic fades, subtle dithering, refined Grail.
   ========================================================= */

html,body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* --- CINEMATIC INTRO: smoother edges on bright / HDR-ish panels --- */
.hero-home .home-reveal-stage{
  /* A soft black halo does the heavy lifting rather than a visible
     linear edge gradient. This removes the rectangular "video box". */
  border-radius:12px!important;
  box-shadow:
    0 0 22px 10px rgba(8,9,11,.84),
    0 0 72px 38px rgba(8,9,11,.94),
    0 0 150px 72px rgba(8,9,11,.90)!important;
  background:#08090b!important;
}

/* Replace harder stepped edge treatment with a broader multi-layer vignette. */
.hero-home .home-reveal-stage::before{
  content:""!important;
  position:absolute!important;
  z-index:4!important;
  inset:-1px!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background:
    radial-gradient(ellipse 91% 88% at 50% 47%,
      transparent 0%,
      transparent 63%,
      rgba(8,9,11,.035) 69%,
      rgba(8,9,11,.11) 76%,
      rgba(8,9,11,.26) 84%,
      rgba(8,9,11,.51) 91%,
      rgba(8,9,11,.82) 97%,
      #08090b 100%),
    linear-gradient(180deg,
      rgba(8,9,11,.18) 0%,
      transparent 9%,
      transparent 77%,
      rgba(8,9,11,.12) 83%,
      rgba(8,9,11,.38) 91%,
      #08090b 100%)!important;
}

/* Fine transparent noise breaks visible gradient bands without looking grainy. */
.hero-home .home-reveal-stage::after{
  content:""!important;
  position:absolute!important;
  z-index:5!important;
  inset:0!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background:
    url('images/ui-dither.png') repeat,
    radial-gradient(ellipse 92% 88% at 50% 47%,
      transparent 56%,
      rgba(0,0,0,.055) 74%,
      rgba(0,0,0,.28) 92%,
      rgba(0,0,0,.48) 100%)!important;
  opacity:.72!important;
}

.hero-home .home-reveal-video{
  /* Slightly lift blacks so the browser has more tonal values to blend
     instead of crushing straight into #000 at the boundary. */
  filter:brightness(.84) contrast(1.055) saturate(.95)!important;
  backface-visibility:hidden;
  transform:translateZ(0)!important;
}

/* The permanent still gets the same ultra-soft edge / tonal treatment. */
body.home-intro-complete .hero-home{
  background:
    radial-gradient(ellipse 88% 78% at 51% 43%,
      transparent 0%,
      rgba(8,9,11,.035) 55%,
      rgba(8,9,11,.20) 77%,
      rgba(8,9,11,.68) 100%),
    linear-gradient(90deg,
      rgba(5,5,7,.91) 0%,
      rgba(5,5,7,.70) 23%,
      rgba(5,5,7,.29) 48%,
      rgba(5,5,7,.23) 70%,
      rgba(5,5,7,.50) 100%),
    linear-gradient(180deg,
      rgba(8,9,11,.10) 0%,
      rgba(8,9,11,.02) 41%,
      rgba(8,9,11,.18) 70%,
      #08090b 100%),
    url('images/home-wall-static-after.webp') center 44% / cover no-repeat!important;
}

body.home-intro-complete .hero-home::after{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:url('images/ui-dither.png') repeat;
  opacity:.20;
}

/* --- THE GRAIL: finally put a real collectible on the pedestal --- */
.grail-home{
  position:relative;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.045);
  border-bottom:1px solid rgba(255,255,255,.045);
}
.grail-image{
  position:relative;
  min-height:620px!important;
  background:
    linear-gradient(90deg,
      rgba(8,9,11,.04) 0%,
      rgba(8,9,11,.03) 58%,
      rgba(12,13,16,.30) 75%,
      #0c0d10 100%),
    linear-gradient(180deg,
      rgba(0,0,0,.04) 0%,
      transparent 62%,
      rgba(8,9,11,.36) 100%),
    url('images/grail-home-display.webp') center 45% / cover no-repeat!important;
}
.grail-image::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    url('images/ui-dither.png') repeat,
    radial-gradient(circle at 44% 38%,
      transparent 0%,
      transparent 44%,
      rgba(0,0,0,.11) 70%,
      rgba(0,0,0,.42) 100%);
  opacity:.46;
}
.grail-copy{
  position:relative;
  background:
    linear-gradient(90deg,#0c0d10 0%,rgba(12,13,16,.985) 70%,#0c0d10 100%)!important;
}
.grail-copy::before{
  content:"";
  position:absolute;
  width:48px;
  height:2px;
  background:var(--red);
  top:68px;
  left:5vw;
  opacity:.82;
}
.grail-copy h2{
  letter-spacing:-2.5px;
}
.grail-copy blockquote{
  color:#d5d5d3!important;
  max-width:440px;
}

/* --- Subtle system-wide refinement --- */
.section,
.grail-home,
.bits-home,
.identity,
.signup-home{
  content-visibility:auto;
  contain-intrinsic-size:auto 720px;
}
.btn,
button,
.collection-chips a,
.universe-tile{
  -webkit-tap-highlight-color:transparent;
}
.btn:focus-visible,
button:focus-visible,
a:focus-visible{
  outline:2px solid rgba(235,55,46,.86)!important;
  outline-offset:4px!important;
}
.btn{
  transition:
    transform .28s cubic-bezier(.16,1,.3,1),
    border-color .28s ease,
    box-shadow .32s ease,
    background-color .28s ease,
    filter .28s ease!important;
}
@media(hover:hover) and (pointer:fine){
  .btn:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 26px rgba(216,41,32,.13);
    filter:brightness(1.07)!important;
  }
}

/* Slightly softer separators throughout the homepage. */
.home-header,
.home-footer{
  border-color:rgba(255,255,255,.075)!important;
}

@media(max-width:900px){
  .grail-image{
    min-height:500px!important;
    background-position:center 42%!important;
  }
}
@media(max-width:560px){
  .hero-home .home-reveal-stage{
    border-radius:8px!important;
    box-shadow:
      0 0 18px 8px rgba(8,9,11,.90),
      0 0 52px 25px rgba(8,9,11,.94)!important;
  }
  .grail-image{
    min-height:420px!important;
    background-position:center 38%!important;
  }
}

/* Reduced-motion still gets all the visual polish with no movement. */
@media(prefers-reduced-motion:reduce){
  .btn,
  .hero-home .hero-copy,
  .hero-mark,
  .hero-slogan{
    transition:none!important;
  }
}


/* =========================================================
   Rev61 TEST — "Image 002" inspired homepage
   Uses the tighter, more editorial composition of the mockup
   while keeping the real site/video/functionality.
   ========================================================= */

body{
  background:#050608!important;
}

/* Cleaner compact header like the mockup. */
.home-header{
  min-height:76px!important;
  padding:0 clamp(28px,4vw,64px)!important;
  background:rgba(4,5,7,.96)!important;
  border-bottom:1px solid rgba(255,255,255,.06)!important;
  backdrop-filter:blur(16px);
}
.home-header .shop-brand img{
  width:34px!important;
  height:34px!important;
}
.home-header .shop-brand b{
  font-size:19px!important;
  letter-spacing:.1px!important;
}
.home-header .shop-brand small{
  font-size:7px!important;
}
.home-nav{
  gap:clamp(22px,2.4vw,38px)!important;
}
.home-nav>a:not(.ebay-mascot){
  font-size:11px!important;
  letter-spacing:1.4px!important;
}

/* Final hero composition after the movie: more like the left side of 002. */
body.home-intro-complete .hero-home{
  min-height:680px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:70px 6vw 60px!important;
  background:
    radial-gradient(circle at 55% 46%,rgba(0,0,0,.03),rgba(0,0,0,.22) 55%,rgba(0,0,0,.78) 100%),
    linear-gradient(90deg,rgba(4,5,7,.82) 0%,rgba(4,5,7,.52) 30%,rgba(4,5,7,.18) 57%,rgba(4,5,7,.38) 100%),
    url('images/home-wall-static-after.webp') center 44%/cover no-repeat!important;
}
body.home-intro-complete .hero-home::after{
  background:
    url('images/ui-dither.png') repeat,
    linear-gradient(180deg,transparent 58%,rgba(5,6,8,.18) 76%,#050608 100%)!important;
  opacity:.24!important;
}

/* Left-aligned content block from 002, but centered as a total composition. */
.hero-home .hero-copy{
  width:min(1160px,92vw)!important;
  margin:0 auto!important;
  padding:0!important;
  align-items:flex-start!important;
  text-align:left!important;
}
.hero-home .hero-copy>.kicker{
  width:auto!important;
  font-size:clamp(12px,1vw,15px)!important;
  letter-spacing:5px!important;
  margin:0 0 18px!important;
  color:#e33a31!important;
  text-align:left!important;
}
.hero-home .hero-lockup{
  justify-content:flex-start!important;
  gap:34px!important;
  margin:0!important;
}
.hero-title-group{
  align-items:flex-start!important;
}
.hero-title-group h1{
  text-align:left!important;
}
.hero-title-group h1 small{
  display:none!important;
}
.hero-title-group h1 b{
  font-family:"Arial Narrow",Bahnschrift Condensed,"Segoe UI",sans-serif!important;
  font-size:clamp(68px,7.2vw,112px)!important;
  letter-spacing:-3px!important;
  line-height:.86!important;
}
.hero-slogan{
  margin-top:20px!important;
  font-size:clamp(20px,1.8vw,30px)!important;
  color:#d8c79d!important;
  font-style:italic;
  letter-spacing:1px!important;
  text-align:left!important;
}
.hero-mark{
  transform:none!important;
  align-self:center;
}
.hero-mark>img{
  width:clamp(180px,16vw,250px)!important;
  height:clamp(180px,16vw,250px)!important;
}
.hero-home .hero-copy>p{
  width:min(560px,90vw)!important;
  margin:30px 0 0!important;
  font-size:clamp(16px,1.2vw,20px)!important;
  line-height:1.6!important;
  text-align:left!important;
  color:#ddd!important;
}
.hero-home .actions{
  width:auto!important;
  justify-content:flex-start!important;
  margin-top:30px!important;
  gap:14px!important;
}
.hero-home .actions .btn{
  min-width:170px!important;
  min-height:48px!important;
  padding:14px 22px!important;
  font-size:11px!important;
}

/* Grail section modeled after 002: image dominated, text tucked to left/right,
   big glass case and soft crowd atmosphere. */
.grail-home{
  display:grid!important;
  grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr)!important;
  min-height:520px!important;
  background:#050608!important;
}
.grail-image{
  min-height:520px!important;
  order:1;
  background:
    linear-gradient(90deg,rgba(5,6,8,.08) 0%,rgba(5,6,8,.04) 60%,rgba(5,6,8,.42) 100%),
    linear-gradient(180deg,transparent 68%,rgba(5,6,8,.42) 100%),
    url('images/grail-home-display.webp') center 45%/cover no-repeat!important;
}
.grail-copy{
  order:2;
  display:flex!important;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:60px clamp(36px,5vw,78px)!important;
  text-align:left!important;
}
.grail-copy::before{
  display:none!important;
}
.grail-copy .kicker{
  margin-bottom:12px!important;
  font-size:11px!important;
  letter-spacing:2.4px!important;
}
.grail-copy h2{
  font-size:clamp(34px,3.3vw,54px)!important;
  line-height:.98!important;
  letter-spacing:-1.6px!important;
  margin:0 0 20px!important;
  max-width:520px;
}
.grail-copy p{
  max-width:520px;
  font-size:15px!important;
  line-height:1.65!important;
  color:#d5d5d5!important;
}
.grail-copy .actions{
  margin-top:24px!important;
}

/* The mockup's slim value proposition bar. */
.home-trust-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  background:#0a0b0d;
  border-top:1px solid rgba(255,255,255,.055);
  border-bottom:1px solid rgba(255,255,255,.055);
  padding:0 clamp(28px,5vw,86px);
}
.home-trust-strip article{
  min-width:0;
  display:flex;
  align-items:center;
  gap:16px;
  padding:24px 28px;
  border-right:1px solid rgba(255,255,255,.055);
}
.home-trust-strip article:last-child{
  border-right:0;
}
.home-trust-strip i{
  flex:0 0 auto;
  color:#e33a31;
  font-size:25px;
}
.home-trust-strip div{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.home-trust-strip strong{
  color:#e33a31;
  font-size:10px;
  letter-spacing:1.8px;
}
.home-trust-strip span{
  color:#c9c9c7;
  font-size:10px;
  line-height:1.4;
}

/* Keep the rest of the homepage below, but make it recede so the new hero/grail
   feel like the designed primary story rather than one of many equal sections. */
.section.fresh{
  padding-top:68px!important;
}
.section,
.bits-home,
.identity,
.signup-home{
  border-color:rgba(255,255,255,.05)!important;
}

@media(max-width:900px){
  .hero-home .hero-copy{
    align-items:center!important;
    text-align:center!important;
  }
  .hero-home .hero-copy>.kicker,
  .hero-title-group,
  .hero-title-group h1,
  .hero-slogan,
  .hero-home .hero-copy>p{
    text-align:center!important;
    align-items:center!important;
  }
  .hero-home .hero-lockup{
    justify-content:center!important;
  }
  .hero-home .actions{
    justify-content:center!important;
  }
  .grail-home{
    grid-template-columns:1fr!important;
  }
  .grail-image{
    min-height:440px!important;
  }
  .grail-copy{
    align-items:center;
    text-align:center!important;
    padding:46px 28px!important;
  }
  .home-trust-strip{
    grid-template-columns:repeat(2,1fr);
  }
  .home-trust-strip article:nth-child(2){
    border-right:0;
  }
}
@media(max-width:560px){
  .hero-home .hero-lockup{
    flex-direction:column!important;
  }
  .hero-title-group h1 b{
    font-size:clamp(54px,16vw,76px)!important;
  }
  .hero-home .hero-copy>p{
    font-size:15px!important;
  }
  .home-trust-strip{
    grid-template-columns:1fr;
  }
  .home-trust-strip article{
    border-right:0!important;
    border-bottom:1px solid rgba(255,255,255,.05);
  }
  .home-trust-strip article:last-child{
    border-bottom:0;
  }
}


/* =========================================================
   Rev62 — Brand-size continuity + textured hero wordmark
   ========================================================= */

.home-header .shop-brand{gap:10px!important;}
.home-header .shop-brand img{width:45px!important;height:45px!important;}
.home-header .shop-brand b{font-size:23px!important;font-weight:900!important;letter-spacing:-.3px!important;}
.home-header .shop-brand small{display:block!important;font-size:9px!important;font-weight:700!important;letter-spacing:.3px!important;margin-top:2px!important;}

.hero-title-group h1{margin:0!important;text-align:left!important;transform:none!important;}
.hero-title-group h1 b{
  display:block!important;
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold","Arial Narrow",sans-serif!important;
  font-size:clamp(62px,6.55vw,100px)!important;
  font-weight:900!important;
  font-style:normal!important;
  line-height:.88!important;
  letter-spacing:1px!important;
  white-space:nowrap!important;
  color:transparent!important;
  background:repeating-linear-gradient(174deg,rgba(255,255,255,1) 0px,rgba(255,255,255,.98) 3px,rgba(217,217,211,.92) 4px,rgba(255,255,255,1) 7px)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:0 2px 0 rgba(255,255,255,.035),0 5px 18px rgba(0,0,0,.52)!important;
}
.hero-title-group h1 b span{
  display:inline!important;
  color:transparent!important;
  background:repeating-linear-gradient(174deg,#e43c34 0px,#d92e28 3px,#a91f1b 4px,#e13a32 7px)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:0 2px 0 rgba(255,92,82,.08),0 5px 18px rgba(0,0,0,.56)!important;
}
.hero-slogan{
  margin-top:16px!important;
  font-family:"Arial Narrow Bold",Bahnschrift Condensed,"Arial Narrow","Segoe UI",sans-serif!important;
  font-size:clamp(15px,1.25vw,20px)!important;
  font-style:normal!important;
  font-weight:800!important;
  letter-spacing:3.2px!important;
  line-height:1!important;
  text-transform:uppercase!important;
  color:#e23a32!important;
  background:none!important;
  -webkit-text-fill-color:currentColor!important;
  text-shadow:0 0 12px rgba(216,41,32,.22),0 2px 8px rgba(0,0,0,.72)!important;
}
.hero-title-group{align-items:flex-start!important;}

@media(max-width:560px){
  .home-header .shop-brand img{width:42px!important;height:42px!important;}
  .home-header .shop-brand b{font-size:19px!important;}
  .home-header .shop-brand small{display:none!important;}
  .hero-title-group h1 b{font-size:clamp(50px,15vw,70px)!important;white-space:normal!important;}
  .hero-slogan{font-size:12px!important;letter-spacing:2.2px!important;}
}


/* =========================================================
   Rev63 TEST — closer match to the split mockup, no new image generation
   ========================================================= */

/* More dramatic mockup-like final hero. */
body.home-intro-complete .hero-home{
  min-height:720px!important;
  background:
    radial-gradient(ellipse 85% 72% at 48% 46%,transparent 0%,rgba(5,6,8,.10) 54%,rgba(5,6,8,.55) 83%,#050608 100%),
    linear-gradient(90deg,rgba(5,6,8,.78) 0%,rgba(5,6,8,.35) 44%,rgba(5,6,8,.20) 66%,rgba(5,6,8,.52) 100%),
    url('images/home-wall-static-after.webp') center 44%/cover no-repeat!important;
}
.hero-home .hero-copy{
  width:min(1220px,92vw)!important;
}
.hero-title-group h1 b{
  font-size:clamp(66px,7vw,108px)!important;
}
.hero-mark>img{
  width:clamp(190px,16.5vw,255px)!important;
  height:clamp(190px,16.5vw,255px)!important;
}

/* "ONLY THE FINEST" section using the previously-generated concept visual. */
.grail-concept-test{
  min-height:520px!important;
  grid-template-columns:minmax(330px,.78fr) minmax(0,1.22fr)!important;
  background:#050608!important;
}
.grail-concept-test .grail-copy{
  order:1!important;
  padding:70px clamp(44px,6vw,92px)!important;
  background:
    linear-gradient(90deg,#050608 0%,rgba(5,6,8,.98) 70%,rgba(5,6,8,.60) 100%)!important;
}
.grail-concept-test .grail-image{
  order:2!important;
  min-height:520px!important;
  background:
    linear-gradient(90deg,rgba(5,6,8,.60) 0%,rgba(5,6,8,.10) 20%,transparent 52%),
    linear-gradient(180deg,transparent 65%,rgba(5,6,8,.38) 100%),
    url('images/grail-concept-display.webp') center 48%/cover no-repeat!important;
}
.grail-concept-test .grail-copy h2{
  font-size:clamp(40px,4vw,62px)!important;
  line-height:.92!important;
  margin:0 0 20px!important;
}
.grail-concept-test .grail-copy p{
  max-width:390px!important;
  font-size:15px!important;
  line-height:1.65!important;
}

/* In-page shop preview — this is the functional interpretation of the
   mockup showing HOME and SHOP side-by-side in one visual. */
.home-shop-preview{
  position:fixed;
  z-index:9999;
  inset:0;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(8px);
  opacity:0;
  visibility:hidden;
  transition:opacity .42s ease,visibility 0s linear .42s;
}
.home-shop-preview[aria-hidden="false"]{
  opacity:1;
  visibility:visible;
  transition-delay:0s;
}
.home-shop-preview-panel{
  position:absolute;
  top:0;
  right:0;
  width:min(760px,56vw);
  height:100%;
  overflow:auto;
  background:
    radial-gradient(circle at 30% 0%,rgba(24,36,46,.28),transparent 28%),
    #07090b;
  border-left:1px solid rgba(255,255,255,.08);
  box-shadow:-40px 0 100px rgba(0,0,0,.72);
  transform:translateX(102%);
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.home-shop-preview[aria-hidden="false"] .home-shop-preview-panel{
  transform:translateX(0);
}
.home-shop-preview-head{
  position:sticky;
  top:0;
  z-index:3;
  height:72px;
  padding:0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(5,7,9,.96);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.home-shop-preview-head div{
  display:flex;
  align-items:baseline;
  gap:10px;
}
.home-shop-preview-head span{
  color:#fff;
  font-size:13px;
  font-weight:900;
}
.home-shop-preview-head strong{
  color:#e33a31;
  font-size:13px;
  letter-spacing:1px;
}
.home-shop-preview-head button{
  width:42px;height:42px;
  border:1px solid rgba(255,255,255,.14);
  background:#0a0c0f;
  color:#fff;
  font-size:24px;
  cursor:pointer;
}
.home-shop-preview-body{
  padding:34px 30px 54px;
}
.preview-section-head small{
  display:block;
  color:#e33a31;
  font-size:9px;
  font-weight:800;
  letter-spacing:1.8px;
}
.preview-section-head h2{
  margin:5px 0 16px;
  color:#fff;
  font-size:30px;
}
.preview-universe-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px;
}
.preview-universe-grid a{
  aspect-ratio:1.25/1;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:#080a0d;
}
.preview-universe-grid img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .32s ease,filter .32s ease;
}
.preview-universe-grid a:hover img{
  transform:scale(1.035);
  filter:brightness(1.08);
}
.preview-featured-head{
  margin-top:34px;
}
.preview-concept-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}
.preview-concept-grid article{
  padding:7px 7px 10px;
  border:1px solid rgba(255,255,255,.09);
  background:#090b0e;
}
.preview-concept-grid img{
  width:100%;
  aspect-ratio:.72/1;
  object-fit:cover;
  display:block;
  margin-bottom:9px;
}
.preview-concept-grid b{
  display:block;
  color:#eee;
  font-size:10px;
  letter-spacing:.6px;
}
.preview-concept-grid span{
  display:block;
  color:#e33a31;
  font-size:8px;
  margin-top:4px;
}
.preview-open-full{
  margin-top:26px;
}
body.shop-preview-open{
  overflow:hidden;
}

@media(max-width:900px){
  .home-shop-preview-panel{width:min(680px,84vw);}
}
@media(max-width:620px){
  .home-shop-preview-panel{width:100%;}
  .preview-universe-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .preview-concept-grid{grid-template-columns:1fr 1fr;}
  .grail-concept-test{grid-template-columns:1fr!important;}
  .grail-concept-test .grail-copy,
  .grail-concept-test .grail-image{order:initial!important;}
}


/* =========================================================
   Rev64 — Hero typography + smaller intro film + Fresh shelf cleanup
   ========================================================= */

/* Pull the intro movie in one more notch without changing its behavior. */
.hero-home .home-reveal-stage{
  top:28px!important;
  left:12%!important;
  right:12%!important;
  inset:28px 12% auto 12%!important;
}

/* Match the mockup's tall, distressed collector-box lettering more closely:
   upright, condensed, rough printed texture, white BACON / red BIN. */
.hero-title-group h1 b{
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold","Franklin Gothic Condensed","Arial Narrow",sans-serif!important;
  font-size:clamp(59px,6.15vw,94px)!important;
  font-weight:900!important;
  font-style:normal!important;
  line-height:.88!important;
  letter-spacing:.6px!important;
  transform:none!important;
  color:transparent!important;
  background:
    radial-gradient(circle at 18% 24%,rgba(28,28,28,.40) 0 1px,transparent 1.5px),
    radial-gradient(circle at 72% 64%,rgba(20,20,20,.34) 0 1px,transparent 1.6px),
    repeating-linear-gradient(176deg,
      #f4f2ed 0px,#f4f2ed 3px,
      #d8d5cf 4px,
      #f5f3ee 7px)!important;
  background-size:13px 11px,17px 15px,auto!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:
    3px 4px 0 rgba(0,0,0,.46),
    7px 8px 18px rgba(0,0,0,.62)!important;
}
.hero-title-group h1 b span{
  background:
    radial-gradient(circle at 22% 32%,rgba(51,0,0,.42) 0 1px,transparent 1.5px),
    radial-gradient(circle at 68% 70%,rgba(59,0,0,.32) 0 1px,transparent 1.6px),
    repeating-linear-gradient(176deg,
      #ef4339 0px,#dc332c 3px,
      #a91f1b 4px,
      #e53b33 7px)!important;
  background-size:13px 11px,17px 15px,auto!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:
    3px 4px 0 rgba(49,0,0,.42),
    7px 8px 18px rgba(0,0,0,.62)!important;
}

/* Keep the slogan upright, but give it the same rough printed family. */
.hero-slogan{
  font-family:"Arial Narrow Bold",Bahnschrift Condensed,"Franklin Gothic Condensed","Arial Narrow",sans-serif!important;
  font-size:clamp(14px,1.12vw,18px)!important;
  font-style:normal!important;
  font-weight:900!important;
  letter-spacing:2.8px!important;
  color:#e33a31!important;
  text-shadow:3px 3px 0 rgba(0,0,0,.44),0 0 13px rgba(216,41,32,.20)!important;
}

/* Return the top line to white and give it a deliberate angled offset shadow. */
.hero-home .hero-copy>.kicker{
  color:#f1f0ec!important;
  font-weight:800!important;
  text-shadow:
    3px 3px 0 rgba(180,24,20,.72),
    6px 6px 12px rgba(0,0,0,.56)!important;
}

/* Fresh From The Bin should feel like a dark collector shelf, not a white strip. */
.section.fresh{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 14% 18%,rgba(110,20,18,.075),transparent 26%),
    linear-gradient(180deg,#090b0e 0%,#07090b 48%,#050608 100%)!important;
  border-top:1px solid rgba(255,255,255,.055)!important;
  border-bottom:1px solid rgba(255,255,255,.04)!important;
}
.section.fresh::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.012) 1px,transparent 1px);
  background-size:28px 28px;
  opacity:.20;
}
.section.fresh .section-head,
.section.fresh .product-row{
  position:relative;
  z-index:1;
}
.section.fresh .product-row{
  align-items:stretch!important;
}
.section.fresh .home-product,
.section.fresh .teaser{
  min-height:350px!important;
  background:
    linear-gradient(180deg,#0d1014 0%,#090b0e 100%)!important;
  border:1px solid rgba(255,255,255,.085)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.20)!important;
}
.section.fresh .home-product>a{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:250px!important;
  padding:18px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 50% 48%,rgba(255,255,255,.075),transparent 58%),
    #080a0d!important;
  border-bottom:1px solid rgba(255,255,255,.055)!important;
}
.section.fresh .home-product img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  background:transparent!important;
  /* This makes the listing's white photography backdrop dissolve into the
     dark display well instead of reading as a giant white horizontal bar. */
  mix-blend-mode:darken;
  filter:contrast(1.06) saturate(1.04) brightness(.97);
}
.section.fresh .home-product .info{
  padding:18px 20px 20px!important;
  background:linear-gradient(180deg,#0b0d10,#080a0c)!important;
}
.section.fresh .teaser{
  justify-content:flex-end!important;
  background:
    linear-gradient(0deg,rgba(6,7,9,.96),rgba(6,7,9,.35)),
    url('images/red-showcase.webp') center/cover!important;
}

/* High-resolution desktop: keep the movie reduction proportional. */
@media(min-width:1500px){
  .hero-home .home-reveal-stage{
    left:13%!important;
    right:13%!important;
    inset:30px 13% auto 13%!important;
  }
}
@media(max-width:900px){
  .hero-home .home-reveal-stage{
    top:18px!important;
    left:8%!important;
    right:8%!important;
    inset:18px 8% auto 8%!important;
  }
}
@media(max-width:560px){
  .hero-home .home-reveal-stage{
    top:12px!important;
    left:4%!important;
    right:4%!important;
    inset:12px 4% auto 4%!important;
  }
  .hero-title-group h1 b{
    font-size:clamp(48px,14.5vw,68px)!important;
  }
}


/* =========================================================
   Rev65 — Cleaner hero type + sharper Grail centerpiece
   ========================================================= */

/* Large THE BACON BIN: lighter, cleaner, no distressed texture. */
.hero-title-group h1 b{
  font-family:Bahnschrift Condensed,"Arial Narrow","Franklin Gothic Condensed","Segoe UI",sans-serif!important;
  font-size:clamp(58px,6vw,92px)!important;
  font-weight:700!important;
  font-style:normal!important;
  line-height:.90!important;
  letter-spacing:.2px!important;
  color:#f2f2ef!important;
  background:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:currentColor!important;
  text-shadow:none!important;
}
.hero-title-group h1 b span{
  color:#df352e!important;
  background:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:currentColor!important;
  text-shadow:none!important;
}

/* COLLECTIBLES • TOYS • THE GOOD STUFF: plain white, no offset shadow. */
.hero-home .hero-copy>.kicker{
  color:#f3f2ee!important;
  text-shadow:none!important;
  font-weight:700!important;
}

/* Keep the upright slogan but make it slightly cleaner/lighter as well. */
.hero-slogan{
  font-weight:700!important;
  letter-spacing:2.5px!important;
  text-shadow:0 0 10px rgba(216,41,32,.16)!important;
}

/* Replace the Grail image with the sharper fictional boxed character concept. */
.grail-concept-test .grail-image{
  min-height:560px!important;
  background:
    linear-gradient(90deg,
      rgba(5,6,8,.72) 0%,
      rgba(5,6,8,.24) 15%,
      rgba(5,6,8,.04) 42%,
      rgba(5,6,8,.04) 78%,
      rgba(5,6,8,.26) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,.05) 0%,
      transparent 66%,
      rgba(5,6,8,.34) 100%),
    url('images/grail-shadow-strike-sharp.webp') center 49%/cover no-repeat!important;
}
.grail-concept-test .grail-image::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 76% 78% at 55% 48%,
      transparent 0%,
      transparent 58%,
      rgba(0,0,0,.10) 77%,
      rgba(0,0,0,.38) 100%);
}
.grail-concept-test{
  min-height:560px!important;
}

/* Keep the Grail copy crisp beside the brighter display image. */
.grail-concept-test .grail-copy{
  background:
    linear-gradient(90deg,#050608 0%,rgba(5,6,8,.985) 72%,rgba(5,6,8,.64) 100%)!important;
}
.grail-concept-test .grail-copy h2{
  color:#f2f2ef!important;
  font-weight:700!important;
  text-shadow:none!important;
}

@media(max-width:900px){
  .grail-concept-test .grail-image{
    min-height:470px!important;
    background-position:center 48%!important;
  }
}
@media(max-width:560px){
  .hero-title-group h1 b{
    font-size:clamp(46px,14vw,66px)!important;
  }
  .grail-concept-test .grail-image{
    min-height:400px!important;
  }
}


/* =========================================================
   Rev66 — Repair April preview + compact product-page polish
   ========================================================= */

/* Undo the Rev64 blend mode that blacked out April O'Neil. */
.section.fresh .home-product img{
  mix-blend-mode:normal!important;
  filter:none!important;
  object-fit:contain!important;
  background:#f4f4f1!important;
  border-radius:2px;
}

/* Rather than turning the whole card into a white bar, frame the actual
   product photo in a smaller neutral display well inside the dark card. */
.section.fresh .home-product>a{
  height:255px!important;
  padding:20px 28px!important;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.06),transparent 62%),
    #080a0d!important;
}
.section.fresh .home-product>a img{
  width:auto!important;
  max-width:88%!important;
  height:100%!important;
  max-height:215px!important;
  margin:auto!important;
  box-shadow:0 8px 24px rgba(0,0,0,.30);
}


/* =========================================================
   Rev69 — Intro video portrait/mobile refinement
   ========================================================= */

/* Desktop: move the cinematic intro down noticeably, while keeping
   the same centered, slightly inset presentation. */
.hero-home .home-reveal-stage{
  top:86px!important;
  inset:86px 12% auto 12%!important;
}

/* Tablet / portrait: make the video window taller so it feels intentional
   instead of like a wide landscape strip floating in a tall screen. */
@media(max-width:900px){
  .hero-home .home-reveal-stage{
    top:96px!important;
    left:6%!important;
    right:6%!important;
    inset:96px 6% auto 6%!important;
    aspect-ratio:4/3!important;
  }
  .hero-home .home-reveal-video{
    object-fit:cover!important;
    object-position:52% 50%!important;
  }
}

/* Mobile portrait: substantially taller cinematic frame.
   The original video is cropped rather than geometrically distorted. */
@media(max-width:600px) and (orientation:portrait){
  .hero-home{
    min-height:100svh!important;
  }
  .hero-home .home-reveal-stage{
    top:112px!important;
    left:3%!important;
    right:3%!important;
    inset:112px 3% auto 3%!important;
    width:auto!important;
    height:min(67svh,760px)!important;
    aspect-ratio:auto!important;
    border-radius:10px!important;
  }
  .hero-home .home-reveal-video{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:53% 50%!important;
  }
}

/* Very narrow phones: keep enough breathing room below the header
   without letting the intro dominate the entire page. */
@media(max-width:420px) and (orientation:portrait){
  .hero-home .home-reveal-stage{
    top:118px!important;
    inset:118px 2.5% auto 2.5%!important;
    height:64svh!important;
  }
}


/* Rev71 — homepage legibility refinement */
.home-nav{
  gap:clamp(23px,2.5vw,40px)!important;
}
.home-nav>a:not(.ebay-mascot),
.home-categories>summary{
  font-size:12px!important;
  letter-spacing:1.45px!important;
}
.home-header .shop-brand small{
  font-size:10px!important;
}
.hero-home .hero-copy>.kicker{
  font-size:clamp(13px,1.05vw,16px)!important;
}
.hero-copy p{
  font-size:clamp(16px,1.15vw,18px)!important;
  line-height:1.6!important;
}
.section-head p,
.grail-copy p{
  font-size:15px!important;
  line-height:1.62!important;
}
.section .kicker,
.grail-copy .kicker{
  font-size:10px!important;
}
.home-product small,
.teaser .kicker{
  font-size:9px!important;
}
.home-product .price{
  font-size:15px!important;
}
@media(max-width:620px){
  .home-nav>a:not(.ebay-mascot),
  .home-categories>summary{
    font-size:12px!important;
  }
  .section-head p,
  .grail-copy p{
    font-size:14px!important;
  }
}


/* =========================================================
   Rev86 — mobile quick-Shop cleanup + touch animation previews
   ========================================================= */

/* Use the actual Shop By Universe art ratio everywhere in the slide-over. */
.preview-universe-grid{
  gap:12px!important;
}
.preview-universe-grid a{
  position:relative!important;
  aspect-ratio:344/206!important;
  overflow:hidden!important;
  padding:0!important;
  background:#050608!important;
  border:1px solid rgba(255,255,255,.085)!important;
  border-radius:3px!important;
}
.preview-universe-grid img,
.preview-universe-video{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center!important;
  margin:0!important;
  padding:0!important;
  border-radius:0!important;
}
.preview-universe-grid img{
  z-index:1!important;
}
.preview-universe-video{
  z-index:2!important;
  opacity:0;
  pointer-events:none;
  transition:opacity .16s linear;
  transform:translateZ(0);
  background:#050608;
}
.preview-universe-grid a:hover .preview-universe-video,
.preview-universe-grid a:focus-visible .preview-universe-video{
  opacity:1;
}
.preview-universe-grid a:hover img,
.preview-universe-grid a:focus-visible img{
  opacity:0;
}

/* Desktop hover videos use the same seamless poster/video behavior. */
@media(hover:hover) and (pointer:fine){
  .preview-universe-grid a[data-touch-animate] img{
    transition:opacity .16s linear;
  }
}

/* Mobile quick-shop reflow. */
@media(max-width:620px){
  .home-shop-preview{
    backdrop-filter:blur(4px)!important;
  }

  .home-shop-preview-panel{
    width:100%!important;
    max-width:none!important;
    border-left:0!important;
  }

  .home-shop-preview-head{
    height:62px!important;
    padding:0 17px!important;
  }

  .home-shop-preview-head div{
    gap:7px!important;
  }

  .home-shop-preview-head span,
  .home-shop-preview-head strong{
    font-size:11px!important;
    letter-spacing:.5px!important;
  }

  .home-shop-preview-head button{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    padding:0!important;
    font-size:23px!important;
    line-height:1!important;
    border-color:rgba(255,255,255,.16)!important;
    background:#090b0e!important;
  }

  .home-shop-preview-body{
    padding:26px 18px 42px!important;
  }

  .preview-section-head small{
    font-size:8px!important;
    letter-spacing:1.45px!important;
  }

  .preview-section-head h2{
    margin:5px 0 15px!important;
    font-size:clamp(25px,8vw,33px)!important;
    line-height:1!important;
    letter-spacing:-.02em!important;
  }

  /* Two clean wide tiles, not square/cropped cards. */
  .preview-universe-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  .preview-universe-grid a{
    aspect-ratio:344/206!important;
    min-width:0!important;
  }

  .preview-universe-grid img,
  .preview-universe-video{
    object-fit:cover!important;
  }

  /* Touch interaction: first tap previews, second tap navigates. */
  .preview-universe-grid a[data-touch-animate] img{
    transition:opacity .16s linear!important;
  }
  .preview-universe-grid a[data-touch-animate].touch-preview-active img{
    opacity:0!important;
  }
  .preview-universe-grid a[data-touch-animate].touch-preview-active .preview-universe-video{
    opacity:1!important;
  }

  .touch-preview-hint{
    position:absolute;
    z-index:4;
    left:50%;
    bottom:6px;
    transform:translateX(-50%) translateY(4px);
    max-width:calc(100% - 12px);
    padding:4px 7px;
    border-radius:2px;
    background:rgba(3,5,7,.78);
    color:rgba(255,255,255,.88);
    font:800 7px/1 Arial,sans-serif;
    letter-spacing:.7px;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease,transform .18s ease;
  }
  .touch-preview-active .touch-preview-hint{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }

  /* Give the section room above the iPhone bottom browser chrome. */
  .preview-open-full{
    margin-top:22px!important;
    min-height:44px!important;
  }
}

@media(max-width:380px){
  .home-shop-preview-body{
    padding-left:14px!important;
    padding-right:14px!important;
  }
  .preview-universe-grid{
    gap:8px!important;
  }
  .preview-section-head h2{
    font-size:27px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .preview-universe-video{
    display:none!important;
  }
  .touch-preview-hint{
    display:none!important;
  }
}


/* =========================================================
   Rev87 — Intro video/final reveal precision centering
   ========================================================= */

/* The processed video now finishes with the Bat Pig reveal geometrically
   centered. Keep the browser crop centered too, especially on portrait phones. */
.hero-home .home-reveal-video{
  object-position:50% 50%!important;
}

/* Explicitly maintain symmetrical frame geometry at each responsive size. */
.hero-home .home-reveal-stage{
  margin-left:auto!important;
  margin-right:auto!important;
}

@media(max-width:900px){
  .hero-home .home-reveal-video{
    object-position:50% 50%!important;
  }
}

@media(max-width:600px) and (orientation:portrait){
  .hero-home .home-reveal-stage{
    left:3%!important;
    right:3%!important;
    inset:112px 3% auto 3%!important;
  }
  .hero-home .home-reveal-video{
    object-position:50% 50%!important;
  }
}

@media(max-width:420px) and (orientation:portrait){
  .hero-home .home-reveal-stage{
    left:2.5%!important;
    right:2.5%!important;
    inset:118px 2.5% auto 2.5%!important;
  }
}

/* =========================================================
   Rev153 — richer homepage cinema + useful after-hours content
   ========================================================= */
body{background:#000!important}
.hero-home{background-color:#000!important}

/* Let the intro film feel like atmosphere rather than a rectangular player. */
.hero-home .home-reveal-stage{
  top:112px!important;
  left:6%!important;
  right:6%!important;
  inset:112px 6% auto 6%!important;
  border-radius:34px!important;
  overflow:visible!important;
  -webkit-mask-image:radial-gradient(ellipse 88% 84% at 50% 49%,#000 0 54%,rgba(0,0,0,.98) 64%,rgba(0,0,0,.76) 76%,rgba(0,0,0,.36) 87%,rgba(0,0,0,.10) 94%,transparent 100%)!important;
  mask-image:radial-gradient(ellipse 88% 84% at 50% 49%,#000 0 54%,rgba(0,0,0,.98) 64%,rgba(0,0,0,.76) 76%,rgba(0,0,0,.36) 87%,rgba(0,0,0,.10) 94%,transparent 100%)!important;
  filter:drop-shadow(0 32px 70px rgba(0,0,0,.56))!important;
}
.hero-home .home-reveal-stage::before{
  background:
    radial-gradient(ellipse 82% 76% at 50% 49%,transparent 0 58%,rgba(0,0,0,.10) 70%,rgba(0,0,0,.42) 86%,#000 100%),
    linear-gradient(180deg,rgba(0,0,0,.18) 0%,transparent 22%,transparent 72%,rgba(0,0,0,.48) 93%,#000 100%)!important;
}
.hero-home .home-reveal-stage::after{
  background:
    url('images/ui-dither.png') repeat,
    radial-gradient(ellipse 88% 82% at 50% 48%,transparent 0 60%,rgba(0,0,0,.06) 72%,rgba(0,0,0,.32) 88%,rgba(0,0,0,.70) 100%)!important;
  opacity:.48!important;
}
.hero-home .home-reveal-video{
  filter:brightness(.78) contrast(1.18) saturate(1.16) sepia(.025)!important;
  transform:scale(1.035) translateZ(0)!important;
}
body.home-intro-complete .hero-home{
  background:
    radial-gradient(ellipse 84% 72% at 52% 46%,transparent 0 48%,rgba(0,0,0,.18) 68%,rgba(0,0,0,.70) 89%,#000 100%),
    linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.73) 23%,rgba(0,0,0,.30) 49%,rgba(0,0,0,.36) 72%,rgba(0,0,0,.76) 100%),
    url('images/home-wall-static-after.webp') center 47%/cover no-repeat!important;
}

/* Replace the old bottom-page filler with a live collector dashboard. */
.home-signal-zone{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 14% 6%,rgba(191,36,31,.12),transparent 24%),
    radial-gradient(circle at 84% 58%,rgba(20,70,92,.10),transparent 28%),
    linear-gradient(180deg,#030405 0%,#000 100%)!important;
  border-top:1px solid rgba(255,255,255,.055);
}
.home-signal-zone::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;
  background:linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(0deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:32px 32px;
}
.home-signal-head,.home-signal-grid,.home-first-dibs{position:relative;z-index:1}
.home-signal-head h2,
.section-head h2,
.grail-copy h2{
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",Bahnschrift Condensed,"Arial Narrow",sans-serif!important;
  font-weight:900!important;
  text-transform:uppercase;
  letter-spacing:.015em!important;
  line-height:.88!important;
  background:linear-gradient(180deg,#fff 0%,#e9e6df 56%,#92969d 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 7px 30px rgba(0,0,0,.38);
}
.home-signal-grid{display:grid;grid-template-columns:1.2fr .92fr .78fr;gap:14px}
.home-signal-card{
  min-height:420px;border:1px solid rgba(255,255,255,.09);background:#080a0d;position:relative;overflow:hidden;padding:28px;
  box-shadow:0 22px 60px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.025);
}
.home-signal-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(130deg,rgba(255,255,255,.025),transparent 36%)}
.home-signal-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:22px;position:relative;z-index:2}
.home-signal-card h3{margin:5px 0 0;font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;font-size:clamp(28px,2.7vw,43px);line-height:.92;letter-spacing:.03em;color:#f4f2ed}
.home-live-dot{width:10px;height:10px;border-radius:50%;background:#e13a32;box-shadow:0 0 0 6px rgba(225,58,50,.10),0 0 18px rgba(225,58,50,.68);animation:bbHomePulse 1.9s ease-in-out infinite;margin-top:8px}
@keyframes bbHomePulse{50%{box-shadow:0 0 0 10px rgba(225,58,50,0),0 0 26px rgba(225,58,50,.82)}}
.home-wire-card{background:linear-gradient(180deg,rgba(8,10,13,.95),rgba(3,4,6,.98)),url('images/bits-header.png') center/cover}
.home-wire-list{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.08)}
.home-wire-item{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:14px 2px;border-bottom:1px solid rgba(255,255,255,.07);text-decoration:none;color:#eceae4;transition:background .18s ease,padding .18s ease}
.home-wire-item:hover{background:rgba(255,255,255,.025);padding-left:8px;padding-right:8px}
.home-wire-item small{grid-column:1;color:#e44840;font-size:8px;font-weight:900;letter-spacing:.7px;text-transform:uppercase}
.home-wire-item b{grid-column:1;font-size:13px;line-height:1.35;font-weight:800}
.home-wire-item span{grid-column:2;grid-row:1/3;align-self:center;color:#858b93;font-size:17px}
.home-wire-placeholder{padding:28px 0;color:#777e86;font-size:10px;font-weight:900;letter-spacing:1.1px}
.home-signal-link{position:relative;z-index:2;display:inline-block;margin-top:20px;color:#f1eee7;font-size:9px;font-weight:900;letter-spacing:1.2px;text-decoration:none}.home-signal-link span{color:#e23a33}
.home-maze-card{display:flex;align-items:flex-end;background:linear-gradient(180deg,rgba(0,5,8,.05),rgba(0,3,5,.94) 76%),radial-gradient(circle at 48% 22%,rgba(0,221,255,.24),transparent 24%),linear-gradient(115deg,#06161a,#020608 62%,#000)}
.home-maze-card::before{content:"";position:absolute;inset:-8%;background:repeating-linear-gradient(90deg,transparent 0 78px,rgba(41,232,255,.055) 79px 80px),repeating-linear-gradient(0deg,transparent 0 52px,rgba(41,232,255,.04) 53px 54px);transform:perspective(720px) rotateX(54deg) translateY(-20%);transform-origin:center top;opacity:.62}
.home-maze-copy{position:relative;z-index:2;max-width:430px}.home-maze-copy .kicker{color:#6eeeff!important}.home-maze-copy h3{font-size:clamp(38px,4vw,62px);color:#e9fdff;text-shadow:0 0 22px rgba(68,229,255,.16)}.home-maze-copy p{color:#a9bbc0;line-height:1.55;font-size:13px;margin:16px 0 24px}.home-maze-copy .btn{display:inline-block}
.home-event-card{background:radial-gradient(circle at 90% 9%,rgba(216,41,32,.16),transparent 26%),linear-gradient(180deg,#0d0d0f,#050506)}
.home-event-card .fa-satellite-dish{font-size:25px;color:#d83b34;filter:drop-shadow(0 0 14px rgba(216,59,52,.28))}
.home-event-wire{position:relative;z-index:2;padding:24px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.home-event-wire small{display:block;color:#8d949c;font-size:8px;font-weight:900;letter-spacing:.8px;margin-bottom:10px}.home-event-wire b,.home-event-wire a{display:block;color:#f2f0e9;text-decoration:none;font-size:17px;line-height:1.35;font-weight:800}.home-event-wire a:hover{color:#fff}
.home-event-actions{position:relative;z-index:2;display:flex;gap:18px;flex-wrap:wrap;margin-top:22px}.home-event-actions a{color:#d2d0ca;text-decoration:none;font-size:9px;font-weight:900;letter-spacing:1px}.home-event-actions a:hover{color:#e53d35}
.home-first-dibs{margin-top:14px;display:grid;grid-template-columns:1fr minmax(360px,.8fr);gap:34px;align-items:center;padding:28px 30px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(90deg,#08090b,rgba(15,6,6,.98))}.home-first-dibs h3{font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;font-size:29px;letter-spacing:.035em;margin:5px 0;color:#f4f1eb}.home-first-dibs p{color:#8e949c;margin:0;font-size:12px}.home-first-dibs form{display:flex}.home-first-dibs input{min-width:0;flex:1;border:1px solid #34363b;border-right:0;background:#030405;color:#fff;padding:14px 15px}.home-first-dibs button{border:0;background:#d9342d;color:#fff;font-size:9px;font-weight:900;letter-spacing:1px;padding:0 18px;cursor:pointer}

@media(max-width:980px){
  .hero-home .home-reveal-stage{top:108px!important;inset:108px 3.5% auto 3.5%!important}
  .home-signal-grid{grid-template-columns:1fr 1fr}.home-wire-card{grid-column:1/-1}.home-first-dibs{grid-template-columns:1fr}
}
@media(max-width:620px){
  .hero-home .home-reveal-stage{top:122px!important;inset:122px 1.5% auto 1.5%!important;border-radius:20px!important;-webkit-mask-image:radial-gradient(ellipse 94% 86% at 50% 48%,#000 0 60%,rgba(0,0,0,.72) 80%,rgba(0,0,0,.18) 93%,transparent 100%)!important;mask-image:radial-gradient(ellipse 94% 86% at 50% 48%,#000 0 60%,rgba(0,0,0,.72) 80%,rgba(0,0,0,.18) 93%,transparent 100%)!important}
  .hero-home .home-reveal-video{filter:brightness(.74) contrast(1.14) saturate(1.10)!important;transform:scale(1.02) translateZ(0)!important}
  .home-signal-grid{grid-template-columns:1fr}.home-wire-card{grid-column:auto}.home-signal-card{min-height:360px;padding:22px}.home-first-dibs{padding:22px}.home-first-dibs form{display:grid;grid-template-columns:1fr}.home-first-dibs input{border-right:1px solid #34363b}.home-first-dibs button{padding:14px 16px}
}
@media(prefers-reduced-motion:reduce){.home-live-dot{animation:none}}

/* Rev153 — homepage hero wordmark joins the new display family. */
.hero-title-group h1 b{
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",Bahnschrift Condensed,"Franklin Gothic Condensed","Arial Narrow",sans-serif!important;
  font-weight:900!important;
  letter-spacing:.018em!important;
  background:linear-gradient(180deg,#fff 0%,#f0ede6 55%,#a1a5ab 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  text-shadow:0 4px 0 rgba(0,0,0,.56),0 14px 38px rgba(0,0,0,.34)!important;
}
.hero-title-group h1 b span{
  background:linear-gradient(180deg,#f24b42 0%,#da342d 58%,#9f1c18 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  text-shadow:0 4px 0 rgba(48,0,0,.50),0 0 24px rgba(220,50,44,.12)!important;
}
.hero-title-group h1 small{font-family:Bahnschrift Condensed,"Arial Narrow",sans-serif!important;font-weight:800!important;letter-spacing:.20em!important}

/* =========================================================
   Rev154 — homepage wordmark pulled back from Rev153 heavy display type
   ========================================================= */
.hero-title-group h1 b{
  font-family:"Segoe UI Variable Display","Aptos Display","Helvetica Neue","Century Gothic",Arial,sans-serif!important;
  font-weight:620!important;
  letter-spacing:-.038em!important;
  background:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:#f5f3ee!important;
  color:#f5f3ee!important;
  text-shadow:0 12px 34px rgba(0,0,0,.50),0 0 1px rgba(255,255,255,.16)!important;
}
.hero-title-group h1 b span{
  font-weight:650!important;
  background:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:#df3932!important;
  color:#df3932!important;
  text-shadow:0 10px 30px rgba(0,0,0,.52),0 0 17px rgba(223,57,50,.10)!important;
}
.hero-title-group h1 small{
  font-family:"Segoe UI Variable Text","Aptos","Helvetica Neue",Arial,sans-serif!important;
  font-weight:520!important;
  letter-spacing:.16em!important;
}


/* =========================================================
   Rev155 — homepage heading cleanup
   Match the clean FEATURED FROM THE BIN type and stop section headings
   from overwhelming the actual products/content.
   ========================================================= */
.hero-title-group h1 b,
.hero-title-group h1 b span,
.hero-title-group h1 small,
.section-head h2,
.grail-copy h2,
.home-signal-head h2,
.home-signal-card h3,
.home-first-dibs h3,
.preview-section-head h2,
.home-product h3,
.teaser h3{
  font-family:Arial,Helvetica,sans-serif!important;
  font-style:normal!important;
  text-transform:none!important;
  letter-spacing:0!important;
  background:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  text-shadow:none!important;
}
.hero-title-group h1 b{
  font-weight:700!important;
  -webkit-text-fill-color:#f5f3ee!important;
  color:#f5f3ee!important;
}
.hero-title-group h1 b span{
  font-weight:700!important;
  -webkit-text-fill-color:#df3932!important;
  color:#df3932!important;
}
.hero-title-group h1 small{font-weight:700!important}
.section-head h2,
.home-signal-head h2{
  font-size:clamp(28px,3vw,36px)!important;
  line-height:1.08!important;
  font-weight:700!important;
  -webkit-text-fill-color:#fff!important;
  color:#fff!important;
}
/* The two headings called out specifically: keep them confident, not billboard-sized. */
.fresh .section-head h2{font-size:clamp(28px,2.7vw,34px)!important}
.grail-concept-test .grail-copy h2,
.grail-copy h2{
  font-size:clamp(30px,3.2vw,40px)!important;
  line-height:1.05!important;
  font-weight:700!important;
  -webkit-text-fill-color:#fff!important;
  color:#fff!important;
  margin:9px 0 15px!important;
}
.home-signal-card h3{font-weight:700!important;letter-spacing:0!important}
.home-maze-copy h3{font-size:clamp(30px,3vw,44px)!important;line-height:1.02!important}
.home-first-dibs h3{font-size:26px!important;font-weight:700!important}
.preview-section-head h2{font-size:30px!important;font-weight:700!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
@media(max-width:560px){
  .section-head h2,.home-signal-head h2{font-size:29px!important}
  .grail-concept-test .grail-copy h2,.grail-copy h2{font-size:32px!important}
}

/* =========================================================
   Rev159 — softer top feather for the homepage cinematic
   ========================================================= */
.hero-home{background-color:#000!important}
.hero-home .home-reveal-stage::before{
  background:
    linear-gradient(180deg,#000 0%,rgba(0,0,0,.92) 3%,rgba(0,0,0,.60) 9%,rgba(0,0,0,.24) 16%,transparent 26%,transparent 72%,rgba(0,0,0,.48) 90%,#000 100%),
    radial-gradient(ellipse 82% 76% at 50% 49%,transparent 0 58%,rgba(0,0,0,.10) 70%,rgba(0,0,0,.44) 86%,#000 100%)!important;
}
.hero-home .home-reveal-stage::after{
  background:
    url('images/ui-dither.png') repeat,
    linear-gradient(90deg,#000 0%,rgba(0,0,0,.48) 6%,transparent 19%,transparent 81%,rgba(0,0,0,.48) 94%,#000 100%),
    radial-gradient(ellipse 88% 82% at 50% 48%,transparent 0 60%,rgba(0,0,0,.06) 72%,rgba(0,0,0,.34) 88%,rgba(0,0,0,.76) 100%)!important;
  opacity:.54!important;
}
@media(max-width:620px){.hero-home .home-reveal-stage::before{background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.84) 5%,rgba(0,0,0,.30) 14%,transparent 24%,transparent 72%,rgba(0,0,0,.56) 91%,#000 100%)!important}}

/* Rev173 — main-page title type only. Prefer locally activated ITC Serif Gothic Bold (e.g. Adobe Fonts desktop activation) without bundling font files. */
@font-face{
  font-family:"BB ITC Serif Gothic";
  src:local("ITC Serif Gothic Std Bold"),local("ITC Serif Gothic Bold"),local("Serif Gothic Bold"),local("ITC Serif Gothic");
  font-style:normal;
  font-weight:700;
  font-display:swap;
}
.hero-title-group h1 b{
  font-family:"BB ITC Serif Gothic","ITC Serif Gothic Std","ITC Serif Gothic","Serif Gothic","Bookman Old Style",Georgia,serif!important;
  font-weight:700!important;
  letter-spacing:-.035em!important;
}

/* =========================================================
   Rev180 — current inventory homepage + cleaner cinematic.
   ========================================================= */
/* Softer, cleaner movie: remove the old dither/noise overlay and feather all four sides. */
.hero-home .home-reveal-stage{
  left:7.5%!important;right:7.5%!important;inset:112px 7.5% auto 7.5%!important;
  overflow:visible!important;border-radius:28px!important;
  -webkit-mask-image:radial-gradient(ellipse 84% 80% at 50% 49%,#000 0 52%,rgba(0,0,0,.98) 61%,rgba(0,0,0,.78) 73%,rgba(0,0,0,.40) 84%,rgba(0,0,0,.12) 93%,transparent 100%)!important;
  mask-image:radial-gradient(ellipse 84% 80% at 50% 49%,#000 0 52%,rgba(0,0,0,.98) 61%,rgba(0,0,0,.78) 73%,rgba(0,0,0,.40) 84%,rgba(0,0,0,.12) 93%,transparent 100%)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.72)!important;
}
.hero-home .home-reveal-stage::before{
  background:
    linear-gradient(90deg,#000 0%,rgba(0,0,0,.78) 3%,rgba(0,0,0,.34) 10%,transparent 20%,transparent 80%,rgba(0,0,0,.34) 90%,rgba(0,0,0,.78) 97%,#000 100%),
    linear-gradient(180deg,#000 0%,rgba(0,0,0,.72) 4%,rgba(0,0,0,.28) 12%,transparent 23%,transparent 75%,rgba(0,0,0,.34) 88%,rgba(0,0,0,.82) 97%,#000 100%)!important;
}
.hero-home .home-reveal-stage::after{
  background:radial-gradient(ellipse 86% 80% at 50% 49%,transparent 0 58%,rgba(0,0,0,.055) 72%,rgba(0,0,0,.26) 87%,rgba(0,0,0,.66) 100%)!important;
  opacity:.52!important;
}
.hero-home .home-reveal-video{
  filter:brightness(.80) contrast(1.08) saturate(1.08)!important;
  transform:scale(1.018) translateZ(0)!important;
}

/* Four actual in-stock products, equal width all the way across. */
.home-fresh-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important}
.home-product{min-width:0;background:linear-gradient(180deg,#0c0e12,#07080a)!important;border-color:rgba(255,255,255,.09)!important;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.home-product:hover{transform:translateY(-3px);border-color:rgba(221,60,50,.34)!important;box-shadow:0 20px 46px rgba(0,0,0,.30)}
.home-product>a{display:block;background:#08090b;overflow:hidden}
.home-product img{height:290px!important;object-fit:contain!important;background:radial-gradient(circle at 50% 44%,#22262d 0%,#111419 52%,#07080a 100%)!important;padding:12px;transition:transform .22s ease}
.home-product:hover img{transform:scale(1.025)}
.home-product .info{min-height:150px;display:flex;flex-direction:column;padding:18px!important}
.home-product small{min-height:28px;color:#8e949d!important;font-size:9px;line-height:1.45;letter-spacing:.06em!important}
.home-product h3{font-size:18px!important;line-height:1.15;margin:9px 0 16px!important}
.home-product h3 a{color:#f3f1eb;text-decoration:none}
.home-product-meta{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid rgba(255,255,255,.07);padding-top:13px}
.home-product-meta .price{font-size:20px!important;color:#fff}
.home-product-meta>span:last-child{font-size:9px;font-weight:900;letter-spacing:.10em;color:#74d9ad}

/* New live grail showcase: real catalog item over a generated glass/crowd environment. */
.grail-live-showcase{
  position:relative;min-height:690px!important;grid-template-columns:minmax(0,1.28fr) minmax(350px,.72fr)!important;
  background:#030304 url('images/home-grail-showcase-v180.webp') center/cover no-repeat!important;
  overflow:hidden;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);
}
.grail-live-showcase::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.02) 48%,rgba(0,0,0,.78) 72%,#000 100%),linear-gradient(180deg,rgba(0,0,0,.12),transparent 60%,rgba(0,0,0,.48));z-index:1}
.grail-stage{position:relative;z-index:2;min-height:690px;display:grid;place-items:center;padding:70px 7% 62px 8%}
.grail-product-glass{position:relative;width:min(56%,470px);height:500px;display:grid;place-items:center;perspective:900px}
.grail-live-product{position:relative;z-index:2;width:88%;max-height:82%;object-fit:contain;background:rgba(0,0,0,.22);padding:10px;border:1px solid rgba(255,226,170,.32);box-shadow:0 28px 54px rgba(0,0,0,.58),0 0 42px rgba(255,194,92,.10);filter:brightness(.92) contrast(1.07) saturate(.93)}
.grail-glass-reflection{position:absolute;z-index:3;inset:5% 5%;pointer-events:none;border:1px solid rgba(255,239,208,.13);background:linear-gradient(110deg,rgba(255,255,255,.13) 0 7%,transparent 7% 52%,rgba(255,217,162,.055) 53% 59%,transparent 60%);box-shadow:inset 0 0 50px rgba(255,230,182,.04)}
.grail-live-showcase .grail-copy{position:relative;z-index:3;background:linear-gradient(90deg,rgba(3,3,4,.72),rgba(0,0,0,.94))!important;padding:78px 7vw 72px 5vw!important}
.grail-gold{color:#e9b84c!important}
.grail-live-showcase .grail-copy h2{color:#f5efe2!important;-webkit-text-fill-color:#f5efe2!important}
.grail-live-showcase .grail-copy h3{font:700 clamp(24px,2.4vw,38px)/1.05 Arial,Helvetica,sans-serif;margin:8px 0 8px;color:#fff}
.grail-current-detail{font-size:10px!important;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#d0a54d!important;margin:0 0 20px!important}
.grail-current-price{font-size:clamp(31px,3vw,48px);line-height:1;font-weight:900;color:#55caff;text-shadow:0 0 22px rgba(60,197,255,.18);margin:26px 0 3px}
.grail-btn{border-color:#d6ab51!important;color:#f6e3b5!important;background:linear-gradient(90deg,rgba(156,102,20,.18),rgba(8,8,10,.70))!important}
.grail-btn:hover{border-color:#f0c96a!important}

@media(max-width:980px){.home-fresh-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.grail-live-showcase{grid-template-columns:1fr!important}.grail-stage{min-height:540px}.grail-live-showcase .grail-copy{background:rgba(0,0,0,.88)!important}}
@media(max-width:560px){.home-fresh-grid{grid-template-columns:1fr!important}.home-product img{height:270px!important}.grail-product-glass{width:min(82%,410px);height:430px}}


/* =========================================================
   Rev181 — Only the Finest rebuilt around the user's Tech Deck photo.
   Keep the live catalog product/data; retire the generated crowd scene.
   ========================================================= */
.grail-live-showcase{
  min-height:620px!important;
  grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr)!important;
  background:
    linear-gradient(90deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.06) 42%,rgba(0,0,0,.68) 67%,#000 100%),
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.16) 70%,rgba(0,0,0,.72)),
    url('images/tech-deck-bg-v181.jpg') 36% 50%/cover no-repeat!important;
  border-top:1px solid rgba(255,202,45,.13)!important;
  border-bottom:1px solid rgba(255,202,45,.13)!important;
}
.grail-live-showcase::before{
  background:
    radial-gradient(circle at 35% 44%,rgba(255,187,33,.11),transparent 31%),
    linear-gradient(90deg,transparent 0 51%,rgba(0,0,0,.24) 61%,rgba(0,0,0,.88) 82%,#000 100%)!important;
}
.grail-stage{
  min-height:620px!important;
  place-items:end start!important;
  padding:60px 7% 54px 9%!important;
}
.grail-product-glass{
  width:min(46%,390px)!important;
  height:395px!important;
  margin-left:2%!important;
  background:linear-gradient(145deg,rgba(8,8,9,.72),rgba(18,13,4,.18))!important;
  border:1px solid rgba(255,211,81,.22)!important;
  box-shadow:0 32px 70px rgba(0,0,0,.68),0 0 42px rgba(255,192,44,.08),inset 0 0 42px rgba(255,226,118,.025)!important;
  backdrop-filter:blur(3px)!important;
}
.grail-live-product{
  width:86%!important;
  max-height:83%!important;
  background:rgba(0,0,0,.46)!important;
  border-color:rgba(255,212,92,.32)!important;
  box-shadow:0 22px 50px rgba(0,0,0,.72),0 0 24px rgba(255,198,55,.09)!important;
  filter:brightness(.96) contrast(1.06) saturate(1.02)!important;
}
.grail-live-showcase .grail-copy{
  align-self:stretch!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  background:linear-gradient(90deg,rgba(1,1,2,.56),rgba(0,0,0,.94) 34%,#000 100%)!important;
  border-left:1px solid rgba(255,196,52,.12)!important;
  padding:68px 7vw 64px 4.6vw!important;
}
.grail-live-showcase .grail-copy h2{
  color:#ffd34d!important;
  -webkit-text-fill-color:#ffd34d!important;
  text-shadow:0 0 24px rgba(255,180,28,.12)!important;
}
.grail-live-showcase .grail-copy h3{color:#fff!important}
.grail-current-price{color:#ffca38!important;text-shadow:0 0 20px rgba(255,180,30,.12)!important}
.grail-current-detail{color:#73d4ff!important}
.grail-btn{border-color:#ffd34d!important;color:#fff0a7!important;background:linear-gradient(90deg,rgba(255,181,25,.13),rgba(4,4,5,.72))!important}
@media(max-width:980px){
  .grail-live-showcase{grid-template-columns:1fr!important;background-position:45% 50%!important}
  .grail-stage{min-height:520px!important;place-items:end center!important;padding:50px 5% 35px!important}
  .grail-live-showcase .grail-copy{border-left:0!important;border-top:1px solid rgba(255,196,52,.12)!important;background:rgba(0,0,0,.90)!important}
}


/* =========================================================
   Rev185 — main-page Bacon Bin lockup: cleaner modern/tech edge.
   Brand artwork stays intact; this only refines the live hero lockup.
   ========================================================= */
.hero-title-group{
  position:relative!important;
  padding-bottom:12px!important;
}
.hero-title-group::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:min(360px,72%);
  height:2px;
  background:linear-gradient(90deg,#e43d35 0 32%,rgba(228,61,53,.20) 68%,transparent 100%);
  box-shadow:0 0 14px rgba(228,61,53,.20);
}
.hero-title-group h1{
  position:relative!important;
  transform:skewX(-3deg)!important;
  transform-origin:left center!important;
}
.hero-title-group h1 b{
  font-family:"Bahnschrift SemiCondensed","Bahnschrift","Arial Narrow","Segoe UI",Arial,sans-serif!important;
  font-weight:700!important;
  letter-spacing:.018em!important;
  line-height:.86!important;
  -webkit-text-fill-color:transparent!important;
  color:transparent!important;
  background:linear-gradient(180deg,#ffffff 0%,#e9edf0 48%,#bfc7ce 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  text-shadow:0 14px 34px rgba(0,0,0,.52),0 0 1px rgba(255,255,255,.22)!important;
}
.hero-title-group h1 b span{
  -webkit-text-fill-color:transparent!important;
  color:transparent!important;
  background:linear-gradient(180deg,#ff554c 0%,#df3932 52%,#9f211d 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  text-shadow:0 12px 30px rgba(0,0,0,.52),0 0 16px rgba(223,57,50,.14)!important;
}
.hero-title-group h1 small{
  font-family:"Bahnschrift","Segoe UI",Arial,sans-serif!important;
  font-weight:650!important;
  letter-spacing:.24em!important;
  color:#cfd6dc!important;
}
.hero-mark{
  position:relative!important;
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.52))!important;
}
.hero-mark::before{
  content:"";
  position:absolute;
  inset:8%;
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  box-shadow:0 0 0 6px rgba(10,12,16,.28),0 0 28px rgba(223,57,50,.10);
  pointer-events:none;
}
.hero-mark>img{
  filter:contrast(1.05) saturate(.96) brightness(1.03)!important;
}
@media(max-width:560px){
  .hero-title-group::after{width:68%!important}
  .hero-title-group h1{transform:skewX(-2deg)!important}
}

/* =========================================================
   Rev197 — Home preview Hot Wheels independent logo animation/specular
   ========================================================= */
.preview-universe-grid .hot-wheels-preview-tile .hot-wheels-logo-motion{
  display:block!important;
  position:absolute;
  z-index:4;
  left:50%;
  top:50%;
  width:59%;
  aspect-ratio:383/169;
  transform:translate(-50%,-50%) scale(.965) rotate(-.35deg);
  transform-origin:center center;
  background:url('images/category-pages/hot-wheels-logo.png') center/contain no-repeat;
  filter:saturate(1.09) contrast(1.05) drop-shadow(0 7px 12px rgba(0,0,0,.55)) drop-shadow(0 0 9px rgba(255,120,25,.22));
  pointer-events:none;
  overflow:hidden;
  will-change:transform,filter;
}
.preview-universe-grid .hot-wheels-preview-tile .hot-wheels-logo-motion::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  background:linear-gradient(108deg,transparent 28%,rgba(255,255,255,0) 37%,rgba(255,250,218,.20) 43%,rgba(255,255,255,.94) 49%,rgba(255,220,145,.58) 53%,rgba(255,255,255,0) 61%,transparent 70%);
  transform:translateX(-150%) skewX(-11deg);
  mix-blend-mode:screen;
  -webkit-mask:url('images/category-pages/hot-wheels-logo.png') center/contain no-repeat;
  mask:url('images/category-pages/hot-wheels-logo.png') center/contain no-repeat;
}
.preview-universe-grid .hot-wheels-preview-tile:hover .hot-wheels-logo-motion,
.preview-universe-grid .hot-wheels-preview-tile:focus-visible .hot-wheels-logo-motion,
.preview-universe-grid .hot-wheels-preview-tile.touch-preview-active .hot-wheels-logo-motion{
  animation:bbHomeHotWheelsLogoFloat 3.8s ease-in-out infinite;
}
.preview-universe-grid .hot-wheels-preview-tile:hover .hot-wheels-logo-motion::after,
.preview-universe-grid .hot-wheels-preview-tile:focus-visible .hot-wheels-logo-motion::after,
.preview-universe-grid .hot-wheels-preview-tile.touch-preview-active .hot-wheels-logo-motion::after{
  opacity:1;
  animation:bbHomeHotWheelsSpecular 2.65s cubic-bezier(.2,.6,.25,1) infinite;
}
@keyframes bbHomeHotWheelsLogoFloat{
  0%,100%{transform:translate(-50%,-50%) scale(.955) rotate(-.45deg)}
  34%{transform:translate(-50%,-51.2%) scale(1.012) rotate(.05deg)}
  68%{transform:translate(-50%,-49.4%) scale(.982) rotate(.35deg)}
}
@keyframes bbHomeHotWheelsSpecular{
  0%,14%{transform:translateX(-155%) skewX(-11deg);opacity:0}
  22%{opacity:.92}
  52%{transform:translateX(150%) skewX(-11deg);opacity:.88}
  61%,100%{transform:translateX(150%) skewX(-11deg);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .preview-universe-grid .hot-wheels-preview-tile .hot-wheels-logo-motion{animation:none!important}
  .preview-universe-grid .hot-wheels-preview-tile .hot-wheels-logo-motion::after{display:none!important}
}

/* =========================================================
   Rev199 — Home Hot Wheels preview: clean prior-card logo cutout.
   No rectangular specular overlay.
   ========================================================= */
.preview-universe-grid .hot-wheels-preview-tile .hot-wheels-logo-motion{
  display:block!important;
  background:url('images/category-generated/hot-wheels-card-logo-v199.png') center/contain no-repeat!important;
  filter:brightness(1.045) saturate(1.10) contrast(1.045) drop-shadow(0 7px 12px rgba(0,0,0,.58)) drop-shadow(0 0 8px rgba(255,118,20,.18))!important;
  overflow:visible!important;
}
.preview-universe-grid .hot-wheels-preview-tile .hot-wheels-logo-motion::after{
  content:none!important;
  display:none!important;
  background:none!important;
  animation:none!important;
}


/* Rev200 — Home preview G.I. Joe: one clean logo over the existing jet clip. */
.preview-universe-grid .gi-joe-preview-tile .gi-joe-logo-motion{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:4!important;
  pointer-events:none!important;
  background:url('images/category-generated/gi-joe-logo-cover-v200.png') center/105% auto no-repeat!important;
  transform:translateZ(0) scale(1)!important;
  transform-origin:center center!important;
  filter:brightness(1.02) saturate(1.035) contrast(1.035) drop-shadow(0 5px 9px rgba(0,0,0,.30))!important;
  will-change:transform,filter!important;
}
.preview-universe-grid .gi-joe-preview-tile:hover .gi-joe-logo-motion,
.preview-universe-grid .gi-joe-preview-tile:focus-visible .gi-joe-logo-motion,
.preview-universe-grid .gi-joe-preview-tile.touch-preview-active .gi-joe-logo-motion{
  animation:bbHomeGiJoeSingleLogo 3.9s cubic-bezier(.22,.61,.36,1) forwards!important;
}
@keyframes bbHomeGiJoeSingleLogo{
  0%{transform:translateY(0) scale(1)}
  52%{transform:translateY(-.7%) scale(1.027)}
  100%{transform:translateY(-.35%) scale(1.018)}
}
@media(prefers-reduced-motion:reduce){
  .preview-universe-grid .gi-joe-preview-tile .gi-joe-logo-motion{animation:none!important;transform:none!important}
}

/* Rev204 — Home G.I. Joe preview uses the single clean logo already baked into the jet clip. */
.preview-universe-grid .gi-joe-preview-tile .gi-joe-logo-motion{display:none!important}


/* Rev211 — exact frame-zero G.I. Joe poster/video continuity on the home preview too. */
.preview-universe-grid .gi-joe-preview-tile>img,
.preview-universe-grid .gi-joe-preview-tile .preview-universe-video{
  object-fit:cover!important;
  object-position:center center!important;
  transition:opacity .055s linear!important;
  filter:brightness(.94) contrast(1.14) saturate(1.10)!important;
}
.preview-universe-grid .gi-joe-preview-tile:hover>img,
.preview-universe-grid .gi-joe-preview-tile:focus-visible>img,
.preview-universe-grid .gi-joe-preview-tile.touch-preview-active>img{
  opacity:0!important;
}
.preview-universe-grid .gi-joe-preview-tile:hover .preview-universe-video,
.preview-universe-grid .gi-joe-preview-tile:focus-visible .preview-universe-video,
.preview-universe-grid .gi-joe-preview-tile.touch-preview-active .preview-universe-video{
  opacity:1!important;
}


/* =========================================================
   Rev215 — supplied Hot Wheels logo + new homepage Bacon Bin face
   ========================================================= */
.preview-universe-grid .hot-wheels-preview-tile .hot-wheels-logo-motion{
  width:72%!important;
  aspect-ratio:1200/354!important;
  background:url('images/category-pages/hot-wheels-logo-v215.png?v=215') center/contain no-repeat!important;
  filter:brightness(1.025) saturate(1.08) contrast(1.045) drop-shadow(0 6px 10px rgba(0,0,0,.62)) drop-shadow(0 0 7px rgba(255,112,20,.16))!important;
}

/* A sharper retro-future wordmark: wider, slanted, and less corporate. */
.hero-title-group h1{
  transform:skewX(-7deg)!important;
}
.hero-title-group h1 b,
.hero-title-group h1 b span{
  font-family:"Trebuchet MS","Segoe UI Black","Arial Black",Arial,sans-serif!important;
  font-weight:900!important;
  font-style:italic!important;
  letter-spacing:-.065em!important;
  line-height:.82!important;
  text-transform:uppercase!important;
  -webkit-text-stroke:.35px rgba(255,255,255,.12)!important;
}
.hero-title-group h1 b{
  background:linear-gradient(180deg,#fff 0%,#f4f2ec 55%,#c6c9ce 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  text-shadow:0 10px 26px rgba(0,0,0,.56)!important;
}
.hero-title-group h1 b span{
  background:linear-gradient(180deg,#ff5d52 0%,#e23630 58%,#aa1f1b 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  -webkit-text-stroke:.35px rgba(255,92,82,.14)!important;
  text-shadow:0 9px 24px rgba(0,0,0,.54),0 0 18px rgba(224,54,48,.11)!important;
}
.hero-title-group h1 small{
  font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif!important;
  font-weight:800!important;
  font-style:italic!important;
  letter-spacing:.22em!important;
  transform:translateX(4px)!important;
}
.hero-title-group::after{
  width:min(410px,78%)!important;
  height:3px!important;
  transform:skewX(-18deg)!important;
}

/* =========================================================
   Rev216 — supplied Hot Wheels logo on the homepage preview
   ========================================================= */
.preview-universe-grid .hot-wheels-preview-tile .hot-wheels-logo-motion{
  width:70%!important;
  aspect-ratio:664/196!important;
  background:url('images/category-pages/hot-wheels-logo-v216.png?v=216') center/contain no-repeat!important;
  filter:brightness(1.02) saturate(1.05) contrast(1.025) drop-shadow(0 6px 10px rgba(0,0,0,.62))!important;
}

/* =========================================================
   Rev217 — Hot Wheels preview scale + serious Bacon Bin hero face
   ========================================================= */
.preview-universe-grid .hot-wheels-preview-tile .hot-wheels-logo-motion{
  width:75%!important;
  aspect-ratio:664/196!important;
  background:url('images/category-pages/hot-wheels-logo-v216.png?v=216') center/contain no-repeat!important;
  transform:translate(-50%,-50%) scale(1)!important;
  filter:brightness(1.02) saturate(1.05) contrast(1.025) drop-shadow(0 6px 10px rgba(0,0,0,.62))!important;
}
.preview-universe-grid .hot-wheels-preview-tile:hover .hot-wheels-logo-motion,
.preview-universe-grid .hot-wheels-preview-tile:focus-visible .hot-wheels-logo-motion,
.preview-universe-grid .hot-wheels-preview-tile.touch-preview-active .hot-wheels-logo-motion{
  animation:bbHomeHotWheelsLogoFloat217 3.2s ease-in-out infinite!important;
}
@keyframes bbHomeHotWheelsLogoFloat217{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50.5%) scale(1.035)}
}

/* Serious, industrial brand lockup: DIN/Bahnschrift character rather than a
   novelty/retro-future face. Keeps the existing BACON / BIN color hierarchy. */
.hero-title-group h1{
  transform:none!important;
}
.hero-title-group h1 b,
.hero-title-group h1 b span{
  font-family:"Bahnschrift SemiCondensed","Bahnschrift Condensed","Franklin Gothic Heavy","Arial Narrow Bold",Arial,sans-serif!important;
  font-weight:750!important;
  font-style:normal!important;
  text-transform:uppercase!important;
  line-height:.86!important;
  letter-spacing:-.042em!important;
  -webkit-text-stroke:0!important;
}
.hero-title-group h1 b{
  background:linear-gradient(180deg,#ffffff 0%,#eceff0 48%,#bdc2c5 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  text-shadow:0 8px 22px rgba(0,0,0,.58)!important;
}
.hero-title-group h1 b span{
  background:linear-gradient(180deg,#f34b42 0%,#d72f29 58%,#991c19 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  text-shadow:0 8px 22px rgba(0,0,0,.58),0 0 14px rgba(215,47,41,.10)!important;
}
.hero-title-group h1 small{
  font-family:"Bahnschrift SemiCondensed","Bahnschrift Condensed","Franklin Gothic Medium","Arial Narrow",Arial,sans-serif!important;
  font-weight:600!important;
  font-style:normal!important;
  letter-spacing:.31em!important;
  transform:none!important;
}
.hero-title-group::after{
  width:min(365px,72%)!important;
  height:2px!important;
  transform:none!important;
  opacity:.8!important;
}

/* =========================================================
   Rev219 — Main hero title simplified to the requested exact wording.
   Clean heavy sans treatment: serious, direct, no novelty styling.
   ========================================================= */
.hero-title-group h1{
  margin:0!important;
  transform:none!important;
  text-align:left!important;
}
.hero-title-group h1 small,
.hero-title-group h1 b span{
  display:none!important;
}
.hero-title-group h1 b{
  display:block!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:clamp(58px,6.6vw,102px)!important;
  font-weight:800!important;
  font-style:normal!important;
  font-stretch:normal!important;
  line-height:.92!important;
  letter-spacing:-.055em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  color:#f7f7f5!important;
  background:none!important;
  -webkit-background-clip:initial!important;
  background-clip:initial!important;
  -webkit-text-fill-color:#f7f7f5!important;
  -webkit-text-stroke:0!important;
  text-shadow:0 8px 26px rgba(0,0,0,.62)!important;
}
.hero-title-group::after{
  width:min(390px,58%)!important;
  height:2px!important;
  opacity:.78!important;
  transform:none!important;
}
@media(max-width:700px){
  .hero-title-group h1 b{
    font-size:clamp(48px,13.2vw,72px)!important;
    white-space:normal!important;
    letter-spacing:-.05em!important;
  }
}


/* =========================================================
   Rev222 — Fresh From The Bin archival 80s character atmosphere
   ========================================================= */
.section.fresh{isolation:isolate!important}
.section.fresh::after{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  left:50%;
  top:54px;
  width:min(1500px,94vw);
  height:calc(100% - 34px);
  transform:translateX(-50%);
  background:url('images/home/fresh-80s-characters-v222.png?v=222') center 62%/min(1360px,92vw) auto no-repeat;
  opacity:.115;
  filter:saturate(.90) contrast(1.08) brightness(.72);
  -webkit-mask-image:radial-gradient(ellipse 86% 82% at 50% 55%,#000 0 50%,rgba(0,0,0,.82) 66%,rgba(0,0,0,.36) 84%,transparent 100%);
  mask-image:radial-gradient(ellipse 86% 82% at 50% 55%,#000 0 50%,rgba(0,0,0,.82) 66%,rgba(0,0,0,.36) 84%,transparent 100%);
}
.section.fresh .section-head,
.section.fresh .product-row,
.section.fresh>.actions{position:relative!important;z-index:2!important}
@media(max-width:900px){.section.fresh::after{width:108vw;background-size:1040px auto;opacity:.09;top:88px}}
@media(max-width:560px){.section.fresh::after{width:120vw;background-size:820px auto;background-position:center 70%;opacity:.07}}

/* =========================================================
   Rev224 — Main-page neon collector environment test
   - Arcade/collector room becomes the homepage ambient environment.
   - Rev222 80s-character backdrop moves from Fresh From The Bin to
     Collector Signal, where it now lives behind the live dashboard.
   ========================================================= */

/* Keep the generated room as the ambient wallpaper for the homepage. */
body{
  background:
    linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.48)),
    url('images/home/home-arcade-environment-v224.webp?v=224') center top/cover fixed no-repeat,
    #020306!important;
}
main{position:relative;isolation:isolate;background:transparent!important}

/* Hero: use the room itself as the final/static environment. The intro
   movie still plays exactly as before on top of it. */
.hero-home{
  background:
    radial-gradient(ellipse 82% 72% at 52% 46%,transparent 0 42%,rgba(0,0,0,.18) 67%,rgba(0,0,0,.68) 90%,#000 100%),
    linear-gradient(90deg,rgba(0,0,0,.91) 0%,rgba(0,0,0,.70) 25%,rgba(0,0,0,.30) 51%,rgba(0,0,0,.40) 76%,rgba(0,0,0,.73) 100%),
    url('images/home/home-arcade-environment-v224.webp?v=224') center 47%/cover no-repeat!important;
  background-color:#020306!important;
}
body.home-intro-complete .hero-home{
  background:
    radial-gradient(ellipse 82% 72% at 52% 46%,transparent 0 42%,rgba(0,0,0,.18) 67%,rgba(0,0,0,.68) 90%,#000 100%),
    linear-gradient(90deg,rgba(0,0,0,.91) 0%,rgba(0,0,0,.70) 25%,rgba(0,0,0,.30) 51%,rgba(0,0,0,.40) 76%,rgba(0,0,0,.73) 100%),
    url('images/home/home-arcade-environment-v224.webp?v=224') center 47%/cover no-repeat!important;
}

/* Fresh From The Bin: remove the Rev222 80s-character art from here and
   let a restrained amount of the new room show through the shelf cards. */
.section.fresh{
  isolation:isolate!important;
  background:
    linear-gradient(180deg,rgba(6,8,11,.94) 0%,rgba(5,7,10,.87) 52%,rgba(3,4,6,.93) 100%)!important;
  backdrop-filter:blur(1.5px);
}
.section.fresh::after{
  content:none!important;
  display:none!important;
  background:none!important;
}

/* Let the environment connect the middle of the page without fighting the
   current-grail artwork. */
.home-trust-strip{
  background:rgba(5,7,10,.88)!important;
  backdrop-filter:blur(2px);
}

/* Collector Signal gets the archival 80s character image that previously
   lived behind Fresh From The Bin. */
.home-signal-zone{
  isolation:isolate!important;
  background:
    radial-gradient(circle at 14% 6%,rgba(191,36,31,.12),transparent 24%),
    radial-gradient(circle at 84% 58%,rgba(20,70,92,.11),transparent 28%),
    linear-gradient(180deg,rgba(3,4,5,.88) 0%,rgba(0,0,0,.94) 100%)!important;
  backdrop-filter:blur(1.5px);
}
.home-signal-zone::after{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  left:50%;
  top:42px;
  width:min(1520px,96vw);
  height:calc(100% - 28px);
  transform:translateX(-50%);
  background:url('images/home/fresh-80s-characters-v222.png?v=222') center 56%/min(1400px,94vw) auto no-repeat;
  opacity:.105;
  filter:saturate(.90) contrast(1.08) brightness(.70);
  -webkit-mask-image:radial-gradient(ellipse 88% 84% at 50% 54%,#000 0 48%,rgba(0,0,0,.82) 66%,rgba(0,0,0,.36) 84%,transparent 100%);
  mask-image:radial-gradient(ellipse 88% 84% at 50% 54%,#000 0 48%,rgba(0,0,0,.82) 66%,rgba(0,0,0,.36) 84%,transparent 100%);
}
.home-signal-head,.home-signal-grid,.home-first-dibs{z-index:2!important}

@media(max-width:900px){
  body{background-position:center top!important;background-attachment:scroll!important}
  .hero-home,body.home-intro-complete .hero-home{background-position:center 46%!important}
  .home-signal-zone::after{width:108vw;background-size:1060px auto;opacity:.085;top:68px}
}
@media(max-width:560px){
  .hero-home,body.home-intro-complete .hero-home{background-position:57% 44%!important}
  .home-signal-zone::after{width:120vw;background-size:820px auto;background-position:center 62%;opacity:.065}
}

/* =========================================================
   Rev225 — October intro parked + homepage environment polish
   ========================================================= */
/* The reveal movie remains in assets/video for the October theme, but is
   intentionally not part of the live homepage DOM right now. */
body.home-page-fade .home-reveal-stage{display:none!important}

/* Keep the page-load reveal feeling without playing a movie. */
body.home-page-fade .bb-site-header,
body.home-page-fade main,
body.home-page-fade .bb-social-dock-shell,
body.home-page-fade .home-footer{
  animation:bbHomePageFade225 1.18s cubic-bezier(.16,1,.3,1) both;
}
@keyframes bbHomePageFade225{
  0%{opacity:0;transform:translateY(7px)}
  100%{opacity:1;transform:none}
}

/* Dial the new collector-room environment back just a hair. */
body.home-page-fade{
  background:
    linear-gradient(180deg,rgba(0,0,0,.23),rgba(0,0,0,.53)),
    url('images/home/home-arcade-environment-v224.webp?v=224') center top/cover fixed no-repeat,
    #020306!important;
}

/* Shift the room composition downward slightly. A slightly stronger local
   grade reduces its visual opacity without flattening the neon atmosphere. */
body.home-page-fade .hero-home,
body.home-page-fade.home-intro-complete .hero-home{
  background:
    radial-gradient(ellipse 82% 72% at 52% 46%,transparent 0 42%,rgba(0,0,0,.23) 67%,rgba(0,0,0,.72) 90%,#000 100%),
    linear-gradient(90deg,rgba(0,0,0,.93) 0%,rgba(0,0,0,.74) 25%,rgba(0,0,0,.35) 51%,rgba(0,0,0,.45) 76%,rgba(0,0,0,.77) 100%),
    url('images/home/home-arcade-environment-v224.webp?v=224') center 43%/cover no-repeat!important;
}

@media(max-width:900px){
  body.home-page-fade{background-attachment:scroll!important}
  body.home-page-fade .hero-home{background-position:center 42%!important}
}
@media(prefers-reduced-motion:reduce){
  body.home-page-fade .bb-site-header,
  body.home-page-fade main,
  body.home-page-fade .bb-social-dock-shell,
  body.home-page-fade .home-footer{animation:none!important}
}


/* =========================================================
   Rev226 — New homepage environment + edge feather + direct shop button
   ========================================================= */
/* New supplied collector/arcade room. The image itself stays intact; layered
   black gradients create a soft feather on all four sides and a light global
   grade lowers its presence without washing out the neon color. */
body.home-page-fade{
  background:
    linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.42) 6%,rgba(0,0,0,.10) 16%,rgba(0,0,0,.10) 84%,rgba(0,0,0,.42) 94%,rgba(0,0,0,.82) 100%),
    linear-gradient(180deg,rgba(0,0,0,.64) 0%,rgba(0,0,0,.18) 10%,rgba(0,0,0,.10) 74%,rgba(0,0,0,.72) 100%),
    linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10)),
    url('images/home/home-neon-environment-v226.webp?v=226') center top/cover fixed no-repeat,
    #020306!important;
}

body.home-page-fade .hero-home,
body.home-page-fade.home-intro-complete .hero-home{
  background:
    linear-gradient(90deg,rgba(0,0,0,.90) 0%,rgba(0,0,0,.70) 6%,rgba(0,0,0,.56) 18%,rgba(0,0,0,.18) 47%,rgba(0,0,0,.16) 78%,rgba(0,0,0,.52) 94%,rgba(0,0,0,.88) 100%),
    linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.14) 10%,rgba(0,0,0,.08) 76%,rgba(0,0,0,.72) 100%),
    linear-gradient(rgba(0,0,0,.07),rgba(0,0,0,.07)),
    url('images/home/home-neon-environment-v226.webp?v=226') center 43%/cover no-repeat!important;
  background-color:#020306!important;
}

@media(max-width:900px){
  body.home-page-fade{background-attachment:scroll!important}
  body.home-page-fade .hero-home,
  body.home-page-fade.home-intro-complete .hero-home{background-position:center 42%!important}
}
@media(max-width:560px){
  body.home-page-fade .hero-home,
  body.home-page-fade.home-intro-complete .hero-home{background-position:56% 42%!important}
}


/* =========================================================
   Rev227 — Animated homepage environment + Halloween Horror banner
   ========================================================= */
body.home-page-fade{
  position:relative!important;
  background:#020306!important;
}
.home-ambient-video-shell{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:#020306;
}
.home-ambient-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 43%;
  opacity:.82;
  filter:brightness(.86) saturate(.96) contrast(1.06);
  transform:scale(1.012);
}
.home-ambient-video-shell::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.46) 6%,rgba(0,0,0,.12) 17%,rgba(0,0,0,.08) 50%,rgba(0,0,0,.12) 83%,rgba(0,0,0,.46) 94%,rgba(0,0,0,.88) 100%),
    linear-gradient(180deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.18) 10%,rgba(0,0,0,.05) 57%,rgba(0,0,0,.20) 78%,rgba(0,0,0,.82) 100%);
}
body.home-page-fade .bb-site-header,
body.home-page-fade main,
body.home-page-fade .bb-social-dock-shell,
body.home-page-fade .shop-footer{
  position:relative;
  z-index:1;
}
body.home-page-fade .hero-home,
body.home-page-fade.home-intro-complete .hero-home{
  background:
    linear-gradient(90deg,rgba(0,0,0,.91) 0%,rgba(0,0,0,.70) 7%,rgba(0,0,0,.54) 19%,rgba(0,0,0,.16) 48%,rgba(0,0,0,.14) 78%,rgba(0,0,0,.50) 94%,rgba(0,0,0,.88) 100%),
    linear-gradient(180deg,rgba(0,0,0,.56) 0%,rgba(0,0,0,.11) 11%,rgba(0,0,0,.06) 73%,rgba(0,0,0,.74) 100%)!important;
  background-color:transparent!important;
}

.home-halloween-promo{
  position:relative;
  z-index:2;
  padding:22px clamp(18px,5vw,76px) 30px;
  background:linear-gradient(180deg,rgba(2,3,5,.92),rgba(3,3,5,.96));
}
.home-halloween-banner{
  display:block;
  position:relative;
  width:min(1380px,100%);
  aspect-ratio:3.25/1;
  margin:0 auto;
  overflow:hidden;
  border:1px solid rgba(198,38,39,.48);
  border-radius:4px;
  background:#030204;
  box-shadow:0 22px 50px rgba(0,0,0,.48),0 0 30px rgba(171,9,13,.08);
  text-decoration:none;
  color:#fff;
  isolation:isolate;
}
.home-halloween-banner video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 43%;
  filter:brightness(.78) saturate(1.08) contrast(1.13);
  transform:scale(1.01);
  transition:transform .8s cubic-bezier(.16,1,.3,1),filter .5s ease;
}
.home-halloween-vignette{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.17) 24%,rgba(0,0,0,.08) 62%,rgba(0,0,0,.57) 100%),
    linear-gradient(180deg,rgba(0,0,0,.56),transparent 25%,transparent 64%,rgba(0,0,0,.72));
}
.home-halloween-copy{
  position:absolute;
  z-index:2;
  left:clamp(18px,3vw,44px);
  bottom:clamp(16px,2.5vw,34px);
  display:flex;
  align-items:flex-end;
  gap:18px;
  text-shadow:0 3px 16px #000;
}
.home-halloween-copy small{
  display:block;
  color:#ef3a36;
  font-size:10px;
  font-weight:900;
  letter-spacing:.22em;
  white-space:nowrap;
}
.home-halloween-copy strong{
  font-size:clamp(19px,2.1vw,34px);
  line-height:.95;
  letter-spacing:-.025em;
  white-space:nowrap;
}
.home-halloween-copy em{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid rgba(238,50,47,.72);
  background:rgba(4,4,6,.70);
  box-shadow:0 0 18px rgba(194,18,22,.13);
  color:#fff;
  font-size:10px;
  font-style:normal;
  font-weight:900;
  letter-spacing:.15em;
  white-space:nowrap;
}
.home-halloween-banner:hover video,
.home-halloween-banner:focus-visible video{transform:scale(1.035);filter:brightness(.88) saturate(1.13) contrast(1.15)}
.home-halloween-banner:hover .home-halloween-copy em,
.home-halloween-banner:focus-visible .home-halloween-copy em{border-color:#ef3a36;box-shadow:0 0 24px rgba(221,31,35,.22)}
@media(max-width:900px){
  .home-ambient-video{object-position:55% 42%;opacity:.78}
  .home-halloween-banner{aspect-ratio:2.35/1}
  .home-halloween-copy{align-items:flex-start;flex-direction:column;gap:7px}
  .home-halloween-copy strong{font-size:clamp(18px,4vw,28px)}
}
@media(max-width:560px){
  .home-ambient-video{object-position:58% 42%;opacity:.74}
  .home-halloween-promo{padding:14px 12px 22px}
  .home-halloween-banner{aspect-ratio:1.62/1}
  .home-halloween-banner video{object-position:50% 44%}
  .home-halloween-copy strong{white-space:normal;max-width:220px}
}
@media(prefers-reduced-motion:reduce){
  .home-ambient-video-shell video,.home-halloween-banner video{display:none!important}
  .home-ambient-video-shell{background:url('images/home/home-neon-environment-v226.webp?v=226') center 43%/cover no-repeat #020306}
  .home-halloween-banner{background:url('images/promo/halloween-banner-static-v231.png?v=235') center 43%/cover no-repeat #030204}
}

/* =========================================================
   Rev228 — deeper homepage vignette + compact toy news + bottom Halloween ad
   ========================================================= */
.home-ambient-video-shell::after{
  background:
    radial-gradient(ellipse 78% 72% at 50% 42%,rgba(0,0,0,.02) 0%,rgba(0,0,0,.045) 42%,rgba(0,0,0,.18) 62%,rgba(0,0,0,.50) 82%,rgba(0,0,0,.86) 100%),
    linear-gradient(90deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.66) 5%,rgba(0,0,0,.23) 14%,rgba(0,0,0,.06) 31%,rgba(0,0,0,.06) 69%,rgba(0,0,0,.23) 86%,rgba(0,0,0,.66) 95%,rgba(0,0,0,.96) 100%),
    linear-gradient(180deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.26) 9%,rgba(0,0,0,.045) 31%,rgba(0,0,0,.06) 67%,rgba(0,0,0,.38) 86%,rgba(0,0,0,.94) 100%)!important;
}
body.home-page-fade .hero-home,
body.home-page-fade.home-intro-complete .hero-home{
  background:
    linear-gradient(90deg,rgba(0,0,0,.93) 0%,rgba(0,0,0,.72) 7%,rgba(0,0,0,.49) 18%,rgba(0,0,0,.13) 43%,rgba(0,0,0,.11) 67%,rgba(0,0,0,.43) 88%,rgba(0,0,0,.91) 100%),
    linear-gradient(180deg,rgba(0,0,0,.61) 0%,rgba(0,0,0,.10) 14%,rgba(0,0,0,.05) 68%,rgba(0,0,0,.81) 100%)!important;
}

/* Collector Signal is intentionally replaced by one compact, fully-clickable toy-news desk. */
.home-latest-news{
  position:relative;
  z-index:2;
  padding:34px clamp(18px,6vw,92px) 26px;
  background:linear-gradient(180deg,rgba(4,5,7,.95),rgba(2,3,5,.98));
}
.home-latest-news-link{
  width:min(1360px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(230px,.72fr) minmax(0,1.65fr) auto;
  gap:clamp(22px,4vw,58px);
  align-items:center;
  padding:24px clamp(22px,3vw,42px);
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(100deg,rgba(15,17,21,.96),rgba(8,10,13,.92));
  box-shadow:0 18px 42px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.025);
  color:#fff;
  text-decoration:none;
  transition:border-color .3s ease,transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease;
}
.home-latest-news-link:hover,.home-latest-news-link:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(217,43,39,.42);
  box-shadow:0 22px 52px rgba(0,0,0,.40),0 0 28px rgba(184,24,24,.07);
}
.home-latest-news-heading h2{margin:5px 0 5px;font-size:clamp(25px,3vw,39px);letter-spacing:-.035em;line-height:.95}
.home-latest-news-heading p{margin:0;color:#90959c;font-size:11px;line-height:1.5;max-width:310px}
.home-news-list{display:grid;gap:7px;min-width:0}
.home-news-item{display:grid;grid-template-columns:minmax(110px,.32fr) minmax(0,1fr);gap:14px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.055)}
.home-news-item:last-child{border-bottom:0}
.home-news-item small{color:#777e88;font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-news-item b{font-size:12px;line-height:1.3;color:#dfe2e5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-news-placeholder{color:#858b93;font-size:10px;font-weight:800;letter-spacing:.10em}
.home-news-cta{display:inline-flex;align-items:center;gap:10px;color:#f3f3f1;font-size:9px;font-weight:900;letter-spacing:.15em;white-space:nowrap}
.home-news-cta b{color:#df3832;font-size:18px;line-height:1;transition:transform .25s ease}
.home-latest-news-link:hover .home-news-cta b,.home-latest-news-link:focus-visible .home-news-cta b{transform:translateX(4px)}

/* Bottom-of-page Halloween creative cut directly from the approved concept image. */
.home-halloween-promo-v228{
  padding:18px clamp(16px,5vw,74px) 32px!important;
  background:linear-gradient(180deg,rgba(2,3,5,.98),#020203)!important;
}
.home-halloween-banner-v228{
  width:min(1324px,100%)!important;
  aspect-ratio:1324/231!important;
  border:1px solid rgba(255,93,32,.22)!important;
  border-radius:0!important;
  box-shadow:0 18px 48px rgba(0,0,0,.50),0 0 32px rgba(178,35,12,.07)!important;
  background:#020203!important;
}
.home-halloween-banner-v228>img{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .65s cubic-bezier(.16,1,.3,1),filter .45s ease;
}
.home-halloween-pumpkin-flicker{
  position:absolute;
  inset:0;
  z-index:1;
  background:url('images/promo/halloween-pumpkin-flicker-v228.png?v=228') center/100% 100% no-repeat;
  opacity:.18;
  mix-blend-mode:screen;
  pointer-events:none;
  animation:bbPumpkinFlicker228 3.35s steps(1,end) infinite;
}
.home-halloween-banner-sheen{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.19),transparent 13%,transparent 84%,rgba(0,0,0,.18));
}
.home-halloween-banner-v228:hover>img,.home-halloween-banner-v228:focus-visible>img{transform:scale(1.012);filter:brightness(1.035) saturate(1.035)}
@keyframes bbPumpkinFlicker228{
  0%,8%,14%,31%,52%,76%,100%{opacity:.16;filter:brightness(1.02)}
  9%,13%{opacity:.54;filter:brightness(1.28)}
  32%,35%{opacity:.34;filter:brightness(1.16)}
  53%{opacity:.62;filter:brightness(1.34)}
  54%,58%{opacity:.23;filter:brightness(1.08)}
  77%,80%{opacity:.46;filter:brightness(1.24)}
}
@media(max-width:900px){
  .home-latest-news-link{grid-template-columns:1fr;gap:15px}
  .home-latest-news-heading p{max-width:640px}
  .home-news-cta{justify-self:start}
  .home-news-item{grid-template-columns:105px minmax(0,1fr)}
  .home-halloween-banner-v228{aspect-ratio:1324/231!important}
}
@media(max-width:560px){
  .home-latest-news{padding:22px 12px 18px}
  .home-latest-news-link{padding:20px 17px}
  .home-news-item{display:block;padding:7px 0}
  .home-news-item small{display:block;margin-bottom:3px}
  .home-news-item b{display:block;white-space:normal;font-size:11px}
  .home-halloween-promo-v228{padding:12px 8px 22px!important;overflow:hidden}
  .home-halloween-banner-v228{width:170%!important;max-width:none!important;left:50%;transform:translateX(-50%);aspect-ratio:1324/231!important}
}
@media(prefers-reduced-motion:reduce){
  .home-halloween-pumpkin-flicker{animation:none!important;opacity:.28!important}
}


/* =========================================================
   Rev229 — polished toy-news desk, exact Halloween banner, restored footer
   ========================================================= */
/* Stronger, smoother black edge falloff around the animated home environment. */
.home-ambient-video-shell::after{
  background:
    radial-gradient(ellipse 72% 68% at 50% 42%,rgba(0,0,0,0) 0%,rgba(0,0,0,.035) 37%,rgba(0,0,0,.18) 58%,rgba(0,0,0,.53) 79%,rgba(0,0,0,.92) 100%),
    linear-gradient(90deg,#000 0%,rgba(0,0,0,.86) 4%,rgba(0,0,0,.46) 11%,rgba(0,0,0,.12) 25%,rgba(0,0,0,.045) 38%,rgba(0,0,0,.045) 62%,rgba(0,0,0,.12) 75%,rgba(0,0,0,.46) 89%,rgba(0,0,0,.86) 96%,#000 100%),
    linear-gradient(180deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.35) 8%,rgba(0,0,0,.06) 25%,rgba(0,0,0,.05) 65%,rgba(0,0,0,.42) 84%,rgba(0,0,0,.97) 100%)!important;
}

/* Small modern glass news desk. The ambient video remains visible, but softly blurred behind it. */
.home-latest-news-v229{
  position:relative!important;
  isolation:isolate!important;
  padding:22px clamp(18px,5vw,74px)!important;
  background:rgba(3,4,6,.52)!important;
  border-top:1px solid rgba(255,255,255,.055)!important;
  border-bottom:1px solid rgba(255,255,255,.055)!important;
  overflow:hidden!important;
}
.home-latest-news-v229::before{
  content:"";position:absolute;inset:-22px;z-index:-1;
  background:rgba(5,6,9,.54);
  backdrop-filter:blur(16px) brightness(.62) saturate(.82);
  -webkit-backdrop-filter:blur(16px) brightness(.62) saturate(.82);
}
.home-latest-news-link-v229{
  width:min(1370px,100%)!important;
  min-height:112px!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:250px minmax(0,1fr) 112px!important;
  gap:18px!important;
  align-items:stretch!important;
  padding:15px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:12px!important;
  background:linear-gradient(110deg,rgba(12,14,19,.86),rgba(6,8,12,.78))!important;
  box-shadow:0 18px 44px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.035)!important;
  color:#f5f5f3!important;text-decoration:none!important;
}
.home-news-label{display:flex;flex-direction:column;justify-content:center;padding:7px 14px 7px 10px;border-right:1px solid rgba(255,255,255,.07)}
.home-news-live{display:flex;align-items:center;gap:7px;color:#dc3b38;font-size:8px;font-weight:900;letter-spacing:.19em}
.home-news-live i{width:6px;height:6px;border-radius:50%;background:#e63b37;box-shadow:0 0 11px rgba(230,59,55,.68);animation:bbWirePulse229 1.8s ease-in-out infinite}
.home-news-label h2{margin:6px 0 3px!important;font-size:22px!important;line-height:1!important;letter-spacing:.03em!important;font-weight:900!important}
.home-news-label p{margin:0!important;color:#7f8791!important;font-size:9px!important;letter-spacing:.03em!important}
.home-latest-news-v229 .home-news-list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important;min-width:0!important}
.home-latest-news-v229 .home-news-item{display:flex!important;flex-direction:column!important;justify-content:center!important;gap:6px!important;min-width:0!important;padding:12px 13px!important;border:1px solid rgba(255,255,255,.065)!important;border-radius:8px!important;background:rgba(255,255,255,.024)!important;transition:background .25s ease,border-color .25s ease,transform .25s ease!important}
.home-latest-news-v229 .home-news-item small{color:#767f8b!important;font-size:7px!important;font-weight:900!important;letter-spacing:.105em!important;text-transform:uppercase!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.home-latest-news-v229 .home-news-item b{color:#d9dde2!important;font-size:10px!important;font-weight:700!important;line-height:1.35!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;white-space:normal!important}
.home-latest-news-v229 .home-news-placeholder{align-self:center;color:#6f7780!important;font-size:9px!important;font-weight:900!important;letter-spacing:.12em!important}
.home-latest-news-v229 .home-news-cta{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;margin:0!important;border-left:1px solid rgba(255,255,255,.07)!important;color:#cfd2d6!important;font-size:8px!important;font-weight:900!important;letter-spacing:.16em!important}
.home-latest-news-v229 .home-news-cta b{color:#e23b36!important;font-size:20px!important}
.home-latest-news-link-v229:hover .home-news-item{border-color:rgba(226,59,54,.16)!important;background:rgba(255,255,255,.035)!important}
@keyframes bbWirePulse229{0%,100%{opacity:.45;transform:scale(.82)}50%{opacity:1;transform:scale(1)}}

/* Exact 1619×214 approved creative. No artificial tall container. */
.home-halloween-promo-v229{
  position:relative!important;z-index:2!important;
  padding:18px clamp(16px,5vw,74px) 20px!important;
  background:#030406!important;
}
.home-halloween-banner-v229{
  display:block!important;position:relative!important;
  width:min(1619px,100%)!important;height:auto!important;
  aspect-ratio:1619/214!important;
  margin:0 auto!important;overflow:hidden!important;
  border:1px solid rgba(226,58,38,.16)!important;border-radius:5px!important;
  background:#000 url('images/promo/halloween-banner-v229.webp?v=229') center/100% 100% no-repeat!important;
  box-shadow:0 15px 38px rgba(0,0,0,.42)!important;
}
.home-halloween-banner-video-v229{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:fill!important;display:block!important;filter:none!important;transform:none!important}
.home-halloween-banner-edge-v229{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.12),transparent 5%,transparent 95%,rgba(0,0,0,.12));box-shadow:inset 0 0 18px rgba(0,0,0,.22)}
.home-halloween-banner-v229:hover .home-halloween-banner-video-v229,.home-halloween-banner-v229:focus-visible .home-halloween-banner-video-v229{filter:brightness(1.035) saturate(1.04)!important;transform:none!important}

/* Footer restored as an intentional solid closing band instead of floating over the environment. */
.home-footer-zone-v229{position:relative!important;z-index:3!important;background:#050608!important;border-top:1px solid rgba(255,255,255,.055)!important;box-shadow:0 -18px 44px rgba(0,0,0,.38)!important}
.home-footer-zone-v229 .bb-social-dock-shell{margin:0 auto!important;padding:18px 14px 8px!important;background:#050608!important}
.home-footer-v229{display:grid!important;grid-template-columns:1fr auto 1fr!important;align-items:center!important;gap:28px!important;padding:18px clamp(20px,5vw,72px) 24px!important;background:#050608!important;border-top:0!important;color:#747980!important}
.home-footer-brand-v229{justify-self:start;display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.home-footer-brand-v229 img{width:32px;height:32px;object-fit:contain}.home-footer-brand-v229 strong{display:block;font-size:11px;letter-spacing:.08em}.home-footer-brand-v229 small{display:block;margin-top:3px;color:#626770;font-size:6px;letter-spacing:.16em}
.home-footer-v229 nav{display:flex;align-items:center;justify-content:center;gap:22px}.home-footer-v229 nav a{color:#7f858d;text-decoration:none;font-size:8px;font-weight:900;letter-spacing:.14em;transition:color .2s ease}.home-footer-v229 nav a:hover{color:#f0f0ee}
.home-footer-meta-v229{justify-self:end;text-align:right;display:grid;gap:4px}.home-footer-meta-v229 span{font-size:7px!important;letter-spacing:.13em;color:#5f646b!important}

@media(max-width:900px){
  .home-latest-news-link-v229{grid-template-columns:190px minmax(0,1fr) 92px!important}
  .home-latest-news-v229 .home-news-list{grid-template-columns:1fr!important;gap:4px!important}.home-latest-news-v229 .home-news-item{padding:8px 10px!important}.home-latest-news-v229 .home-news-item:nth-child(n+3){display:none!important}
  .home-footer-v229{grid-template-columns:1fr!important;text-align:center!important;gap:13px!important}.home-footer-brand-v229,.home-footer-meta-v229{justify-self:center!important;text-align:center!important}
}
@media(max-width:600px){
  .home-latest-news-v229{padding:14px 10px!important}.home-latest-news-link-v229{grid-template-columns:1fr!important;min-height:0!important;padding:13px!important}.home-news-label{border-right:0!important;border-bottom:1px solid rgba(255,255,255,.07)!important;padding:5px 4px 11px!important}.home-news-label h2{font-size:18px!important}.home-latest-news-v229 .home-news-cta{border-left:0!important;border-top:1px solid rgba(255,255,255,.07)!important;padding-top:10px!important;justify-content:flex-start!important}
  .home-halloween-promo-v229{padding:10px 0 12px!important;overflow:hidden!important}.home-halloween-banner-v229{width:136%!important;max-width:none!important;left:50%!important;transform:translateX(-50%)!important;aspect-ratio:1619/214!important;border-left:0!important;border-right:0!important}
  .home-footer-v229 nav{gap:14px;flex-wrap:wrap}.home-footer-v229{padding-bottom:20px!important}
}
@media(prefers-reduced-motion:reduce){
  .home-news-live i{animation:none!important}.home-halloween-banner-video-v229{display:none!important}.home-halloween-banner-v229{background:#000 url('images/promo/halloween-banner-v229.webp?v=229') center/100% 100% no-repeat!important}
}

/* =========================================================
   Rev230 — Chucky-reference homepage title treatment
   ========================================================= */
.home-title-logo-v230{
  margin:0!important;
  width:clamp(520px,58vw,960px)!important;
  max-width:72vw!important;
  line-height:1!important;
  display:block!important;
}
.home-title-logo-v230 img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  filter:drop-shadow(0 14px 16px rgba(0,0,0,.72)) drop-shadow(0 0 13px rgba(157,13,12,.22));
}
.hero-title-group{max-width:min(960px,72vw)!important}
@media(max-width:900px){
  .home-title-logo-v230{width:clamp(410px,66vw,720px)!important;max-width:70vw!important}
}
@media(max-width:560px){
  .home-title-logo-v230{width:66vw!important;max-width:66vw!important}
  .home-title-logo-v230 img{filter:drop-shadow(0 8px 10px rgba(0,0,0,.78)) drop-shadow(0 0 9px rgba(157,13,12,.20));}
}


/* =========================================================
   Rev231 — static environment/banner + refined homepage title
   ========================================================= */
.home-ambient-static-v231{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background:#020306 url('images/home/home-neon-environment-v226.webp?v=231') center 43%/cover no-repeat!important;
  opacity:.82!important;
  filter:brightness(.86) saturate(.96) contrast(1.06)!important;
  transform:scale(1.012)!important;
}
@media(max-width:900px){
  .home-ambient-static-v231{background-position:55% 42%!important;opacity:.78!important}
}
@media(max-width:560px){
  .home-ambient-static-v231{background-position:58% 42%!important;opacity:.74!important}
}
/* Keep Rev229 vignette exactly over the static environment. */
.home-ambient-video-shell::after{
  background:
    radial-gradient(ellipse 72% 68% at 50% 42%,rgba(0,0,0,0) 0%,rgba(0,0,0,.035) 37%,rgba(0,0,0,.18) 58%,rgba(0,0,0,.53) 79%,rgba(0,0,0,.92) 100%),
    linear-gradient(90deg,#000 0%,rgba(0,0,0,.86) 4%,rgba(0,0,0,.46) 11%,rgba(0,0,0,.12) 25%,rgba(0,0,0,.045) 38%,rgba(0,0,0,.045) 62%,rgba(0,0,0,.12) 75%,rgba(0,0,0,.46) 89%,rgba(0,0,0,.86) 96%,#000 100%),
    linear-gradient(180deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.35) 8%,rgba(0,0,0,.06) 25%,rgba(0,0,0,.05) 65%,rgba(0,0,0,.42) 84%,rgba(0,0,0,.97) 100%)!important;
}

/* Slightly smaller title; THE + BIN white, BACON red in the asset itself. */
.home-title-logo-v230{
  width:clamp(430px,49vw,780px)!important;
  max-width:62vw!important;
}
.home-title-logo-v230 img{
  filter:drop-shadow(0 13px 16px rgba(0,0,0,.72)) drop-shadow(0 0 10px rgba(142,12,10,.18))!important;
}
.hero-title-group{max-width:min(800px,64vw)!important}
@media(max-width:900px){
  .home-title-logo-v230{width:clamp(360px,58vw,620px)!important;max-width:64vw!important}
}
@media(max-width:560px){
  .home-title-logo-v230{width:62vw!important;max-width:62vw!important}
}

/* Approved Halloween creative, static for now. */
.home-halloween-banner-static-v231{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
  display:block!important;
  filter:none!important;
}
.home-halloween-banner-v229{
  background:#000!important;
}
.home-halloween-banner-v229:hover .home-halloween-banner-static-v231,
.home-halloween-banner-v229:focus-visible .home-halloween-banner-static-v231{
  filter:none!important;
  transform:none!important;
}

/* =========================================================
   Rev233 — calmer homepage title scale
   Keep the approved THE / BACON / BIN artwork and simply reduce its visual
   footprint so the environment remains the hero of the landing page.
   ========================================================= */
.home-title-logo-v230{
  width:clamp(340px,34vw,560px)!important;
  max-width:50vw!important;
}
.hero-title-group{max-width:min(590px,52vw)!important}
@media(max-width:900px){
  .home-title-logo-v230{width:clamp(300px,48vw,470px)!important;max-width:56vw!important}
  .hero-title-group{max-width:58vw!important}
}
@media(max-width:560px){
  .home-title-logo-v230{width:58vw!important;max-width:58vw!important}
  .hero-title-group{max-width:62vw!important}
}

/* =========================================================
   Rev238 — storefront/van environment moved from About to Home
   Baked alpha feather + soft CSS vignette; no hard mask edges.
   ========================================================= */
.home-storefront-environment-v238{
  position:relative!important;
  z-index:2!important;
  height:clamp(480px,52vw,760px)!important;
  margin:0!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background:#020202!important;
}
.home-storefront-environment-image-v238{
  position:absolute!important;
  inset:-2%!important;
  z-index:0!important;
  background:url('images/home/home-storefront-van-v238.png?v=238') center 50%/min(1120px,88vw) auto no-repeat!important;
  opacity:.74!important;
  filter:brightness(.84) saturate(1.12) contrast(1.065)!important;
  transform:scale(1.015)!important;
  transform-origin:center!important;
}
.home-storefront-environment-v238::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(ellipse 68% 70% at 50% 47%,rgba(0,0,0,0) 0%,rgba(0,0,0,.03) 42%,rgba(0,0,0,.22) 66%,rgba(0,0,0,.64) 86%,#020202 100%),
    linear-gradient(90deg,#020202 0%,rgba(2,2,2,.68) 8%,rgba(2,2,2,.18) 22%,rgba(2,2,2,.03) 38%,rgba(2,2,2,.03) 62%,rgba(2,2,2,.18) 78%,rgba(2,2,2,.68) 92%,#020202 100%),
    linear-gradient(180deg,#020202 0%,rgba(2,2,2,.48) 9%,rgba(2,2,2,.06) 25%,rgba(2,2,2,.04) 68%,rgba(2,2,2,.52) 88%,#020202 100%);
}
@media(max-width:900px){
  .home-storefront-environment-v238{height:clamp(440px,72vw,650px)!important}
  .home-storefront-environment-image-v238{background-size:min(980px,112vw) auto!important;background-position:center 51%!important;opacity:.70!important}
}
@media(max-width:560px){
  .home-storefront-environment-v238{height:430px!important}
  .home-storefront-environment-image-v238{background-size:760px auto!important;background-position:center 52%!important;opacity:.64!important}
}

/* =========================================================
   Rev239 — selected tbbe main-page environment
   One continuous main environment; previous lower storefront insert removed.
   ========================================================= */
.home-ambient-static-v231{
  background:#020306 url('images/home/home-environment-v239.webp?v=239') center 45%/cover no-repeat!important;
  opacity:.77!important;
  filter:brightness(.79) saturate(.98) contrast(1.065)!important;
  transform:scale(1.01)!important;
}
.home-ambient-video-shell::after{
  background:
    linear-gradient(90deg,#000 0%,rgba(0,0,0,.76) 4%,rgba(0,0,0,.38) 12%,rgba(0,0,0,.10) 26%,rgba(0,0,0,.035) 42%,rgba(0,0,0,.035) 58%,rgba(0,0,0,.10) 74%,rgba(0,0,0,.38) 88%,rgba(0,0,0,.76) 96%,#000 100%),
    linear-gradient(180deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.31) 9%,rgba(0,0,0,.055) 24%,rgba(0,0,0,.045) 66%,rgba(0,0,0,.38) 85%,rgba(0,0,0,.96) 100%)!important;
}
@media(max-width:900px){
  .home-ambient-static-v231{background-position:54% 45%!important;opacity:.74!important}
}
@media(max-width:560px){
  .home-ambient-static-v231{background-position:58% 44%!important;opacity:.70!important}
}

/* Rev243 — mobile/touch Quick Shop universe cards use reliable static posters. */
.bb-home-static-universe .preview-universe-video{display:none!important}
.bb-home-static-universe .preview-universe-grid a img{opacity:1!important}
.bb-home-static-universe .touch-preview-hint{display:none!important}
@media (pointer:coarse){
  .preview-universe-video{display:none!important}
  .preview-universe-grid a img{opacity:1!important}
}