/* ---- Reset + Base ---- */
* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; -webkit-user-select: none; }
html,body { height: 100%; width: 100%; }
body {
  background: #000;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* ---- Canvas background ---- */
#bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #000;
}

/* ---- Main shell ---- */
.shell {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: shellFadeIn .6s cubic-bezier(.22,.9,.18,1) both;
  will-change: transform, opacity;
}

/* ---- Image frame: transparent backing, glow ring ---- */
.image-frame {
  position: relative;
  display: block;
  width: 100%;
  max-width: 1200px;
  border-radius: 20px;
  padding: 0;
  background: transparent;
  overflow: hidden;            /* IMPORTANT: clip to rounded rect */
  -webkit-mask-image: none;    /* defensive */
  mask-image: none;
}

/* Glow ring behind the masked image (uses box-shadow, GPU-friendly) */
.image-frame::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 28px;
  pointer-events: none;
  z-index: -1;
  background: transparent;
  box-shadow:
    0 12px 36px rgba(20, 6, 40, 0.55),
    0 0 48px rgba(95, 28, 143, 0.28),
    0 0 120px rgba(95, 28, 143, 0.10);
  transition: box-shadow 320ms ease, transform 320ms ease, opacity 320ms ease;
  will-change: box-shadow, transform, opacity;
  opacity: 0.98;
}

/* ---- Masked image: removes hard black edges even if the image has a black background.
   This uses an SVG data-URL mask (blurred rounded rect) for a soft feathered mask.
   Both -webkit-mask-image and mask-image included for cross-browser compatibility. */

.display-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 88vh;
  border-radius: 18px;     /* visual rounding */
  object-fit: cover;
  background: transparent;
  -webkit-user-drag: none;
  transition: transform .28s cubic-bezier(.22,.9,.18,1),
              filter .28s ease,
              opacity .28s ease;
  will-change: transform, filter, opacity;

  /* WebKit mask (iOS/Safari/Chrome on some platforms) */
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>\
      <defs>\
        <filter id='f' x='-30%' y='-30%' width='160%' height='160%'>\
          <feGaussianBlur stdDeviation='12' result='b'/>\
        </filter>\
      </defs>\
      <rect x='0' y='0' width='100%' height='100%' rx='18' fill='white' filter='url(%23f)'/>\
    </svg>");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;

  /* Standard mask for other browsers */
  mask-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>\
      <defs>\
        <filter id='f' x='-30%' y='-30%' width='160%' height='160%'>\
          <feGaussianBlur stdDeviation='12' result='b'/>\
        </filter>\
      </defs>\
      <rect x='0' y='0' width='100%' height='100%' rx='18' fill='white' filter='url(%23f)'/>\
    </svg>");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

/* Hover: intensify glow and lift the image slightly */
.image-frame:hover::after {
  transform: scale(1.02);
  box-shadow:
    0 18px 50px rgba(20, 6, 40, 0.62),
    0 0 54px rgba(140, 40, 200, 0.36),
    0 0 140px rgba(140, 40, 200, 0.14);
}
.image-frame:hover .display-img {
  transform: translateY(-6px) scale(1.01);
  filter: brightness(1.02) saturate(1.03);
}

/* responsive adjustments */
@media (max-width: 900px) {
  .shell { padding: 16px; }
  .image-frame { border-radius: 14px; }
  .image-frame::after { inset: -6px; border-radius: 20px; }
  .display-img { border-radius: 12px; max-height: 76vh; }
}

/* entrance */
@keyframes shellFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .image-frame, .display-img, .shell { animation: none !important; transition: none !important; }
  #bg-canvas { display: none !important; }
  .image-frame::after { transition: none !important; transform: none !important; }
}