/*
 * gallery-gate.css  — v1.0
 * Drop-in gate overlay: blur / gradient / dots / icons / hint
 *
 * Usage:
 *   <link rel="stylesheet" href="gallery-gate.css">
 *   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,640,1,-10">
 *
 * data-gate-fx    = "blur" | "gradient" | "dual" | "dots" | "dots-dual" | "blur-dots"
 * data-gate-icon  = "lock" (default) | "play" | "none"
 * data-gate-hint  = "on" | "off"
 * data-gate-hint-text = "any text"
 *
 * CSS custom props (set inline on the <a>):
 *   --gate-blur-max              blur radius at rest        (default 18px)
 *   --gate-blur-min              blur radius at peak reveal (default 2px)
 *   --gate-blur-pulse-duration   animation cycle            (default 3s, 0s = freeze)
 */

/* ─────────────────────────────────────────
   BASE: any gated card
───────────────────────────────────────── */
a.gallery-item.gated {
  position: relative;
  display: block;
  cursor: pointer;
  overflow: hidden;
  border-radius: 15px;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}

a.gallery-item.gated img {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
}

/* ─────────────────────────────────────────
   LOCK / PLAY ICON
───────────────────────────────────────── */
a.gallery-item .gate-lock-icon {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  color: #fff;
  line-height: 1;
  font-family: 'Material Symbols Outlined', sans-serif;
  font-style: normal;
  font-variation-settings: 'FILL' 1, 'wght' 640, 'GRAD' -10, 'opsz' 48;
  text-shadow: 0 12px 28px rgba(0,0,0,.42);
  transition: opacity .25s ease, transform .25s ease;
}

/* centered when locked */
a.gallery-item.gated.is-locked .gate-lock-icon,
a.gallery-item.gated.is-revealing .gate-lock-icon {
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 58px;
  padding: 14px;
  border-radius: 999px;
  background: radial-gradient(circle at 28% 22%,
    rgba(255,255,255,.22) 0%,
    rgba(255,255,255,.08) 45%,
    rgba(0,0,0,.22) 100%);
  border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 18px 44px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.14);
}

/* corner badge when unlocked */
a.gallery-item.gated.is-unlocked:not(.is-revealing) .gate-lock-icon {
  top: 10px;
  right: 10px;
  left: auto;
  transform: none;
  font-size: 32px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: .92;
}

/* fading during reveal */
a.gallery-item.gated.is-revealing .gate-lock-icon {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.86);
}

/* ─────────────────────────────────────────
   BLUR OVERLAY (blur-block)
───────────────────────────────────────── */
a.gallery-item.gated .blur-block {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  --gate-blur-alpha-default: 0.68;
  background: rgb(0 0 0 / var(--gate-blur-alpha, var(--gate-blur-alpha-default, 0.68)));
  backdrop-filter: blur(40px) brightness(1.05) saturate(1.15);
  -webkit-backdrop-filter: blur(40px) brightness(1.05) saturate(1.15);
  opacity: var(--gate-blur-layer-opacity, 1);
  transition: opacity .3s ease;
}

/* artificial light shimmer */
a.gallery-item.gated.is-locked .blur-block::before {
  content: '';
  position: absolute;
  inset: -20%;
  pointer-events: none;
  opacity: .55;
  background: radial-gradient(closest-side at 55% 45%,
    rgba(255,255,255,.18) 0%,
    rgba(255,255,255,.06) 32%,
    rgba(255,255,255,.00) 68%);
  mix-blend-mode: screen;
  animation: gateLightMove 4.2s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes gateLightMove {
  0%,100% { transform: translate3d(-2%,-1%,0) rotate(-2deg); opacity:.52; }
  50%     { transform: translate3d( 3%, 2%,0) rotate( 2deg); opacity:.62; }
}

/* ─────────────────────────────────────────
   FX: gradient & dual — semi-transparent + colour sweep
───────────────────────────────────────── */
a.gallery-item.gated.gate-fx-gradient.is-locked .blur-block,
a.gallery-item.gated.gate-fx-dual.is-locked     .blur-block {
  --gate-blur-alpha-default: 0.52;
  backdrop-filter: blur(34px) brightness(1.08) saturate(1.18);
  -webkit-backdrop-filter: blur(34px) brightness(1.08) saturate(1.18);
}

a.gallery-item.gated.gate-fx-gradient.is-locked .blur-block::after,
a.gallery-item.gated.gate-fx-dual.is-locked     .blur-block::after {
  content: '';
  position: absolute;
  inset: -50%;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 25% 30%, rgba(122,92,255,.42) 0%, rgba(122,92,255,.00) 64%),
    radial-gradient(closest-side at 72% 55%, rgba(80,196,255,.34) 0%, rgba(80,196,255,.00) 62%),
    linear-gradient(120deg, rgba(255,255,255,.00) 0%, rgba(255,255,255,.14) 30%, rgba(255,255,255,.00) 66%);
  opacity: .72;
  filter: blur(22px) saturate(1.25);
  mix-blend-mode: screen;
  transform: rotate(10deg);
  animation: gateGradientFlow 4.6s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes gateGradientFlow {
  0%   { transform: translate3d(-14%,-8%,0) rotate(10deg); opacity:.66; }
  50%  { transform: translate3d(  6%, 8%,0) rotate(10deg); opacity:.78; }
  100% { transform: translate3d( 16%,14%,0) rotate(10deg); opacity:.66; }
}

/* dual pulse */
a.gallery-item.gated.gate-fx-dual.is-locked      .blur-block,
a.gallery-item.gated.gate-fx-dots-dual.is-locked .blur-block {
  animation: gateBlurPulse var(--gate-pulse-duration, 2.8s) ease-in-out infinite;
}

@keyframes gateBlurPulse {
  0%,100% { opacity: var(--gate-blur-layer-opacity, 1); }
  50%     { opacity: calc(var(--gate-blur-layer-opacity, 1) * 0.92); }
}

/* ─────────────────────────────────────────
   FX: blur — real backdrop-filter blur pulse
   Controlled by CSS custom props on the <a>:
     --gate-blur-max            (default 18px)
     --gate-blur-min            (default 2px)
     --gate-blur-pulse-duration (default 3s, 0s = static)
───────────────────────────────────────── */
a.gallery-item.gated.gate-fx-blur.is-locked      .blur-block,
a.gallery-item.gated.gate-fx-blur-dots.is-locked .blur-block {
  background: rgb(0 0 0 / .05);
  backdrop-filter: blur(var(--gate-blur-max, 18px));
  -webkit-backdrop-filter: blur(var(--gate-blur-max, 18px));
  animation: gateRealBlur var(--gate-blur-pulse-duration, 3s) ease-in-out infinite;
}

/* when duration = 0s, animation runs once then freezes — intentional */
@keyframes gateRealBlur {
  0%,100% {
    backdrop-filter: blur(var(--gate-blur-max, 18px));
    -webkit-backdrop-filter: blur(var(--gate-blur-max, 18px));
    background: rgb(0 0 0 / .05);
  }
  45%,55% {
    backdrop-filter: blur(var(--gate-blur-min, 2px));
    -webkit-backdrop-filter: blur(var(--gate-blur-min, 2px));
    background: rgb(0 0 0 / .00);
  }
}

/* ─────────────────────────────────────────
   FX: dots / snow
───────────────────────────────────────── */
a.gallery-item.gated .dots {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  transition: opacity .3s ease;
}

a.gallery-item.gated .dot {
  position: absolute;
  background: rgba(255,255,255,.92);
  border-radius: 50%;
  animation: moveDot 10s infinite ease-in-out;
  will-change: transform;
  mix-blend-mode: screen;
}

@keyframes moveDot {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(50px,-30px); }
  50%  { transform: translate(-20px,50px); }
  75%  { transform: translate(-30px,-20px); }
  100% { transform: translate(0,0); }
}

/* hide dots on gradient/dual */
a.gallery-item.gated.gate-fx-gradient.is-locked .dots,
a.gallery-item.gated.gate-fx-dual.is-locked     .dots {
  opacity: 0 !important;
  display: none !important;
}

/* ─────────────────────────────────────────
   HINT CAPSULE
───────────────────────────────────────── */
a.gallery-item.gated .gate-hint {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 72%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  padding: 12px 16px;
  border-radius: 999px;
  color: rgba(255,255,255,.96);
  font-weight: 750;
  letter-spacing: -0.25px;
  white-space: nowrap;
  font-size: clamp(13px, 3.2vw, 16px);
  background: radial-gradient(120% 140% at 20% 10%,
    rgba(255,255,255,.20) 0%,
    rgba(255,255,255,.07) 35%,
    rgba(0,0,0,.24) 100%);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow:
    0 18px 46px rgba(0,0,0,.44),
    inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity .24s ease, transform .24s ease;
}

/* hint dismiss on tap */
a.gallery-item.gated.is-hint-dismissed .gate-hint,
a.gallery-item.gated.gate-hint-hidden  .gate-hint {
  opacity: 0;
  transform: translate(-50%, -56%) scale(.985);
}

/* data-gate-hint="off" — completely remove */
a.gallery-item.gated[data-gate-hint="off"]   .gate-hint,
a.gallery-item.gated[data-gate-hint="0"]     .gate-hint,
a.gallery-item.gated[data-gate-hint="false"] .gate-hint {
  display: none !important;
}

/* ─────────────────────────────────────────
   REVEAL ANIMATION
───────────────────────────────────────── */
a.gallery-item.gated.is-revealing .blur-block,
a.gallery-item.gated.is-revealing .dots,
a.gallery-item.gated.is-revealing .gate-hint {
  opacity: 0;
}

/* ─────────────────────────────────────────
   UNLOCKED STATE
───────────────────────────────────────── */
a.gallery-item.gated.is-unlocked .blur-block,
a.gallery-item.gated.is-unlocked .dots,
a.gallery-item.gated.is-unlocked .gate-hint {
  opacity: 0;
  display: none;
}

/* ─────────────────────────────────────────
   MOBILE
───────────────────────────────────────── */
@media (max-width: 480px) {
  a.gallery-item.gated { border-radius: 14px; }
  a.gallery-item.gated .blur-block { border-radius: 14px; }

  a.gallery-item.gated.is-locked .gate-lock-icon {
    top: 45%;
    font-size: 54px;
    padding: 13px;
  }

  a.gallery-item.gated .gate-hint {
    top: 74%;
    padding: 11px 14px;
  }
}

/* ─────────────────────────────────────────
   REDUCED MOTION
───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  a.gallery-item.gated .dot,
  a.gallery-item.gated .blur-block,
  a.gallery-item.gated.is-locked .blur-block::before,
  a.gallery-item.gated.is-locked .blur-block::after { animation: none; }

  a.gallery-item.gated .blur-block,
  a.gallery-item.gated .dots,
  a.gallery-item.gated .gate-hint,
  a.gallery-item .gate-lock-icon { transition: none; }
}