/* ==========================================================================
   Film Frame — reusable viewfinder hover treatment
   Usage: add class "film-frame" to any container with an image.
   JS (crumbcast-film-frame.js) auto-injects corner brackets, split-image
   focus prism, and a focus-rack blur animation on hover.
   ========================================================================== */

.film-frame {
  position: relative;
  overflow: hidden;
}


.film-frame__corner {
  position: absolute;
  width: 28px;
  height: 28px;
  z-index: 2;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0.15);
  border-style: solid;
  border-width: 0;
  opacity: 0;
  transition: opacity 0.4s ease-in;
}

@media (hover: hover) {
  .film-frame:hover .film-frame__corner {
    opacity: 1;
    transition: opacity 0.15s ease-out;
  }
}

.film-frame__corner--tl {
  top: 16px;
  left: 16px;
  border-top-width: 1.5px;
  border-left-width: 1.5px;
}

.film-frame__corner--tr {
  top: 16px;
  right: 16px;
  border-top-width: 1.5px;
  border-right-width: 1.5px;
}

.film-frame__corner--bl {
  bottom: 16px;
  left: 16px;
  border-bottom-width: 1.5px;
  border-left-width: 1.5px;
}

.film-frame__corner--br {
  bottom: 16px;
  right: 16px;
  border-bottom-width: 1.5px;
  border-right-width: 1.5px;
}


/* ---- Microprism Ring (outer collar) ---- */

.film-frame__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease-in;
  /* Cut out centre where split prism sits */
  -webkit-mask-image: radial-gradient(circle, transparent 21px, black 23px);
  mask-image: radial-gradient(circle, transparent 21px, black 23px);
}

@media (hover: hover) {
  .film-frame:hover .film-frame__ring {
    opacity: 1;
    transition: opacity 0.15s ease-out;
  }
}

.film-frame__ring-img {
  position: absolute;
  background-size: cover;
  background-position: center;
  filter: blur(1.5px);
  transition: filter 0.3s ease-in;
}

@media (hover: hover) {
  .film-frame:hover .film-frame__ring-img {
    filter: blur(0px);
    transition: filter 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* Outer ring line */
.film-frame__ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
  z-index: 2;
  pointer-events: none;
}

/* Facet grid overlay — fades out when focused */
.film-frame__ring::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg,   rgba(0, 0, 0, 0.07) 0px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg,  rgba(0, 0, 0, 0.07) 0px, transparent 1px, transparent 3px);
  border-radius: 50%;
  z-index: 1;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
  .film-frame:hover .film-frame__ring::after { opacity: 0; }
}


/* ---- Split-Image Focus Prism (inner circle) ---- */

.film-frame__split {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease-in;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.12);
}

@media (hover: hover) {
  .film-frame:hover .film-frame__split {
    opacity: 1;
    transition: opacity 0.15s ease-out;
  }
}

/* Horizontal split line */
.film-frame__split::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 0.5px;
  background: rgba(255, 255, 255, 0.25);
  z-index: 1;
}

.film-frame__split-half {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
}

.film-frame__split-half--top { top: 0; }
.film-frame__split-half--bottom { top: 50%; }

.film-frame__split-img {
  position: absolute;
  background-size: cover;
  background-position: center;
}

/* Hover: halves rack focus — split distance tracks blur proportionally */
@media (hover: hover) {
  .film-frame:hover .film-frame__split-half--top .film-frame__split-img {
    animation: split-focus-top var(--ff-focus-duration, 0.45s) ease-out forwards;
  }
  .film-frame:hover .film-frame__split-half--bottom .film-frame__split-img {
    animation: split-focus-bottom var(--ff-focus-duration, 0.45s) ease-out forwards;
  }
}


/* ---- Focus Rack Animation ---- */

@media (hover: hover) {
  .film-frame:hover > .insta-grid__item-bg,
  .film-frame:hover > img {
    animation: film-frame-focus var(--ff-focus-duration, 0.45s) ease-out forwards;
  }
}

@keyframes film-frame-focus {
  0%   { filter: blur(0px); }
  30%  { filter: blur(var(--ff-blur, 3px)); }
  100% { filter: blur(0px); }
}

@keyframes split-focus-top {
  0%   { transform: translateX(0);                                  filter: blur(0px); }
  25%  { transform: translateX(calc(-1 * var(--ff-offset, 5px)));   filter: blur(var(--ff-blur-half, 1.5px)); }
  55%  { transform: translateX(calc(-0.6 * var(--ff-offset, 5px))); filter: blur(calc(var(--ff-blur-half, 1.5px) * 0.4)); }
  80%  { transform: translateX(calc(-0.15 * var(--ff-offset, 5px))); filter: blur(calc(var(--ff-blur-half, 1.5px) * 0.1)); }
  100% { transform: translateX(0);                                  filter: blur(0px); }
}

@keyframes split-focus-bottom {
  0%   { transform: translateX(0);                                 filter: blur(0px); }
  25%  { transform: translateX(var(--ff-offset, 5px));             filter: blur(var(--ff-blur-half, 1.5px)); }
  55%  { transform: translateX(calc(0.6 * var(--ff-offset, 5px))); filter: blur(calc(var(--ff-blur-half, 1.5px) * 0.4)); }
  80%  { transform: translateX(calc(0.15 * var(--ff-offset, 5px))); filter: blur(calc(var(--ff-blur-half, 1.5px) * 0.1)); }
  100% { transform: translateX(0);                                 filter: blur(0px); }
}