/* ============================================================
   motion.css — MOTION ONLY
   Mr Lux · The Agency Dominican Republic

   Scope rule for this file: it may only set animation, transition,
   transform, opacity, visibility, clip-path, animation-delay and
   will-change. It must never set font, size, colour, background,
   border, padding, margin, width or height — the restored design
   is authoritative for all appearance.

   Loaded after main.css. Fully disabled under prefers-reduced-motion.
   ============================================================ */

:root{
  --m-ease   : cubic-bezier(.22,1,.36,1);
  --m-ease-io: cubic-bezier(.65,.05,.36,1);
}

/* ── 1. PAGE ENTRY ──────────────────────────────────────────
   A coordinated settle, not a loading screen. Content is present
   and readable from the first paint; only opacity is staged.     */
@keyframes mFadeIn { from{ opacity:0 } to{ opacity:1 } }
@keyframes mRiseIn { from{ opacity:0; transform:translate3d(0,18px,0) } to{ opacity:1; transform:none } }

html.m-js #nav{ animation:mFadeIn .7s var(--m-ease) both; }

/* Hero elements stage in sequence once the page is ready. The guard
   class is added by JS, so if JS never runs nothing is ever hidden. */
html.m-js body.m-ready .hflag { animation:mRiseIn .9s var(--m-ease) .18s both; }
html.m-js body.m-ready .ht    { animation:mRiseIn .9s var(--m-ease) .30s both; }
html.m-js body.m-ready .hsub  { animation:mRiseIn .9s var(--m-ease) .46s both; }
html.m-js body.m-ready .hbts  { animation:mRiseIn .9s var(--m-ease) .60s both; }
html.m-js body.m-ready .hc-cap{ animation:mRiseIn .9s var(--m-ease) .74s both; }
html.m-js body.m-ready .hc-dots,
html.m-js body.m-ready .hc-scroll-ind{ animation:mFadeIn 1s var(--m-ease) .88s both; }

/* Interior page heroes get the same treatment, one beat quicker */
html.m-js body.m-ready .phero .sl  { animation:mRiseIn .85s var(--m-ease) .14s both; }
html.m-js body.m-ready .phero h1,
html.m-js body.m-ready .phero .ht  { animation:mRiseIn .85s var(--m-ease) .26s both; }
html.m-js body.m-ready .phero p    { animation:mRiseIn .85s var(--m-ease) .40s both; }

/* ── 2. SCROLL REVEALS ──────────────────────────────────────
   The site's existing .rv / .v system is kept exactly as it is.
   These add variety on top of it, so not everything is one fade. */

/* Stagger index, applied by JS to siblings within a grid */
.rv[style*="--m-i"]{ transition-delay:calc(var(--m-i) * 80ms); }

/* Soft image reveal — the image settles from a slight scale as its
   card enters. Overflow is already hidden on these frames.        */
html.m-js .limg img,
html.m-js .dg-frame img,
html.m-js .sg-frame img{
  transition:transform 1.4s var(--m-ease), filter .6s ease;
}
html.m-js .rv:not(.v) .limg img,
html.m-js .rv:not(.v) .dg-frame img,
html.m-js .rv:not(.v) .sg-frame img{ transform:scale(1.06); }
html.m-js .rv.v .limg img,
html.m-js .rv.v .dg-frame img,
html.m-js .rv.v .sg-frame img{ transform:scale(1); }

/* Section rules draw rather than appear (the .rl element already
   exists in the design; only its transition is added here). */
html.m-js .rl{ transition:transform .9s var(--m-ease) .15s; }

/* ── 3. HOVER: RESTRAINED IMAGE ZOOM ───────────────────────── */
@media(hover:hover) and (pointer:fine){
  html.m-js .lcard:hover:not(.ph) .limg img{ transform:scale(1.045); }
  html.m-js .dg-frame:hover img,
  html.m-js .sg-frame:hover img{ transform:scale(1.04); }
  html.m-js .spot-card:hover .spot-img img{ transform:scale(1.04); }
}
html.m-js .spot-img img{ transition:transform 1.3s var(--m-ease); }

/* Touch devices: never depend on hover */
@media(hover:none){
  html.m-js .lcard .limg img{ transform:none !important; }
}

/* ── 4. BUTTONS & LINKS ─────────────────────────────────────
   Timing only — every colour, border and size stays as designed. */
html.m-js .bred,html.m-js .bwh,html.m-js .bgh,html.m-js .boutline,
html.m-js .cf-submit,html.m-js .lbtn,html.m-js .aexp,
html.m-js .nct,html.m-js .lmore-btn,html.m-js .dlbtn{
  transition:background-color .42s var(--m-ease),
             color .42s var(--m-ease),
             border-color .42s var(--m-ease),
             box-shadow .42s var(--m-ease),
             transform .42s var(--m-ease);
}
html.m-js .bred:active,html.m-js .bwh:active,html.m-js .bgh:active,
html.m-js .boutline:active,html.m-js .cf-submit:active{ transform:translateY(1px); }

/* The arrow glyph inside listing / expand links travels on hover */
html.m-js .lbtn,html.m-js .aexp{ overflow:hidden; }
html.m-js .lbtn span,html.m-js .aexp span{
  display:inline-block; transition:transform .42s var(--m-ease);
}
@media(hover:hover) and (pointer:fine){
  html.m-js .lbtn:hover span,html.m-js .aexp:hover span{ transform:translateX(4px); }
}

/* Nav link underline sweeps in instead of switching on */
html.m-js .nli>li>a,
html.m-js .nli>li>span.ndrop{
  transition:color .35s var(--m-ease), border-bottom-color .35s var(--m-ease);
}
html.m-js .nsub a{
  transition:background-color .3s var(--m-ease), color .3s var(--m-ease),
             padding-left .3s var(--m-ease);
}

/* ── 5. NAVIGATION ──────────────────────────────────────────── */
html.m-js #nav{
  transition:padding .45s var(--m-ease), background-color .45s var(--m-ease),
             box-shadow .45s var(--m-ease), backdrop-filter .45s var(--m-ease);
}

/* Dropdown: was display:none → display:block (instant). Now it keeps
   the same box, but fades and settles. Layout and look unchanged.  */
html.m-js .nsub{
  display:block;
  opacity:0; visibility:hidden;
  transform:translate3d(0,-8px,0);
  transition:opacity .32s var(--m-ease), transform .32s var(--m-ease),
             visibility .32s;
  pointer-events:none;
}
html.m-js .nli>li:hover .nsub,
html.m-js .nli>li:focus-within .nsub{
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
}

/* Mobile menu: panel fades in and its links stagger. The display
   toggle is left to the existing JS, so open/close still works.   */
@keyframes mPanelIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes mLinkIn { from{ opacity:0; transform:translate3d(0,14px,0) } to{ opacity:1; transform:none } }
html.m-js #mobileMenu.open{ animation:mPanelIn .34s var(--m-ease) both; }
html.m-js #mobileMenu.open .mm-link,
html.m-js #mobileMenu.open .mm-cta{
  animation:mLinkIn .55s var(--m-ease) both;
}
html.m-js #mobileMenu.open .mm-link:nth-child(1){ animation-delay:.06s }
html.m-js #mobileMenu.open .mm-link:nth-child(2){ animation-delay:.10s }
html.m-js #mobileMenu.open .mm-link:nth-child(3){ animation-delay:.14s }
html.m-js #mobileMenu.open .mm-link:nth-child(4){ animation-delay:.18s }
html.m-js #mobileMenu.open .mm-link:nth-child(5){ animation-delay:.22s }
html.m-js #mobileMenu.open .mm-link:nth-child(6){ animation-delay:.26s }
html.m-js #mobileMenu.open .mm-link:nth-child(7){ animation-delay:.30s }
html.m-js #mobileMenu.open .mm-link:nth-child(8){ animation-delay:.34s }
html.m-js #mobileMenu.open .mm-link:nth-child(n+9){ animation-delay:.38s }
html.m-js #mobileMenu.open .mm-cta{ animation-delay:.42s }

/* ── 6. ACCORDIONS ──────────────────────────────────────────
   Same open height as designed; only the curve is refined.      */
html.m-js .fa{
  transition:max-height .52s var(--m-ease), padding .52s var(--m-ease),
             opacity .4s var(--m-ease);
}
html.m-js .fitem:not(.open) .fa{ opacity:0; }
html.m-js .fitem.open .fa{ opacity:1; }
html.m-js .farr{ transition:transform .45s var(--m-ease), color .3s ease; }

/* ── 7. MODALS & GALLERIES ─────────────────────────────────── */
html.m-js .lmodal,html.m-js .modal,html.m-js .nl-modal,
html.m-js #listingModal,html.m-js .lightbox{
  transition:opacity .34s var(--m-ease), visibility .34s;
}
@keyframes mModalIn{
  from{ opacity:0; transform:translate3d(0,22px,0) scale(.99) }
  to  { opacity:1; transform:none }
}
html.m-js .lmodal.open .lmbox,html.m-js .lmodal.show .lmbox,
html.m-js .modal.open .modal-box,html.m-js .modal.show .modal-box,
html.m-js .nl-modal.show .nl-box,html.m-js .nl-modal.open .nl-box{
  animation:mModalIn .46s var(--m-ease) both;
}
/* Gallery image crossfade */
html.m-js .lm-main img,html.m-js .lightbox img{
  transition:opacity .4s var(--m-ease), transform 1.1s var(--m-ease);
}
html.m-js .lm-thumb{ transition:opacity .3s var(--m-ease), border-color .3s var(--m-ease); }

/* ── 8. FORMS ───────────────────────────────────────────────
   Focus feedback timing only; field styling is untouched.       */
html.m-js .cform-box input,html.m-js .cform-box select,
html.m-js .cform-box textarea,html.m-js .nl-input,
html.m-js .search-bar input,html.m-js .search-bar select{
  transition:border-color .32s var(--m-ease), box-shadow .32s var(--m-ease),
             background-color .32s var(--m-ease);
}

/* ── 9. CAROUSEL & TABS ─────────────────────────────────────
   The hero crossfade already exists in main.css and is left alone. */
html.m-js .hc-arrow{ transition:background-color .35s var(--m-ease), border-color .35s var(--m-ease), transform .35s var(--m-ease); }
html.m-js .hc-dot{ transition:opacity .35s var(--m-ease), transform .35s var(--m-ease), background-color .35s var(--m-ease); }
html.m-js .zt{ transition:color .35s var(--m-ease), border-color .35s var(--m-ease); }

/* Filtered results settle in rather than snapping */
@keyframes mCardIn{ from{ opacity:0; transform:translate3d(0,16px,0) } to{ opacity:1; transform:none } }
html.m-js .lcard.m-filtered{ animation:mCardIn .5s var(--m-ease) both; }

/* ── 10. FAILSAFES ─────────────────────────────────────────── */
/* If JS never runs, html.m-js is absent and none of the above
   applies — the restored design renders exactly as authored.    */
html:not(.m-js) .rv{ opacity:1 !important; transform:none !important; }

/* ── 11. REDUCED MOTION ────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  html.m-js *,html.m-js *::before,html.m-js *::after{
    animation-duration:.01ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
  }
  html.m-js .rv{ opacity:1 !important; transform:none !important; }
  html.m-js .limg img,html.m-js .dg-frame img,
  html.m-js .sg-frame img,html.m-js .spot-img img{ transform:none !important; }
  html.m-js .nsub{ display:none; opacity:1; visibility:visible; transform:none; pointer-events:auto; }
  html.m-js .nli>li:hover .nsub,
  html.m-js .nli>li:focus-within .nsub{ display:block; }
  html.m-js .fitem:not(.open) .fa{ opacity:1; }
}