/* 2026-10-14 homepage showcase polish.
   Visual-only layer for active Header Scene banners and the public ON/OFF AIR strip.
   Does not alter banner sizing, fallback Hero logic, live-status logic, or homepage layout. */

/* Stronger universal banner frame that works across very different artwork. */
.hero.has-header-scene{
  border:2px solid rgba(255,226,154,.56)!important;
  outline:1px solid rgba(255,255,255,.045);
  outline-offset:3px;
  box-shadow:
    0 22px 48px rgba(0,0,0,.46),
    0 9px 0 -6px rgba(0,0,0,.88),
    0 0 34px rgba(232,197,110,.18),
    -18px 0 42px rgba(41,216,255,.14),
    18px 0 42px rgba(255,63,175,.13)!important;
}
.hero.has-header-scene::before{
  z-index:21!important;
  inset:0!important;
  opacity:1!important;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(41,216,255,.13),transparent 11%,transparent 89%,rgba(255,63,175,.12)),
    linear-gradient(180deg,rgba(255,244,211,.11),transparent 12%,transparent 82%,rgba(232,197,110,.08)),
    radial-gradient(circle at 50% 0,rgba(255,255,255,.07),transparent 34%)!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
.hero.has-header-scene::after{
  content:"";
  position:absolute;
  z-index:22!important;
  inset:0!important;
  border:0!important;
  border-radius:inherit;
  padding:2px;
  pointer-events:none;
  background:
    linear-gradient(105deg,
      rgba(41,216,255,.78) 0%,
      rgba(232,197,110,.64) 28%,
      rgba(255,241,199,.92) 48%,
      rgba(232,197,110,.66) 66%,
      rgba(255,63,175,.74) 100%);
  background-size:180% 100%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  box-shadow:none!important;
  animation:home-banner-edge-flow 8s ease-in-out infinite alternate;
}
#home-header-scene-image{border-radius:inherit}
@keyframes home-banner-edge-flow{
  from{background-position:0% 50%;opacity:.76}
  to{background-position:100% 50%;opacity:1}
}

/* 3D broadcast-console treatment for the public live status strip. */
#public-live-strip.status-strip{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(232,197,110,.42)!important;
  border-radius:16px!important;
  background:
    linear-gradient(180deg,rgba(29,31,38,.98) 0%,rgba(11,14,18,.99) 48%,rgba(3,5,8,.99) 100%)!important;
  box-shadow:
    0 16px 34px rgba(0,0,0,.40),
    0 7px 0 -4px rgba(0,0,0,.92),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -2px 0 rgba(0,0,0,.78),
    inset 0 0 34px rgba(41,216,255,.035)!important;
}
#public-live-strip.status-strip::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(41,216,255,.16),transparent 12%,transparent 88%,rgba(255,63,175,.14)),
    linear-gradient(180deg,rgba(255,255,255,.075),transparent 24%);
}
#public-live-strip.status-strip::after{
  content:"";
  position:absolute;
  z-index:1;
  top:-30%;
  bottom:-30%;
  left:-35%;
  width:20%;
  pointer-events:none;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.075),transparent);
  filter:blur(1px);
  animation:live-strip-sheen 8.5s ease-in-out infinite;
}
#public-live-strip.status-strip > *{position:relative;z-index:2}
#public-live-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:0 13px;
  border:1px solid rgba(100,232,255,.58);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(19,49,58,.98),rgba(5,18,23,.98));
  color:#79efff!important;
  text-shadow:0 0 12px rgba(71,229,255,.52);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -2px 0 rgba(0,0,0,.58),
    0 4px 0 rgba(0,0,0,.72),
    0 8px 16px rgba(0,0,0,.34),
    0 0 18px rgba(41,216,255,.14);
}
#public-live-label::before{
  content:"";
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 10px currentColor,0 0 18px currentColor;
  opacity:.88;
}
#public-live-text{
  color:#f5d98d!important;
  font-weight:850!important;
  text-shadow:
    0 1px 0 rgba(72,45,10,.95),
    0 0 13px rgba(232,190,94,.16)!important;
}
#public-show-countdown{
  border-color:rgba(102,231,255,.56)!important;
  background:linear-gradient(180deg,rgba(15,36,43,.98),rgba(4,13,17,.99))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -2px 0 rgba(0,0,0,.70),
    0 3px 0 rgba(0,0,0,.72),
    0 7px 14px rgba(0,0,0,.30),
    0 0 18px rgba(65,220,245,.12)!important;
}

/* Live state keeps the same 3D hardware, but flips its active circuitry green. */
#public-live-strip.status-strip.is-live{
  border-color:rgba(100,255,157,.52)!important;
  box-shadow:
    0 16px 34px rgba(0,0,0,.40),
    0 7px 0 -4px rgba(0,0,0,.92),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -2px 0 rgba(0,0,0,.78),
    inset 0 0 34px rgba(85,255,145,.055),
    0 0 28px rgba(85,255,145,.10)!important;
}
#public-live-strip.status-strip.is-live #public-live-label{
  border-color:rgba(114,245,167,.68);
  background:linear-gradient(180deg,rgba(18,61,38,.98),rgba(6,25,15,.99));
  color:#82ffb2!important;
  text-shadow:0 0 13px rgba(100,255,157,.58);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -2px 0 rgba(0,0,0,.58),
    0 4px 0 rgba(0,0,0,.72),
    0 8px 16px rgba(0,0,0,.34),
    0 0 20px rgba(85,255,145,.17);
}
#public-show-countdown.ready{
  border-color:rgba(202,255,89,.60)!important;
  color:#d6ff78!important;
  text-shadow:0 0 12px rgba(202,255,89,.38)!important;
}

@keyframes live-strip-sheen{
  0%,72%{left:-35%;opacity:0}
  78%{opacity:.7}
  100%{left:118%;opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .hero.has-header-scene::after,
  #public-live-strip.status-strip::after{animation:none!important}
}
@media(max-width:760px){
  .hero.has-header-scene{
    border-width:1px!important;
    outline-offset:2px;
    box-shadow:
      0 16px 36px rgba(0,0,0,.42),
      0 0 24px rgba(232,197,110,.12),
      -8px 0 26px rgba(41,216,255,.09),
      8px 0 26px rgba(255,63,175,.08)!important;
  }
  #public-live-strip.status-strip{
    border-radius:14px!important;
    box-shadow:
      0 10px 22px rgba(0,0,0,.34),
      0 4px 0 -2px rgba(0,0,0,.88),
      inset 0 1px 0 rgba(255,255,255,.11),
      inset 0 -2px 0 rgba(0,0,0,.70)!important;
  }
  #public-live-label{min-height:30px;padding:0 10px}
}

/* 2026-10-14 host balance tweak.
   Calm the host-card aura so it supports the page instead of overpowering it,
   while lifting the Meet the Hosts bridge slightly and increasing its readability. */
.home-people-section .home-person-card{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.92),
    inset 14px 0 38px rgba(var(--host-accent-rgb),.06),
    inset -12px 0 34px rgba(var(--host-accent-rgb),.04),
    0 5px 0 #4a3b24,
    0 8px 0 #14161b,
    0 20px 34px rgba(0,0,0,.52),
    0 0 11px rgba(var(--host-accent-rgb),.40),
    0 0 24px rgba(var(--host-accent-rgb),.25),
    0 0 44px rgba(var(--host-accent-rgb),.14),
    0 0 72px rgba(232,197,110,.05)!important;
  filter:
    drop-shadow(0 0 5px rgba(var(--host-accent-rgb),.18))
    drop-shadow(0 0 13px rgba(var(--host-accent-rgb),.10));
}
#home-joey-card{outline-color:rgba(85,231,255,.20)}
#home-milo-card{outline-color:rgba(255,96,200,.20)}

.home-hosts-bridge{
  margin-top:8px!important;
  margin-bottom:24px!important;
}
.home-hosts-bridge span{
  font-size:16px!important;
}
.home-hosts-bridge b{
  font-size:15px!important;
  line-height:1.3;
}

@media(max-width:760px){
  .home-hosts-bridge{
    margin-top:5px!important;
    margin-bottom:14px!important;
  }
  .home-hosts-bridge span{font-size:15px!important}
  .home-hosts-bridge b{font-size:14px!important}
}