/* ── Manar2022 motion layer — 2026-10-24 ──
   Additive polish only: no layout, copy, or color changes. Loads after
   style-fixes.css. Everything here degrades to the existing look when JS or
   GSAP is unavailable, and collapses to static under prefers-reduced-motion. */

:root{
  --mnr-ease-out:cubic-bezier(.22,1,.36,1);
  --mnr-quick:150ms;
  --mnr-fast:250ms;
}

/* 1. The theme sets `transition: all 0.7s` on every element. Keep the
   behaviour (so existing hovers still animate) but make it quick and crisp.
   Rules with their own transition shorthand (style-fixes.css) are untouched. */
*{ transition-duration:var(--mnr-fast); transition-timing-function:var(--mnr-ease-out); }

/* 2. Loader: soft breathe instead of the hard 1s flash */
.loader img{ animation:mnr-breathe 1.3s var(--mnr-ease-out) infinite alternate; }
@keyframes mnr-breathe{ from{ opacity:.55; transform:scale(.97); } to{ opacity:1; transform:scale(1); } }

/* 3. Hero: clip the slider so the parallax/zoom never bleeds over the header */
#site_slider{ overflow:hidden; }
#site_slider .owl-item{ overflow:hidden; }
#site_slider .owl-item img{ will-change:transform; transform-origin:50% 50%; }
/* CSS fallback zoom (only when GSAP is not driving it) */
html.mnr-nogsap #site_slider .owl-item.active img{ animation:mnr-kenburns 9s ease-out forwards; }
@keyframes mnr-kenburns{ from{ transform:scale(1); } to{ transform:scale(1.06); } }
#site_slider .owl-nav button{ transition:background var(--mnr-fast) var(--mnr-ease-out), transform var(--mnr-fast) var(--mnr-ease-out); }
#site_slider .owl-nav button:hover{ transform:scale(1.06); }
#site_slider .owl-nav button:active{ transform:scale(.96); }

/* 4. Header links: the theme's own green pill fill on hover stays; just make it crisp */
#site_header .header_menu li a::before{ transition:width var(--mnr-fast) var(--mnr-ease-out) !important; }

/* 5. Tactile press on every button-like control (0.97, never smaller) */
.book_now a, .aboutbright a, .aboutbutleft a, .leftbotcontact a, .seeallviseo a,
#site_photo .photocontent .nav-tabs > li > a, #footer_site .rightlinks li a,
#contact_text .rightcoforma input[type="submit"], .totopa2, .phone_site a, .lang_site a{
  will-change:transform;
}
.book_now a:active, .aboutbright a:active, .aboutbutleft a:active, .leftbotcontact a:active, .seeallviseo a:active,
#site_photo .photocontent .nav-tabs > li > a:active, #footer_site .rightlinks li a:active,
#contact_text .rightcoforma input[type="submit"]:active, .phone_site a:active{
  transform:scale(.97) !important; transition-duration:var(--mnr-quick);
}

/* 6. Gallery: tab pill feedback, pane rise, caption arrow nudge */
#site_photo .photocontent .nav-tabs > li > a{
  transition:background var(--mnr-fast) var(--mnr-ease-out), color var(--mnr-fast) var(--mnr-ease-out),
             box-shadow var(--mnr-fast) var(--mnr-ease-out), transform var(--mnr-fast) var(--mnr-ease-out);
}
#site_photo .photocontent .nav-tabs > li:not(.active) > a:hover{ transform:translateY(-1px); }
#site_photo .tab-content > .tab-pane.active{ animation:mnr-rise .42s var(--mnr-ease-out) both; }
@keyframes mnr-rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
#site_photo .blocklink .lefticonlink i{ display:inline-block; transition:transform var(--mnr-fast) var(--mnr-ease-out); }
#site_photo .block_all:hover .lefticonlink i{ transform:translateX(-4px); }
html[dir="ltr"] #site_photo .block_all:hover .lefticonlink i{ transform:translateX(4px); }

/* 7. Video play buttons: a slow breathing ring says "this plays" */
.video-play-button{ animation:mnr-pulse 2.8s var(--mnr-ease-out) infinite; }
@keyframes mnr-pulse{
  0%{ box-shadow:0 0 0 0 rgba(67,162,91,.45); }
  70%{ box-shadow:0 0 0 18px rgba(67,162,91,0); }
  100%{ box-shadow:0 0 0 0 rgba(67,162,91,0); }
}
a:hover > .video-play-button, .video-play-button:hover{ animation-play-state:paused; }

/* 8. Mobile side menu: links slide in one after another when it opens */
.sidenav.is-opening li{ animation:mnr-slide-in .38s var(--mnr-ease-out) both; }
.sidenav.is-opening li:nth-child(1){ animation-delay:40ms }
.sidenav.is-opening li:nth-child(2){ animation-delay:80ms }
.sidenav.is-opening li:nth-child(3){ animation-delay:120ms }
.sidenav.is-opening li:nth-child(4){ animation-delay:160ms }
.sidenav.is-opening li:nth-child(5){ animation-delay:200ms }
.sidenav.is-opening li:nth-child(6){ animation-delay:240ms }
.sidenav.is-opening li:nth-child(n+7){ animation-delay:280ms }
@keyframes mnr-slide-in{ from{ opacity:0; transform:translateX(14px); } to{ opacity:1; transform:none; } }
html[dir="ltr"] .sidenav.is-opening li{ animation-name:mnr-slide-in-ltr; }
@keyframes mnr-slide-in-ltr{ from{ opacity:0; transform:translateX(-14px); } to{ opacity:1; transform:none; } }

/* 9. Contact form: invalid fields shake once, errors read as errors */
#contact_text .rightcoforma input.error, #contact_text .rightcoforma textarea.error{
  border-color:#d9534f !important; animation:mnr-shake .4s cubic-bezier(.65,0,.35,1);
}
@keyframes mnr-shake{ 20%{ transform:translateX(-6px) } 40%{ transform:translateX(6px) } 60%{ transform:translateX(-4px) } 80%{ transform:translateX(4px) } }
#contact_text .rightcoforma label.error{ font-size:13px; color:#d9534f; margin-top:4px; display:block; }

/* 10. Keyboard focus: one visible ring everywhere */
#site_header a:focus-visible, main a:focus-visible, main button:focus-visible, #footer_site a:focus-visible,
#contact_text input:focus-visible, #contact_text textarea:focus-visible{
  outline:2px solid #43a25b; outline-offset:3px; border-radius:4px;
}

/* 11. Back-to-top: settle in instead of popping */
.totopa2{ animation-duration:.5s !important; }

/* ── Inner pages (about, services, videos, album, contact): same finish as home ── */
/* Page band: title in the home heading system (weight + short green accent) */
.slider_th2{ padding:56px 20px; }
.slider_th2 a{ display:inline-block; font-size:30px; font-weight:700; line-height:1.4; position:relative; padding-bottom:14px; }
.slider_th2 a::after{ content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:44px; height:3px; border-radius:3px; background:#43a25b; }
.slider_th2 p:empty{ display:none; }
/* Single post text: readable measure, calm weight (content itself untouched) */
.singlepost{ padding:56px 20px 72px; }
.singlepost .col-md-12{ max-width:76ch; margin-inline:auto; float:none; }
.singlepost h4, .singlepost p{ font-size:18px; line-height:1.95; font-weight:400; color:#1c2b45; text-align:start; margin:0 0 18px; }
.singlepost h4 strong, .singlepost p strong{ font-weight:600; }
.singlepost p:empty{ display:none; }
.singlepost .postimages2 img{ border-radius:12px; margin-bottom:24px; }
/* Cards on services / videos / album / rooms: lift, zoom, arrow nudge (mirrors the home gallery) */
.page_content .block_all{
  border-radius:8px; background:#fff; box-shadow:0 2px 10px rgba(20,48,93,.08);
  transition:box-shadow var(--mnr-fast) var(--mnr-ease-out), transform var(--mnr-fast) var(--mnr-ease-out);
}
.page_content .block_photo a{ display:block; overflow:hidden; border-radius:4px; line-height:0; }
.page_content .block_photo img{ transition:transform 400ms var(--mnr-ease-out); }
.page_content .block_all:hover{ transform:translateY(-4px); box-shadow:0 8px 22px rgba(20,48,93,.14); }
.page_content .block_all:hover .block_photo img{ transform:scale(1.035); }
.page_content .lefticonlink i{ display:inline-block; transition:transform var(--mnr-fast) var(--mnr-ease-out); }
.page_content .block_all:hover .lefticonlink i{ transform:translateX(-4px); }
html[dir="ltr"] .page_content .block_all:hover .lefticonlink i{ transform:translateX(4px); }
/* Contact page: direct-contact buttons and form */
.contactforma2 li{ transition:transform var(--mnr-fast) var(--mnr-ease-out), box-shadow var(--mnr-fast) var(--mnr-ease-out); }
.contactforma2 li:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(20,48,93,.16); }
.contactforma2 li:active{ transform:scale(.98); }
#googlemap iframe{ border-radius:12px; }
.page_content input:focus-visible, .page_content textarea:focus-visible, .page_content a:focus-visible{ outline:2px solid #43a25b; outline-offset:3px; border-radius:4px; }
.page_content input.error, .page_content textarea.error{ border-color:#d9534f !important; animation:mnr-shake .4s cubic-bezier(.65,0,.35,1); }
/* Play control: smaller on narrow thumbnails so it never dominates the image */
@media (max-width:600px){
  .video-play-button, #video_text .video-play-button, #about_site .video-play-button{ width:58px !important; height:58px !important; }
  .video-play-button i, #video_text .video-play-button i{ font-size:20px !important; }
}

/* 12. Reduced motion: everything above becomes static, content stays visible */
@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.01ms !important; }
  .loader img, #site_slider .owl-item.active img, .video-play-button, .sidenav.is-opening li,
  #site_photo .tab-content > .tab-pane.active, .totopa2{ animation:none !important; }
}