/* Isolated transition studies; the working website is not modified. */
.border-preview { --divider-gold: #e8d4a1; --point-depth: 30px; }
.border-preview .scene-art { top: var(--natural-start,21%); overflow: hidden; }
.border-preview--v .scene-art { top: calc(var(--natural-start,21%) - var(--point-depth)); }
.border-preview .natural-trail-photo {
  position: absolute; top: -16%; left: 0; width: 100%; height: 116%;
  object-fit: cover; object-position: 50% center; filter: none;
}
.border-preview .scene-art::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,#102b222e,transparent 180px);
}
.border-preview .hero-property-photo { mask-image: none; }
.border-preview .seam-edge {
  position: absolute; inset: auto 0 0; height: 1px;
  background: var(--divider-gold); pointer-events: none;
}
.border-preview .seam-v { display: none; }
.border-preview .seam-link {
  position: absolute; z-index: 5; left: 50%; bottom: -24px;
  transform: translateX(-50%); width: 48px; height: 48px;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--divider-gold); color: var(--cream);
  background: #234734; box-shadow: 0 3px 12px #071d1326;
  text-decoration: none; transition: background .18s ease;
}
.border-preview .seam-link svg { width: 22px; height: 22px; }
.border-preview .seam-link:hover { background: #315842; }
.border-preview .seam-link:focus-visible { outline: 3px solid #fffdf5; outline-offset: 5px; }
.border-preview--triangle .seam-edge { height: 8px; background: var(--cream); }
.border-preview--triangle .seam-link {
  bottom: -29px; height: 52px; width: 88px; border: 0; border-radius: 0;
  background: transparent; box-shadow: none;
}
.border-preview--triangle .seam-link::before {
  content: ''; position: absolute; top: 15px; left: 6px;
  width: 76px; height: 27px; background: var(--cream);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.border-preview--triangle .seam-link svg { display: none; }
.border-preview--triangle .seam-link:hover::before { background: var(--divider-gold); }
.border-preview--v .hero-property-photo {
  clip-path: polygon(0 0,100% 0,100% calc(100% - var(--point-depth)),50% 100%,0 calc(100% - var(--point-depth)));
}
.border-preview--v .seam-edge { display: none; }
.border-preview--v .seam-v {
  display: block; position: absolute; inset: auto 0 0; width: 100%;
  height: var(--point-depth); overflow: visible; color: var(--divider-gold);
  pointer-events: none;
}
.border-preview--v .seam-v path { vector-effect: non-scaling-stroke; }
.border-preview--v .seam-link {
  bottom: -22px; width: 44px; height: 44px;
  background: #234734; border-color: var(--divider-gold); border-radius: 3px;
  transform: translateX(-50%) rotate(45deg); box-shadow: none;
}
.border-preview--v .seam-link svg { transform: rotate(-45deg); }
.border-preview--v .seam-link:hover { background: #315842; }
.border-preview--v:not(.real-pine-preview) .trail-end {
  bottom: 40px; width: min(600px,90%); padding: 26px 30px 28px;
  background: #1e4434; border: 1px solid #e8d4a15c; border-radius: 8px;
  box-shadow: 0 12px 32px #061b1459;
}
.border-preview--v:not(.real-pine-preview) .trail-end p {
  color: #fffdf5; font-size: clamp(32px,3.5vw,48px); font-weight: 600;
  line-height: 1.16; margin-bottom: 24px; text-shadow: none;
}
.border-preview--v:not(.real-pine-preview) .trail-end em {
  display: inline-block; margin-top: 6px; font-size: .9em; font-weight: 600;
}
.border-preview--v:not(.real-pine-preview) .trail-end .button {
  min-height: 54px; padding: 14px 26px; font-size: 16px; font-weight: 700;
  color: #173b2b; background: #ead5a1; border-color: #ead5a1;
}
.border-preview--v:not(.real-pine-preview) .trail-end .button:hover {
  background: #f6e7bf; border-color: #f6e7bf;
}
@media (min-width:651px) {
  .border-preview--v:not(.real-pine-preview) .stop-cabin {
    top: calc(23.5% + 64px); --waypoint: 44.5%;
  }
  .border-preview--v:not(.real-pine-preview) .stop-cabin .trail-card {
    margin-left: 48%;
  }
}
@media (max-width:650px) {
  .border-preview .property-intro { background: #234734; margin-bottom: 72px; }
  .border-preview .hero-property-photo { mask-image: linear-gradient(#000 0 72%,transparent); }
  .border-preview .hero-details { padding-bottom: 42px; }
  .border-preview--v .property-intro { background: transparent; }
  .border-preview--v .property-intro::before {
    content: ''; position: absolute; inset: 0; z-index: -2; background: #234734;
    clip-path: polygon(0 0,100% 0,100% calc(100% - var(--point-depth)),50% 100%,0 calc(100% - var(--point-depth)));
  }
  .border-preview--v .hero-property-photo { clip-path: none; }
  .border-preview--v .hero-details { padding-bottom: 54px; }
  .border-preview--v:not(.real-pine-preview) .property-intro { margin-bottom: 120px; }
  .border-preview--v:not(.real-pine-preview) .trail-end {
    bottom: auto; padding: 24px 20px; margin-top: 75px;
  }
}
@media (prefers-reduced-motion:reduce) { .border-preview .seam-link { transition: none; } }
