/* ==========================================================
   OUR PROPERTIES — BACKGROUND AURORA (no extra HTML needed)
   - Uses ::before for aurora + subtle sheen
   - Uses ::after for vignette (legibility + premium depth)
========================================================== */


/* ==========================================================
   OUR PROPERTIES SLIDER (scoped)
========================================================== */

#our-properties .properties-slider{
  position:relative;
  width:100%;
  height:clamp(420px,52vw,560px);
  border-radius:18px;
  overflow:hidden;

  /* Border that actually reads on photo edges */
  outline: 1px solid rgba(255,255,255,.18);
  outline-offset: -1px;

  /* Premium depth: outer + inner rim */
  box-shadow:
    0 26px 70px rgba(0,0,0,.50),
    0 10px 24px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.08);

  z-index:2; /* stays above background layers */
}

/* Reset list inside this slider only */
#our-properties .slider{
  list-style:none;
  margin:0;
  padding:0;
  height:100%;
  position:relative;
}

/* ==========================================================
   SLIDES
========================================================== */

#our-properties .item{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:1;

  background-position:center;
  background-size:cover;

  border-radius:18px;
  width:clamp(240px,22vw,360px);
  height:clamp(150px,16vw,220px);

  box-shadow:
    0 18px 40px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.08);

  transition:
    transform .12s ease,
    left .75s ease,
    top .75s ease,
    width .75s ease,
    height .75s ease,
    opacity .35s ease;
}

/* ACTIVE slide = first item */
#our-properties .item:nth-child(1){
  left:0;
  top:0;
  width:100%;
  height:100%;
  transform:none;
  border-radius:0;
  box-shadow:none;
  z-index:0;
}

/* Stacked cards */
#our-properties .item:nth-child(2){ left:58%; }
#our-properties .item:nth-child(3){ left:calc(58% + clamp(260px,24vw,380px)); }

/* Hide everything else */
#our-properties .item:nth-child(n + 4){
  opacity:0;
  pointer-events:none;
}

/* Hover affordance (stacked cards only) */
#our-properties .item{ cursor:pointer; }
#our-properties .item:nth-child(1){ cursor:default; }
#our-properties .item:nth-child(2):hover,
#our-properties .item:nth-child(3):hover{
  transform:translateY(-50%) scale(1.02);
}

/* ==========================================================
   GLASS PANEL (active slide text)
========================================================== */

#our-properties .content{
  width:min(42vw,520px);
  position:absolute;
  top:50%;
  left:clamp(16px,3vw,52px);
  transform:translateY(-50%);
  z-index:3;

  padding:clamp(14px,1.8vw,22px);
  border-radius:16px;

  background:rgba(18,24,36,.38);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);

  color:rgba(255,255,255,.95);
  opacity:0;
  display:none;
}

#our-properties .content .title{
  margin:0 0 .35rem;
  font-weight:800;
  letter-spacing:.2px;
}

#our-properties .content .description{
  margin:0 0 .9rem;
  line-height:1.6;
  color:rgba(255,255,255,.86);
  /* bigger clamp (and this is the single source of truth now) */
  font-size:clamp(1.22rem,1.35vw,1.55rem);
}

/* Show content on active slide */
#our-properties .item:nth-child(1) .content{
  display:block;
  animation:ourPropsShow .7s ease-in-out .2s forwards;
}

@keyframes ourPropsShow{
  0%{ opacity:0; filter:blur(4px); transform:translateY(calc(-50% + 40px)); }
  100%{ opacity:1; filter:blur(0); transform:translateY(-50%); }
}

/* ==========================================================
   BADGE
========================================================== */

#our-properties .slide-badge{
  position:absolute;
  right:12px;
  bottom:10px;
  z-index:3;

  padding:8px 12px;
  border-radius:999px;

  font-size:.75rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;

  color:rgba(255,255,255,.95);
  background:rgba(20,50,90,.65);
  border:1px solid rgba(255,255,255,.25);

  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}

/* ==========================================================
   NAV
========================================================== */

#our-properties .nav{
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  z-index:10;
  display:flex;
  gap:10px;
}

#our-properties .nav-btn{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.65);
  background:rgba(255,255,255,.35);
  color:rgba(0,0,0,.75);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background 180ms ease, transform 180ms ease;
}

#our-properties .nav-btn:hover{
  background:rgba(255,255,255,.55);
  transform:translateY(-1px);
}

#our-properties .nav-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.35);
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:900px){
  #our-properties .content{ width:min(60vw,420px); }
  #our-properties .item:nth-child(2){ left:54%; }
  #our-properties .item:nth-child(3){ left:calc(54% + clamp(220px,28vw,340px)); }
}

@media (max-width:650px){
  #our-properties .item:nth-child(2),
  #our-properties .item:nth-child(3){
    opacity:0;
    pointer-events:none;
  }
  #our-properties .content{ width:min(84vw,520px); }
}

/* ==========================================================
   OVERRIDES (put future tweaks here so "lower wins")
   - Border/shadow intensity
   - Glow intensity
========================================================== */

/* If you want the frame border more visible, raise .18 → .26 */
#our-properties .properties-slider{
  outline-color: rgba(255,255,255,.22);
}


/* Clickable (stacked) property cards: white rim + stronger shadow */
#our-properties .item:nth-child(2),
#our-properties .item:nth-child(3){
  border: 1px solid rgba(255,255,255,.22);
  box-shadow:
    0 26px 70px rgba(0,0,0,.55),
    0 10px 22px rgba(0,0,0,.32),
    inset 0 0 0 1px rgba(255,255,255,.08);
}

/* Optional: make the hover feel a touch more “lifted” */
#our-properties .item:nth-child(2):hover,
#our-properties .item:nth-child(3):hover{
  box-shadow:
    0 32px 86px rgba(0,0,0,.60),
    0 14px 28px rgba(0,0,0,.36),
    inset 0 0 0 1px rgba(255,255,255,.10);
}


#our-properties{
  position:relative;
  overflow:hidden;
  background:#1E2A47; /* fallback */
  isolation:isolate;
}

#our-properties::before{
  content:"";
  position:absolute;
  inset:-25%;
  z-index:0;
  pointer-events:none;

  /* Aurora + sheen are layered here (no .aurora-sheen element required) */
  background:
    /* Subtle sheen wash */
    linear-gradient(135deg,
      rgba(255,255,255,0) 0%,
      rgba(155,190,255,.10) 35%,
      rgba(255,255,255,0) 70%
    ),

    /* Bottom-center stage glow */
    radial-gradient(1300px 780px at 50% 118%,
      rgba(93,130,225,.30) 0%,
      rgba(30,42,71,0) 64%
    ),

    /* Side glows */
    radial-gradient(980px 720px at 14% 98%,
      rgba(78,112,200,.18) 0%,
      rgba(30,42,71,0) 60%
    ),
    radial-gradient(980px 720px at 86% 100%,
      rgba(72,104,188,.16) 0%,
      rgba(30,42,71,0) 60%
    ),

    /* Aurora plumes */
    radial-gradient(1250px 900px at 32% 36%,
      rgba(66,98,178,.16) 0%,
      rgba(30,42,71,0) 64%
    ),
    radial-gradient(1350px 980px at 72% 30%,
      rgba(58,90,166,.16) 0%,
      rgba(30,42,71,0) 66%
    ),
    radial-gradient(1200px 900px at 52% 18%,
      rgba(56,86,158,.12) 0%,
      rgba(30,42,71,0) 62%
    ),

    /* Base wash */
    linear-gradient(180deg, rgba(30,42,71,1) 0%, rgba(22,32,56,1) 100%);

  background-size: 190% 190%;
  background-position: 50% 50%;
  filter: blur(14px);
  opacity: 1;
  transform: translateZ(0);
  animation: ourPropsAuroraDrift 18s ease-in-out infinite;
}

#our-properties::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 55%,
      rgba(30,42,71,0) 38%,
      rgba(10,14,28,.52) 100%
    ),
    linear-gradient(180deg, rgba(10,14,28,.18) 0%, rgba(10,14,28,.44) 100%);
}

/* Keep all real content above background layers */
#our-properties > .container{
  position:relative;
  z-index:1;
}

@keyframes ourPropsAuroraDrift{
  0%{background-position: 50% 50%;}
  35%{background-position: 42% 58%;}
  70%{background-position: 58% 44%;}
  100%{background-position: 50% 50%;}
}

@media (prefers-reduced-motion: reduce){
  #our-properties::before{ animation:none; }
}