/* ==========================================================================
   IMAGE PROTECTION LAYER — Karina Zakharash
   Owner: image-protect agent. Scope-locked: only .gallery-item, .about-image,
   .hero-bg images and toast UI. Do not extend selectors into other areas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PROTECTED CONTAINERS — disable selection, drag, save-link affordances
   -------------------------------------------------------------------------- */
.gallery-item,
.about-image,
.hero-bg {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* iOS tap-and-hold "Save image" sheet */
}

.gallery-item img,
.about-image img,
.hero-bg img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none; /* parent .gallery-item still receives clicks */
}

/* Hero background image is set via background-image — keep as-is, just block
   any nested <img> if added later. Container already covered above. */
.hero-bg {
  -webkit-user-drag: none;
  user-drag: none;
}

/* Re-enable interactivity on the container so lightbox click + keyboard work */
.gallery-item,
.about-image {
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   2. INVISIBLE OVERLAY SHIELD — catches drag/select but lets clicks through
   Sits on top of the <img> via ::before. pointer-events:none so the
   parent's click handler (lightbox open) still fires.
   -------------------------------------------------------------------------- */
.gallery-item::before,
.about-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none; /* critical — does NOT block lightbox click */
  background: transparent;
}

/* --------------------------------------------------------------------------
   3. WATERMARK — diagonal repeating "© KARINA ZAKHARASH"
   Hidden at rest (clean gallery), fades in on hover/focus/active.
   SVG data URI: 280x140 tile, text rotated -30deg, bone tone @ 6% alpha.
   mix-blend-mode: difference for legibility on both dark & light photos.
   -------------------------------------------------------------------------- */
.gallery-item {
  position: relative; /* anchor for ::after */
  overflow: hidden;
}

.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 380ms cubic-bezier(0.4, 0, 0.2, 1);
  mix-blend-mode: difference;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='140' viewBox='0 0 280 140'><g transform='rotate(-30 140 70)'><text x='140' y='70' text-anchor='middle' font-family='JetBrains Mono, Courier New, monospace' font-size='13' font-weight='500' letter-spacing='2' fill='%23f4f0e8' fill-opacity='0.42'>%C2%A9 KARINA ZAKHARASH</text></g></svg>");
  background-repeat: repeat;
  background-size: 280px 140px;
}

.gallery-item:hover::after,
.gallery-item:focus-within::after,
.gallery-item:active::after {
  opacity: 1;
}

/* Tap-and-hold on touch devices — keep watermark visible briefly */
@media (hover: none) {
  .gallery-item:active::after {
    opacity: 1;
    transition-duration: 80ms;
  }
}

/* --------------------------------------------------------------------------
   4. PROTECTION TOAST — bottom-center, bone bg, ink text, micro-mono
   -------------------------------------------------------------------------- */
.img-protect-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translate(-50%, 16px);
  z-index: 9998;
  padding: 12px 22px;
  background: var(--ds-bone, #f4f0e8);
  color: var(--ds-ink, #1a1614);
  border: 1px solid var(--ds-border-strong, rgba(58, 48, 40, 0.18));
  border-radius: 2px;
  font-family: var(--ds-font-mono, 'JetBrains Mono', monospace);
  font-size: 0.78em;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 18px 48px -16px rgba(26, 22, 20, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease, transform 240ms ease;
}

.img-protect-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Reduced motion — instant show/hide, no transform */
@media (prefers-reduced-motion: reduce) {
  .img-protect-toast {
    transition: opacity 0ms;
    transform: translate(-50%, 0);
  }
}

/* Mobile — keep readable */
@media (max-width: 480px) {
  .img-protect-toast {
    bottom: 18px;
    padding: 10px 16px;
    font-size: 0.7em;
    max-width: calc(100vw - 32px);
    white-space: normal;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   5. CURSOR HINT — show "no-drop" feedback during drag attempt
   -------------------------------------------------------------------------- */
.gallery-item img[draggable="false"]:active,
.about-image img[draggable="false"]:active {
  cursor: zoom-in; /* still affords lightbox click */
}