/* Fans254 v13.4.71 — delayed professional page loaders and stable media geometry. */
html.f254-feed-loading-enabled {
  --f254-loading-photo-ratio: 4 / 5;
  --f254-loading-video-ratio: 16 / 9;
  --f254-loading-line: color-mix(in srgb, var(--f-border, #d8e0e8) 72%, transparent);
  --f254-loading-soft: color-mix(in srgb, var(--f-surface-2, #f3f6f8) 82%, transparent);
}

html.f254-feed-loading-enabled :is(
  .f254-social-loading,
  .f254-reels-loading,
  .f254-reels-media-loading,
  .f254-page-loading,
  .f254-profile-loading,
  .f254-groups-loading,
  [data-delayed-loader]
)[data-f254-loading-managed="1"] {
  min-height: 42px !important;
  padding: 9px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}
html.f254-feed-loading-enabled :is(.f254-reels-media-loading,[data-reel-media-loading])[data-f254-loading-managed="1"] {
  min-height: 0 !important;
  width: auto !important;
  padding: 8px 11px !important;
  border-radius: 999px !important;
  background: rgba(3,12,24,.54) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.f254-loading-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 42px;
  min-height: 12px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease;
}
.is-f254-loader-visible > .f254-loading-dots { opacity: 1; visibility: visible; }
.f254-loading-dots > i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #ef4444;
  transform: translateY(0) scale(.86);
  animation: f254LoaderDot 1.18s cubic-bezier(.4,0,.2,1) infinite;
  box-shadow: 0 2px 5px rgba(0,0,0,.16);
}
.f254-loading-dots > i:nth-child(2) { animation-delay: .14s; }
.f254-loading-dots > i:nth-child(3) { animation-delay: .28s; }
@keyframes f254LoaderDot {
  0%,100% { background:#ef4444; transform:translateY(0) scale(.82); opacity:.68; }
  25% { background:#22c55e; transform:translateY(-4px) scale(1); opacity:1; }
  50% { background:#eab308; transform:translateY(0) scale(.88); opacity:.82; }
  75% { background:#1687ff; transform:translateY(2px) scale(.92); opacity:1; }
}
.is-f254-loading-static .f254-loading-dots > i { animation-duration: 1.6s; }
.is-f254-loading-delayed .f254-loading-dots { opacity: .88; }
@media (prefers-reduced-motion: reduce) {
  .f254-loading-dots > i { animation:none !important; transform:none !important; opacity:1 !important; }
  .f254-loading-dots > i:nth-child(1){background:#ef4444}
  .f254-loading-dots > i:nth-child(2){background:#22c55e}
  .f254-loading-dots > i:nth-child(3){background:#1687ff}
}

html.f254-feed-loading-enabled.f254-feed-loading-no-entry-motion :where(
  .f254-social-feed,
  .f254-profile-feed,
  .f254-reels-feed,
  [data-reels-feed],
  [data-group-posts],
  [data-marketplace-grid]
) > :where(article,section,div)[data-f254-feed-card] {
  animation-name: none !important;
  animation-duration: 0s !important;
}

html.f254-feed-loading-enabled [data-f254-media-frame] {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--f-media-bg, #02070c);
}

html.f254-feed-loading-enabled [data-f254-media-frame="photo"] {
  aspect-ratio: var(--f254-media-ratio, var(--f254-loading-photo-ratio));
}

html.f254-feed-loading-enabled [data-f254-media-frame="video"],
html.f254-feed-loading-enabled [data-f254-media-frame="live"],
html.f254-feed-loading-enabled [data-f254-media-frame="sponsored-video"] {
  aspect-ratio: var(--f254-media-ratio, var(--f254-loading-video-ratio));
}

html.f254-feed-loading-enabled [data-f254-media-frame="reel"] {
  aspect-ratio: var(--f254-media-ratio, 9 / 16);
}

html.f254-feed-loading-enabled [data-f254-media-frame="marketplace"] {
  aspect-ratio: var(--f254-media-ratio, 4 / 3);
}

html.f254-feed-loading-enabled [data-f254-media-frame] > :where(img,video,iframe,picture),
html.f254-feed-loading-enabled [data-f254-media-frame] > picture > img,
html.f254-feed-loading-enabled [data-f254-media-frame] :where(.f254-social-carousel,.f254-social-carousel-slide) > :where(img,video) {
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
}

html.f254-feed-loading-enabled [data-f254-media-frame].is-f254-media-pending::after { display:none!important; content:none!important; }

html.f254-feed-loading-enabled [data-f254-media-frame].is-f254-media-ready::after,
html.f254-feed-loading-enabled [data-f254-media-frame].is-f254-media-error::after {
  display: none;
}

html.f254-feed-loading-enabled [data-f254-media-frame].is-f254-media-error {
  background: var(--f-surface-2, #eef2f5);
}

html.f254-feed-loading-enabled [data-f254-media-frame].is-f254-media-error > :where(img,video,iframe) {
  visibility: hidden;
}

@keyframes f254FeedLoadingSpin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  html.f254-feed-loading-enabled .f254-social-loading[data-f254-loading-managed] {
    min-height: 46px !important;
    padding: 10px 12px !important;
    font-size: 11px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.f254-feed-loading-enabled .f254-social-loading[data-f254-loading-managed]::before,
  html.f254-feed-loading-enabled [data-f254-media-frame].is-f254-media-pending::after {
    animation: none !important;
  }
}


/* v13.8.6: a failed or very slow media URL must never leave an animated spinner
   running forever. The JS watchdog removes pending state and later load events
   still restore the media normally. */
html.f254-feed-loading-enabled [data-f254-media-frame].is-f254-media-error {
  background: color-mix(in srgb, var(--f-surface-2, #eef2f5) 88%, transparent);
}


/* v13.4.71 final page-loader authority: any recognized loading container becomes delayed dots. */
html.f254-feed-loading-enabled [data-f254-loading-managed="1"]{
  min-height:42px!important;display:flex!important;align-items:center!important;justify-content:center!important;
  padding:9px 12px!important;color:transparent!important;font-size:0!important;line-height:1!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
}
html.f254-feed-loading-enabled [data-f254-loading-managed="1"]>.f254-spinner,
html.f254-feed-loading-enabled [data-f254-loading-managed="1"]>:not(.f254-loading-dots){display:none!important}