/* ═══════════════════════════════════════════════════════════════
   BANNER ROW HOVER FX
   Add ONE master class to the layout ROW in Journal. Each scopes to
   the banner cards (.slide-content-image) inside that row:

     .bnr-fx-shine    → glossy light sweep + slow zoom
     .bnr-fx-frame    → inset frame reveal + vignette
     .bnr-fx-glow     → spotlight bloom + brightness pop
     .bnr-fx-zoompan  → Ken-Burns zoom + diagonal pan
     .bnr-fx-reveal   → grayscale → colour + underline wipe
     .bnr-fx-bracket  → animated corner brackets (vector)
     .bnr-fx-tilt     → 3D tilt + shadow lift
     .bnr-fx-ripple   → ring expands from center (vector)
     .bnr-fx-tint     → warm duotone wash
   ═══════════════════════════════════════════════════════════════ */

/* Shared base — all variations */
:is(.bnr-fx-shine, .bnr-fx-frame, .bnr-fx-glow) {
  .slide-content-image {
    position: relative;
    overflow: hidden;
    isolation: isolate; /* overlays sit above img, below link */
  }

  .slide-content-image img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.6s ease;
  }

  .slide-link {
    z-index: 3; /* keep anchor clickable above overlays */
  }
}

/* ——— Variation 1: glossy shine sweep + zoom ——— */
.bnr-fx-shine {
  .slide-content-image::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
      115deg,
      transparent 35%,
      rgb(255 255 255 / 0.45) 50%,
      transparent 65%
    );
    transform: translateX(-120%);
    transition: transform 0.9s ease;
  }

  .slide-content-image:hover img {
    transform: scale(1.06);
  }

  .slide-content-image:hover::before {
    transform: translateX(120%);
  }
}

/* ——— Variation 2: inset frame reveal + vignette ——— */
.bnr-fx-frame {
  /* vignette */
  .slide-content-image::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(120% 120% at 50% 50%, transparent 55%, rgb(0 0 0 / 0.35));
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  /* drawn frame */
  .slide-content-image::after {
    content: '';
    position: absolute;
    inset: 1rem;
    z-index: 2;
    pointer-events: none;
    border: 1px solid rgb(255 255 255 / 0.85);
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .slide-content-image:hover img {
    transform: scale(1.04);
  }

  .slide-content-image:hover::before {
    opacity: 1;
  }

  .slide-content-image:hover::after {
    opacity: 1;
    transform: scale(1);
  }
}

/* ——— Variation 3: spotlight bloom + brightness pop ——— */
.bnr-fx-glow {
  .slide-content-image img {
    filter: brightness(0.92);
  }

  .slide-content-image::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(circle at 50% 45%, rgb(255 255 255 / 0.55), transparent 55%);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .slide-content-image:hover img {
    transform: scale(1.05);
    filter: brightness(1.08);
  }

  .slide-content-image:hover::before {
    opacity: 1;
    transform: scale(1);
  }
}

/* ——— Variation 4: Ken-Burns zoom + diagonal pan ——— */
.bnr-fx-zoompan {
  .slide-content-image img {
    transform-origin: 70% 30%;
    transition: transform 1.2s ease;
  }

  .slide-content-image::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to top, rgb(0 0 0 / 0.3), transparent 45%);
    opacity: 0;
    transition: opacity 0.6s ease;
  }

  .slide-content-image:hover img {
    transform: scale(1.12) translate(-2%, 2%);
  }

  .slide-content-image:hover::before {
    opacity: 1;
  }
}

/* ——— Variation 5: grayscale → colour wipe reveal ——— */
.bnr-fx-reveal {
  .slide-content-image img {
    filter: grayscale(0.85) contrast(1.02);
    transition: filter 0.6s ease, transform 0.6s ease, clip-path 0.7s ease;
    clip-path: inset(0 0 0 0);
  }

  /* underline bar wiped open on hover */
  .slide-content-image::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-bottom: 3px solid var(--color-text);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .slide-content-image:hover img {
    filter: grayscale(0) contrast(1);
    transform: scale(1.03);
  }

  .slide-content-image:hover::after {
    transform: scaleX(1);
  }
}

/* ——— Variation 6: animated corner brackets (vector) ——— */
.bnr-fx-bracket {
  .slide-content-image::before,
  .slide-content-image::after {
    content: '';
    position: absolute;
    z-index: 2;
    pointer-events: none;
    width: 2.5rem;
    height: 2.5rem;
    opacity: 0;
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  /* top-left bracket */
  .slide-content-image::before {
    top: 1rem;
    left: 1rem;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: translate(8px, 8px);
  }

  /* bottom-right bracket */
  .slide-content-image::after {
    right: 1rem;
    bottom: 1rem;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translate(-8px, -8px);
  }

  .slide-content-image:hover img {
    transform: scale(1.04);
  }

  .slide-content-image:hover::before,
  .slide-content-image:hover::after {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* ——— Variation 7: 3D tilt + shadow lift ——— */
.bnr-fx-tilt {
  perspective: 1000px;

  .slide-content-image {
    transition: box-shadow 0.5s ease;
  }

  .slide-content-image img {
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .slide-content-image:hover {
    box-shadow: 0 24px 50px rgb(0 0 0 / 0.28);
  }

  .slide-content-image:hover img {
    transform: perspective(1000px) rotateX(5deg) scale(1.06);
  }
}

/* ——— Variation 8: ripple ring expands from center (vector) ——— */
.bnr-fx-ripple {
  .slide-content-image::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 10rem;
    height: 10rem;
    border: 2px solid rgb(255 255 255 / 0.9);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
    transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .slide-content-image:hover img {
    transform: scale(1.05);
  }

  .slide-content-image:hover::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(3);
  }
}

/* ——— Variation 9: warm duotone tint wash ——— */
.bnr-fx-tint {
  .slide-content-image::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(135deg, #b86b4b, #6d2b5e);
    mix-blend-mode: multiply;
    opacity: 0;
    transition: opacity 0.55s ease;
  }

  .slide-content-image:hover img {
    transform: scale(1.05);
    filter: saturate(1.15);
  }

  .slide-content-image:hover::before {
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.bnr-fx-shine, .bnr-fx-frame, .bnr-fx-glow, .bnr-fx-zoompan, .bnr-fx-reveal, .bnr-fx-bracket, .bnr-fx-tilt, .bnr-fx-ripple, .bnr-fx-tint) {
    .slide-content-image img,
    .slide-content-image::before,
    .slide-content-image::after {
      transition: none;
    }
  }
}