/* ==========================================
   Family Central Screensaver
   Hybrid single + collage scene engine
   ========================================== */

:root {
  --fc-ss-bg: #000;
  --fc-ss-fade: 1100ms;
  --fc-ss-radius: 22px;
  --fc-ss-shadow: 0 24px 64px rgba(0,0,0,0.45);
  --fc-ss-polaroid-radius: 6px;
}

#fcScreensaver {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #000;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--fc-ss-fade) ease,
    visibility var(--fc-ss-fade) ease;
  touch-action: none;
}

#fcScreensaver.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#fcScreensaver .fc-ss-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(30,30,30,0.28) 0%, rgba(0,0,0,0.94) 70%),
    #000;
}

#fcScreensaver .fc-ss-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1200ms ease;
}

#fcScreensaver .fc-ss-scene.visible {
  opacity: 1;
}

#fcScreensaver .fc-ss-bgfill {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(24px) brightness(0.42);
  transform: scale(1.08);
}

#fcScreensaver .fc-ss-item,
#fcScreensaver .fc-ss-photo {
  position: absolute;
  overflow: hidden;
  background: #111;
  border-radius: var(--fc-ss-radius);
  box-shadow: var(--fc-ss-shadow);
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform, opacity, left, top;
}

#fcScreensaver .fc-ss-item img,
#fcScreensaver .fc-ss-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

#fcScreensaver .fc-ss-item::after,
#fcScreensaver .fc-ss-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0.05), rgba(0,0,0,0.08));
}

#fcScreensaver .fc-ss-photo.polaroid,
#fcScreensaver .fc-ss-item.polaroid {
  background: #fff;
  padding: 14px 14px 42px 14px;
  border-radius: var(--fc-ss-polaroid-radius);
}

#fcScreensaver .fc-ss-photo.polaroid img,
#fcScreensaver .fc-ss-item.polaroid img {
  border-radius: 2px;
}

#fcScreensaver .fc-ss-badge {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 30;

  display: flex;
  flex-direction: column;
  gap: 4px;

  padding: 14px 18px;
  min-width: 260px;
  max-width: min(80vw, 420px);

  border-radius: 18px;
  background: rgba(10, 14, 22, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  color: #f5f7fb;
  pointer-events: none;
}

#fcScreensaver .fc-ss-badge-time {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

#fcScreensaver .fc-ss-badge-date {
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(240, 245, 255, 0.88);
}

@media (max-width: 640px) {
  #fcScreensaver .fc-ss-badge {
    left: 14px;
    right: 14px;
    bottom: 14px;
    min-width: 0;
    max-width: none;
    padding: 12px 14px;
    border-radius: 14px;
  }

  #fcScreensaver .fc-ss-badge-time {
    font-size: clamp(1.5rem, 7vw, 2.1rem);
  }

  #fcScreensaver .fc-ss-badge-date {
    font-size: 0.9rem;
  }
}

/* ==========================================
   SINGLE SCENES
   ========================================== */

/* kenburns */
.fc-ss-single-kenburns .fc-ss-photo {
  inset: 0;
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  box-shadow: none;
}
.fc-ss-single-kenburns .fc-ss-photo img {
  animation: fcKenBurns 20s ease-in-out forwards;
}

/* float */
.fc-ss-single-float .fc-ss-photo {
  width: min(74vw, 1100px);
  height: min(72vh, 760px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  animation: fcFloatFrame 20s ease-in-out forwards;
}
.fc-ss-single-float .fc-ss-photo img {
  animation: fcFloatZoom 20s ease-in-out forwards;
}

/* bounce */
.fc-ss-single-bounce .fc-ss-photo {
  width: min(34vw, 560px);
  height: min(34vh, 400px);
  left: 6vw;
  top: 8vh;
  transform: rotate(var(--rot, 0deg));
  animation: fcBounceAround 20s linear forwards;
}

/* polaroid */
.fc-ss-single-polaroid .fc-ss-under1,
.fc-ss-single-polaroid .fc-ss-under2,
.fc-ss-single-polaroid .fc-ss-photo {
  width: min(52vw, 760px);
  height: min(62vh, 760px);
  left: 50%;
  top: 50%;
}

.fc-ss-single-polaroid .fc-ss-under1,
.fc-ss-single-polaroid .fc-ss-under2 {
  position: absolute;
  background: rgba(255,255,255,0.92);
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

.fc-ss-single-polaroid .fc-ss-under1 {
  transform: translate(-50%, -50%) rotate(-8deg) scale(0.98);
}
.fc-ss-single-polaroid .fc-ss-under2 {
  transform: translate(-50%, -50%) rotate(6deg) scale(0.99);
}
.fc-ss-single-polaroid .fc-ss-photo {
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  animation: fcPolaroidDrift 20s ease-in-out forwards;
}

/* fade */
.fc-ss-single-fade .fc-ss-photo {
  width: min(82vw, 1300px);
  height: min(82vh, 820px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.fc-ss-single-fade .fc-ss-photo img {
  animation: fcGentleZoom 20s ease-in-out forwards;
}

/* ==========================================
   MULTI SCENES
   ========================================== */

.fc-ss-multi-masonry .fc-ss-item {
  animation: fcGentleTileFloat 20s ease-in-out forwards;
}
.fc-ss-multi-layered .fc-ss-item.featured {
  animation: fcLayeredFeatured 20s ease-in-out forwards;
}
.fc-ss-multi-layered .fc-ss-item.support {
  animation: fcLayeredSupport 20s ease-in-out forwards;
}
.fc-ss-multi-floating .fc-ss-item {
  animation: fcFloatTile 20s ease-in-out forwards;
}
.fc-ss-multi-spotlight .fc-ss-item.featured {
  animation: fcSpotlightFeatured 20s ease-in-out forwards;
}
.fc-ss-multi-spotlight .fc-ss-item.support {
  animation: fcSpotlightSupport 20s ease-in-out forwards;
}

/* ==========================================
   KEYFRAMES
   ========================================== */

@keyframes fcKenBurns {
  0%   { transform: scale(1.02) translate(0px, 0px); }
  50%  { transform: scale(1.10) translate(-20px, -10px); }
  100% { transform: scale(1.16) translate(14px, 10px); }
}

@keyframes fcFloatFrame {
  0%   { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); }
  25%  { transform: translate(calc(-50% + 10px), calc(-50% - 10px)) rotate(calc(var(--rot, 0deg) + 0.5deg)); }
  50%  { transform: translate(calc(-50% - 16px), calc(-50% + 10px)) rotate(calc(var(--rot, 0deg) - 0.4deg)); }
  75%  { transform: translate(calc(-50% + 8px), calc(-50% + 16px)) rotate(calc(var(--rot, 0deg) + 0.3deg)); }
  100% { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); }
}

@keyframes fcFloatZoom {
  0%   { transform: scale(1.00); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1.02); }
}

@keyframes fcBounceAround {
  0%   { left: 6vw;  top: 8vh; }
  25%  { left: 58vw; top: 12vh; }
  50%  { left: 56vw; top: 54vh; }
  75%  { left: 10vw; top: 50vh; }
  100% { left: 18vw; top: 18vh; }
}

@keyframes fcPolaroidDrift {
  0%   { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.00); }
  50%  { transform: translate(calc(-50% + 12px), calc(-50% - 8px)) rotate(calc(var(--rot, 0deg) + 0.6deg)) scale(1.03); }
  100% { transform: translate(calc(-50% - 8px), calc(-50% + 10px)) rotate(calc(var(--rot, 0deg) - 0.4deg)) scale(1.02); }
}

@keyframes fcGentleZoom {
  0%   { transform: scale(1.00); }
  50%  { transform: scale(1.04); }
  100% { transform: scale(1.01); }
}

@keyframes fcGentleTileFloat {
  0%   { transform: translate(0px, 0px) rotate(var(--rot, 0deg)) scale(1); }
  25%  { transform: translate(8px, -6px) rotate(calc(var(--rot, 0deg) + 0.4deg)) scale(1.01); }
  50%  { transform: translate(-10px, 10px) rotate(calc(var(--rot, 0deg) - 0.4deg)) scale(1.03); }
  75%  { transform: translate(7px, 8px) rotate(calc(var(--rot, 0deg) + 0.2deg)) scale(1.02); }
  100% { transform: translate(0px, 0px) rotate(var(--rot, 0deg)) scale(1); }
}

@keyframes fcLayeredFeatured {
  0%   { transform: rotate(var(--rot, 0deg)) scale(1.00); }
  50%  { transform: rotate(calc(var(--rot, 0deg) + 0.4deg)) scale(1.04); }
  100% { transform: rotate(calc(var(--rot, 0deg) - 0.3deg)) scale(1.02); }
}

@keyframes fcLayeredSupport {
  0%   { transform: rotate(var(--rot, 0deg)) scale(1.00); }
  50%  { transform: rotate(calc(var(--rot, 0deg) - 0.5deg)) scale(1.02); }
  100% { transform: rotate(calc(var(--rot, 0deg) + 0.3deg)) scale(1.01); }
}

@keyframes fcFloatTile {
  0%   { transform: translate(0px, 0px) rotate(var(--rot, 0deg)) scale(1); }
  20%  { transform: translate(12px, -8px) rotate(calc(var(--rot, 0deg) + 0.4deg)) scale(1.01); }
  50%  { transform: translate(-16px, 12px) rotate(calc(var(--rot, 0deg) - 0.5deg)) scale(1.03); }
  80%  { transform: translate(8px, 10px) rotate(calc(var(--rot, 0deg) + 0.2deg)) scale(1.01); }
  100% { transform: translate(0px, 0px) rotate(var(--rot, 0deg)) scale(1); }
}

@keyframes fcSpotlightFeatured {
  0%   { transform: rotate(var(--rot, 0deg)) scale(1); }
  50%  { transform: rotate(calc(var(--rot, 0deg) + 0.5deg)) scale(1.04); }
  100% { transform: rotate(calc(var(--rot, 0deg) - 0.2deg)) scale(1.02); }
}

@keyframes fcSpotlightSupport {
  0%   { transform: rotate(var(--rot, 0deg)) scale(1); opacity: 0.96; }
  50%  { transform: rotate(calc(var(--rot, 0deg) - 0.4deg)) scale(1.02); opacity: 1; }
  100% { transform: rotate(calc(var(--rot, 0deg) + 0.2deg)) scale(1.01); opacity: 0.98; }
}