/* Only gallery layout lives here. Navigation, hero, colors and footer use hub.css. */
.gallery-nav{padding-inline:max(var(--pad),calc((100vw - var(--container))/2))}
.gallery-nav{display:flex;flex-wrap:wrap;gap:.6rem;position:relative;z-index:3;padding-bottom:3.5rem}
.gallery-nav a{display:inline-flex;align-items:center;min-height:44px;padding:.65rem 1rem;border:1px solid var(--line);border-radius:var(--radius);color:var(--soft);font-size:.8rem;text-decoration:none;transition:background .2s,color .2s}
.gallery-nav a:hover{background:var(--chip);color:var(--fg)}
.igaming-page .work-section{position:relative;z-index:3;max-width:86rem;margin:0 auto;padding:60px 2rem;scroll-margin-top:6rem}
.s-head{border-top:1px solid var(--line);padding-top:2rem;margin-bottom:2rem}
.s-head-left{display:flex;align-items:baseline;gap:1.25rem}
.s-num{color:var(--muted);font-family:var(--font-mono);font-size:.65rem;letter-spacing:.14em;flex:none}
.s-title{font-size:clamp(2rem,4vw,3.5rem);font-weight:600;letter-spacing:-.045em;line-height:1.05}

/* Original gallery columns, ratios and spacing. Shared v2 chrome stays in hub.css. */
.grid-trafego,.grid-popups,.grid-banners,.grid-widgets,.grid-gamif,.grid-emails{display:grid}
.grid-trafego{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.grid-popups{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.card,.banner,.email-card{position:relative;min-width:0;overflow:hidden;border:1px solid var(--line);background:var(--chip);border-radius:0}
.card img,.banner img{display:block;width:100%;height:100%;object-fit:cover}
.work-section .gallery-open{height:100%;width:100%}
.grid-trafego .card{aspect-ratio:1}
.grid-trafego .card.tall,.grid-popups .card{aspect-ratio:4/5}
.grid-trafego .card.wide{aspect-ratio:16/9;grid-column:span 2}
/* Portrait pieces begin on a new row so a square never looks undersized beside them. */
.grid-trafego .card:not(.tall)+.card.tall{grid-column-start:1}
.grid-banners{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.banner.short{grid-column:span 2;aspect-ratio:1266/600}
.banner.wide{grid-column:span 3;aspect-ratio:1600/375}
.grid-widgets{grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:32px}
.widget{min-width:0;aspect-ratio:1552/873;background:transparent;border:0}
.widget img{display:block;width:100%;height:100%;object-fit:contain}
.grid-gamif{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:32px;padding:20px 0}
.gamif-card{position:relative;min-width:0;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--chip)}
.gamif-card img{display:block;width:100%;height:100%;object-fit:cover;padding:1rem 1rem 3rem}
.gamif-card img.small{transform:scale(.75);padding:1rem 1rem 2rem}
.gamif-card-num{position:absolute;top:16px;right:16px;z-index:1;color:var(--muted);font:28px var(--font-mono);pointer-events:none}
.gamif-card-label{position:absolute;bottom:16px;left:16px;z-index:1;font:.625rem var(--font-mono);color:var(--soft);pointer-events:none}
.grid-gamif-banners{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;margin-top:40px}
.gamif-banner{height:200px;flex:0 1 auto;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--chip)}
.gamif-banner img{display:block;width:auto;height:100%;object-fit:cover}
.grid-emails{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:28px}
.email-preview{display:block;aspect-ratio:3/4;overflow:hidden}
.email-preview img{display:block;width:100%;height:100%;object-fit:contain}
.email-meta{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:16px 18px;border-top:1px solid var(--line)}
.email-name{font-size:.8rem}.email-action{color:var(--soft);font:.62rem var(--font-mono);text-transform:uppercase;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.email-action:hover{color:var(--fg)}
.igaming-page .work-section.popup-anim-section{padding-block:20px 60px}
.popup-anim-wrap{display:flex;flex-direction:column;align-items:center;padding:0;border:0;border-radius:0;background:transparent}
.popup-anim-label{color:var(--muted);font:.65rem var(--font-mono);letter-spacing:.1em}
.popup-anim-frame{width:min(100%,440px);height:560px;position:relative}
/* Decorative, non-interactive preview: wheel and touch belong to the main page. */
.popup-anim-frame iframe{display:block;width:100%;height:100%;border:0;background:transparent;pointer-events:none}
@media(max-width:900px){
 .igaming-page .work-section{padding:40px 24px}
 .grid-banners,.grid-widgets{grid-template-columns:1fr}
 .banner.short,.banner.wide{grid-column:span 1}
 .grid-widgets{gap:24px}
 .grid-trafego .card.wide{grid-column:span 1}
 .grid-trafego,.grid-popups,.grid-gamif{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .grid-gamif{padding:0;gap:14px}
 .gamif-card img{padding:.75rem .75rem 2.25rem}
 .gamif-card-num{font-size:22px;top:12px;right:12px}
 .gamif-card-label{font-size:8px;left:10px;bottom:12px}
}
@media(max-width:768px){.grid-gamif-banners{flex-direction:column;align-items:center}.gamif-banner{height:auto;width:100%;max-width:500px}.gamif-banner img{width:100%;height:auto}}
@media(max-width:560px){.gallery-nav{padding-bottom:1.5rem;gap:.45rem}.gallery-nav a{font-size:.72rem;padding:.6rem .8rem}.s-head-left{gap:.8rem}.s-title{font-size:clamp(1.8rem,8vw,2.5rem)}}
@media(max-width:480px){.popup-anim-wrap{gap:25px}.popup-anim-frame{width:240px;height:350px}}
@media(max-width:360px){.grid-trafego,.grid-popups,.grid-gamif{grid-template-columns:1fr}.grid-trafego .card,.grid-popups .card,.gamif-card{width:100%;max-width:260px;margin-inline:auto}}

/* Interactive case study; existing galleries retain their original arrangement. */
.club-dialog{position:fixed;inset:0;margin:auto;padding:0;width:min(1440px,calc(100% - 48px));height:calc(100dvh - 48px);max-width:none;max-height:none;border:1px solid var(--line);border-radius:18px;background:#020905;color:var(--fg);overflow:hidden;opacity:0;transform:translateY(18px) scale(.985);transition:opacity .22s ease,transform .22s ease}
.club-dialog.is-visible{opacity:1;transform:translateY(0) scale(1)}
.club-dialog::backdrop{background:rgb(0 0 0 / .78);backdrop-filter:blur(8px)}
.club-dialog[open]{display:flex;flex-direction:column}
.club-dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex:none;min-height:64px;padding:12px 24px;background:var(--bg,#111);border-bottom:1px solid var(--line)}
.club-dialog-bar strong{font-size:.95rem}.club-dialog-bar div>span{font-size:.7rem;color:var(--muted);margin-left:1rem}
.club-close{display:flex;align-items:center;gap:1rem;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:8px;color:inherit;background:transparent;font:inherit;cursor:pointer}.club-close span{font-size:1.5rem}.club-close:hover{background:var(--chip)}
.club-stage{position:relative;flex:1;min-height:0}.club-stage iframe{display:block;width:100%;height:100%;border:0;opacity:0;transition:opacity .25s}.club-dialog.is-loaded iframe{opacity:1}.club-loading{position:absolute;inset:40% 0 auto;text-align:center;color:var(--soft)}.club-dialog.is-loaded .club-loading{display:none}
html.club-preview-open,html.club-preview-open body{overflow:hidden!important;overscroll-behavior:none}
@media(max-width:700px){.club-dialog{width:100%;height:100dvh;border:0;border-radius:0}.club-dialog-bar{padding:8px 12px}.club-dialog-bar div>span{display:none}}
@media(prefers-reduced-motion:reduce){.club-dialog,.club-stage iframe{transition:none;transform:none}}

.club-project{scroll-margin-top:110px}

.club-open{font:inherit}

/* ============ ANIMAÇÕES (assets/js/igaming-motion.js) ============
   Até a animação assumir, as peças ficam escondidas — assim nenhuma imagem
   aparece antes da hora. Sem JS, com "reduzir movimento" ou no fallback,
   tudo aparece normalmente. */
html.js:not(.reduce-motion):not(.motion-fallback) .igaming-page :is(
  .gallery-nav a,
  .s-num,
  .s-title,
  .card,
  .banner,
  .widget,
  .gamif-card,
  .gamif-banner,
  .email-card,
  .ed-card,
  .popup-anim-label,
  .popup-anim-frame,
  .club-project > *
):not(.is-visible) {
  opacity: 0;
}

/* a borda de cima do cabeçalho vira uma linha que se desenha */
.s-head.has-line {
  position: relative;
  border-top-color: transparent;
}

.s-line {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
  transform-origin: 0% 50%;
}

/* ============ CLUBE DE OURO · CARD DE DESTAQUE ============
   Na identidade do site (preto, off-white e linhas finas).
   A identidade da bet aparece só dentro do modal, na própria experiência. */
.club-project {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-bottom: 2.5rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(242, 240, 235, .06), transparent 60%),
    var(--chip);
}

/* brilho discreto que percorre a borda do card */
.club-project::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--club-angle, 0deg), transparent 0 72%, rgba(242, 240, 235, .55) 82%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: club-border 7s linear infinite;
}

@property --club-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes club-border {
  to { --club-angle: 360deg; }
}

.club-kicker {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1rem;
  color: var(--soft);
  font: .65rem var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ponto "ao vivo": é uma experiência navegável, não uma imagem */
.club-live {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fg);
}

.club-live::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid var(--fg);
  border-radius: 50%;
  animation: club-ping 1.8s ease-out infinite;
}

@keyframes club-ping {
  from { transform: scale(.5); opacity: .8; }
  to { transform: scale(1.9); opacity: 0; }
}

.club-project h3 {
  margin-bottom: 1rem;
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  letter-spacing: -.045em;
  line-height: 1.02;
}

.club-desc {
  max-width: 34rem;
  color: var(--soft);
  line-height: 1.65;
}

.club-features {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.4rem 0 1.8rem;
  list-style: none;
}

.club-features li {
  padding: .45rem .75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(242, 240, 235, .03);
  color: var(--soft);
  font: .7rem var(--font-mono);
  letter-spacing: .04em;
}

.club-open {
  cursor: pointer;
}

.club-info .club-open {
  gap: 1.5rem;
}

/* link para o case completo, em Sites */
.club-case-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.1rem;
  color: var(--soft);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .2s ease;
}

.club-case-link:hover {
  color: var(--fg);
}

/* ---------- prévia clicável ---------- */
.club-preview {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  text-align: left;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .75);
  transform: perspective(1400px) rotateY(-5deg) rotateX(2deg);
  transform-origin: 0% 50%;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1), box-shadow .6s ease, border-color .3s ease;
}

.club-browser-bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  height: 2.1rem;
  padding: 0 .9rem;
  border-bottom: 1px solid var(--line);
  background: #151515;
}

.club-browser-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(242, 240, 235, .2);
}

.club-browser-bar span {
  margin-left: .6rem;
  color: var(--muted);
  font: .6rem var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.club-preview-media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.club-preview-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform .8s cubic-bezier(.22, 1, .36, 1), filter .5s ease;
}

/* selo parado, no estilo dos botões do site */
.club-preview-cta {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1.1rem;
  border: 1px solid var(--fg);
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  transform: translateX(-50%);
  transition: background-color .3s ease, color .3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .club-preview:hover {
    border-color: rgba(242, 240, 235, .45);
    box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .85);
    transform: perspective(1400px) rotateY(0deg) rotateX(0deg) translateY(-4px);
  }

  .club-preview:hover .club-preview-media img {
    transform: scale(1.04);
    filter: brightness(1.06);
  }

  .club-preview:hover .club-preview-cta {
    background: var(--bg);
    color: var(--fg);
  }
}

.club-preview:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 4px;
}

@media (max-width: 900px) {
  .club-project {
    grid-template-columns: 1fr;
  }

  .club-preview {
    order: -1;
    transform: none;
  }
}

@media (max-width: 560px) {
  .club-project {
    padding: 1.1rem;
    border-radius: 16px;
  }

  .club-preview-cta {
    bottom: .9rem;
    padding: .6rem .9rem;
    font-size: .72rem;
  }

  .club-info .club-open {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .club-project::before,
  .club-live::after {
    animation: none;
  }
}

/* escala de texto: parágrafos maiores (variáveis em hub.css) */
.club-desc {
  font-size: var(--fs-body);
}