/* "As seen on TikTok" — reel wall (real cover previews, click-to-play) */
#tiktokWall{padding:76px 0}
#tiktokWall .sh{text-align:center;margin-bottom:38px}
#tiktokWall .tt-sub{max-width:520px;margin:10px auto 0;color:var(--dim);font-size:15px;opacity:.8}

.tt-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,300px));
  justify-content:center;
  gap:22px;
}

.tt-card{
  position:relative;
  aspect-ratio:9/16;
  border:1px solid var(--border);
  border-radius:24px;
  overflow:hidden;
  background:var(--surface-2);
  cursor:pointer;
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,border-color .3s ease;
}
.tt-card:not(.is-playing):hover{
  transform:translateY(-6px);
  border-color:color-mix(in srgb,var(--gold) 55%,var(--border));
  box-shadow:0 26px 60px rgba(0,0,0,.4);
}
.tt-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* branded gradient fallback — shown until the real cover loads (or if it fails) */
.tt-card-bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 78% at 50% 0%,rgba(255,255,255,.07),transparent 60%),
    linear-gradient(158deg,color-mix(in srgb,var(--gold) 30%,var(--bg)) 0%,var(--surface-2) 52%,var(--bg) 100%);
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.tt-card[data-acc="silver"] .tt-card-bg{
  background:
    radial-gradient(120% 78% at 50% 0%,rgba(255,255,255,.09),transparent 60%),
    linear-gradient(158deg,color-mix(in srgb,var(--silver) 30%,var(--bg)) 0%,var(--surface-2) 52%,var(--bg) 100%);
}
.tt-card[data-acc="black"] .tt-card-bg{
  background:
    radial-gradient(120% 78% at 50% 0%,color-mix(in srgb,var(--gold) 22%,transparent),transparent 62%),
    linear-gradient(158deg,color-mix(in srgb,var(--surface-2) 70%,#000) 0%,var(--bg) 60%,#000 100%);
}
.tt-card:hover .tt-card-bg{transform:scale(1.06)}

/* real video cover (injected once oEmbed resolves) */
.tt-cover{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s ease,transform .5s cubic-bezier(.16,1,.3,1);
}
.tt-card.has-cover .tt-cover{opacity:1}
.tt-card:hover .tt-cover{transform:scale(1.05)}

/* faint scanlines for a subtle "screen" feel */
.tt-card-grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;opacity:.5;
}
.tt-card.has-cover .tt-card-grain{opacity:.18}

/* legibility shade over the cover — dark at top (badge) and bottom (caption) */
.tt-shade{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,transparent 26%,transparent 48%,rgba(0,0,0,.72) 100%);
  opacity:0;transition:opacity .45s ease;
}
.tt-card.has-cover .tt-shade{opacity:1}

.tt-badge{
  position:absolute;top:13px;left:13px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px;border-radius:100px;
  background:rgba(0,0,0,.42);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;font-size:12px;font-weight:700;
}
.tt-badge svg{width:13px;height:13px}

.tt-play{
  position:absolute;top:50%;left:50%;z-index:3;
  transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;
  background:var(--grad-accent);color:var(--btn-on-accent);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:transform .3s ease,box-shadow .3s ease;
}
.tt-play svg{width:26px;height:26px;margin-left:3px}
.tt-play::before{
  content:"";position:absolute;inset:-10px;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--gold) 65%,transparent);
  animation:ttPulse 2.4s ease-out infinite;
}
@keyframes ttPulse{0%{transform:scale(.92);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.tt-card:hover .tt-play{transform:translate(-50%,-50%) scale(1.09);box-shadow:0 14px 40px rgba(0,0,0,.6)}

.tt-foot{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:14px 15px}
.tt-cap{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  color:#fff;font-size:13px;line-height:1.4;font-weight:600;
  text-shadow:0 1px 8px rgba(0,0,0,.55);
}

/* playing state → the official player fills the card, poster chrome hidden */
.tt-card.is-playing{cursor:default}
.tt-card.is-playing > :not(.tt-frame){display:none}
.tt-frame{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4;background:#000}

@media(max-width:940px){.tt-grid{grid-template-columns:repeat(2,minmax(0,300px))}}
@media(max-width:620px){
  .tt-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .tt-play{width:52px;height:52px}
  .tt-play svg{width:21px;height:21px}
}

@media(prefers-reduced-motion:reduce){
  .tt-play::before{animation:none;display:none}
  .tt-card,.tt-card-bg,.tt-cover,.tt-play,.tt-shade{transition:none}
}