/**
 * /mobile/css/oink-locked-media.css — LockedMedia styles.
 *
 * Shared layout for photo/video/audio tiles with locked + unlocked states.
 * snoutOS glass shield over the blurred preview when locked.
 *
 * Aspect ratios: 1/1 (default), 4/5, 9/16, 16/9, fluid.
 */

.lm {
  position: relative;
  display: block;
  margin: 0;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: oklch(10% 0.02 280);
  contain: layout paint style;
}

.lm--ar-1x1   { aspect-ratio: 1 / 1; }
.lm--ar-4x5   { aspect-ratio: 4 / 5; }
.lm--ar-9x16  { aspect-ratio: 9 / 16; }
.lm--ar-16x9  { aspect-ratio: 16 / 9; }
.lm--ar-fluid { aspect-ratio: auto; min-height: 200px; }

/* Preview image (locked state) */
.lm-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(18px) brightness(0.7) saturate(1.05);
  transform: scale(1.08); /* hide blur edge bleed */
  transition: opacity 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lm-preview--solid {
  background: linear-gradient(135deg, oklch(20% 0.03 280), oklch(10% 0.02 280));
  filter: none;
  transform: none;
}

/* Veil — extra darkening + faint sheen so shield reads */
.lm-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center,
      oklch(0% 0 0 / 0.15) 0%,
      oklch(0% 0 0 / 0.55) 100%),
    linear-gradient(to bottom,
      oklch(0% 0 0 / 0)    0%,
      oklch(0% 0 0 / 0.4) 100%);
  pointer-events: none;
}

/* Shield — central lock badge (icon + cost label) */
.lm-shield {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  color: oklch(98% 0.01 280);
  text-shadow: 0 1px 2px oklch(0% 0 0 / 0.6);
}

.lm-shield-glyph {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklch, oklch(97% 0.01 280) 22%, transparent);
  background: color-mix(in oklch, oklch(8% 0.02 280) 50%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.lm-shield-glyph svg { width: 28px; height: 28px; }

.lm-cost {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in oklch, oklch(0% 0 0) 60%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Unlock button — sits at the bottom, full-width-ish */
.lm-unlock {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, oklch(97% 0.01 280) 18%, transparent);
  background: linear-gradient(135deg, oklch(72% 0.22 20), oklch(70% 0.20 30));
  color: oklch(99% 0 0);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 160ms;
}
.lm-unlock:hover  { filter: brightness(1.08); }
.lm-unlock:active { transform: scale(0.97); }
.lm-unlock:disabled {
  filter: grayscale(0.4) brightness(0.85);
  cursor: progress;
}

.lm--unlocking .lm-unlock { opacity: 0.85; }
.lm--unlocking .lm-shield-glyph { animation: lm-pulse 900ms infinite; }

@keyframes lm-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* Shake on failure */
.lm--shake { animation: lm-shake 480ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes lm-shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60%      { transform: translate3d(4px, 0, 0); }
}

/* Unlocked state — show real media full-bleed */
.lm--unlocked .lm-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: oklch(8% 0.02 280);
}

/* Audio doesn't fill; center horizontally */
.lm--audio.lm--unlocked .lm-media--audio {
  position: absolute;
  inset: auto 12px 12px 12px;
  width: calc(100% - 24px);
  height: 44px;
}

/* Caption */
.lm-caption {
  position: absolute;
  left: 12px;
  bottom: -22px;
  font-size: 12px;
  color: oklch(72% 0.02 280);
  pointer-events: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lm-preview,
  .lm-unlock,
  .lm--shake,
  .lm-shield-glyph { animation: none; transition: none; }
  .lm-preview { transform: none; }
}

/* ════════════════════════════════════════════════════════════════
   Phase 12: Full-Screen Swipe Gallery Viewer (2026-05-08)
   ════════════════════════════════════════════════════════════════ */
.lm-viewer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: oklch(0% 0 0 / 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: max(16px, env(safe-area-inset-top, 16px)) 16px max(16px, env(safe-area-inset-bottom, 16px));
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lm-viewer[hidden] { display: none; }
.lm-viewer.lm-viewer--shown { opacity: 1; }
body.lm-viewer-open { overflow: hidden; }

.lm-viewer-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 92vh;
  width: 100%;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  user-select: none;
}
.lm-viewer-stage:active { cursor: grabbing; }
.lm-viewer-stage img,
.lm-viewer-stage video {
  max-width: 100%;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 12px;
  pointer-events: none;
  box-shadow: 0 20px 60px oklch(0% 0 0 / 0.5);
}
.lm-viewer-stage video {
  pointer-events: auto;
}
.lm-viewer-stage audio {
  width: min(80vw, 480px);
  pointer-events: auto;
}

.lm-viewer-close,
.lm-viewer-prev,
.lm-viewer-next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid oklch(100% 0 0 / 0.16);
  background: oklch(0% 0 0 / 0.55);
  color: oklch(95% 0 0);
  border-radius: 50%;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), background 160ms;
  padding: 0;
}
.lm-viewer-close { top: max(16px, env(safe-area-inset-top, 16px)); right: 16px; }
.lm-viewer-prev  { left: 12px; top: 50%; transform: translateY(-50%); }
.lm-viewer-next  { right: 12px; top: 50%; transform: translateY(-50%); }
.lm-viewer-close:hover { background: oklch(15% 0 0 / 0.75); transform: scale(1.06); }
.lm-viewer-prev:hover  { background: oklch(15% 0 0 / 0.75); transform: translateY(-50%) scale(1.06); }
.lm-viewer-next:hover  { background: oklch(15% 0 0 / 0.75); transform: translateY(-50%) scale(1.06); }
.lm-viewer-close:active,
.lm-viewer-prev:active,
.lm-viewer-next:active { transform: scale(0.94); }
.lm-viewer-prev:active { transform: translateY(-50%) scale(0.94); }
.lm-viewer-next:active { transform: translateY(-50%) scale(0.94); }
.lm-viewer-close[hidden],
.lm-viewer-prev[hidden],
.lm-viewer-next[hidden] { display: none; }

.lm-viewer-counter {
  position: absolute;
  bottom: max(20px, env(safe-area-inset-bottom, 20px));
  left: 50%;
  transform: translateX(-50%);
  font: 600 12px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.06em;
  color: oklch(85% 0 0);
  background: oklch(0% 0 0 / 0.55);
  padding: 8px 14px;
  border-radius: 999px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: none;
}

/* Tap cursor — show user the unlocked tile is interactive */
[data-locked-media][data-lm-locked="0"] img,
[data-locked-media][data-lm-locked="0"] video {
  cursor: zoom-in;
}

@media (prefers-reduced-motion: reduce) {
  .lm-viewer { transition: none; }
  .lm-viewer-stage { transition: none; }
  .lm-viewer-close,
  .lm-viewer-prev,
  .lm-viewer-next { transition: none; }
}