/* =========================================================
   home.css
   Page-specific styles for the HOME page only:
   hero + Ken Burns bg, filter bar, special-offer / featured
   property cards, statement (video) block, grid section.
   Loaded in addition to common.css, only on index.blade.php.
   ========================================================= */

/* ============ HERO ============ */
.hero{position:relative; min-height:100vh; display:flex; align-items:flex-end; overflow:hidden; margin-top:0;}



.hero-bg{
  position:absolute; inset:0;  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(10,8,6,.15) 0%, rgba(8,6,5,.55) 65%, rgba(6,5,4,.92) 100%),
    radial-gradient(ellipse at 70% 30%, rgba(90,170,210,.25), transparent 55%),
    linear-gradient(200deg,#4a3a2c,#2c2219 45%, #201a14);
  background-size:cover; background-position:center;
  animation:kenburns 22s ease-in-out infinite alternate;
}
.hero-bg video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@keyframes kenburns{from{transform:scale(1.08) translate(0,0);}to{transform:scale(1.16) translate(-1%,-1%);}}
.hero-content{position:relative; z-index:3; width:100%; padding-bottom:110px;}

/* ============ PROPERTY CARDS ============ */
.prop-card{position:relative; border-radius:14px; overflow:hidden; aspect-ratio:4/5.1; cursor:pointer; display:block;}
.prop-card .img{position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .7s var(--ease);}
.prop-card:hover .img{transform:scale(1.08);}
.prop-card .shade{position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,8,6,.92) 0%, rgba(10,8,6,.15) 46%, transparent 65%);}
.prop-card .arrow{
  position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center;
  transition:background .3s var(--ease), transform .4s var(--ease);
}
.prop-card:hover .arrow{background:var(--gold); transform:rotate(45deg);}
.prop-card:hover .arrow svg{stroke:#1c1712;}
.prop-card .arrow svg{width:14px; height:14px; stroke:var(--ink); transition:stroke .3s;}
.prop-card .info{position:absolute; left:0; right:0; bottom:0; padding:22px; z-index:2;}
.prop-card .info h3{color:#fff; font-size:19px; margin-bottom:6px;}
.prop-card .info .loc{display:flex; align-items:center; gap:6px; color:rgba(255,255,255,.78); font-size:12.5px;}
.prop-card .info .loc svg{width:11px; height:11px; flex-shrink:0;}

.img.t1{background-image:linear-gradient(165deg,#87b6d6,#3d5a72 55%,#26313c),repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 8px, transparent 8px 26px);}
.img.t2{background-image:linear-gradient(165deg,#9cc3dd,#4d6b83 55%,#2a343d),repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 20px, transparent 20px 40px);}
.img.t3{background-image:linear-gradient(165deg,#b9d4e6,#587a91 55%,#2c3742),repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 10px, transparent 10px 30px);}
.img.t4{background-image:linear-gradient(165deg,#d7c3a4,#8a6a4c 55%,#3a2c20),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 14px, transparent 14px 32px);}
.img.t5{background-image:linear-gradient(165deg,#a9c9dd,#4a6a80 55%,#232c34),repeating-linear-gradient(0deg,rgba(0,0,0,.1) 0 24px, transparent 24px 46px);}
.img.t6{background-image:linear-gradient(165deg,#cdb896,#7c5c3f 55%,#31251a),repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 12px, transparent 12px 28px);}
.img.t7{background-image:linear-gradient(165deg,#9fbfd0,#476175 55%,#232c34),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 16px, transparent 16px 34px);}
.img.t8{background-image:linear-gradient(165deg,#bcd2df,#5a7c8e 55%,#28323a),repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 18px, transparent 18px 40px);}
.img.t9{background-image:linear-gradient(165deg,#d8c2a0,#93714f 55%,#3a2c1e),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 10px, transparent 10px 24px);}
.img img{width:100%; height:100%; object-fit:cover;}

.offer-section{background:var(--bg-page); padding:130px 0 100px; transition:background .4s var(--ease);}
.featured-section{background:var(--ink); padding:110px 0 120px;}
.featured-section .sec-head h2{color:#fff;}

@media (max-width:575.98px){
  .offer-section,.featured-section{padding:80px 0 70px;}
}

.grid-section{padding:60px 0 20px;}

.property-card {
    position: relative;
    border: 1px solid transparent;
    overflow: hidden;
    transition: all .4s ease;
}
.property-card:hover {
    border-color: #f2d074;
    box-shadow:
        0 0 10px rgba(232, 193, 90, .35),
        0 0 30px rgba(232, 193, 90, .25),
        0 15px 30px rgba(232, 193, 90, .20);
}
/* Gold shine effect */
.property-card:hover::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, .15),
        rgba(232, 193, 90, .65),
        rgba(255, 255, 255, .15),
        transparent
    );
    transform: skewX(-20deg);
    animation: cardGoldShine 1.5s ease-in-out;
    pointer-events: none;
    z-index: 5;
}
@keyframes cardGoldShine {
    0% { left: -150%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

.offer-badge{
  position:absolute;
  top:14px;right:14px;
  background:rgba(30,38,48,.85);
  color:#fff;
  font-weight:bold;
  font-size:12px;
  padding:6px 14px;
  border-radius:20px;
  letter-spacing:.2px;
  transition:background .3s ease, color .3s ease;
  z-index:2;
}
.prop-card:hover .offer-badge {
    color: #111;
    background: linear-gradient(
        120deg,
        var(--gold),
        #fff2a8,
        var(--gold),
        #d4af37,
        var(--gold)
    );
    background-size: 300% 100%;
    animation: goldShine 4.5s linear infinite;
}

/* ============ VIDEO / STATEMENT ============ */
.statement{position:relative; min-height:76vh; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.statement-bg{
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(6,5,4,.96) 0%, rgba(8,6,5,.35) 55%, rgba(20,14,8,.55) 100%),
    radial-gradient(ellipse at 60% 70%, rgba(255,170,110,.25), transparent 60%),
    linear-gradient(200deg,#372a20,#1c1712 55%,#100d0a);
  transition:transform .6s var(--ease);
}
.statement:hover .statement-bg{transform:scale(1.04);}
.statement-content{position:relative; z-index:2; text-align:center; color:#fff;}
.statement-play{
  width:78px; height:78px; border-radius:50%; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.4); display:flex; align-items:center; justify-content:center;
  margin:0 auto 34px; cursor:pointer; backdrop-filter:blur(6px); position:relative;
}
.statement-play::after{
  content:''; position:absolute; inset:-14px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  animation:pulse-ring 2.6s ease-out infinite;
}
@keyframes pulse-ring{0%{transform:scale(.8);opacity:.8;}100%{transform:scale(1.5);opacity:0;}}
.statement-play svg{width:20px; height:20px; fill:#fff; margin-left:3px; position:relative; z-index:2;}
.statement-play:hover{border-color:var(--gold);}
.statement h2{font-size:clamp(28px,4vw,46px); font-weight:400;}

/* =========================================
   MODERN GLASS PROPERTY FILTER (hero search bar)
   ========================================= */
.filter-bar {
    position: relative;
    width: min(950px, 100%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(84, 85, 87, 0.612), rgba(30, 32, 34, 0.482));
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(232, 193, 90, 0.75);
    border-radius: 22px;
    box-shadow:
        0 0 0 1px rgba(232, 193, 90, 0.12),
        0 10px 35px rgba(0, 0, 0, 0.25),
        0 0 35px rgba(232, 193, 90, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 0 rgba(232, 193, 90, 0.18);
    overflow: hidden;
}
.filter-bar::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -30%;
    width: 70%;
    height: 300%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.08), transparent);
    transform: rotate(20deg);
    pointer-events: none;
    opacity: 0.7;
}
.filter-bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #fff3bd, #e8c15a, #fff3bd, transparent);
    box-shadow: 0 0 12px rgba(232, 193, 90, 0.8);
    pointer-events: none;
}
.filter-item {
    position: relative;
    z-index: 2;
    flex: 1;
    min-width: 240px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 10px 18px;
}
.filter-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(232, 193, 90, 0.12);
    border: 1px solid rgba(232, 193, 90, 0.45);
    color: #e8c15a;
    font-size: 20px;
    box-shadow: 0 0 15px rgba(232, 193, 90, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: all 0.3s ease;
}
.filter-item:hover .filter-icon {
    background: rgba(232, 193, 90, 0.22);
    border-color: #e8c15a;
    box-shadow: 0 0 20px rgba(232, 193, 90, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
}
.filter-content { flex: 1; min-width: 0; }
.filter-content label {
    display: block;
    margin-bottom: 3px;
    color: rgba(255, 255, 255, 0.70);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.filter-content select {
    width: 100%;
    padding: 0 20px 0 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.filter-content select option {
    background: #ffffff;
    color: #222222;
}
.filter-divider {
    position: relative;
    z-index: 2;
    width: 1px;
    height: 45px;
    background: linear-gradient(to bottom, transparent, rgba(232, 193, 90, 0.75), transparent);
    box-shadow: 0 0 8px rgba(232, 193, 90, 0.2);
}
.btn-search {
    position: relative;
    z-index: 2;
    min-height: 62px;
    padding: 0 27px;
    border: 1px solid #e8c15a;
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(232, 193, 90, 0.96), rgba(190, 145, 45, 0.92));
    color: #171717;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(232, 193, 90, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    transition: all 0.3s ease;
}
.btn-search i { font-size: 18px; }
.btn-search:hover {
    color: #111111;
    transform: translateY(-3px);
    box-shadow:
        0 12px 35px rgba(232, 193, 90, 0.40),
        0 0 20px rgba(232, 193, 90, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

@media (max-width: 767px) {
    .filter-bar { width: 100%; flex-direction: column; align-items: stretch; padding: 14px; border-radius: 20px; }
    .filter-item { width: 100%; min-width: 0; padding: 10px 5px; }
    .filter-divider { width: 100%; height: 1px; }
    .btn-search { width: 100%; min-height: 56px; margin-top: 8px; }
}
@media (max-width: 480px) {
    .filter-bar { padding: 12px; border-radius: 18px; }
    .filter-item { gap: 10px; }
    .filter-icon { width: 42px; height: 42px; flex-basis: 42px; font-size: 18px; }
    .filter-content select { font-size: 14px; }
    .btn-search { font-size: 13px; }
}