/* ==========================================================================
   Site Shield — Client-Side Protection CSS
   Portfolio content protection styles. Loaded on all public pages.
   ========================================================================== */

/* ── Global Selection & Drag Prevention ───────────────────────────────────── */

html.site-protected,
html.site-protected body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Allow selection in form fields and editable areas */
html.site-protected input,
html.site-protected textarea,
html.site-protected select,
html.site-protected [contenteditable="true"],
html.site-protected .lock-popup-input {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  pointer-events: auto;
}

/* Prevent image dragging */
html.site-protected img,
html.site-protected svg {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

/* Re-enable pointer events on linked/interactive images */
html.site-protected a img,
html.site-protected button img,
html.site-protected a svg,
html.site-protected button svg {
  pointer-events: auto;
}


/* ── Image Protection Overlay ─────────────────────────────────────────────── */
/* Transparent layer over portfolio images prevents right-click save        */

html.site-protected .portfolio-img,
html.site-protected .project-img,
html.site-protected [data-watermark] {
  position: relative;
  overflow: hidden;
}

html.site-protected .portfolio-img::after,
html.site-protected .project-img::after,
html.site-protected [data-watermark]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: transparent;
  pointer-events: auto;  /* captures right-click/drag instead of the image */
}


/* ── DevTools Warning Overlay ─────────────────────────────────────────────── */

#siteShieldOverlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647; /* max z-index */
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  background: #0a0a0f;
  color: #fff;
  font-family: "Syne", "Inter", system-ui, sans-serif;
  text-align: center;
  padding: 32px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#siteShieldOverlay.is-active {
  display: flex;
  opacity: 1;
}

#siteShieldOverlay .shield-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 182, 70, 0.12);
  border: 1px solid rgba(255, 182, 70, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: shieldPulse 2s ease-in-out infinite;
}

#siteShieldOverlay .shield-icon svg {
  width: 28px;
  height: 28px;
  color: #ffb646;
  pointer-events: none;
}

#siteShieldOverlay h2 {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  margin: 0;
  color: #fff;
  letter-spacing: -0.3px;
}

#siteShieldOverlay p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
  max-width: 420px;
  line-height: 1.6;
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
}

@keyframes shieldPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 182, 70, 0.15); }
  50% { transform: scale(1.05); box-shadow: 0 0 24px 8px rgba(255, 182, 70, 0.08); }
}


/* ── Visibility Blur (Tab Switch / Window Unfocus) ────────────────────────── */
/* Removed per plan — causes false positives on mobile multitasking         */


/* ── Print Protection ─────────────────────────────────────────────────────── */

@media print {
  html.site-protected,
  html.site-protected body {
    display: none !important;
    visibility: hidden !important;
  }

  html.site-protected::after {
    content: "This content is protected and cannot be printed.";
    display: block !important;
    visibility: visible !important;
    position: fixed;
    inset: 0;
    background: #fff;
    color: #333;
    font-family: system-ui, sans-serif;
    font-size: 18px;
    text-align: center;
    padding-top: 40vh;
  }
}


/* ── Watermarked Image Canvas Styling ─────────────────────────────────────── */

img[data-watermarked="true"],
canvas.watermark-canvas {
  image-rendering: auto;
}