/* TripleS V2 — art-directed chrome atmosphere, entry glass button, ambient particles */

/* The ENTER control is an outlined, translucent cut-corner glass card. */
.entry .enter-button {
  min-width: 214px;
  min-height: 56px;
  justify-content: center;
  padding: 17px 36px;
  border: 1px solid rgba(236, 237, 244, .62);
  border-radius: 13px;
  color: #f7f7fb;
  background: linear-gradient(127deg, rgba(228,230,240,.17), rgba(15,16,22,.23) 38%, rgba(161,166,182,.15) 88%), rgba(25,26,31,.22);
  box-shadow: inset 0 1px rgba(255,255,255,.24), inset 0 -1px rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.42);
  backdrop-filter: blur(19px) saturate(115%);
  -webkit-backdrop-filter: blur(19px) saturate(115%);
  clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
  transition: background .28s, box-shadow .28s, transform .28s;
}
.entry .enter-button:hover, .entry .enter-button:focus-visible {
  filter: none;
  transform: translateY(-2px);
  background: linear-gradient(120deg, rgba(236,238,247,.26), rgba(27,28,34,.38) 55%, rgba(196,200,215,.24));
  box-shadow: 0 0 27px rgba(222,224,238,.22), inset 0 1px rgba(255,255,255,.44), 0 14px 28px rgba(0,0,0,.48);
}
.entry .enter-button:focus-visible{outline: 2px solid #fff; outline-offset: 4px}
.entry .entry-sound {background:rgba(16,16,19,.53);border-color:rgba(240,240,255,.28);backdrop-filter:blur(18px)}

/* ALL is its own silver-on-black identity, not the Lady photo. */
.site-public[data-lineup="ALL"] .directory-view {
  background: radial-gradient(ellipse at 50% 5%, rgba(52,53,65,.1), transparent 48%),
              url('assets/all-chrome-sheen.svg') center center / cover fixed no-repeat,
              #050506;
}
.site-public[data-lineup="ALL"] .lineup-panel,
.site-public[data-lineup="ALL"] .lineup-panel.lady {
  background: linear-gradient(147deg, rgba(18,19,23,.68), rgba(5,5,7,.73) 55%, rgba(18,18,23,.66));
  border-color:rgba(220,221,230,.1);
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 16px 40px rgba(0,0,0,.27);
}
.site-public[data-lineup="ALL"] .lineup-panel.lady::before,
.site-public[data-lineup="ALL"] .lineup-panel.lady::after {display:none}
.site-public[data-lineup="ALL"] .lineup-panel.triples::before,
.site-public[data-lineup="ALL"] .lineup-panel.triples::after{display:none}

/* Keep the user's Lady FiveM photo, and leave the TripleS Gen entirely black. */
.site-public[data-lineup="TRIPLES_LADY"] .directory-view {
  background:linear-gradient(180deg,rgba(0,0,0,.69),rgba(0,0,0,.8)), url('assets/lady-bg.webp') center center / cover fixed no-repeat;
}
.site-public[data-lineup="TRIPLES_LADY"] .lineup-panel.lady {
  background:rgba(4,4,6,.44);
  border-color:rgba(235,236,244,.13);
}
.site-public[data-lineup="TRIPLES_LADY"] .lineup-panel.lady::after,
.site-public[data-lineup="TRIPLES_LADY"] .lineup-panel.lady::before{display:none}
.site-public[data-lineup="TRIPLES"] .directory-view{background:#000}
.site-public[data-lineup="TRIPLES"] .lineup-panel.triples{background:rgba(0,0,0,.95)}
.site-public[data-lineup="TRIPLES"] .lineup-panel.triples::before,
.site-public[data-lineup="TRIPLES"] .lineup-panel.triples::after{display:none}

/* Particle canvas follows scrolling viewport, but never blocks interaction. */
.directory-view #ambient-particles {
  position:fixed;
  inset:0;
  display:block;
  width:100vw;
  height:100dvh;
  pointer-events:none;
  z-index:1;
  opacity:1;
}
.directory-view > .site-header,
.directory-view > .directory-main,
.directory-view > .site-footer{position:relative;z-index:2}

/* Member ID card: the requested soft gray-white light at the bottom edge on hover. */
.member-card:hover, .member-card:focus-within {
  filter:drop-shadow(0 0 8px rgba(232,233,245,.31)) drop-shadow(0 7px 14px rgba(223,225,238,.27));
}
.leader-card:hover, .leader-card:focus-within {
  box-shadow: 0 0 20px rgba(247,248,255,.17),0 14px 27px rgba(0,0,0,.65);
}
@media(max-width:700px){
  .site-public[data-lineup="ALL"] .directory-view{background-attachment:scroll}
  .site-public[data-lineup="TRIPLES_LADY"] .directory-view{background-attachment:scroll}
  .directory-view #ambient-particles{opacity:.85}
}
@media(prefers-reduced-motion:reduce){
  .member-card:hover,.member-card:focus-within,.leader-card:hover,.leader-card:focus-within{transform:none}
}

/* V4 Firefly visibility fix: painted ABOVE the card panels rather than behind them. */
.directory-view #ambient-particles {
  position: fixed;
  inset: 0;
  z-index: 8;
  width: 100vw;
  height: 100dvh;
  opacity: 1;
  mix-blend-mode: screen;
  pointer-events: none !important;
}
/* Keep the navigation / music controls crisp and above the decorative lights. */
.directory-view > .site-header { position: relative; z-index: 20; }
.directory-view > .directory-main,
.directory-view > .site-footer { position: relative; z-index: 2; }
@media (max-width:700px) {
  .directory-view #ambient-particles { opacity: .92; }
}