/* ==========================================================================
   Maria DeVito — motion layer
   Everything that moves beyond the design's own reveal-on-scroll lives here,
   so maria-devito.css stays the untouched design stylesheet. All of it sits
   inside prefers-reduced-motion: no-preference — visitors who ask for less
   motion get the static design.

   Easing: one curve everywhere (soft ease-out) so it all feels related.
   ========================================================================== */

:root {
  --md-ease: cubic-bezier(.22, .61, .36, 1);
  --md-ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

/* ---------- Background video (always on, not motion) ---------- */
.hero__video { object-fit: cover; }
.hero__video-embed { overflow: hidden; pointer-events: none; container-type: size; }
/* (.hero prefix: beats Elementor's `.elementor iframe{max-width:100%}`,
   which would otherwise cap the width and letterbox the video.) */
.hero .hero__video-embed iframe {
  position: absolute; top: 50%; left: 50%; border: 0; max-width: none;
  /* cover: whichever of 16:9-by-width or 16:9-by-height is larger */
  width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw);
  transform: translate(-50%, -50%);
}
/* YouTube can't hide its title bar: overscan 20% so it sits off-screen. */
.hero .hero__video-embed--youtube iframe { transform: translate(-50%, -50%) scale(1.2); }

/* ---------- Scroll cue (now a link with its own line element) ---------- */
.scroll-cue { color: var(--gold-light); text-decoration: none; cursor: pointer; }
.scroll-cue:hover { color: var(--ivory); }
.scroll-cue::after { content: none; }
.scroll-cue__line {
  position: relative; display: block; width: 1px; height: 48px; overflow: hidden;
  background: rgba(184, 151, 90, .3);
}
.scroll-cue__line::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 45%;
  background: var(--gold-light);
}

/* ---------- Footer social icons (replace the design's IG / IN / X text) ----------
   Same line icons as the header, in thin gold rings like .social-circles. */
.site-footer__social--icons { gap: 10px; padding-top: 10px; }
.site-footer__social--icons a {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(214, 190, 140, .35); color: var(--text-on-dark-muted);
  transition: color .3s, border-color .3s, background .3s, transform .4s var(--md-ease);
}
.site-footer__social--icons a:hover { color: var(--navy); background: var(--gold-light); border-color: var(--gold-light); }
.site-footer__social--icons svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .site-footer__social--icons a:hover { transform: translateY(-2px); }
}

/* Lenis (smooth scrolling) needs native smooth anchor scrolling off. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {

  @keyframes md-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes md-fade-up {
    from { opacity: 0; transform: translate3d(0, 28px, 0); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes md-media-settle {
    from { opacity: 0; transform: scale(1.08); }
    to   { opacity: 1; transform: scale(1); }
  }
  @keyframes md-line-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes md-scroll-line {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(230%); }
  }
  @keyframes md-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

  /* ---------- 1. Header + hero load-in ----------
     The navy hero background shows first, the photo/video fades in while
     settling from a slight zoom, then each line of copy rises in turn. */
  .site-header { animation: md-fade 1.2s var(--md-ease) .15s both; }

  .hero .hero__media,
  .page-hero .page-hero__media { animation: md-media-settle 2.8s var(--md-ease) both; }

  .hero__content > *,
  .page-hero__content > * { animation: md-fade-up 1.2s var(--md-ease) both; }
  .hero__content > :nth-child(1), .page-hero__content > :nth-child(1) { animation-delay: .35s; }
  .hero__content > :nth-child(2), .page-hero__content > :nth-child(2) { animation-delay: .55s; }
  .hero__content > :nth-child(3), .page-hero__content > :nth-child(3) { animation-delay: .8s; }
  .hero__content > :nth-child(4), .page-hero__content > :nth-child(4) { animation-delay: 1.05s; }

  /* Gold rules either side of an eyebrow draw outward from the text. */
  .eyebrow--lines::before { transform-origin: right center; }
  .eyebrow--lines::after { transform-origin: left center; }
  .hero__content .eyebrow--lines::before, .hero__content .eyebrow--lines::after,
  .page-hero__content .eyebrow--lines::before, .page-hero__content .eyebrow--lines::after {
    animation: md-line-grow 1.4s var(--md-ease) .9s both;
  }

  /* ---------- 2. Scroll cue ----------
     Fades in last; a bright segment travels down the line on a loop and
     the label breathes in time with it. */
  .hero .scroll-cue { animation: md-fade 1.2s var(--md-ease) 1.5s both; }
  .scroll-cue__line::after { animation: md-scroll-line 2.4s var(--md-ease-in-out) infinite; }
  .scroll-cue__label { animation: md-breathe 2.4s ease-in-out infinite; }
  .scroll-cue:hover .scroll-cue__label { animation-play-state: paused; opacity: 1; }

  /* ---------- 3. Reveal-on-scroll, softened ----------
     Same spec (fade up 24px, once) with a longer, gentler curve. */
  .reveal {
    transition: opacity 1.1s var(--md-ease), transform 1.1s var(--md-ease),
                border-color .4s, box-shadow .6s var(--md-ease);
  }

  /* Photos inside revealed blocks settle from a slight zoom. */
  .circle-photo.reveal img,
  .reveal .offset-frame img { transform: scale(1.06); transition: transform 2s var(--md-ease); }
  .circle-photo.reveal.is-visible img,
  .reveal.is-visible .offset-frame img { transform: none; }

  .portrait-frame.reveal .portrait-frame__img {
    transform: translateX(-50%) translateY(3%); transition: transform 1.8s var(--md-ease) .15s;
  }
  .portrait-frame.reveal.is-visible .portrait-frame__img { transform: translateX(-50%); }
  .portrait-frame.reveal .portrait-frame__word { opacity: 0; transition: opacity 2s var(--md-ease) .3s; }
  .portrait-frame.reveal.is-visible .portrait-frame__word { opacity: 1; }

  /* Gold frame lines slide into place after the photo. */
  .reveal .offset-frame::before {
    opacity: 0; transform: translate(-14px, -14px);
    transition: opacity 1.2s var(--md-ease) .35s, transform 1.4s var(--md-ease) .35s;
  }
  .reveal.is-visible .offset-frame::before { opacity: 1; transform: none; }
  .circle-photo.reveal::before {
    opacity: 0; transform: scale(1);
    transition: opacity 1.2s var(--md-ease) .4s, transform 1.6s var(--md-ease) .4s;
  }
  .circle-photo.reveal.is-visible::before { opacity: 1; transform: scale(1.06); }

  /* Diamond ornament under section titles draws open from the centre. */
  .reveal .ornament { transform: scaleX(.2); opacity: 0; transition: transform 1.4s var(--md-ease) .3s, opacity .9s var(--md-ease) .3s; }
  .reveal.is-visible .ornament { transform: none; opacity: 1; }

  /* ---------- 4. Hover: quiet lift + slow image drift ---------- */
  /* Once revealed (site.js adds .is-settled), hovers use a quick curve
     instead of the slow reveal one. */
  .reveal.is-settled {
    transition: border-color .4s, transform .6s var(--md-ease), box-shadow .6s var(--md-ease);
  }
  .card:hover, a.contact-card:hover {
    transform: translateY(-4px); box-shadow: 0 22px 40px -28px rgba(14, 26, 43, .45);
  }
  .property-card { transition: border-color .4s, transform .6s var(--md-ease), box-shadow .6s var(--md-ease); }
  .property-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -28px rgba(14, 26, 43, .45); }

  .property-card__media, .gallery-item { overflow: hidden; }
  .property-card__media img, .gallery-item img, .property-card__media .ph, .gallery-item .ph {
    transition: transform 1.4s var(--md-ease);
  }
  .property-card:hover .property-card__media img,
  .property-card:hover .property-card__media .ph,
  .gallery-item:hover img, .gallery-item:hover .ph { transform: scale(1.05); }
  .gallery-item__cap { transform: translateY(8px); transition: opacity .4s var(--md-ease), transform .5s var(--md-ease); }
  .gallery-item:hover .gallery-item__cap, .gallery-item:focus-visible .gallery-item__cap { transform: none; }
  .insta__tile img { transition: transform 1.2s var(--md-ease); }

  /* Nav links: a hairline draws in under the hovered / current item. */
  .main-nav a { position: relative; }
  .main-nav a::after {
    content: ""; position: absolute; left: 0; right: .28em; bottom: -8px; height: 1px;
    background: var(--gold-light); transform: scaleX(0); transform-origin: left center;
    transition: transform .6s var(--md-ease);
  }
  .main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); }

  .social-circles a, .header-social a { transition: background .3s, color .3s, border-color .3s, transform .4s var(--md-ease); }
  .social-circles a:hover, .header-social a:hover { transform: translateY(-2px); }

  .slider__btn { transition: background .3s, color .3s, border-color .3s, transform .4s var(--md-ease); }
  .slider__btn:hover { transform: scale(1.06); }
}

/* ---------- Mobile menu: hamburger morph + curtain drawer ----------
   Opening:  lines slide together → rotate into a cross, while the navy
             drawer drops like a curtain, then links rise in one by one,
             then the ornament, contact lines and social icons.
   Closing:  cross un-rotates → lines spread back; links fade out quickly,
             then the curtain lifts.
   --i (set by site.js) is each item's position, for the stagger. */
@media (prefers-reduced-motion: no-preference) {

  /* Hamburger → cross. Two phases, reversed on the way back. */
  .menu-toggle__box span {
    transition: top .28s var(--md-ease) .22s, transform .28s var(--md-ease) 0s,
                opacity .2s ease .22s, width .4s var(--md-ease);
  }
  .menu-toggle.is-active .menu-toggle__box span {
    transition: top .28s var(--md-ease) 0s, transform .32s var(--md-ease) .26s,
                opacity .15s ease 0s, width .4s var(--md-ease);
  }
  .menu-toggle:not(.is-active):hover .menu-toggle__box span:nth-child(2) { width: 70%; }

  /* Drawer curtain. */
  .mobile-nav {
    opacity: 1; visibility: hidden; clip-path: inset(0 0 100% 0);
    transition: clip-path .75s var(--md-ease-in-out) .18s, visibility 0s linear .95s;
  }
  .mobile-nav.is-open {
    visibility: visible; clip-path: inset(0 0 0 0);
    transition: clip-path .8s var(--md-ease-in-out), visibility 0s;
  }

  /* Items: quick fade out on close, staggered rise on open. */
  .mobile-nav__links a, .mobile-nav__footer > * {
    opacity: 0; transform: translateY(28px);
    transition: opacity .25s ease, transform .35s ease;
  }
  .mobile-nav.is-open .mobile-nav__links a,
  .mobile-nav.is-open .mobile-nav__footer > * {
    opacity: 1; transform: none;
    transition: opacity .8s var(--md-ease) calc(.38s + var(--i, 0) * .07s),
                transform 1s var(--md-ease) calc(.38s + var(--i, 0) * .07s),
                color .3s;
  }
  .mobile-nav__footer .ornament { transform: scaleX(.2); }
  .mobile-nav.is-open .mobile-nav__footer .ornament { transform: none; }

  /* Hairline under the hovered / current link, like the desktop nav. */
  .mobile-nav__links a::after {
    content: ""; position: absolute; left: 50%; bottom: 0; width: 40px; height: 1px;
    margin-left: -20px; background: var(--gold); transform: scaleX(0);
    transition: transform .5s var(--md-ease);
  }
  .mobile-nav__links a:hover::after, .mobile-nav__links a[aria-current="page"]::after { transform: scaleX(1); }

  /* The pinned header (logo + cross) eases in over the curtain. */
  body.nav-open .site-header { animation: none; }
}

/* ---------- Gallery lightbox ----------
   Backdrop and controls fade in; each photo eases in from a slight
   scale (on open) or slides in from the side it came from (prev/next). */
@media (prefers-reduced-motion: no-preference) {
  .lightbox__backdrop, .lightbox__btn, .lightbox__caption { opacity: 0; transition: opacity .45s var(--md-ease); }
  .lightbox.is-open .lightbox__backdrop, .lightbox.is-open .lightbox__btn, .lightbox.is-open .lightbox__caption { opacity: 1; }
  .lightbox.is-open .lightbox__caption { transition-delay: .15s; }
  .lightbox__img { opacity: 0; transform: translateX(calc(var(--dir, 0) * 48px)) scale(calc(1 - (1 - var(--dir, 0) * var(--dir, 0)) * .04)); }
  .lightbox__img.is-in { opacity: 1; transform: none; transition: opacity .55s var(--md-ease), transform .7s var(--md-ease); }
  .lightbox:not(.is-open) .lightbox__img { opacity: 0; transform: scale(.97); transition: opacity .35s ease, transform .4s ease; }
}

/* ---------- Form thank-you ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes md-check { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  .md-form-done { animation: md-fade-up .8s var(--md-ease) both; }
  .md-form-done__mark { animation: md-fade .6s var(--md-ease) .15s both; }
  .md-form-done__mark::after { animation: md-check .5s var(--md-ease) .45s both; }
  .md-form-done p { animation: md-fade-up .8s var(--md-ease) .3s both; }
  .md-field-error { animation: md-fade .3s ease both; }
}

/* In the Elementor editor, play nothing on load: widgets re-render
   constantly while editing and would replay their intros each time. */
.elementor-editor-active .hero__media, .elementor-editor-active .page-hero__media,
.elementor-editor-active .hero__content > *, .elementor-editor-active .page-hero__content > *,
.elementor-editor-active .site-header, .elementor-editor-active .hero .scroll-cue { animation: none; }