/* ==========================================================================
   Header · banner · alliance members · promo strip
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2) var(--space-3);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: none;
}

.brand-mark {
  width: clamp(30px, 8vw, 38px);
  height: clamp(30px, 8vw, 38px);
  color: var(--c-orange);
  fill: currentColor;
  filter: drop-shadow(0 3px 8px rgba(255, 154, 31, 0.5));
}

.brand-word {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1rem + 1.8vw, 1.75rem);
  letter-spacing: -0.02em;
  line-height: 1;
}

.brand-word b {
  font-weight: 900;
}

.brand-word .chip {
  padding: 0.12em 0.22em 0.16em;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffb43c, #f2790d);
  color: #150c00;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.brand-tagline {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(0.5rem, 0.36rem + 0.78vw, 0.78rem);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.brand-tagline span {
  display: block;
}

@media (min-width: 24rem) {
  .brand-tagline span {
    white-space: nowrap;
  }
}

.brand-tagline .accent {
  color: var(--c-green);
  text-shadow: 0 0 12px rgba(58, 209, 63, 0.45);
}

.header-actions {
  display: flex;
  gap: var(--space-2);
  flex: none;
}

.icon-btn {
  display: grid;
  justify-items: center;
  gap: 0.28rem;
  width: clamp(46px, 12vw, 58px);
  font-size: clamp(0.55rem, 0.44rem + 0.5vw, 0.7rem);
  font-weight: 700;
  white-space: nowrap;
  color: var(--c-text-dim);
  transition: color var(--dur-fast) ease;
}

.icon-btn .icon-shell {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 0.82;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--c-surface-2), var(--c-surface));
  font-size: 1.15rem;
  color: var(--c-text);
  transition:
    border-color var(--dur-normal) var(--ease-out-expo),
    box-shadow var(--dur-normal) var(--ease-out-expo),
    transform var(--dur-normal) var(--ease-out-back);
}

.icon-btn:hover .icon-shell,
.icon-btn:focus-visible .icon-shell {
  border-color: rgba(243, 195, 87, 0.6);
  box-shadow: var(--glow-gold);
  transform: translateY(-2px);
}

.icon-btn:hover,
.icon-btn:focus-visible {
  color: var(--c-gold);
}

.icon-btn:active .icon-shell {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Hero carousel
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-xl);
  background: #08080a;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.hero-track {
  display: grid;
}

.slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(190px, 52vw, 260px);
  padding: var(--space-4) var(--space-5) var(--space-6);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
  transition:
    opacity var(--dur-slow) var(--ease-out-expo),
    transform 900ms var(--ease-out-expo),
    visibility 0s linear var(--dur-slow);
}

.slide[data-active="true"] {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition-delay: 0s;
  z-index: 1;
}

.slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(72% 120% at 88% 42%, var(--slide-glow, rgba(230, 33, 43, 0.5)) 0%, transparent 62%),
    radial-gradient(60% 90% at 8% 8%, rgba(243, 195, 87, 0.16) 0%, transparent 60%),
    linear-gradient(102deg, #0b0b0d 26%, #17171b 60%, #26161a 100%);
}

/* Editorial "photo plate": layered watermark tags + stage silhouettes */
.slide-stage {
  position: absolute;
  inset: 0 0 0 38%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 24%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%);
}

.slide-stage svg {
  position: absolute;
  right: -4%;
  bottom: -2%;
  width: 108%;
  height: auto;
}

.slide-watermarks {
  position: absolute;
  inset: 0 0 0 42%;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: clamp(0.7rem, 2.2vw, 1.1rem);
  color: rgba(255, 255, 255, 0.16);
  pointer-events: none;
}

.slide-watermarks i {
  position: absolute;
  font-style: normal;
  white-space: nowrap;
}

.slide-watermarks i:nth-child(1) { top: 14%; right: 6%; font-size: 1.6em; color: rgba(198, 32, 40, 0.85); }
.slide-watermarks i:nth-child(2) { top: 42%; right: 42%; font-size: 1.35em; color: rgba(198, 32, 40, 0.7); }
.slide-watermarks i:nth-child(3) { top: 8%; right: 46%; transform: rotate(-8deg); font-family: var(--font-body); font-style: italic; }
.slide-watermarks i:nth-child(4) { top: 62%; right: 12%; transform: rotate(-6deg); font-family: var(--font-body); font-style: italic; }

.slide-copy {
  position: relative;
  z-index: 2;
  max-width: 62%;
  display: grid;
  gap: 0.5rem;
  justify-items: start;
}

.slide-title {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: 0.9;
  letter-spacing: -0.02em;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.7));
}

.slide-lead {
  font-size: clamp(0.95rem, 0.7rem + 1.4vw, 1.35rem);
  font-weight: 900;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

.slide-sub {
  font-size: clamp(0.7rem, 0.56rem + 0.75vw, 0.9rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.86);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 0.7rem;
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
}

.hero-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.32);
  transition:
    width var(--dur-normal) var(--ease-out-expo),
    background-color var(--dur-normal) ease;
}

.hero-dots button[aria-selected="true"] {
  width: 20px;
  background: var(--grad-gold-btn);
}

/* --------------------------------------------------------------------------
   Alliance members
   -------------------------------------------------------------------------- */

.panel {
  /* Card type scales with the panel, never the viewport — the shell is capped. */
  container-type: inline-size;
  border: 1px solid rgba(243, 195, 87, 0.22);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(243, 195, 87, 0.1), transparent 60%),
    linear-gradient(180deg, #0c0c0f, #050506);
  box-shadow: var(--shadow-card);
  padding: var(--space-4) var(--space-3) var(--space-4);
}

.section-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-inline: var(--space-2);
  margin-bottom: var(--space-4);
}

.section-head .icon {
  font-size: 1.35rem;
  color: var(--c-gold);
  filter: drop-shadow(0 0 8px rgba(243, 195, 87, 0.55));
}

.section-head h2 {
  font-size: var(--text-lg);
  font-weight: 900;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

.member-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

/* Brand card ---------------------------------------------------------------*/

.member {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--brand);
  border-radius: var(--r-lg);
  background: var(--grad-card-light);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 0 18px -6px var(--brand-dim),
    var(--shadow-lift);
  transition:
    transform var(--dur-normal) var(--ease-out-back),
    box-shadow var(--dur-normal) var(--ease-out-expo);
}

.member:hover,
.member:focus-within {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 0 26px -4px var(--brand),
    0 22px 30px -18px rgba(0, 0, 0, 0.9);
}

.member-flag {
  position: absolute;
  top: -1px;
  right: -1px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 0 var(--r-lg) 0 var(--r-lg);
  background: linear-gradient(150deg, #1d1d22, #08080a);
  color: var(--c-gold);
  font-size: 0.75rem;
  box-shadow: inset 0 0 0 1px var(--brand-dim);
}

.member-logo {
  display: grid;
  place-items: center;
  height: clamp(46px, 13cqi, 62px);
  padding: var(--space-3) var(--space-2) 0;
}

.member-logo svg {
  width: auto;
  height: 100%;
  max-width: 100%;
}

.member-name {
  padding: 0.15rem 0 0.5rem;
  text-align: center;
  font-size: clamp(0.85rem, 3.4cqi, 1.1rem);
  font-weight: 900;
  color: #14161c;
  letter-spacing: -0.01em;
}

.member-badges {
  display: flex;
  justify-content: center;
  gap: clamp(0.25rem, 1.6cqi, 0.65rem);
  padding-bottom: 0.55rem;
  font-size: clamp(0.6rem, 2.6cqi, 0.85rem);
  font-weight: 900;
  color: #14161c;
}

.member-badges span {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  white-space: nowrap;
}

.member-badges .icon {
  font-size: 1.05em;
}

.member-stats {
  display: grid;
  gap: 0.4rem;
  padding: 0 0.4rem 0.5rem;
}

.stat {
  display: grid;
  gap: 0.05rem;
  padding: 0.35rem 0.25rem 0.45rem;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, #16161b, #030304);
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.stat dt {
  font-size: clamp(0.5rem, 2cqi, 0.68rem);
  font-weight: 800;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--stat-label, rgba(255, 255, 255, 0.78));
}

.stat dd {
  margin: 0;
  font-size: clamp(0.8rem, 3.2cqi, 1.05rem);
  font-weight: 900;
  color: var(--stat-value, #fff);
}

.stat--bonus {
  --stat-value: #fff;
}

.stat--deposit {
  --stat-label: var(--c-magenta);
  --stat-value: var(--brand-alt, var(--c-violet));
}

.member-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  margin-top: auto;
  padding: 0.55rem 0.2rem;
  background: var(--brand-cta, linear-gradient(180deg, #2f7bff, #1450c8));
  color: #fff;
  font-size: clamp(0.46rem, 2.2cqi, 0.68rem);
  font-weight: 900;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: filter var(--dur-fast) ease;
}

.member-cta .icon {
  font-size: 1.2em;
}

.member-cta:hover,
.member-cta:focus-visible {
  filter: brightness(1.15);
}

/* Very narrow phones: let the CTA breathe over two lines instead of clipping */
@media (max-width: 25rem) {
  .member-cta {
    white-space: normal;
    line-height: 1.15;
    text-align: center;
  }

  .member-cta .icon {
    display: none;
  }
}

/* Per-brand theming */
.member--jin88 {
  --brand: #2f7bff;
  --brand-dim: rgba(47, 123, 255, 0.55);
  --brand-alt: #8f7bff;
  --brand-cta: linear-gradient(180deg, #3a86ff, #1145b8);
}

.member--ak168 {
  --brand: #ec2a33;
  --brand-dim: rgba(236, 42, 51, 0.55);
  --brand-alt: #ff5fa8;
  --brand-cta: linear-gradient(180deg, #e8262f, #9d0d14);
}

.member--ks168 {
  --brand: #16b85c;
  --brand-dim: rgba(22, 184, 92, 0.55);
  --brand-alt: #9d7bff;
  --brand-cta: linear-gradient(180deg, #18c163, #067a38);
}

/* Coming soon --------------------------------------------------------------*/

.coming-soon {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: var(--space-3);
  margin-top: 0.6rem;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-3);
  border: 1px solid rgba(243, 195, 87, 0.35);
  border-radius: var(--r-lg);
  background:
    radial-gradient(80% 120% at 18% 50%, rgba(243, 195, 87, 0.12), transparent 62%),
    linear-gradient(180deg, #131316, #07070a);
}

.coming-soon .member-flag {
  border-radius: 0 var(--r-lg) 0 var(--r-lg);
}

.coming-soon figure {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  margin: 0;
}

.coming-soon figure svg {
  width: clamp(92px, 26vw, 130px);
  height: auto;
}

.coming-soon figcaption {
  font-size: clamp(0.62rem, 0.5rem + 0.6vw, 0.8rem);
  font-weight: 900;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

.coming-soon-body {
  display: grid;
  gap: 0.7rem;
  justify-items: center;
}

.coming-soon-body h3 {
  font-size: clamp(1rem, 0.72rem + 1.4vw, 1.4rem);
  font-weight: 900;
  letter-spacing: var(--track-caps);
}

.ghost-btn {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #1c1c21, #0a0a0d);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: var(--c-text-dim);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  text-align: center;
  transition:
    color var(--dur-fast) ease,
    box-shadow var(--dur-normal) var(--ease-out-expo);
}

.ghost-btn:hover,
.ghost-btn:focus-visible {
  color: var(--c-gold);
  box-shadow: inset 0 0 0 1px rgba(243, 195, 87, 0.6);
}

/* --------------------------------------------------------------------------
   Join promo strip
   -------------------------------------------------------------------------- */

.promo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
  border: 1px solid rgba(243, 195, 87, 0.4);
  border-radius: var(--r-lg);
  background:
    radial-gradient(70% 140% at 12% 50%, rgba(243, 195, 87, 0.16), transparent 60%),
    linear-gradient(180deg, #141318, #060608);
  box-shadow: var(--shadow-card);
}

.promo figure {
  margin: 0;
  width: clamp(54px, 16vw, 74px);
}

.promo-copy h2 {
  font-size: clamp(0.85rem, 0.6rem + 1.3vw, 1.3rem);
  font-weight: 900;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

.promo-copy p {
  font-size: clamp(0.56rem, 0.44rem + 0.5vw, 0.75rem);
  line-height: 1.3;
  color: var(--c-text-dim);
}

.gold-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-pill);
  background: var(--grad-gold-btn);
  color: #241500;
  font-size: clamp(0.62rem, 0.5rem + 0.6vw, 0.8rem);
  font-weight: 900;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 8px 18px -10px rgba(243, 195, 87, 0.9);
  transition:
    transform var(--dur-normal) var(--ease-out-back),
    box-shadow var(--dur-normal) var(--ease-out-expo);
}

.gold-btn .icon {
  font-size: 1.15em;
}

.gold-btn:hover,
.gold-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 12px 24px -10px rgba(243, 195, 87, 1);
}

.gold-btn:active {
  transform: translateY(0);
}

.slide .gold-btn {
  margin-top: 0.35rem;
  padding: 0.55rem 1rem;
}

/* Reveal choreography — only armed once JS can un-hide it again */
.has-js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-slow) var(--ease-out-expo),
    transform var(--dur-slow) var(--ease-out-expo);
}

.has-js .reveal.is-visible {
  opacity: 1;
  transform: none;
}