/* TimeLess Haven – Extras
   Only what Elementor Free cannot store: keyframe motion, easing curves,
   parent-hover effects, scroll snap and the carousel's JavaScript states.
   Colours come from the Elementor global variables (--c-*).
   After editing: clear the LWS cache, its edge cache ignores the ?ver= query. */

/* The design is drawn on a 16px base; Astra lowers it to 91.2% on tablet and mobile. */
html { font-size: 100%; }

/* ---------- Hero: slow film-like drift ---------- */
@keyframes tlh-drift-wide {
  from { transform: scale(1.22) translate(0, 0); }
  to   { transform: scale(1.3) translate(3.5%, 2%); }
}
@keyframes tlh-drift {
  from { object-position: 50% 50%; }
  to   { object-position: 0% 50%; }
}
.elementor .hero-photo {
  transform-origin: 50% 50%;
  animation: tlh-drift-wide 60s cubic-bezier(0.22, 0.61, 0.36, 1) infinite alternate;
  will-change: transform;
}
@media (max-width: 1080px) {
  .elementor .hero-photo {
    transform: none;
    animation: tlh-drift 50s cubic-bezier(0.22, 0.61, 0.36, 1) infinite alternate;
  }
}

/* ---------- Arrow links: the line grows on hover ---------- */
.elementor .link-arrow .link-arrow-mark {
  transition: width 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.elementor .link-arrow:hover .link-arrow-mark { width: 3.5rem; }

/* ---------- Photos: eased zoom on hover of the frame or card ---------- */
.elementor .photo {
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.elementor .photo-frame:hover .photo { transform: scale(1.03); }
.elementor .card-property:hover .card-media .photo { transform: scale(1.04); }
.elementor .card-property:hover .card-title { color: var(--c-champagne-text); }
.elementor .button-light,
.elementor .button-ghost-light,
.elementor .carousel-arrow,
.elementor .card-title {
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Mobile: swipeable photo rail snaps card by card ---------- */
@media (max-width: 680px) {
  .elementor .highlight-row { scroll-snap-type: x mandatory; }
  .elementor .card-highlight { scroll-snap-align: start; }
}

/* ---------- Featured carousel (states set by tlh-extras.js) ---------- */
.elementor .carousel { touch-action: pan-y; }
.elementor .carousel.is-ready .carousel-track {
  transform: translateX(calc(var(--slide-index, 0) * -100%));
  transition: transform 1100ms cubic-bezier(0.77, 0, 0.18, 1);
}
.elementor .carousel.is-ready .carousel-slide {
  opacity: 0.35;
  transition: opacity 1100ms cubic-bezier(0.77, 0, 0.18, 1);
}
.elementor .carousel.is-ready .carousel-slide.carousel-slide-active { opacity: 1; }

.elementor .carousel.is-ready .carousel-slide .carousel-photo {
  transform: scale(1.08);
  transition: transform 6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.elementor .carousel.is-ready .carousel-slide-active .carousel-photo { transform: scale(1); }
.elementor .carousel.is-ready .carousel-slide-active .carousel-media:hover .carousel-photo {
  transform: scale(1.03);
  transition-duration: 700ms;
}

.elementor .carousel.is-ready .carousel-text {
  opacity: 0;
  transform: translateY(2rem);
  transition:
    opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1) 350ms,
    transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1) 350ms;
}
.elementor .carousel.is-ready .carousel-slide-active .carousel-text {
  opacity: 1;
  transform: translateY(0);
}

.elementor .carousel-media .card-private { height: 100%; }

/* The original chevrons are thin outlines; Elementor's SVG element fills them by default. */
.elementor .carousel-arrow-icon svg,
.elementor .carousel-arrow-icon svg path { fill: none; }

.elementor .carousel-dot-mark {
  transition:
    width 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.elementor .carousel-dot.carousel-dot-active .carousel-dot-mark {
  width: 3.5rem;
  background-color: var(--c-charcoal);
}

.tlh-carousel-status {
  font-family: var(--font-sans), "Helvetica Neue", Arial, sans-serif;
  font-size: 0.6875rem;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-taupe-deep);
}

/* ---------- Filters and plan tabs: active pill ---------- */
.elementor .filter-pill.filter-pill-active,
.elementor .filter-pill.filter-pill-active:hover {
  background-color: var(--c-charcoal);
  color: var(--c-ivory);
  border-color: var(--c-charcoal);
}
.elementor .filter-pill { white-space: nowrap; }
.elementor .plan-viewer.is-ready .plan-panel:not(.plan-panel-active) { display: none; }

/* Empty state shown by the property filters */
.tlh-empty-state { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; padding: 5rem 0; }
.tlh-empty-state[hidden] { display: none; }
.tlh-empty-title { margin: 0; font-family: var(--font-serif), Georgia, serif; font-size: 1.875rem; font-weight: 400; line-height: 1.2; color: var(--c-charcoal); }
.tlh-empty-text { margin: 0; max-width: 38rem; font-family: var(--font-sans), Arial, sans-serif; font-size: 1.125rem; font-weight: 300; line-height: 1.7; color: var(--c-muted); }
.tlh-empty-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.tlh-btn { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.75rem 2rem; font-family: var(--font-sans), Arial, sans-serif; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; border: 1px solid var(--c-charcoal); border-radius: 0; cursor: pointer; text-decoration: none; transition: background-color 220ms cubic-bezier(0.22, 0.61, 0.36, 1), color 220ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.tlh-btn-outline { background: transparent; color: var(--c-charcoal); }
.tlh-btn-outline:hover { background: var(--c-charcoal); color: var(--c-ivory); }
.tlh-btn-primary { background: var(--c-charcoal); color: var(--c-ivory); }
.tlh-btn-primary:hover { background: var(--c-black); color: var(--c-ivory); }
@media (max-width: 680px) { .tlh-empty-state { padding: 3.5rem 0; } .tlh-empty-row { flex-direction: column; align-items: stretch; } }

/* ---------- Location map: animated zoom from Europe to the address ---------- */
.elementor .map-view > .map-layer + .map-layer { margin-left: -100%; }
.elementor .map-view.is-ready .map-layer {
  transform: scale(0.125);
  opacity: 0;
  transition:
    transform 2.4s cubic-bezier(0.65, 0, 0.35, 1) calc((var(--i, 0) - 1) * 2.4s),
    opacity 2.4s cubic-bezier(0.65, 0, 0.35, 1) calc((var(--i, 0) - 1) * 2.4s);
}
.elementor .map-view.is-ready .map-layer.map-layer-first { transform: scale(1); opacity: 1; }
.elementor .map-view.is-ready .map-img {
  transition: transform 2.4s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--i, 0) * 2.4s);
}
.elementor .map-view.map-zoomed .map-layer { transform: scale(1); opacity: 1; }
.elementor .map-view.map-zoomed .map-layer-zooms .map-img { transform: scale(8); }
.elementor .map-view.map-manual .map-layer { transition-delay: 0s, 0s; transition-duration: 900ms, 900ms; }
.elementor .map-view.map-manual .map-img { transition-delay: 0s; transition-duration: 900ms; }
.elementor .map-view.map-manual .map-layer.is-pending { transform: scale(0.125); opacity: 0; }
.elementor .map-view.map-manual .map-layer.is-past,
.elementor .map-view.map-manual .map-layer.is-current { transform: scale(1); opacity: 1; }
.elementor .map-view.map-manual .map-layer.is-past .map-img { transform: scale(8); }
.elementor .map-view.map-manual .map-layer.is-current .map-img { transform: scale(var(--map-extra, 1)); }
.elementor .map-zoom:disabled,
.elementor .map-zoom:disabled:hover { opacity: 0.35; cursor: default; background-color: var(--c-ivory); color: var(--c-charcoal); }
.elementor .map-zoom-icon svg,
.elementor .map-zoom-icon svg path { fill: none; }

/* ---------- Mobile: gallery rows become swipeable rails ---------- */
@media (max-width: 680px) {
  .elementor .gallery-row { scroll-snap-type: x mandatory; }
  .elementor .gallery-item { scroll-snap-align: start; }
}

.elementor .button-primary,
.elementor .button-outline,
.elementor .filter-pill,
.elementor .map-zoom,
.elementor .contact-value,
.elementor .breadcrumb-link { transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }

/* In the Elementor editor, show every slide one under another so each can be edited. */
.elementor-editor-active .carousel-track { flex-wrap: wrap; gap: 3rem; transform: none !important; }
.elementor-editor-active .carousel-slide,
.elementor-editor-active .carousel-text { opacity: 1 !important; transform: none !important; }

/* ---------- Accessibility: respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .elementor .hero-photo { animation: none; transform: none; }
  .elementor .carousel.is-ready .carousel-track,
  .elementor .carousel.is-ready .carousel-slide,
  .elementor .carousel.is-ready .carousel-photo,
  .elementor .carousel.is-ready .carousel-text { transition: none; }
}