/* BondgenotenFans v2 — gamified show identity */
:root{
  --show-bf-mark:url('/media/bf-mark.svg');
  --show-logo-art:url('/media/show-logo.svg');
  --show-shark-art:url('/media/team-shark.svg');
}

/* Replace the generic app tile with a real faction-style crest. */
.brand-mark{
  position:relative!important;
  width:47px!important;
  height:47px!important;
  border:0!important;
  border-radius:15px!important;
  background:var(--show-bf-mark) center/cover no-repeat!important;
  color:transparent!important;
  font-size:0!important;
  transform:none!important;
  box-shadow:0 10px 30px rgba(246,191,36,.22),0 0 0 1px rgba(255,255,255,.16)!important;
  overflow:visible!important;
}
.brand-mark::before,.brand-mark::after{display:none!important}
.brand{transition:transform .22s ease}.brand:hover{transform:translateY(-2px)}

/* Make the programme identity unmistakable without presenting the fansite as official. */
.show-hero__copy::before{
  content:"";
  display:block;
  width:clamp(188px,24vw,338px);
  aspect-ratio:1.55;
  margin:0 0 4px -9px;
  background:var(--show-logo-art) center/contain no-repeat;
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.58));
  opacity:.98;
  animation:bfLogoEnter .85s cubic-bezier(.2,.78,.2,1) both;
}
.show-hero__photo{filter:saturate(1.12) contrast(1.06);background-position:center 35%!important}
.show-hero__photo::after{
  background:
    linear-gradient(90deg,rgba(4,7,11,.98) 0%,rgba(4,7,11,.90) 36%,rgba(4,7,11,.34) 70%,rgba(4,7,11,.12) 100%),
    linear-gradient(0deg,rgba(4,7,11,.98) 0%,transparent 52%,rgba(4,7,11,.25) 100%)!important;
}
.show-hero__copy{position:relative}.show-hero__copy::after{
  content:"";position:absolute;left:-90px;top:22%;width:330px;height:330px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(246,191,36,.15),transparent 66%);filter:blur(8px);pointer-events:none;
}
.show-hero h1{max-width:820px!important}.show-hero h1 em{position:relative;display:inline-block!important}
.show-hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:4px;border-radius:99px;background:linear-gradient(90deg,var(--show-gold),var(--show-orange),transparent);transform-origin:left;animation:bfUnderline 1s .45s cubic-bezier(.2,.8,.2,1) both}

/* Premium faction tiles: one photographic emblem plus polished game badges. */
.faction-emblem{
  position:relative!important;
  border-radius:24px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.38)!important;
  background:
    radial-gradient(circle at 34% 22%,color-mix(in srgb,var(--team) 82%,white),transparent 38%),
    linear-gradient(145deg,color-mix(in srgb,var(--team) 90%,#111),#111720 78%)!important;
  box-shadow:inset 0 0 0 2px rgba(6,9,13,.28),0 18px 32px rgba(0,0,0,.30)!important;
}
.faction-emblem::before{content:"";position:absolute;inset:7px;border:1px solid rgba(255,255,255,.24);border-radius:17px;pointer-events:none}
.faction-emblem::after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.23),transparent 34%,rgba(0,0,0,.18));pointer-events:none}
.faction-emblem svg{display:block!important;width:59%!important;height:59%!important;z-index:1;filter:drop-shadow(0 9px 12px rgba(0,0,0,.42))}
.faction-card.team-haaien .faction-emblem{background:var(--show-shark-art) center/cover no-repeat!important}
.faction-card.team-haaien .faction-emblem svg{display:none!important}
.faction-card{isolation:isolate;box-shadow:0 20px 48px rgba(0,0,0,.25)!important}
.faction-card::before{
  background:
    linear-gradient(135deg,rgba(255,255,255,.16),transparent 32%),
    radial-gradient(circle at var(--mx,82%) var(--my,18%),color-mix(in srgb,var(--team) 26%,transparent),transparent 35%),
    repeating-linear-gradient(120deg,rgba(255,255,255,.035) 0 1px,transparent 1px 17px)!important;
}
.faction-card::after{content:"";position:absolute;left:14px;right:14px;bottom:10px;height:2px;border-radius:99px;background:linear-gradient(90deg,transparent,var(--team),transparent);opacity:.58;transform:scaleX(.4);transition:transform .35s ease}
.faction-card:hover::after{transform:scaleX(1)}

/* Give every editorial surface a real show-light treatment. */
.world-feature,.editorial-card,.update-card,.challenge-card,.fan-feed,.game-launch{will-change:transform}
.world-feature,.editorial-card,.update-card{border:1px solid rgba(255,255,255,.13)!important}
.world-feature::before,.editorial-card::before,.update-card::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.09),transparent 23% 74%,rgba(246,191,36,.08));
  mix-blend-mode:screen;opacity:.58;
}
.world-copy,.editorial-card__content,.update-card__copy,.photo-credit{z-index:3!important}
.world-feature:hover .world-feature__image,.editorial-card:hover .editorial-card__image,.update-card:hover .update-card__visual{transform:scale(1.065)!important}

/* More tactile game interaction. */
.game-launch{border-top:3px solid transparent;transition:transform .22s ease,background .22s ease,border-color .22s ease!important}
.game-launch:hover{border-color:var(--launch-color,var(--show-gold));transform:translateY(-7px)!important}
.show-button,.challenge-options button,.feed-item,.game-launch{position:relative;overflow:hidden}
.show-button::after,.challenge-options button::after,.game-launch::before{
  content:"";position:absolute;top:-70%;left:-55%;width:34%;height:240%;transform:rotate(24deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);transition:left .55s ease;pointer-events:none
}
.show-button:hover::after,.challenge-options button:hover::after,.game-launch:hover::before{left:125%}
.show-button:active,.challenge-options button:active,.game-launch:active{transform:scale(.985)!important}

/* Arena grid + ambient warm loods light. */
.show-section.dark::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;
  background-image:linear-gradient(90deg,transparent 49.7%,rgba(255,255,255,.06) 50%,transparent 50.3%);
  background-size:86px 100%;mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent)
}
.show-section.dark>.container{position:relative;z-index:1}
.show-section:not(.dark){background-image:radial-gradient(circle at 8% 20%,rgba(246,191,36,.10),transparent 24rem),radial-gradient(circle at 94% 70%,rgba(24,167,255,.07),transparent 27rem)}

/* Header behavior and motion language. */
.site-header{transition:height .25s ease,background .25s ease,box-shadow .25s ease!important}
.site-header.is-scrolled{background:rgba(6,9,13,.97)!important;box-shadow:0 14px 38px rgba(0,0,0,.33)!important}
.reveal{opacity:0;transform:translateY(34px) scale(.985);transition:opacity .72s cubic-bezier(.2,.75,.2,1),transform .72s cubic-bezier(.2,.75,.2,1)}
.reveal.is-visible{opacity:1;transform:none}

@keyframes bfLogoEnter{from{opacity:0;transform:translate3d(-26px,16px,0) scale(.93)}to{opacity:.98;transform:none}}
@keyframes bfUnderline{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media(max-width:820px){
  .show-hero__copy::before{width:225px;margin-left:-6px;margin-bottom:4px}
  .show-hero__photo{background-position:60% center!important}
  .show-hero__photo::after{background:linear-gradient(0deg,rgba(4,7,11,.99),rgba(4,7,11,.63) 64%,rgba(4,7,11,.38)),linear-gradient(90deg,rgba(4,7,11,.62),transparent)!important}
}
@media(max-width:590px){
  .show-hero__copy::before{width:185px;margin-bottom:1px}
  .show-hero__inner{padding-top:72px!important}
  .faction-emblem{border-radius:18px!important}
  .brand-mark{width:41px!important;height:41px!important}
}
@media(prefers-reduced-motion:reduce){.show-hero__copy::before,.show-hero h1 em::after{animation:none!important}.reveal{opacity:1;transform:none;transition:none}}