/*
 * Work galleries: canvas-style lightbox (built by custom/work-gallery.js) replacing
 * Framer's dark popup.
 */
html.avg-lock, html.avg-lock body { overflow: hidden !important; }

.avg {
  --canvas: #fff9f2;
  --blue: #008ff0;
  --muted: #06060699;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --accent: #008ff0;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  padding: 20px 24px 20px;
  background-color: rgba(255, 249, 242, 0.97);
  background-image: linear-gradient(#0000000d 1px, transparent 1px), linear-gradient(90deg, #0000000d 1px, transparent 1px);
  background-size: 40px 40px;
  backdrop-filter: blur(6px);
  font-family: Inter, "Inter Placeholder", system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #000;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.avg.in { opacity: 1; }
.avg[hidden] { display: none; }
.avg button[hidden] { display: none !important; }
.avg * { box-sizing: border-box; }
.avg-top, .avg-stage, .avg-thumbs { min-width: 0; }

/* Top bar */
.avg-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.avg-name { display: grid; gap: 4px; min-width: 0; }
.avg-cat { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.avg-cat::before { content: ""; width: 8px; height: 8px; background: var(--accent); }
.avg-title { margin: 0; font: 500 clamp(24px, 3vw, 34px)/1.05 "PP Neue Montreal Medium", "PP Neue Montreal", "Helvetica Neue", sans-serif; letter-spacing: -0.02em; }
.avg-tools { display: flex; align-items: center; gap: 12px; }
.avg-count { font: 400 13px "Fragment Mono", ui-monospace, monospace; color: #444; font-variant-numeric: tabular-nums; }

/* Buttons: square, white, thin border, blue on hover (like the rest of the canvas UI) */
.avg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; min-width: 44px; padding: 0 10px;
  background: #fff; color: #000;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, transform 0.25s var(--ease);
}
.avg-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.avg-btn:hover { border-color: var(--blue); color: var(--blue); }
.avg-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.avg-close kbd { font: 400 11px "Fragment Mono", ui-monospace, monospace; color: var(--muted); }

/* Stage: arrows either side of the framed slide */
.avg-stage { display: flex; align-items: center; justify-content: center; gap: 24px; min-height: 0; }
.avg-prev:hover { transform: translateX(-3px); }
.avg-next:hover { transform: translateX(3px); }
.avg-frame {
  position: relative;
  margin: 0;
  height: 100%;
  max-height: 100%;
  aspect-ratio: 3 / 4;
  max-width: calc(100vw - 180px);
  background: #fff;
  border: 1.3px solid var(--blue);
  padding: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.1);
}
.avg-flabel { position: absolute; top: -22px; left: -1px; font-size: 12px; color: var(--blue); }
.avg-frame .h { position: absolute; width: 9px; height: 9px; background: #fff; border: 1.3px solid var(--blue); z-index: 2; }
.avg-frame .tl { top: -5px; left: -5px; } .avg-frame .tr { top: -5px; right: -5px; }
.avg-frame .bl { bottom: -5px; left: -5px; } .avg-frame .br { bottom: -5px; right: -5px; }
.avg-slides { position: relative; width: 100%; height: 100%; overflow: hidden; background: #f4f1ec; touch-action: pan-y; cursor: grab; }
.avg-slides :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.avg-slides .cur { animation: avg-in 0.5s var(--ease) both; }
.avg-slides .out { animation: avg-out 0.45s var(--ease) both; }
@keyframes avg-in { from { opacity: 0; transform: translateX(var(--from, 0)) scale(0.985); } }
@keyframes avg-out { to { opacity: 0; transform: translateX(var(--to, 0)) scale(0.985); } }

/* Thumbnail strip */
.avg-thumbs { display: flex; gap: 8px; justify-content: safe center; overflow-x: auto; padding: 6px 6px 4px; scrollbar-width: none; }
.avg-thumbs::-webkit-scrollbar { display: none; }
.avg-thumbs button { flex: none; width: 48px; aspect-ratio: 3 / 4; padding: 0; border: 1px solid rgba(0, 0, 0, 0.1); background: #fff; cursor: pointer; opacity: 0.55; transition: opacity 0.2s, transform 0.25s var(--ease), outline-color 0.2s; outline: 1.3px solid transparent; outline-offset: 2px; }
.avg-thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avg-thumbs button:hover { opacity: 0.9; transform: translateY(-2px); }
.avg-thumbs button.on { opacity: 1; outline-color: var(--blue); }
.avg-thumbs button:focus-visible { outline: 2px solid var(--blue); }

/* Phones: arrows overlay the slide edges, smaller thumbnails */
@media (max-width: 700px) {
  .avg { padding: 16px; gap: 12px; }
  .avg-stage { position: relative; gap: 0; }
  .avg-frame { height: 100%; width: min(100%, calc((100dvh - 220px) * .75)); max-width: 100%; max-height: 100%; }
  .avg-top { align-items: flex-start; flex-wrap: wrap; gap: 8px; }
  .avg-name { flex: 1 1 140px; }
  .avg-title { font-size: 23px; }
  .avg-tools { gap: 6px; margin-left: auto; }
  .avg-prev, .avg-next { position: absolute; z-index: 3; top: 50%; translate: 0 -50%; }
  .avg-prev { left: 4px; } .avg-next { right: 4px; }
  .avg-close kbd { display: none; }
  .avg-thumbs button { width: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .avg, .avg-btn, .avg-thumbs button { transition: none; }
  .avg-slides .cur, .avg-slides .out { animation: none; }
}

/* The homepage preview cards open the gallery too; show that they're clickable. */
[data-framer-name="Artwork"] { cursor: pointer; }
[data-framer-name="Artwork"] { position: relative; }
.av-gallery-trigger { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: inherit; }
.av-gallery-trigger:focus-visible { outline: 3px solid #245da8; outline-offset: -5px; }
.av-preview-toggle { position: absolute; right: 12px; top: 12px; z-index: 3; min-height: 44px; min-width: 64px; padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; background: #fff; color: #222; cursor: pointer; font: 500 12px Inter, system-ui, sans-serif; }
.av-preview-toggle:focus-visible { outline: 3px solid #245da8; outline-offset: 3px; }

/* Motion slides */
.avg-sound[aria-pressed="true"] { border-color: var(--blue); color: var(--blue); }
.avg-sound span { font-size: 12px; }
.avg-thumbs button.vid { position: relative; }
.avg-thumbs button.vid::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
@media (max-width: 700px) { .avg-sound span { display: none; } }

/* Added work cards on the Work page */
.av-work-card [data-framer-name="Artwork"] { overflow: hidden; }
.av-motion-badge { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 5px 10px; background: #fff; border: 1px solid rgba(0,0,0,.1); font: 500 12px Inter, system-ui, sans-serif; letter-spacing: -0.01em; color: #8427de; }
.av-motion-badge::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #8427de; vertical-align: 1px; }

/* Keep gallery controls readable and reachable on short and notched screens. */
.avg{font-family:"PP Neue Montreal Medium",system-ui,sans-serif;padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(20px,env(safe-area-inset-bottom));height:100dvh;overflow:hidden;grid-template-rows:auto minmax(0,1fr) auto}
.avg-tools{flex-wrap:wrap;justify-content:flex-end}
.avg-thumbs button{min-width:44px;min-height:44px}
.avg-playback span{font:500 12px/1.2 "PP Neue Montreal Medium",system-ui,sans-serif}
.avg-error{position:absolute;inset:0;display:grid;place-content:center;margin:0;padding:24px;text-align:center;background:#f4f1ec;color:#17221c;font:500 16px/1.5 "PP Neue Montreal Medium",system-ui,sans-serif}
@media(max-width:700px){.avg{padding-inline:12px;gap:10px}.avg-title{overflow-wrap:anywhere}.avg-tools{gap:4px}.avg-count{min-width:48px}.avg-playback span{display:none}.avg-thumbs{padding-bottom:8px}.avg-frame{width:min(100%,calc((100dvh - 240px)*.75))}}
@media(max-height:500px) and (orientation:landscape){.avg{padding:10px 16px;gap:8px}.avg-top{align-items:center}.avg-title{font-size:21px}.avg-cat{font-size:11px}.avg-thumbs button{height:44px;width:33px;min-width:33px}.avg-flabel{display:none}}