/* Eturnal Rest -- home page only. Hero, search box, map teaser, how-it-works,
   pricing. Real blue brand. Featured cards use the shared .cem-card photo
   treatment (see base.css); this file only adds page-specific craft + motion. */

/* ---- hero ---- */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--cream) 0%, var(--blue-50) 100%);
  border-bottom: 1px solid var(--line-cool);
}
/* soft, slow-drifting brand glow behind the headline (calm, never flashy) */
.hero__bg {
  position: absolute;
  inset: -20% -10% auto auto;
  width: 70%;
  height: 130%;
  background:
    radial-gradient(
      48% 60% at 78% 8%,
      rgba(70, 124, 153, 0.18),
      transparent 70%
    ),
    radial-gradient(
      40% 50% at 95% 40%,
      rgba(217, 140, 90, 0.12),
      transparent 70%
    );
  pointer-events: none;
  animation: heroDrift 22s var(--ease) infinite alternate;
}
@keyframes heroDrift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-3%, 2%, 0) scale(1.06);
  }
}

/* ---- hero layout v3 (client review 2026-06-04): readable logo + live map ----
   James asked for a bigger, readable logo and a national pin-map on the home
   page (the prior decorative cloud/dove read as sparse, esp. on mobile). Two
   columns on desktop: brand + copy + search (left), live presence map (right).
   On mobile they stack with the map as a compact band, so it never looks empty. */
.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr; /* map column wider (client review 2026-06-04) */
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-8) 0;
}
.hero__copy {
  max-width: 620px;
}
.hero__brand {
  height: 66px;
  width: auto;
  margin-bottom: var(--space-4);
}
/* the live national map panel; the whole panel is a link to /map.html */
.hero__map-wrap {
  position: relative;
  display: block;
  height: 460px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--blue-200);
  box-shadow: var(--shadow-lg);
  background: var(--blue-50);
  text-decoration: none;
  transition: box-shadow var(--dur-2) var(--ease-out);
}
.hero__map-wrap:hover {
  text-decoration: none;
  box-shadow: var(--shadow-xl, var(--shadow-lg));
}
.hero__map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* own stacking context so Leaflet's panes stay below the overlays */
  pointer-events: none; /* the Leaflet canvas is decorative */
  background: var(--blue-50);
}
/* invisible click layer: tapping the map (anywhere but the search) opens /map.html */
.hero__map-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
/* the search bar floats on the map (replaces the old count + browse button) */
.hero__map-search {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  max-width: none;
  margin: 0;
  box-shadow: var(--shadow-lg);
}
.hero__map-badge {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 500;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 11px 16px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line-cool);
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-2);
  pointer-events: none;
}
.hero__map-badge strong {
  font-family: var(--font-serif);
  color: var(--blue-700);
  font-size: 1.05rem;
}
.hero__map-count {
  color: var(--ink-2);
}
/* the "Browse the map" CTA now lives on the map panel as an accent button */
.hero__map-cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--grad-accent, var(--accent));
  color: #fff;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(217, 140, 90, 0.32);
}
.hero__map-wrap:hover .hero__map-cta {
  filter: brightness(1.05);
  text-decoration: none;
}
@media (max-width: 920px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding: var(--space-7) 0 var(--space-6);
  }
  .hero__copy {
    order: 1;
    max-width: none;
  }
  .hero__map-wrap {
    order: 2; /* map below the copy on mobile, never a blank top band */
    height: 320px;
  }
  .hero__brand {
    height: 54px;
  }
}
/* keep the on-map search bar a single row even on phones (the global .search
   rule stacks it; that looks odd floating on the map) */
@media (max-width: 720px) {
  .hero__map-search {
    flex-direction: row;
    align-items: center;
    border-radius: 999px;
    padding: 6px 6px 6px 14px;
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
  .hero__map-search .search__icon {
    display: inline-flex;
  }
  .hero__map-search input {
    padding: 10px 6px;
  }
  .hero__map-search button {
    width: auto;
  }
}

/* ---- hero brand mark: the cloud stays, the dove flies away on scroll ----
   Two faint layers. The cloud (outline + rays + wordmark) is a calm tonal
   presence on the right. The dove rides on it, registered by percentage so it
   stays attached at any size (its source origin is 249,152 of the 565x360 art).
   On scroll the dove lifts off in a banking arc and fades out (driven by
   home.js). No-JS and reduced-motion keep the whole mark static and visible. */
.hero {
  isolation: isolate; /* own stacking context so the layers order predictably */
}
.hero__bg {
  z-index: 0;
}
.hero__logo {
  position: absolute;
  top: 60%; /* lowered so the fly-away stays in view as the user scrolls */
  left: 72%; /* centered in the right half: between the copy and the right edge */
  width: min(560px, 50vw);
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}
/* Warm gold light over the sunburst rays. Centered on the ray fan (gold pixels
   span x 27-70%, y 21-59%; centroid ~48%/43%). Dark by default; once the dove
   lifts off it ignites and shimmers (see .is-lit::after / @keyframes ray-glow).
   z-index 1 keeps it above the cloud art (so screen-blend lights the rays) but
   below the dove (z-index 2), so the bird itself is never gold-tinted. */
.hero__logo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    44% 40% at 48% 43%,
    rgba(255, 216, 142, 0.95) 0%,
    rgba(228, 158, 92, 0.6) 32%,
    rgba(216, 140, 90, 0) 70%
  );
  mix-blend-mode: screen;
  opacity: 0; /* unlit until the dove flies */
  transform: scale(0.86);
  transform-origin: 48% 43%;
  will-change: opacity, transform;
}
.hero__cloud {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.1; /* the calm tonal backdrop */
}
/* The dove is TWO registered layers so the wing can beat on its own. .hero__dove
   is the positioned container (registered on the cloud) that GLIDES away smoothly;
   .hd-wing rotates around the shoulder joint to FLAP. Both layers are recolored
   white with a soft slate shadow so the dove reads on the light hero. */
.hero__dove {
  --dove-op: 0.95; /* the white dove is the focal bird, so it is clearly present */
  position: absolute;
  /* registered on the cloud: the padded 110x110 layers are centered on the dove
     so the white+shadow art (baked into the PNGs) sits where the bird belongs */
  left: 40.5%;
  top: 36.7%;
  width: 19.5%;
  aspect-ratio: 1 / 1;
  transform-origin: center center;
  opacity: var(--dove-op);
  transform: translateZ(0); /* promote to its own compositor layer */
  will-change: transform, opacity;
  z-index: 2; /* above the ray-glow overlay so the bird stays untinted */
}
.hd-body,
.hd-wing {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* white + soft slate shadow are BAKED into the PNGs -> NO runtime filter, so
     the fly-away is pure GPU transform/opacity compositing (smooth, no jank) */
}
.hd-wing {
  transform-origin: 47.3% 53.6%; /* shoulder joint within the padded canvas */
  will-change: transform;
  transform: translateZ(0);
}
/* One-shot on first scroll (home.js adds .is-flying once; fill:forwards keeps the
   bird gone). The BODY glides smoothly up and away; the WING beats a few times. */
.hero__dove.is-flying {
  /* ONE continuous transform interval (0 -> 100) so the motion has no velocity
     discontinuity (intermediate keyframes read as a lurch). The ease holds it
     slow at first -- where the wing beats are visible -- then accelerates it up
     and away. translate3d keeps it on the GPU. */
  animation: dove-flyaway 2.2s cubic-bezier(0.5, 0, 0.78, 0.6) forwards;
}
.hero__dove.is-flying .hd-wing {
  /* 6 beats over the slow takeoff, before the big sweep, so flap and glide do
     not overlap heavily */
  animation: wing-flap 0.2s ease-in-out 6;
}
@keyframes dove-flyaway {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    opacity: var(--dove-op);
  }
  55% {
    opacity: var(--dove-op); /* stay visible through takeoff, then fade */
  }
  100% {
    transform: translate3d(26vw, -74vh, 0) rotate(-13deg) scale(0.5);
    opacity: 0;
  }
}
@keyframes wing-flap {
  0% {
    transform: rotate(-5deg); /* top of the upstroke */
  }
  50% {
    transform: rotate(44deg); /* downstroke */
  }
  100% {
    transform: rotate(-5deg);
  }
}
/* ---- brand mark lights up as the dove departs ----
   The cloud (outline + rays + wordmark) sits at a faint 0.1 tonal opacity while
   the dove rests on it. The instant the dove lifts off (home.js adds .is-lit to
   .hero__logo), the mark illuminates: it rises to FULL opacity and blooms with a
   soft halo -- cool brand-blue inner glow + a warmer gold outer halo -- then
   settles to a steady, fully-present glow. One-shot, fill held forwards. The
   tiny 0.15s stagger lets the bird get a beat of a head start while still
   reading as one moment with the takeoff. */
.hero__logo.is-lit .hero__cloud {
  will-change: opacity, transform, filter;
  animation: cloud-lightup 1.9s var(--ease-out) 0.15s both;
}
/* The sunburst rays catch light the instant the dove flies (no delay -- it
   happens AT THE SAME TIME as the takeoff): one single warm gold bloom that
   rises to a peak and eases down to a steady glow. No pulsing -- it happens
   once and holds. */
.hero__logo.is-lit::after {
  animation: ray-glow 2s var(--ease-out) both;
}
@keyframes ray-glow {
  0% {
    opacity: 0;
    transform: scale(0.86);
  }
  38% {
    opacity: 0.95;
    transform: scale(1.06);
  } /* single ignite / peak */
  100% {
    opacity: 0.62;
    transform: scale(1);
  } /* ease down to a steady, held glow */
}
@keyframes cloud-lightup {
  0% {
    opacity: 0.1;
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(144, 176, 194, 0))
      drop-shadow(0 0 0 rgba(199, 164, 104, 0)) brightness(1);
  }
  55% {
    opacity: 1;
    transform: scale(1.025);
    filter: drop-shadow(0 0 26px rgba(144, 176, 194, 0.85))
      drop-shadow(0 0 52px rgba(199, 164, 104, 0.4)) brightness(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 0 12px rgba(144, 176, 194, 0.45))
      drop-shadow(0 0 22px rgba(199, 164, 104, 0.18)) brightness(1.03);
  }
}
.hero__inner {
  position: relative;
  z-index: 2; /* headline + search sit above the mark */
  padding: var(--space-9) 0 var(--space-8);
  max-width: 780px;
}
@media (max-width: 720px) {
  .hero__logo {
    width: 76vw;
    left: 62%;
    top: 34%;
    transform: translate(-50%, -50%);
  }
  .hero__cloud {
    opacity: 0.07;
  }
  .hero__dove {
    --dove-op: 0.8;
  }
}
.hero h1 {
  margin-bottom: 0.35em;
}
.hero .lede {
  max-width: 56ch;
  margin-bottom: var(--space-6);
}

/* ---- search ---- */
.search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--white);
  border: 1.5px solid var(--line-cool);
  border-radius: 999px;
  padding: 7px 7px 7px 18px;
  box-shadow: var(--shadow);
  max-width: 600px;
  transition:
    border-color var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease);
}
.search:focus-within {
  border-color: var(--blue-500);
  box-shadow:
    0 0 0 3px var(--blue-100),
    var(--shadow);
}
.search__icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--blue-500);
}
.search input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 1.05rem;
  color: var(--ink);
  padding: 10px 6px 10px 10px;
  min-width: 0;
}
.search input:focus {
  outline: none;
}
.search input::placeholder {
  color: var(--ink-3);
}
.search button {
  flex: 0 0 auto;
}
.hero__ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.hero__request a {
  font-weight: 600;
}

/* ---- stats band: count-up numbers ---- */
#er-stats .stat__num {
  color: var(--blue-700);
}

/* ---- map teaser (real brand blue) ---- */
.map-teaser {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--blue-700);
  box-shadow: var(--shadow-lg);
  background:
    radial-gradient(
      90% 120% at 12% 18%,
      rgba(121, 166, 190, 0.45),
      transparent 55%
    ),
    radial-gradient(
      70% 90% at 88% 84%,
      rgba(39, 80, 95, 0.55),
      transparent 55%
    ),
    var(--grad-deep);
  color: var(--blue-100);
  min-height: 360px;
  display: flex;
  align-items: center;
}
/* faint dotted "map" texture, evokes scattered pins; gentle parallax drift */
.map-teaser::before {
  content: "";
  position: absolute;
  inset: -10%;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.18) 1.4px,
    transparent 1.6px
  );
  background-size: 26px 26px;
  opacity: 0.55;
  pointer-events: none;
  animation: pinDrift 40s linear infinite;
}
@keyframes pinDrift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(26px, 26px, 0);
  }
}
.map-teaser__body {
  position: relative;
  padding: var(--space-8);
  max-width: 620px;
}
.map-teaser h2 {
  color: var(--white);
}
.map-teaser p {
  color: var(--blue-100);
}
@media (max-width: 720px) {
  .map-teaser__body {
    padding: var(--space-6);
  }
}

/* ---- featured cards ---- */
/* Uses the shared .card.cem-card + .cem-card__photo treatment from base.css
   (real cemetery photo, branded initials fallback, hover image zoom). No
   page-specific override needed beyond the chip already in base.css. */

/* ---- how it works ---- */
.how__col {
  background: var(--white);
  border: 1px solid var(--line-cool);
  border-radius: var(--radius);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  height: 100%;
  transition:
    box-shadow var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out);
}
.how__col:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.how__steps {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  counter-reset: step;
}
.how__steps li {
  position: relative;
  padding: 0 0 var(--space-4) 46px;
  counter-increment: step;
}
.how__steps li:last-child {
  padding-bottom: 0;
}
.how__steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--blue-100);
  color: var(--blue-700);
  font-family: var(--font-serif);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.how__steps strong {
  display: block;
  color: var(--blue-900);
  font-size: 1.05rem;
}
.how__steps span {
  color: var(--ink-2);
  font-size: 0.96rem;
}

/* ---- pricing ---- */
.plan {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line-cool);
  border-radius: var(--radius);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition:
    box-shadow var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out);
}
.plan:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.plan--feature {
  border-color: var(--blue-400);
  box-shadow: var(--shadow);
}
.plan__flag {
  position: absolute;
  top: -13px;
  left: var(--space-6);
  background: linear-gradient(180deg, var(--blue-600), var(--blue-700));
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: var(--shadow-blue);
}
.plan__price {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  color: var(--blue-700);
  line-height: 1;
  margin: var(--space-2) 0 var(--space-1);
}
.plan__price small {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink-3);
  font-weight: 500;
}
.plan__list {
  list-style: none;
  margin: var(--space-4) 0 var(--space-5);
  padding: 0;
  flex: 1;
}
.plan__list li {
  position: relative;
  padding: 0 0 10px 26px;
  color: var(--ink-2);
}
.plan__list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--blue-600);
  font-weight: 700;
}

/* ---- closing CTA on blue section uses real palette ---- */
.section--green .lede {
  color: var(--blue-100);
}

/* small-screen polish */
@media (max-width: 720px) {
  .hero__inner {
    padding: var(--space-7) 0 var(--space-6);
  }
  .search {
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--radius);
    padding: 10px;
  }
  .search__icon {
    display: none;
  }
  .search input {
    padding: 10px 12px;
  }
  .search button {
    width: 100%;
    justify-content: center;
  }
}

/* honor reduced motion for the ambient hero/map drifts */
@media (prefers-reduced-motion: reduce) {
  .hero__bg,
  .map-teaser::before {
    animation: none !important;
  }
  /* the dove fly-away (home.js) is also disabled under reduced motion, leaving
     the full mark static and visible. Defense-in-depth: even if .is-lit were
     present, skip the cloud light-up so the mark stays calm and static. */
  .hero__logo.is-lit .hero__cloud,
  .hero__logo.is-lit::after {
    animation: none !important;
  }
}

/* ---- newest listings strip (auto, under Featured) ---- */
.newest {
  margin-top: var(--space-8);
}
.newest__title {
  font-family: var(--font-serif);
  color: var(--blue-900);
  font-size: 1.45rem;
  margin: 0 0 var(--space-5);
}
.newest-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 230px;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
.newest-card {
  background: var(--white);
  border: 1px solid var(--line-cool);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out);
}
.newest-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.newest-card__photo {
  aspect-ratio: 16 / 10;
  background: var(--blue-50);
}
.newest-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.newest-card__body {
  padding: 10px 12px 12px;
}
.newest-card__price {
  font-weight: 800;
  color: var(--blue-900);
}
.newest-card__name {
  font-size: 0.88rem;
  color: var(--ink-2, var(--ink-3));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.newest-card__loc {
  font-size: 0.8rem;
  color: var(--ink-3);
}