/* ==========================================================================
   LIVING INTERIOR — "الهام برای فضای شما". A continuous rightward-drifting
   luxury gallery marquee (GSAP-driven, see living-interior.js), NOT a
   staggered-entrance slider. Every card is part of the normal document
   flow and opaque/visible from first paint — the marquee only ever
   translates the whole track, it never fades cards in individually, so
   the gallery is fully populated the instant it enters the viewport.

   Compact by design: card height and width are both capped (not derived
   from each other via aspect-ratio) so the section — title + gallery +
   breathing room — fits inside one normal desktop viewport without
   cropping, even at 1366x768.
   ========================================================================== */
.living-interior{
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: clamp(36px, 4vw, 48px) 0 clamp(40px, 4.5vw, 55px);
  /* Its own warm-sand atmosphere, pushed noticeably deeper than a plain
     tint: a saturated diagonal sand gradient, a soft vignette toward the
     far corners for depth, two colored glows (champagne + deep forest),
     a whisper of grain for tactile richness, and a fading hairline
     top/bottom in place of a flat border. */
  background:
    radial-gradient(900px 560px at 8% 14%, rgba(200,168,107,0.32) 0%, transparent 60%) no-repeat,
    radial-gradient(760px 520px at 94% 88%, rgba(24,60,54,0.16) 0%, transparent 58%) no-repeat,
    radial-gradient(1400px 900px at 50% 50%, transparent 45%, rgba(90,66,36,0.10) 100%) no-repeat,
    linear-gradient(90deg, transparent 0%, rgba(200,168,107,0.55) 50%, transparent 100%) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0%, rgba(200,168,107,0.34) 50%, transparent 100%) bottom / 100% 1px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/></svg>") repeat,
    linear-gradient(150deg, #F7EBD2 0%, #E9D3A6 38%, #E7D8B8 62%, #F5EDDD 100%);
  background-blend-mode: normal, normal, normal, normal, normal, overlay, normal;
}

/* Soft ambient glow behind the gallery — a blurred blob, not a texture,
   so it reads as depth/atmosphere rather than a visible shape. Paired
   with a second, quieter forest-toned glow (::after) on the far corner
   for two-tone depth instead of one flat wash of color. */
.living-interior::before{
  content: "";
  position: absolute;
  top: 10%;
  inset-inline-start: 4%;
  width: 46%;
  height: 68%;
  background: rgba(200,168,107,0.3);
  filter: blur(150px);
  opacity: .7;
  pointer-events: none;
  z-index: 0;
}
.living-interior::after{
  content: "";
  position: absolute;
  top: 18%;
  inset-inline-end: 4%;
  width: 32%;
  height: 58%;
  background: rgba(24,60,54,0.22);
  filter: blur(130px);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}

.living-interior .section-head,
.living-interior .interior-gallery{
  position: relative;
  z-index: 1;
}

.living-interior .section-head{
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(28px, 3vw, 36px);
  padding-inline: var(--sp-4);
}
.living-interior h2{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(var(--text-5), 3.6vw, var(--text-7));
  color: var(--forest);
}

/* ---- Continuous marquee rail. Content is duplicated THREE times in the
   markup (rooms + rooms + rooms) so even very wide displays always have
   more rendered track than viewport width — the loop only ever needs to
   know the width of ONE set to wrap seamlessly (see living-interior.js),
   the extra copies are pure safety margin against gaps.

   No edge fade here on purpose: a hard overflow:hidden clip (not a
   feathered mask) is what sells the "gallery continues past the screen
   edge" feeling — a fade instead reads as a bounded slider. ---- */
.interior-gallery{
  /* x-only: horizontal clip for the marquee, but hover lift/shadow on a
     card (translateY + deeper box-shadow) must not get cut off at the
     top/bottom edge of this box. */
  overflow-x: hidden;
  overflow-y: visible;
  padding-block: var(--sp-1);
}

.interior-track{
  display: flex;
  gap: 16px;
  width: max-content;
  will-change: transform;
}

.interior-frame{
  flex: 0 0 auto;
  display: block;
  width: clamp(300px, 22vw, 390px);
  user-select: none;
  -webkit-user-drag: none;
}

.interior-frame .frame-media{
  position: relative;
  width: 100%;
  height: clamp(360px, 42vh, 420px);
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(24,20,14,0.04),
    0 10px 22px -10px rgba(24,20,14,0.18),
    0 24px 44px -26px rgba(24,20,14,0.2);
  transition: box-shadow 600ms var(--ease), transform 600ms var(--ease);
}
.interior-frame:hover .frame-media{
  transform: translateY(-4px);
  box-shadow:
    0 2px 4px rgba(24,20,14,0.05),
    0 16px 30px -12px rgba(24,20,14,0.24),
    0 32px 56px -28px rgba(24,20,14,0.24);
}

.interior-frame img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform 650ms var(--ease);
  pointer-events: none;
}
.interior-frame:hover img{ transform: scale(1.025); }

/* Soft dark gradient — confined to the lower 25-30%, never the whole image */
.frame-gradient{
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,
    rgba(20,17,13,0.58) 0%,
    rgba(20,17,13,0.28) 16%,
    rgba(20,17,13,0.06) 26%,
    transparent 32%);
  transition: background 600ms var(--ease);
  pointer-events: none;
}
.interior-frame:hover .frame-gradient{
  background: linear-gradient(0deg,
    rgba(20,17,13,0.68) 0%,
    rgba(20,17,13,0.36) 18%,
    rgba(20,17,13,0.08) 28%,
    transparent 34%);
}

.frame-caption{
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--sp-3);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-2);
  pointer-events: none;
}
.frame-caption h3{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 1.6vw, 24px);
  color: var(--ivory);
  transition: transform 550ms var(--ease);
}
.interior-frame:hover .frame-caption h3{ transform: translateY(-3px); }

.frame-arrow{
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(247,242,231,.4);
  color: var(--ivory);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 550ms var(--ease);
}
.frame-arrow svg{ width: 15px; height: 15px; }
.interior-frame:hover .frame-arrow{ transform: translate(4px, -4px); }

.interior-frame:focus-visible .frame-media{ outline: 2px solid var(--gold); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce){
  .interior-frame .frame-media, .interior-frame img, .frame-gradient,
  .frame-caption h3, .frame-arrow{ transition-duration: .01ms !important; }
  .interior-gallery{ overflow-x: auto; }
}

@media (max-width: 1199px) and (min-width: 641px){
  .interior-frame{ width: 42vw; }
}

@media (max-width: 640px){
  .living-interior{ padding: clamp(28px, 6vw, 40px) 0 clamp(20px, 4vw, 28px); }
  .interior-frame{ width: 85vw; }
  .interior-frame .frame-media{ height: clamp(320px, 52vh, 400px); }
}