/* ==================================================================
   Study Hub — Image Manager runtime
   ==================================================================
   Styles for images managed from Admin → Image Manager.

   Everything here is ADDITIVE. It only styles nodes the runtime
   creates (.sh-img-*), so the existing design, theme, typography and
   animations are untouched. The image configuration itself is written
   as inline styles by js/image-config.js, which is what keeps the
   admin live preview identical to the public page.

   SAFETY
   ------
   * Overlay layers are pointer-events:none, so buttons, links, text
     and the E-book swiper stay fully clickable and swipeable.
     A decorative image only becomes clickable when you give it a link.
   * Overlay layers clip on the X axis, so a decorative image can never
     create horizontal scrolling.
   * Z-index is capped well below the fixed navbar (50) and mobile menu
     (60), so an image can never cover the navigation.
   ================================================================== */

/* ---------- Flow slots (before / after a section) ---------- */
.sh-img-slot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 100%;
  max-width: 100%;
  padding: 10px 20px;
}

/* An unused slot must never leave an empty gap. */
.sh-img-slot:empty,
.sh-img-slot[hidden] { display: none; }

/* ---------- Overlay layer (corners / sides / behind) ---------- */
.sh-img-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow-x: clip;
  overflow-y: visible;
  /* no z-index: children keep their own, so per-image layering works */
}

.sh-img-layer[hidden] { display: none; }

/* ---------- The positioned image wrapper ---------- */
.sh-img-wrap {
  display: block;
  line-height: 0;
  max-width: 100%;
  will-change: transform, opacity;
}

.sh-img-wrap--flow {
  position: relative;
  margin: 0 auto;
}

.sh-img-wrap--overlay {
  position: absolute;
}

/* A background/behind image must never swallow clicks meant for the
   section content sitting on top of it. */
.sh-img-wrap--background { pointer-events: none; }

.sh-img-wrap > img {
  display: block;
  width: 100%;
  max-width: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

/* Only a wrapper given a link opts back into pointer events. */
.sh-img-wrap:not([data-sh-link]) { pointer-events: none; }
.sh-img-wrap[data-sh-link] { pointer-events: auto; }
.sh-img-wrap[data-sh-link] > img { cursor: pointer; }

/* ---------- Entrance / ambient animations ---------- */
.sh-anim {
  animation-duration: var(--sh-anim-duration, 1.1s);
  animation-timing-function: cubic-bezier(.22, .8, .3, 1);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

.sh-speed--slow { --sh-anim-duration: 2.4s; }
.sh-speed--normal { --sh-anim-duration: 1.2s; }
.sh-speed--fast { --sh-anim-duration: .6s; }

.sh-anim--fade { animation-name: shImgFade; }
.sh-anim--scale { animation-name: shImgScale; }
.sh-anim--slide { animation-name: shImgSlide; }

.sh-anim--float,
.sh-anim--drift,
.sh-anim--rotate,
.sh-anim--pulse {
  animation-iteration-count: infinite;
  animation-fill-mode: none;
}

.sh-anim--float { animation-name: shImgFloat; animation-duration: 5s; }
.sh-anim--drift { animation-name: shImgDrift; animation-duration: 14s; }
.sh-anim--rotate { animation-name: shImgRotate; animation-duration: 26s; animation-timing-function: linear; }
.sh-anim--pulse { animation-name: shImgPulse; animation-duration: 3.4s; }

.sh-speed--slow.sh-anim--float { animation-duration: 8s; }
.sh-speed--fast.sh-anim--float { animation-duration: 3s; }
.sh-speed--slow.sh-anim--drift { animation-duration: 22s; }
.sh-speed--fast.sh-anim--drift { animation-duration: 8s; }
.sh-speed--slow.sh-anim--pulse { animation-duration: 5.5s; }
.sh-speed--fast.sh-anim--pulse { animation-duration: 2s; }

@keyframes shImgFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes shImgScale {
  from { opacity: 0; transform: scale(.86); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes shImgSlide {
  from { opacity: 0; translate: 0 26px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes shImgFloat {
  0%   { translate: 0 0; }
  50%  { translate: 0 -14px; }
  100% { translate: 0 0; }
}

@keyframes shImgDrift {
  0%   { translate: 0 0; }
  50%  { translate: 10px -10px; }
  100% { translate: 0 0; }
}

@keyframes shImgRotate {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}

@keyframes shImgPulse {
  0%   { scale: 1; }
  50%  { scale: 1.05; }
  100% { scale: 1; }
}

/* ---------- Hover effects ---------- */
.sh-img-wrap > img { transition: transform .35s ease, box-shadow .35s ease, filter .35s ease; }

.sh-hover--zoom:hover > img { transform: scale(1.06); }
.sh-hover--lift:hover > img { transform: translateY(-8px); }
.sh-hover--glow:hover > img { filter: drop-shadow(0 0 22px rgba(96, 165, 250, .55)); }
.sh-hover--tilt:hover > img { transform: rotate(-3deg) scale(1.02); }

/* ---------- Mobile safety ---------- */
@media (max-width: 767px) {
  .sh-img-slot {
    gap: 16px;
    padding: 6px 14px;
  }

  /* Decorative layers shrink a touch so they never dominate a small
     screen. The configured width still applies underneath this cap. */
  .sh-img-layer .sh-img-wrap { max-width: 70vw; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sh-anim,
  .sh-hover--zoom:hover > img,
  .sh-hover--lift:hover > img,
  .sh-hover--tilt:hover > img {
    animation: none !important;
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
  }
}