/* Virtual Fade Carousel — Styles
   - Caption chip crossfades (A/B layers) in sync with image transitions
   - New Area filter (dropdown) under controls
   - Controls dim smoothly after inactivity
*/

:root {
  --vfc-bg: #0b0d0f;
  --vfc-surface: #111418;
  --vfc-text: #e8ebee;
  --vfc-muted: #9aa5b1;
  --vfc-accent: #20a57a;
  --vfc-radius: 16px;
  --vfc-shadow: 0 12px 32px rgba(0,0,0,.35);
  --vfc-border: 1px solid rgba(255,255,255,.08);
  --vfc-crossfade: 420ms; /* set by JS to match image crossfade */
}

body { background:#0a0c0e; color:#e9edf1; }
.vfc { width: 100%; margin: 0 auto 36px; padding: 0; }

/* 15% shallower than 16:9 */
.vfc-viewport {
  position: relative;
  background: var(--vfc-surface);
  border-radius: var(--vfc-radius);
  bbbbox-shadow: var(--vfc-shadow);
  overflow: hidden;
  border: var(--vfc-border);
  aspect-ratio: 32/17;
}

.vfc-stage { position: absolute; inset: 0; overflow: hidden; background: #000; }

.vfc-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--vfc-crossfade) ease;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: opacity;
}
.vfc-stage img.is-current {
  opacity: 1;
  pointer-events: auto;
}

/* Fade-to-black sheet for after→next-before boundary */
.vfc-black {
  position: absolute; inset: 0; background: #000; opacity: 0;
  transition: opacity 250ms ease; pointer-events: none; z-index: 2;
}

/* Loading overlay */
.vfc-loading {
  position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none; opacity: 0; transition: opacity 180ms ease; z-index: 3;
}
.vfc-loading.is-visible { opacity: 1; }
.vfc-loading .vfc-loading-box{
  background: rgba(0,0,0,.6); color:#fff; padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.15); border-radius: 12px;
  font: 500 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  user-select: none;
}

/* Prev/Next + Fullscreen buttons */
.vfc-btn{
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.45); color:#fff; border:1px solid rgba(255,255,255,.15);
  width:44px; height:44px; display:grid; place-items:center; border-radius:999px;
  cursor:pointer; user-select:none; backdrop-filter: blur(2px);
  transition: background 120ms ease, transform 120ms ease, opacity 500ms ease;
  z-index: 5;
}
.vfc-btn:hover{ background: rgba(0,0,0,.65); transform: translateY(-50%) scale(1.04); }
.vfc-btn:active{ transform: translateY(-50%) scale(.98); }
.vfc-prev{ left:10px; } .vfc-next{ right:10px; }
.vfc-fullscreen{ top:12px; right:12px; transform:none; width:40px; height:40px; border-radius:10px; opacity:.9; }
.vfc-fullscreen:hover{ opacity:1; transform:none; } .vfc-fullscreen:active{ transform:none; }

/* Controls row */
.vfc-controls{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:10px; transition: opacity 500ms ease;
}
.vfc-controls-left, .vfc-controls-right{ display:inline-flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* Speed selector + playback buttons share sizing */
.vfc-speed{ display:inline-flex; gap:6px; align-items:center; }
.vfc-speed span{
  font: 500 13px/1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:#dfe6ee;
}
.vfc-speed button, .vfc-playback button{
  background:#161a20; color:#dfe6ee; border:1px solid rgba(255,255,255,.08);
  padding:6px 10px; border-radius:10px;
  font: 500 13px/1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  transition: opacity 200ms ease, background 120ms ease, transform 160ms ease;
  cursor: pointer;
}
.vfc-speed button[aria-pressed="true"], .vfc-playback button[aria-pressed="true"]{
  background: var(--vfc-accent); color:#032217; border-color: transparent;
}

/* Caption chip wrapper (single background); inner texts crossfade */
.vfc-meta-wrap{
  background:#161a20; color:#dfe6ee; border:1px solid rgba(255,255,255,.08);
  padding:6px 10px; border-radius:10px;
  font: 500 13px/1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  user-select:none; -webkit-user-select:none;
  white-space:nowrap; max-width:min(70vw, 720px); overflow:hidden; text-overflow:ellipsis;
  display:inline-grid; position:relative; align-items:center;
  transition: transform 160ms ease;
}
.vfc-meta-wrap.flash{ transform: scale(1.06); }
.vfc-metatxt{
  grid-area: 1 / 1; opacity: 0; transition: opacity var(--vfc-crossfade) ease;
}
.vfc-metatxt.is-showing{ opacity: 1; }

/* Area dropdown (under controls) */
.vfc-filter {
  margin-top: 8px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.vfc-filter label {
  font: 500 13px/1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: #dfe6ee;
}
.vfc-filter select {
  background:#161a20; color:#dfe6ee; border:1px solid rgba(255,255,255,.08);
  padding:6px 10px; border-radius:10px;
  font: 500 13px/1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  cursor: pointer;
}

/* Fullscreen tweaks */
.vfc-viewport:fullscreen{ border-radius:0; }
.vfc-viewport:fullscreen .vfc-btn{ width:56px; height:56px; }
.vfc-viewport:fullscreen .vfc-fullscreen{ width:44px; height:44px; }

/* Dim controls/buttons only */
.vfc.vfc-dim .vfc-controls, .vfc.vfc-dim .vfc-btn { opacity: .5; }
.vfc.vfc-dim .vfc-controls:hover, .vfc.vfc-dim .vfc-btn:hover { opacity: 1; }