/* 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 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;
}
.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;
  left: 44.1%;
  top: 42.2%;
  width: 12.4%;
  aspect-ratio: 1 / 1;
  transform-origin: center center;
  opacity: var(--dove-op);
  will-change: transform, opacity;
}
.hd-body,
.hd-wing {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* recolor the black silhouette to a WHITE dove + soft slate definition */
  filter: brightness(0) invert(1) drop-shadow(0 1px 1.5px rgba(45, 75, 92, 0.5))
    drop-shadow(0 5px 12px rgba(45, 75, 92, 0.2));
}
.hd-wing {
  transform-origin: 45.7% 55.7%; /* the shoulder joint, so the wing hinges there */
}
/* 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 {
  animation: dove-flyaway 2.4s cubic-bezier(0.45, 0.04, 0.55, 1) forwards;
}
.hero__dove.is-flying .hd-wing {
  /* 8 quick beats while it gathers + climbs, easing toward a glide */
  animation: wing-flap 0.22s ease-in-out 8;
}
@keyframes dove-flyaway {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: var(--dove-op);
  }
  18% {
    /* gentle lift while flapping in place -- the beats are visible here */
    transform: translate(0.6vw, -4vh) rotate(-3deg) scale(0.98);
    opacity: var(--dove-op);
  }
  44% {
    transform: translate(5vw, -20vh) rotate(-7deg) scale(0.9);
    opacity: var(--dove-op);
  }
  100% {
    /* then sweeps up and away, receding + fading */
    transform: translate(31vw, -72vh) rotate(-12deg) scale(0.36);
    opacity: 0;
  }
}
@keyframes wing-flap {
  0% {
    transform: rotate(-4deg); /* slight up at the top of the beat */
  }
  50% {
    transform: rotate(46deg); /* downstroke */
  }
  100% {
    transform: rotate(-4deg);
  }
}
.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 */
}