/* Locked After Dark cards.
 *
 * The teaser that ships publicly is 96x120 and was downsampled BEFORE it was
 * blurred, so the caption text is gone at the pixel level rather than covered
 * over. Nothing here is doing the hiding: the CSS blur is cosmetic, present
 * only to make the upscale read as deliberate rather than as a broken image.
 * Never move the gate into this file. */

.flr-cap-is-locked { position: relative; }

.flr-cap-is-locked img {
  filter: blur(6px) saturate(1.05) brightness(.82);
  transform: scale(1.06);          /* hides the soft edge the blur leaves */
  transition: filter .35s ease, transform .35s ease;
}

/* The padlock. Small, gold, bottom-left, so it never sits over her face. */
.flr-cap-lock {
  position: absolute;
  left: 10px; bottom: 10px;
  z-index: 3;
  font-size: 15px; line-height: 1;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(12, 5, 9, .68);
  border: 1px solid rgba(201, 168, 76, .45);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
  pointer-events: none;
}

/* A locked tile still reads as a caption card, so the wall does not develop
 * holes where the gated ones sit. */
.flr-feed-tile.flr-cap-is-locked::after {
  content: "Members";
  position: absolute;
  right: 10px; bottom: 12px;
  z-index: 3;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: #d9c48a;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
  pointer-events: none;
}

.flr-cap-text-locked {
  color: #a8899a;
  font-style: italic;
}

/* ── Unlocked state ──────────────────────────────────────────────────────────
 * Added by locked.js once flrcap/v1/unlock confirms entitlement. The blur is
 * removed with a transition so the card resolves rather than pops, which also
 * makes it obvious to a paying member that something happened for them. */
.flr-cap-is-locked.flr-cap-unlocked img { filter: none; transform: none; }
.flr-cap-is-locked.flr-cap-unlocked .flr-cap-lock,
.flr-feed-tile.flr-cap-is-locked.flr-cap-unlocked::after { display: none; }
.flr-cap-is-locked.flr-cap-unlocked .flr-cap-text-locked { display: none; }

/* ── The join prompt, for everyone who is not a member ───────────────────── */
.flr-cap-gate {
  margin: 22px auto 30px;
  max-width: 720px;
  text-align: center;
  padding: 22px 24px;
  border: 1px solid rgba(201, 168, 76, .32);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(36, 16, 25, .72), rgba(12, 5, 9, .72));
}
.flr-cap-gate h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 27px; line-height: 1.15; margin: 0 0 8px; color: #f2e6ee;
}
.flr-cap-gate p { margin: 0 0 16px; color: #a8899a; font-size: 14.5px; line-height: 1.6; }
.flr-cap-gate .flr-cap-gate-n { color: #c9a84c; font-weight: 600; }
.flr-cap-gate a {
  display: inline-block; text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: 11px 24px; border-radius: 999px; margin: 0 6px 8px;
}
.flr-cap-gate a.p { background: linear-gradient(135deg, #c2185b, #e91e8c); color: #fff; }
.flr-cap-gate a.s { border: 1px solid rgba(201, 168, 76, .5); color: #c9a84c; }

@media (prefers-reduced-motion: reduce) {
  .flr-cap-is-locked img { transition: none; }
}

/* ── The After Dark chip: an ember, not a shout ──────────────────────────────
 * A section whose rows are locked gets this. The flame is a small radial glow
 * that breathes rather than flickers frantically; the brand is premium, and a
 * gaudy animation on a caption feed reads as a banner ad. It sits BEHIND the
 * label so the text never moves. All of it stops under prefers-reduced-motion,
 * handled in CSS so the JS never has to branch. */
.flr-feed-chip.flr-chip-ember {
  position: relative;
  border-color: rgba(215, 138, 60, .55);
  background: linear-gradient(180deg, rgba(84, 26, 20, .55), rgba(38, 12, 14, .55));
  color: #ffd9a8;
  box-shadow: 0 0 0 rgba(226, 120, 42, 0);
  animation: flr-ember-pulse 3.4s ease-in-out infinite;
}
.flr-feed-chip.flr-chip-ember:hover { border-color: rgba(255, 170, 80, .9); }
.flr-feed-chip.flr-chip-ember .flr-feed-chip-n { color: #ffbf7a; }

/* the glow itself, behind the text */
.flr-chip-flame {
  position: absolute;
  left: 8px; right: 8px; bottom: -2px; height: 70%;
  border-radius: 999px;
  background: radial-gradient(60% 100% at 50% 100%,
              rgba(255, 146, 43, .55) 0%,
              rgba(226, 74, 42, .28) 45%,
              rgba(226, 74, 42, 0) 78%);
  filter: blur(5px);
  pointer-events: none;
  z-index: 0;
  animation: flr-ember-flicker 2.1s ease-in-out infinite;
}
.flr-feed-chip.flr-chip-ember > *:not(.flr-chip-flame) { position: relative; z-index: 1; }

.flr-chip-excl {
  position: relative; z-index: 1;
  margin-left: 8px; padding: 2px 7px;
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  color: #2a1006;
  background: linear-gradient(135deg, #f3c169, #e8913a);
  border-radius: 999px;
  vertical-align: middle;
}

@keyframes flr-ember-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(226, 120, 42, 0); }
  50%      { box-shadow: 0 0 18px rgba(226, 120, 42, .38); }
}
@keyframes flr-ember-flicker {
  0%, 100% { opacity: .78; transform: scaleY(1); }
  35%      { opacity: 1;   transform: scaleY(1.13); }
  62%      { opacity: .68; transform: scaleY(.94); }
}

/* A locked card is a door, so say so. */
.flr-cap-is-locked:not(.flr-cap-unlocked) { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .flr-feed-chip.flr-chip-ember,
  .flr-chip-flame { animation: none; }
  .flr-chip-flame { opacity: .85; }
}