/* ==========================================================================
   07-animals.css — Four full-bleed photographic animal tiles (80vh each)
   Moonacres-style. Each tile is its own scroll-reveal unit.
   ========================================================================== */

.animals {
  /* No background — photo IS the background. Full bleed container. */
}

/* --------------------------------------------------------------------------
   Individual tile
   -------------------------------------------------------------------------- */
.animal-tile {
  position: relative;
  width: 100%;
  height: 80vh;
  min-height: 480px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Photo fills the tile */
.animal-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

/* Per-tile object-position — heads in frame */
.animal-tile--alpacas .animal-tile__img    { object-position: center 30%; }
.animal-tile--angus .animal-tile__img      { object-position: center 40%; }
.animal-tile--galloways .animal-tile__img  { object-position: center 35%; }
.animal-tile--goats .animal-tile__img      { object-position: center 50%; }

/* Dark gradient reading surface — bottom 55% */
.animal-tile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(26, 22, 18, 0.78) 0%,
    rgba(26, 22, 18, 0.20) 45%,
    transparent 65%
  );
  pointer-events: none;
}

/* Content panel — bottom-left */
.animal-tile__content {
  position: relative;
  z-index: 2;
  padding: var(--space-48) var(--space-80);
  max-width: 640px;
}

.animal-tile__eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-paper);
  opacity: 0.70;
  margin-bottom: var(--space-16);
  display: block;
}

.animal-tile__heading {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  font-variation-settings: 'opsz' 36, 'SOFT' 30, 'wght' 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--color-paper);
  margin-bottom: var(--space-16);
}

.animal-tile__body {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(242, 236, 223, 0.80);
  margin-bottom: var(--space-24);
  max-width: 480px;
}

/* Link button — inverted on dark background */
.animal-tile__link {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--color-paper);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-rust);
  text-decoration-thickness: 1px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  transition: text-decoration-color var(--transition-fast),
              text-decoration-thickness var(--transition-fast);
}

.animal-tile__link:hover {
  text-decoration-thickness: 2px;
  color: var(--color-rust);
  text-decoration-color: var(--color-rust);
}

/* --------------------------------------------------------------------------
   Mobile: 60vh, tighter padding
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .animal-tile {
    height: 70vh;
  }

  .animal-tile__content {
    padding: var(--space-32) var(--space-24);
    max-width: 100%;
  }

  .animal-tile__heading {
    font-size: 26px;
  }

  .animal-tile__body {
    font-size: 15px;
    max-width: 100%;
  }
}