/* ============================================================================
   cj-enhance.css — Conrad Jezeerah visual enhancement layer
   Loaded AFTER style.css so these rules win by source order.

   1. Image fit fixes (stops photos stretching)
   2. Premium "Search Your Property" form
   3. Scroll-reveal + cinematic motion utilities
   4. Card / image micro-interactions
   5. Hero enhancements
   6. Reduced-motion & mobile guards
   ============================================================================ */

:root {
  --cj-gold: #c9a24b;
  --cj-gold-2: #f2d999;
  --cj-ink: #0d1420;
  --cj-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------------------------
   1. IMAGE FIT — the core "stretched images" fix.
   Every card/thumbnail already has an aspect-ratio box; adding object-fit:cover
   makes the photo fill it cleanly instead of distorting.
   --------------------------------------------------------------------------- */
.ul-project-img img,
.ul-project.ul-featured-property .ul-project-img img,
.ul-city .img img,
.ul-project-details-video .video-cover,
.ul-featured-property-slider img,
.ul-testimonial-img img,
.ul-why-choose-us-imgs .img img {
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Do NOT force height:100% here — these images size themselves from
   width + aspect-ratio. Setting both width and height to 100% makes the
   browser ignore aspect-ratio, and with an auto-height parent the image
   collapses to 0 height (this hid the featured-properties slider). */

/* keep the aspect boxes from collapsing */
.ul-project-img { position: relative; }
.ul-project-img img { width: 100%; }

/* the "Our Properties" / listing cards: give a consistent, elegant ratio */
.ul-project .ul-project-img img { aspect-ratio: 4 / 3; }

/* FEATURED SLIDER FIX — the slider sits in a flex row beside its nav buttons.
   Without flex-grow + min-width:0 the Swiper collapses to a few pixels wide, so
   Swiper computes near-zero slide widths and the whole section shows nothing.
   Letting it grow (and allowing it to shrink below content width) makes it fill
   the available space so the latest listings display correctly. */
.ul-featured-properties-slider-wrapper .ul-featured-properties-slider {
  flex: 1 1 auto;
  min-width: 0;
}

/* why-choose-us hero images fill their frames */
.ul-why-choose-us-imgs .img { overflow: hidden; }
.ul-why-choose-us-imgs .img img { width: 100%; }

/* ---------------------------------------------------------------------------
   2. PREMIUM SEARCH FORM  (.cj-search)
   Replaces the mismatched SlimSelect/native combo with one uniform, luxurious
   glass search bar. All controls share the same height and styling.
   --------------------------------------------------------------------------- */
.cj-search {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 14px;
  align-items: end;
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(16px, 2vw, 26px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.55));
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -24px rgba(13, 20, 32, 0.45);
}

.cj-search-field { display: flex; flex-direction: column; min-width: 0; }

.cj-search-field label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cj-ink);
  margin-bottom: 8px;
  opacity: 0.75;
}

.cj-select-wrap { position: relative; }

.cj-select-wrap::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--cj-ink);
  border-bottom: 2px solid var(--cj-ink);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
  opacity: 0.55;
  transition: transform 0.25s var(--cj-ease);
}
.cj-select-wrap:focus-within::after { transform: translateY(-35%) rotate(225deg); }

.cj-search select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 54px;
  padding: 0 40px 0 16px;
  border: 1.5px solid rgba(13, 20, 32, 0.12);
  border-radius: 12px;
  background: #fff;
  color: var(--cj-ink);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.25s var(--cj-ease), box-shadow 0.25s var(--cj-ease), transform 0.25s var(--cj-ease);
}
.cj-search select:hover { border-color: rgba(201, 162, 75, 0.6); }
.cj-search select:focus {
  outline: none;
  border-color: var(--cj-gold);
  box-shadow: 0 0 0 4px rgba(201, 162, 75, 0.18);
}

.cj-search-btn {
  height: 54px;
  padding: 0 28px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--cj-ink), #1f2d44);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s var(--cj-ease), box-shadow 0.25s var(--cj-ease);
}
.cj-search-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--cj-gold), var(--cj-gold-2));
  opacity: 0;
  transition: opacity 0.3s var(--cj-ease);
  z-index: 0;
}
.cj-search-btn > * { position: relative; z-index: 1; }
.cj-search-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(201, 162, 75, 0.7); }
.cj-search-btn:hover::before { opacity: 1; }
.cj-search-btn:hover { color: var(--cj-ink); }

@media (max-width: 860px) {
  .cj-search { grid-template-columns: 1fr 1fr; }
  .cj-search-btn { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .cj-search { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   2b. CONTACT LISTING SUPERVISOR CARD (project details sidebar)
   --------------------------------------------------------------------------- */
.cj-contact-card {
  background: linear-gradient(180deg, #ffffff, #fbfaf6);
  border: 1px solid rgba(13, 20, 32, 0.08);
  border-radius: 18px;
  padding: clamp(20px, 1.8vw, 30px);
  box-shadow: 0 24px 60px -30px rgba(13, 20, 32, 0.4);
}
.cj-contact-title {
  font-size: clamp(19px, 1.3vw, 23px);
  font-weight: 700;
  color: var(--cj-ink);
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 12px;
}
.cj-contact-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--cj-gold), var(--cj-gold-2));
}
.cj-contact-intro {
  font-size: 13.5px;
  line-height: 1.65;
  color: #5b6472;
  margin-bottom: 20px;
}

.cj-supervisor {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(201, 162, 75, 0.08);
  border: 1px solid rgba(201, 162, 75, 0.22);
}
.cj-supervisor-badge {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--cj-ink), #24344f);
  box-shadow: 0 6px 16px -6px rgba(13, 20, 32, 0.6);
  position: relative;
}
.cj-supervisor-badge::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--cj-gold);
  opacity: 0.5;
}
.cj-supervisor-info { display: flex; flex-direction: column; min-width: 0; }
.cj-supervisor-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--cj-ink);
  line-height: 1.25;
}
.cj-supervisor-role {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cj-gold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 2px;
}

.cj-contact-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 16px 0 6px;
}
.cj-contact-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  color: #38424f;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s var(--cj-ease), color 0.2s var(--cj-ease);
  word-break: break-word;
}
.cj-contact-line:hover { background: rgba(13, 20, 32, 0.04); color: var(--cj-ink); }
.cj-contact-ic {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(201, 162, 75, 0.15);
  color: #a9812f;
}
.cj-contact-mail { overflow-wrap: anywhere; }

.cj-contact-actions { margin-top: 20px; }
.cj-contact-btn {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.22s var(--cj-ease), box-shadow 0.22s var(--cj-ease), background 0.22s var(--cj-ease);
}
.cj-btn-email {
  color: var(--cj-ink);
  background: linear-gradient(135deg, var(--cj-gold), var(--cj-gold-2));
}
.cj-btn-email:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(201, 162, 75, 0.8); }
.cj-btn-wa {
  color: #fff;
  background: #1fab53;
}
.cj-btn-wa:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(31, 171, 83, 0.8); background: #1a984a; }
.cj-contact-or {
  display: flex;
  align-items: center;
  text-align: center;
  color: #9aa3af;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 12px 0;
}
.cj-contact-or::before,
.cj-contact-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(13, 20, 32, 0.1);
}
.cj-contact-or span { padding: 0 12px; }

/* ---------------------------------------------------------------------------
   3. SCROLL-REVEAL + CINEMATIC MOTION
   JS adds .cj-in when an element scrolls into view. Stagger via --cj-i.
   --------------------------------------------------------------------------- */
/* Only hide reveal elements when JS is active (html.cj-js set in <head>),
   so content is never trapped invisible if JavaScript is disabled or fails. */
.cj-js [data-cj-reveal] {
  opacity: 0;
  transform: translateY(38px);
  transition:
    opacity 0.9s var(--cj-ease),
    transform 0.9s var(--cj-ease);
  transition-delay: calc(var(--cj-i, 0) * 90ms);
  will-change: opacity, transform;
}
.cj-js [data-cj-reveal="left"]  { transform: translateX(-46px); }
.cj-js [data-cj-reveal="right"] { transform: translateX(46px); }
.cj-js [data-cj-reveal="zoom"]  { transform: scale(0.9); }
.cj-js [data-cj-reveal="blur"]  { filter: blur(12px); }
.cj-js [data-cj-reveal].cj-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ---------------------------------------------------------------------------
   4. CARD & IMAGE MICRO-INTERACTIONS
   --------------------------------------------------------------------------- */
/* smooth tilt base (JS sets --rx/--ry) */
.cj-tilt {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform 0.35s var(--cj-ease), box-shadow 0.35s var(--cj-ease);
  transform-style: preserve-3d;
}
.cj-tilt:hover { box-shadow: 0 30px 60px -30px rgba(13, 20, 32, 0.55); }

/* image zoom-on-hover inside any project/city card */
.ul-project-img,
.ul-city .img,
.ul-featured-property .ul-project-img {
  overflow: hidden;
}
.ul-project-img img,
.ul-city .img img,
.ul-featured-property .ul-project-img img {
  transition: transform 0.9s var(--cj-ease);
}
.ul-project:hover .ul-project-img img,
.ul-city:hover .img img,
.ul-featured-property:hover .ul-project-img img {
  transform: scale(1.09);
}

/* gloss sweep across cards on hover */
.ul-project,
.ul-city,
.ul-featured-property {
  position: relative;
}
.ul-project .ul-project-img::after,
.ul-featured-property .ul-project-img::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: 3;
}
.ul-project:hover .ul-project-img::after,
.ul-featured-property:hover .ul-project-img::after {
  animation: cj-shine 0.9s var(--cj-ease);
}
@keyframes cj-shine {
  to { left: 130%; }
}

/* city cards lift */
.ul-city { transition: transform 0.4s var(--cj-ease); }
.ul-city:hover { transform: translateY(-6px); }

/* ---------------------------------------------------------------------------
   5. HERO ENHANCEMENTS
   --------------------------------------------------------------------------- */
/* animated shimmer on the big ghost "ConradJezeerah" title */
.ul-banner-slide-shadow-title {
  background: linear-gradient(
    100deg,
    rgba(201, 162, 75, 0.18),
    rgba(242, 217, 153, 0.55),
    rgba(201, 162, 75, 0.18)
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  animation: cj-shimmer 6s linear infinite;
}
@keyframes cj-shimmer {
  to { background-position: -220% center; }
}

/* soft parallax hook (JS sets --cj-par) */
.cj-parallax { transition: transform 0.2s linear; will-change: transform; }

/* premium gradient underline reveal on section titles */
.ul-section-title { position: relative; }

/* floating micro-motion for banner property image */
.ul-banner-slide-img {
  animation: cj-float 6s ease-in-out infinite;
}
@keyframes cj-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ---------------------------------------------------------------------------
   6. DESKTOP CURSOR GLOW (added by JS, desktop only)
   --------------------------------------------------------------------------- */
.cj-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(201, 162, 75, 0.8);
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width 0.25s var(--cj-ease), height 0.25s var(--cj-ease), background 0.25s var(--cj-ease);
  mix-blend-mode: difference;
}
.cj-cursor.cj-cursor-lg {
  width: 54px;
  height: 54px;
  background: rgba(201, 162, 75, 0.15);
}

/* scroll progress bar */
.cj-scrollbar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--cj-gold), var(--cj-gold-2));
  z-index: 99998;
  box-shadow: 0 0 10px rgba(201, 162, 75, 0.6);
}

/* ---------------------------------------------------------------------------
   7. GUARDS — respect reduced motion & touch devices
   --------------------------------------------------------------------------- */
@media (hover: none) {
  .cj-cursor { display: none !important; }
  .ul-project:hover .ul-project-img img,
  .ul-city:hover .img img,
  .ul-featured-property:hover .ul-project-img img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  [data-cj-reveal] {
    animation: none !important;
    transition: none !important;
  }
  [data-cj-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .cj-cursor, .cj-scrollbar { display: none !important; }
}