/* ============================================
   JOURNEY — "Walk Through the Forest" scroll layer
   Homepage only. Loaded after styles.css.
   ============================================ */

/* Lift section content above any absolutely-positioned deco */
body.journey-active .section > .container,
body.journey-active .section > .content-container {
  position: relative;
  z-index: 3;
}

/* ---- Markers: Lewis portraits along the trail (Phase 2) ---- */
.journey-marker {
  position: absolute;
  z-index: 4;
  margin: 0;
  width: 200px;
  pointer-events: none;
  will-change: opacity, transform;
}

.journey-marker-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.15;
}

/* soft sage blob behind the portrait */
.journey-marker-photo::before {
  content: "";
  position: absolute;
  inset: -8px;
  background: var(--color-blush-deep, #F3F7E8);
  border-radius: 58% 42% 55% 45% / 52% 48% 60% 40%;
  transform: rotate(8deg) translate(8px, 10px);
  z-index: 0;
}

.journey-marker-photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 58% 42% 55% 45% / 52% 48% 60% 40%;
  border: 3px solid var(--color-green, #6A953F);
  box-shadow: 0 0 0 6px var(--color-blush, #FDFFF5);
}

.journey-marker-caption {
  display: block;
  margin-top: 14px;
  font-family: 'Caveat', cursive;
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--color-green-dark, #4D6F2F);
  text-align: center;
  transform: rotate(-2deg);
}

/* journey-transition section removed — hero-zoom.js handles the transition */

/* caption beside the About bio photo */
.journey-caption--bio {
  position: absolute;
  z-index: 4;
  font-family: 'Caveat', cursive;
  font-size: 1.5rem;
  color: var(--color-green-dark, #4D6F2F);
  transform: rotate(-3deg);
  opacity: 0;
  pointer-events: none;
}

/* ---- CTA clearing glow (Phase 3) ---- */
.journey-clearing {
  position: absolute;
  z-index: 1;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 253, 242, 0.95) 0%, rgba(255, 253, 242, 0) 65%);
  pointer-events: none;
  opacity: 0;
  will-change: opacity, transform;
}

/* ---- Sprouting leaf sprigs along the trail (Phase 4) ---- */
.journey-sprig {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  transform-origin: bottom center;
  opacity: 0;
  will-change: opacity, transform;
}

/* ---- Reduced motion: static drawn trail, visible markers ---- */
@media (prefers-reduced-motion: reduce) {
  #journey-layer { opacity: 0.5; }
  .journey-marker,
  .journey-caption--bio { opacity: 1 !important; }
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
  .journey-marker { width: 110px; }
  .journey-marker-caption { font-size: 1.05rem; margin-top: 8px; }
  .journey-clearing { width: 520px; height: 520px; }
}

@media (max-width: 480px) {
  .journey-marker { display: none; }
}