/*! R3D Grid v2.1.0 — styles */
.r3dg {
  --r3dg-height: 100vh;
  --r3dg-perspective: 1200px;
  --r3dg-lift: 60px;
  --r3dg-radius: 4px;
  --r3dg-label-gap: 10px;
  --r3dg-label-size: 12px;
  --r3dg-label-color: currentColor;
  --r3dg-gap-fallback: 16px;
  --r3dg-placeholder: rgba(127, 127, 127, .14);
  position: relative;
  box-sizing: border-box;
}

/* Before JS runs (or with JS off): a plain, flat regular grid. */
.r3dg:not(.is-ready) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--r3dg-gap-fallback);
  align-items: start;
}
.r3dg:not(.is-ready) > * { display: block; }
.r3dg:not(.is-ready) img { display: block; width: 100%; height: auto; }

/* 3D mode */
.r3dg.is-ready {
  height: var(--r3dg-height);
  overflow: hidden;
  background: var(--r3dg-bg, transparent);
}
.r3dg.is-ready.r3dg--fullbleed {
  /* !important: some themes force auto margins / max-width on content children */
  width: var(--r3dg-vw, 100vw) !important;
  max-width: none !important;
  margin-left: calc(50% - var(--r3dg-vw, 100vw) / 2) !important;
  margin-right: 0 !important;
}

.r3dg__stage {
  position: absolute;
  inset: 0;
  perspective: var(--r3dg-perspective);
  perspective-origin: 50% 50%;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.r3dg.is-live .r3dg__stage { opacity: 1; }
.r3dg--fog .r3dg__stage {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
}
.r3dg.is-page-scroll .r3dg__stage { touch-action: pan-y; }
.r3dg.is-dragging .r3dg__stage { cursor: grabbing; }

.r3dg__plane {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.r3dg__tile {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  color: inherit;
  text-decoration: none;
  outline: none;
  -webkit-user-drag: none;
}
.r3dg__tile:hover, .r3dg__tile:focus { color: inherit; text-decoration: none; }

/* Wrapper that lifts on hover, carrying the image and its title together. */
.r3dg__lift {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: translateZ(0);
  transition: transform .55s cubic-bezier(.2, .8, .2, 1);
}
a.r3dg__tile:hover .r3dg__lift,
.r3dg__tile:focus-visible .r3dg__lift { transform: translateZ(var(--r3dg-lift)); }
.r3dg.is-dragging .r3dg__tile .r3dg__lift { transform: translateZ(0); }

.r3dg__card {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--r3dg-radius);
  background: var(--r3dg-placeholder);
  backface-visibility: hidden;
  transition: box-shadow .55s ease, height .4s ease;
}
a.r3dg__tile:hover .r3dg__card,
.r3dg__tile:focus-visible .r3dg__card { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45); }
.r3dg.is-dragging .r3dg__card { box-shadow: none; }
.r3dg__tile:focus-visible .r3dg__card { outline: 2px solid currentColor; outline-offset: 3px; }

.r3dg__card img,
.r3dg__card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  max-width: none;
  pointer-events: none;
  -webkit-user-drag: none;
}
.r3dg__card video { opacity: 0; transition: opacity .35s ease; }
.r3dg__tile.is-playing video { opacity: 1; }

/* Title floats a fixed gap above the image. */
.r3dg__label {
  position: absolute;
  left: 0;
  bottom: calc(100% + var(--r3dg-label-gap));
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: inherit;
  font-size: var(--r3dg-label-size);
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--r3dg-label-color);
  pointer-events: none;
  transition: opacity .3s ease;
}
.r3dg--labels-hover .r3dg__label { opacity: 0; }
.r3dg--labels-hover .r3dg__tile:hover .r3dg__label,
.r3dg--labels-hover .r3dg__tile:focus-visible .r3dg__label { opacity: 1; }
.r3dg--labels-off .r3dg__label { display: none; }

@media (prefers-reduced-motion: reduce) {
  .r3dg__stage,
  .r3dg__lift,
  .r3dg__card,
  .r3dg__label,
  .r3dg__card video { transition: none; }
}

/* data-source="projects": reserve space while loading, show a readable message on errors */
.r3dg[data-source]:not(.is-ready):empty { min-height: 60vh; }
.r3dg[data-r3dg-error] { display: block; min-height: 0; }
.r3dg__msg { margin: 0; padding: 24px; font: 14px/1.4 ui-monospace, Menlo, monospace; color: #c55; background: rgba(200, 80, 80, .08); border-radius: 6px; }