/* ============================================================
   GRAVE3D — a reusable CSS 3D gravestone in grass.
   ============================================================
   One block of markup = one grave. Copy the .g3-grave element
   (see 3d-demo.html) as many times as you have memes. Everything
   is self-contained: no JS needed for the 3D look, no external
   requests, no gradients.

   The image is LAZY — it only loads when the grave scrolls within
   ~400px of the viewport (see grave3d.js), and a GIF only plays
   while you hover/focus it. A stone you aren't looking at costs
   nothing.

   Files:
     grave3d.css      — this file
     grave3d.js       — lazy image + gif-on-hover behaviour
     assets/grass.svg — grass tile (self-made)
     assets/demo/*.svg — example silhouettes (swap for real meme art)

   Scene usage:
     <div class="g3-scene" style="--rows:2">
       <div class="g3-row"> …graves… </div>
       <div class="g3-row g3-row-back"> …smaller far graves… </div>
     </div>

   A single grave:
     <a class="g3-grave" href="/memes/harambe/">
       <span class="g3-stone">
         <span class="g3-face g3-front">
           <img class="g3-img" alt="" width="96" height="96"
                data-src="/assets/memes/harambe.webp"
                data-gif="/assets/memes/harambe.webp">
           <span class="g3-name">Harambe</span>
           <span class="g3-years">2016–2017</span>
           <span class="g3-epitaph">Gone but not forgotten.</span>
         </span>
         <span class="g3-face g3-back" aria-hidden="true"></span>
         <span class="g3-face g3-side-l" aria-hidden="true"></span>
         <span class="g3-face g3-side-r" aria-hidden="true"></span>
       </span>
       <span class="g3-mound" aria-hidden="true"></span>
     </a>

   Notes:
   • data-src  = static image (webp). Loaded only when near.
   • data-gif  = optional animated image (webp/gif). Shown only
                 while hovered/focused, in exchange for the poster.
   • Omit the <img> entirely for an engraved-text-only stone.
   • Tie into the existing engraved font via the same CSS tokens.
   ============================================================ */

.g3-scene {
  position: relative;
  perspective: 900px;
  perspective-origin: 50% 20%;
  overflow: hidden;
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

/* --- receding grass plane ---------------------------------- */
.g3-ground {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: 0;
  height: 46%;
  transform: rotateX(78deg);
  transform-origin: 50% 0%;
  background-color: #2a3322;
  background-image: url("/assets/grass.svg");
  background-size: 96px 96px;
  box-shadow: inset 0 40px 60px -30px rgba(0, 0, 0, .8);
  pointer-events: none;
}

/* row of graves standing on the horizon line of the ground */
.g3-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem 1rem;
  padding-top: 2.2rem;
}

/* far row — smaller, higher, hazier */
.g3-row-back {
  transform: translateY(-78px) scale(.72);
  opacity: .82;
  filter: blur(.3px);
  z-index: 0;
}
.g3-row-back .g3-mound { display: none; }

/* ============================================================
   THE GRAVESTONE
   ============================================================ */
.g3-grave {
  position: relative;
  width: 116px;
  height: 158px;
  display: block;
  text-decoration: none;
  z-index: 1;
  transition: transform .22s ease;
}
.g3-grave:hover {
  transform: translateY(-4px);
  z-index: 5;
}

/* --- the extruded stone (a real 3D box via preserve-3d) -----
   Movement: vanilla-tilt.js (vendored) drives each stone's rotation
   toward the cursor. The base angle is set via --g3-tilt and passed to
   the library as its startY. Without JS, the static angle applies. */
.g3-stone {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 116px;
  height: 150px;
  margin-left: -58px;
  transform-style: preserve-3d;
  transform: rotateY(var(--g3-tilt, 0deg));
  transition: transform .25s ease;
}
.g3-stone.js-tilt {
  will-change: transform;
  transition: transform .1s ease-out;
}

/* shared face shape */
.g3-face {
  position: absolute;
  top: 0;
  bottom: 0;
  backface-visibility: hidden;
}

/* front face — arched stone, engraved panel */
.g3-front {
  left: 0;
  right: 0;
  transform: translateZ(8px);
  border-radius: 52% 52% 5px 5px / 24% 24% 5px 5px;
  background:
    linear-gradient(160deg, #a49e91 0%, #8d877a 58%, #7a756a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .18),
    inset 0 10px 16px -10px rgba(0, 0, 0, .55),
    inset 0 -12px 18px -10px rgba(255, 255, 255, .25);
}
/* carved panel inside the face */
.g3-front::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  bottom: 12px;
  border-radius: 48% 48% 4px 4px / 22% 22% 4px 4px;
  background: rgba(0, 0, 0, .14);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .22),
    inset 0 8px 14px -10px rgba(0, 0, 0, .6);
  z-index: 0;
}

/* moss creeping up the base of the stone */
.g3-front::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 5px;
  height: 18px;
  border-radius: 0 0 4px 4px;
  background: rgba(64, 84, 52, .34);
  box-shadow: inset 0 6px 8px -6px rgba(0, 0, 0, .7);
  pointer-events: none;
}

/* back face — same arch, darker, slightly inset */
.g3-back {
  left: 0;
  right: 0;
  transform: translateZ(-8px) rotateY(180deg);
  border-radius: 52% 52% 5px 5px / 24% 24% 5px 5px;
  background: #6d675c;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3);
}

/* side walls — straight section of the slab */
.g3-side-l,
.g3-side-r {
  width: 16px;
  top: 22px;            /* below the arch curve */
  bottom: 0;
  background: #6d675c;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}
.g3-side-l {
  left: 0;
  transform-origin: left center;
  transform: rotateY(-90deg);
}
.g3-side-r {
  right: 0;
  transform-origin: right center;
  transform: rotateY(90deg);
}

/* --- the image face (lazy, gif-on-hover) -------------------- */
.g3-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 66px;
  height: 66px;
  margin: 26px auto 8px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, .35);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .45);
  background: rgba(0, 0, 0, .18);
  /* nothing loads until JS arms it: */
  opacity: 0;
  transition: opacity .35s ease;
}
.g3-img.g3-armed { opacity: 1; }

/* --- engraved text on the stone ----------------------------- */
.g3-name,
.g3-years,
.g3-epitaph {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
  color: #38352d;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
}
.g3-name {
  font-family: "IM Fell English SC", "Fell SC", Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 8px;
}
.g3-years {
  font-family: Cinzel, Georgia, serif;
  font-size: .62rem;
  letter-spacing: .1em;
  margin-top: 2px;
}
.g3-epitaph {
  font-style: italic;
  font-size: .6rem;
  line-height: 1.25;
  margin: 5px 10px 0;
  max-height: 3.6em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* --- grass mound under the stone ---------------------------- */
.g3-mound {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 132px;
  height: 20px;
  margin-left: -66px;
  border-radius: 50%;
  background-color: #2a3322;
  background-image: url("/assets/grass.svg");
  background-size: 96px 96px;
  box-shadow: inset 0 5px 8px -4px rgba(0, 0, 0, .85);
}

/* no-JS / reduced-motion / small screens fall back flat */
@media (prefers-reduced-motion: reduce) {
  .g3-grave,
  .g3-stone { transition: none; }
  .g3-grave:hover { transform: none; }
  .g3-grave:hover .g3-stone { transform: rotateY(var(--g3-tilt, 0deg)); }
}

/* ============================================================
   HOMEPAGE INTEGRATION — the live cemetery reuses the same
   component inside <main class="graveyard g3-scene">, plus the
   site's existing behaviours (newest plot, grave walk, candles).
   ============================================================ */

/* the <main> graveyard doubles as the scene container. Generous top
   padding leaves room for the far "horizon" row above the near row. */
.graveyard.g3-scene {
  display: block;
  max-width: 1200px;
  padding: 8.5rem 1rem 3rem;
}

/* misty band at the horizon — where the far hill meets the sky. Flat
   fog colour + blur + glow (no gradients), matching the site's .fog. */
.graveyard .g3-horizon {
  position: absolute;
  left: -8%;
  right: -8%;
  top: 7.3rem;
  height: 42px;
  z-index: 0;
  pointer-events: none;
  background: #1a1d19;
  filter: blur(9px);
  opacity: .62;
  box-shadow:
    0 1px 0 rgba(150, 160, 130, .22),
    0 30px 50px -14px rgba(0, 0, 0, .9);
}

/* the near row draws on top of everything behind it */
.graveyard .g3-row {
  position: relative;
  z-index: 1;
}

/* the far row — a single hazy line of elders, small and lifted to the
   horizon. Absolute so it doesn't push the near row down; the grave
   count is capped so it stays on one flex line. */
.graveyard .g3-row-back {
  position: absolute;
  top: 1.7rem;
  left: 0;
  right: 0;
  z-index: 0;
  padding-top: 0;
  transform: scale(.62);
  transform-origin: top center;
  opacity: .8;
  filter: blur(.4px);
}
.graveyard .g3-row-back .g3-mound { display: none; }

/* loading / empty search states stay simple text in the scene */
.graveyard.g3-scene .empty,
.graveyard.g3-scene .digging {
  grid-column: auto;
  position: relative;
}

/* text-only stones: sit the name where the image would be */
.g3-grave.g3-noimg .g3-name { margin-top: 42px; }
.g3-grave.g3-noimg .g3-years { margin-top: 6px; }

/* newest plot — gold plaque + glow on the face */
.g3-grave.newest .g3-front {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .18),
    inset 0 10px 16px -10px rgba(0, 0, 0, .55),
    inset 0 -12px 18px -10px rgba(255, 255, 255, .25),
    0 0 0 1px rgba(184, 163, 90, .55),
    0 0 22px 3px rgba(184, 163, 90, .30);
}
.g3-grave.newest .g3-img {
  border-color: rgba(184, 163, 90, .85);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .45), 0 0 12px 1px rgba(184, 163, 90, .5);
}

/* grave walk — the visited stone pulses like a candle */
.g3-grave.walking .g3-front {
  animation: walk-glow .9s ease-in-out infinite alternate;
}
.g3-grave.walking .g3-stone {
  z-index: 3;
}

/* candle that appears on a plot you've visited */
.g3-grave .candle-visitor {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.2rem;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  filter: drop-shadow(0 0 6px rgba(217, 106, 58, .8));
  animation: candle-flicker 1.1s ease-in-out infinite alternate;
  transition: opacity .2s ease;
}
.g3-grave:hover .candle-visitor,
.g3-grave:focus-visible .candle-visitor { opacity: 1; }