/* ===========================
   PHOTO FRAME – ORNATE GREEN
   Literal painted frame object
   Inspired by reference image
   =========================== */

.photo-frame-container {
  position: relative;
  z-index: 1;
}

/* Mantle decor wrapper (books + frame) */
.mantle-decor {
  position: absolute;
  top: -135px;
  left: 50%;
  transform: translateX(-50%) scale(1.15);
  z-index: 12;

  display: flex;
  align-items: flex-end;
  gap: 18px;
}

/* OUTER FRAME */
.photo-frame {
  position: relative;
  width: 184px;
  height: 144px;
  padding: 18px;
  background: linear-gradient(135deg,
      #b6d14a 0%,
      #9fbb38 35%,
      #7f9c24 100%);

  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.45),
    inset 0 2px 0 rgba(255, 255, 255, 0.35),
    inset 0 -3px 6px rgba(0, 0, 0, 0.35);

  border-radius: 2px;
}

/* ORNATE EDGE LIP */
.photo-frame::before {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;

  border: 2px solid rgba(255, 255, 255, 0.35);

  box-shadow:
    inset 0 0 0 2px rgba(140, 165, 40, 0.8),
    inset 0 2px 2px rgba(255, 255, 255, 0.25),
    inset 0 -2px 3px rgba(0, 0, 0, 0.35);
}

/* INNER BEVEL */
.photo-frame::after {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;

  border: 1px solid rgba(90, 110, 20, 0.8);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4);
}

/* INNER OPENING */
.frame-inner {
  position: relative;
  width: 100%;
  height: 100%;
  background: #ffffff;
  overflow: hidden;

  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

/* REMOVE GLASS EFFECT COMPLETELY */
.frame-inner::before {
  display: none;
}

/* PHOTO AREA */
.photo-display {
  position: relative;
  width: 100%;
  height: 100%;
  background: #ffffff;
}

.photo-display img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.photo-display img.active {
  opacity: 1;
}

/* NO VIGNETTE */
.photo-display::after {
  display: none;
}

/* REMOVE STAND */
.frame-stand {
  display: none;
}

/* REMOVE NAMEPLATE */
.frame-plate {
  display: none;
}

/* LOADING STATE */
.photo-display.loading::before {
  content: "loading";
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: monospace;
  font-size: 9px;
  letter-spacing: 1px;
  color: #6f851d;
}

@media (max-width: 768px) {
  .mantle-decor {
    left: 50%;
    top: -110px;
    gap: 12px;
  }

  .book-spine {
    height: 140px;
    max-width: 60px;
  }
}