/* ============ Our Story: the mushroom house ============ */

.house {
  position: relative;
  background: var(--house);
  color: var(--cream);
}
.house__stage {
  position: relative;
  isolation: isolate;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
}
.house__canvas,
.house__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.house__fallback {
  display: none;
  object-fit: cover;
  filter: brightness(0.55) saturate(0.9);
}
.house--nogl .house__fallback { display: block; }
.house--nogl .house__canvas { display: none; }

/* Darkens the edges so the cards and heading stay legible over the scene. */
.house__shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 70% at 50% 45%, rgba(17, 12, 8, 0) 40%, rgba(17, 12, 8, 0.6) 100%),
    linear-gradient(180deg, rgba(17, 12, 8, 0.35) 0%, rgba(17, 12, 8, 0) 22%);
  pointer-events: none;
}

.house__heading {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: min(100% - 2 * var(--gutter), 46rem);
  display: grid;
  gap: 1rem;
  justify-items: center;
  text-align: center;
  z-index: 2;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.7);
}
.house__heading .section-title { font-size: var(--step-5); line-height: 0.98; }

.house__milestones {
  list-style: none;
  margin: 0;
  padding: 0;
}

.milestone {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  background: rgba(17, 12, 8, 0.74);
  border: 1px solid rgba(201, 177, 120, 0.22);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.milestone__kicker {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-style: italic;
  line-height: 1;
  color: var(--gold);
}
.milestone__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-2);
  line-height: 1.1;
}
.milestone p:not(.milestone__kicker) {
  color: rgba(244, 239, 227, 0.82);
  line-height: 1.6;
}
.milestone__photo {
  margin: 0.5rem 0 0;
  overflow: hidden;
  border-radius: calc(var(--radius) * 0.75);
  aspect-ratio: 4 / 3;
}
.milestone__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Walk-through: cards take turns on the left and right as you pass them. */
.house:not(.house--static) .house__milestones {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.house:not(.house--static) .milestone {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: min(25rem, 32vw);
}
.house:not(.house--static) .milestone:nth-child(odd) { left: var(--gutter); }
.house:not(.house--static) .milestone:nth-child(even) { right: var(--gutter); }
.js .house:not(.house--static) .milestone { opacity: 0; }

@media (max-width: 899px) {
  .house:not(.house--static) .milestone,
  .house:not(.house--static) .milestone:nth-child(n) {
    top: auto;
    bottom: 1.25rem;
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    translate: none;
  }
  .milestone { gap: 0.5rem; }
  .milestone__photo { aspect-ratio: 16 / 9; }
  .house__heading .section-title { font-size: clamp(2.6rem, 11vw, 3.6rem); }
}

/* Static version (reduced motion, no WebGL or no GSAP): one frame of the
   aisle as a banner, then the milestones as a plain list. */
.house--static .house__stage {
  height: auto;
  min-height: 0;
  padding-bottom: var(--section);
}
.house--static .house__canvas,
.house--static .house__fallback {
  position: relative;
  height: min(62vh, 560px);
}
/* The still frame looks straight down the aisle at the lit far door, so dim
   the middle where the heading sits. */
.house--static .house__shade {
  height: min(62vh, 560px);
  background:
    radial-gradient(ellipse 50% 42% at 50% 50%, rgba(17, 12, 8, 0.62) 0%, rgba(17, 12, 8, 0) 100%),
    radial-gradient(ellipse 75% 70% at 50% 45%, rgba(17, 12, 8, 0) 40%, rgba(17, 12, 8, 0.6) 100%),
    linear-gradient(180deg, rgba(17, 12, 8, 0.35) 0%, rgba(17, 12, 8, 0) 22%);
}
.house--static .bloom { display: none; }
.house--static .house__heading {
  top: calc(min(62vh, 560px) / 2);
}
.house--static .house__milestones {
  display: grid;
  gap: 1.5rem;
  width: min(100% - 2 * var(--gutter), var(--max));
  margin: calc(var(--section) * 0.5) auto 0;
}
/* Five cards: three across, then two wider ones (Farm tours carries a photo). */
@media (min-width: 900px) {
  .house--static .house__milestones { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .house--static .milestone { grid-column: span 2; }
  .house--static .milestone:nth-child(n + 4) { grid-column: span 3; }
}