/* ============================================================
   AAFNO GHAR — Cinematic Landing Page (index.html only)
   Brand direction: "The way home." Mist → landscape → place → home.
   Motion is slow, expensive and intentional — see --transition-cinematic.
   ============================================================ */

/* ── Reveal-on-scroll (driven by initScrollReveal() in main.js,
      which already toggles .revealed on .reveal elements) ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Transparent nav over the hero ── */
.navbar.navbar--cinematic {
  background: linear-gradient(to bottom, rgba(14, 35, 64, 0.55), transparent);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  position: absolute;
  top: 0; left: 0; right: 0;
  /* Base .navbar sets a fixed height that doesn't account for the
     Nepali top strip stacked above .nav-container — without this,
     the strip pushes content taller than the box, so the solid
     background (once .scrolled) only paints part of the bar and
     the rest shows the page behind it (looks "half white"). */
  height: auto;
}
.navbar.navbar--cinematic .nav-container {
  height: var(--nav-height);
}
.nav-top-strip {
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--color-brass, #C9A15A);
  background: rgba(14, 35, 64, 0.85);
  padding: 6px 16px;
  border-bottom: 1px solid rgba(201, 161, 90, 0.25);
}
.navbar.navbar--cinematic.scrolled .nav-top-strip {
  background: var(--color-forest, #0E2340);
}
@media (max-width: 640px) {
  .nav-top-strip { font-size: 0.82rem; padding: 5px 12px; }
}

.navbar.navbar--cinematic.scrolled {
  background: var(--color-ivory);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  position: fixed;
}
.navbar.navbar--cinematic .logo-text,
.navbar.navbar--cinematic .nav-links a {
  color: var(--color-ivory);
}
.navbar.navbar--cinematic .logo-accent {
  background: none;
  -webkit-text-fill-color: var(--color-brass);
  color: var(--color-brass);
}
.navbar.navbar--cinematic .nav-descriptor {
  color: rgba(247, 246, 242, 0.6);
  font-size: 0.68rem;
  letter-spacing: 1.5px;
  font-weight: 600;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid rgba(247, 246, 242, 0.3);
}
.navbar.navbar--cinematic .hamburger span {
  background: var(--color-ivory);
}
.navbar.navbar--cinematic.scrolled .logo-text,
.navbar.navbar--cinematic.scrolled .nav-links a {
  color: var(--text-primary);
}
.navbar.navbar--cinematic.scrolled .logo-accent {
  -webkit-text-fill-color: var(--color-brass);
}
.navbar.navbar--cinematic.scrolled .nav-descriptor {
  color: var(--text-muted);
  border-left-color: var(--border);
}
.navbar.navbar--cinematic.scrolled .hamburger span {
  background: var(--text-primary);
}

/* ── Cinematic Hero ── */
.cine-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--color-forest);
}
.cine-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cine-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: cineSlowZoom 24s ease-in-out infinite alternate;
}
@keyframes cineSlowZoom {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}
.cine-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18, 21, 28, 0.92) 0%, rgba(14, 35, 64, 0.55) 45%, rgba(14, 35, 64, 0.15) 75%);
  z-index: 1;
}
.cine-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: calc(var(--nav-height) + 60px) 24px 120px;
  width: 100%;
}
.cine-hero-eyebrow {
  color: var(--color-brass);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: block;
}
.cine-hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 6.5vw, 5.2rem);
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--color-ivory);
  max-width: 780px;
  margin-bottom: 24px;
}
.cine-hero-title em {
  font-style: italic;
  color: var(--color-brass);
}
.cine-hero-sub {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: rgba(247, 246, 242, 0.82);
  max-width: 540px;
  line-height: 1.7;
  margin-bottom: 36px;
}
.cine-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 56px;
}
.cine-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: var(--radius-sm);
  background: var(--gradient-btn);
  color: var(--color-charcoal);
  font-weight: 700;
  font-size: 0.95rem;
  transition: filter var(--transition), transform var(--transition);
}
.cine-btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
}
.cine-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid rgba(247, 246, 242, 0.4);
  color: var(--color-ivory);
  font-weight: 600;
  font-size: 0.95rem;
  transition: border-color var(--transition), background var(--transition);
}
.cine-btn-secondary:hover {
  border-color: var(--color-ivory);
  background: rgba(247, 246, 242, 0.08);
}
.cine-hero-tags {
  position: absolute;
  bottom: 28px;
  left: 24px;
  right: 24px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  letter-spacing: 2px;
  font-weight: 600;
  color: rgba(247, 246, 242, 0.65);
  text-transform: uppercase;
}
.cine-scroll-indicator {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(247, 246, 242, 0.7), transparent);
  z-index: 2;
  overflow: hidden;
}
.cine-scroll-indicator::after {
  content: '';
  position: absolute;
  top: -40px;
  left: 0;
  width: 100%;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--color-brass));
  animation: cineScrollDrip 2.2s ease-in-out infinite;
}
@keyframes cineScrollDrip {
  0% { top: -40px; }
  100% { top: 40px; }
}
@media (max-width: 640px) {
  .cine-hero-tags { display: none; }
  /* On phones the hero no longer needs to fill the full screen —
     it just needs to fit its content (including the search card)
     so nothing is hidden below the fold. */
  .cine-hero { min-height: 0; }
  .cine-hero-content { padding: calc(var(--nav-height) + 8px) 16px 12px; }
  .cine-hero-eyebrow { font-size: 0.66rem; margin-bottom: 5px; }
  .cine-hero-title { font-size: clamp(1.5rem, 7.5vw, 2.2rem); margin-bottom: 7px; }
  .cine-hero-sub { font-size: 0.86rem; line-height: 1.4; margin-bottom: 10px; }
  .cine-hero-ctas { margin-bottom: 8px; gap: 8px; }
  .cine-btn-primary, .cine-btn-secondary { padding: 10px 18px; font-size: 0.85rem; }
  .search-float-wrap .search-field { padding: 8px 16px; }
  /* Compact filter row inside the hero search card — selects side by
     side instead of stacked, so the whole search card takes much
     less vertical space on phones. */
  .search-float-wrap .search-filters {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
  }
  .search-float-wrap .filter-select {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    padding: 8px 30px 8px 10px;
    font-size: 0.8rem;
  }
  .search-float-wrap .tag-filters {
    flex-basis: 100%;
    gap: 6px;
  }
  .search-float-wrap .tag-btn {
    padding: 5px 10px;
    font-size: 0.72rem;
  }
  .search-float-wrap .search-btn {
    height: 42px;
  }
}
@media (max-width: 380px) {
  .cine-hero-sub { display: none; }
}

/* Most laptops report a viewport shorter than their screen once the
   browser's own toolbar/tab-bar is subtracted (a very common real
   case: 1366×768 hardware ends up ~1366×650 of actual page height).
   Compact the hero on any short-but-wide window so the search card
   stays fully visible without scrolling. */
@media (min-width: 641px) and (max-height: 800px) {
  .cine-hero-content { padding: calc(var(--nav-height) + 20px) 24px 20px; }
  .cine-hero-eyebrow { margin-bottom: 10px; }
  .cine-hero-title { font-size: clamp(1.8rem, 4.2vw, 2.8rem); margin-bottom: 12px; }
  .cine-hero-sub { margin-bottom: 16px; line-height: 1.45; }
  .cine-hero-ctas { margin-bottom: 18px; }
  .cine-btn-primary, .cine-btn-secondary { padding: 11px 22px; }
  .search-float-wrap .search-field { padding: 10px 20px; }
}

/* ── Search Card — lives inside the hero itself, visible with no
   scrolling on any screen size ── */
.search-float-wrap {
  position: relative;
  z-index: 3;
  max-width: 1000px;
  width: 100%;
  margin: 8px 0 0;
  padding: 0;
}
.search-float-wrap .search-container { padding: 0; }
.search-float-wrap .search-bar {
  box-shadow: var(--shadow-lg);
}

/* ── Brand Statement ── */
.brand-statement {
  background: var(--color-ivory);
  padding: 110px 24px 90px;
  text-align: center;
}
.brand-statement-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 4.2vw, 3.2rem);
  line-height: 1.3;
  max-width: 780px;
  margin: 0 auto 28px;
  color: var(--text-primary);
}
.brand-statement-heading .fade {
  color: var(--text-muted);
}
.brand-statement-heading .strong {
  color: var(--color-forest);
  font-style: italic;
}
.brand-statement-copy {
  max-width: 560px;
  margin: 0 auto;
  color: var(--text-secondary);
  font-size: 1.02rem;
  line-height: 1.8;
}

/* ── Nepali Quote Slab ── */
.quote-slab {
  background: var(--color-forest);
  padding: 90px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.quote-slab::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.6;
  background-image:
    repeating-linear-gradient(115deg, transparent, transparent 58px, rgba(201, 161, 90, 0.10) 59px, transparent 60px);
}
.quote-slab-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
}
.quote-np {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.3;
  color: var(--color-ivory);
  margin-bottom: 18px;
}
.quote-en {
  font-size: 1rem;
  letter-spacing: 0.3px;
  color: var(--color-brass);
  font-weight: 600;
}
.quote-sep {
  color: rgba(247, 246, 242, 0.4);
  margin: 0 6px;
}

/* ── Two Worlds ── */
.two-worlds {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .two-worlds { grid-template-columns: 1fr 1fr; }
}
.world-panel {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  padding: 56px 40px 100px;
  overflow: hidden;
}
@media (max-width: 640px) {
  .world-panel { padding: 40px 24px 120px; }
}
.world-panel--light {
  background: var(--color-mist);
}
.world-panel--light img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-cinematic);
}
.world-panel--light:hover img {
  transform: scale(1.05);
}
.world-panel--light::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(247, 246, 242, 0.97) 0%, rgba(247, 246, 242, 0.88) 42%, rgba(247, 246, 242, 0) 72%);
}
.world-panel--dark {
  background: var(--color-forest);
}
.world-panel--dark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-cinematic);
}
.world-panel--dark:hover img {
  transform: scale(1.05);
}
.world-panel--dark::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(255, 244, 224, 0.97) 0%, rgba(255, 244, 224, 0.9) 42%, rgba(255, 244, 224, 0) 72%);
}
.world-panel--dark::before {
  display: none;
}
.world-content {
  position: relative;
  z-index: 1;
  max-width: 420px;
}
.world-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-brass);
  margin-bottom: 16px;
}
.world-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  color: var(--color-forest);
  margin-bottom: 14px;
}
.world-copy {
  color: var(--color-charcoal);
  opacity: 0.75;
  font-size: 0.96rem;
  line-height: 1.7;
  margin-bottom: 24px;
}
.world-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-forest);
  font-weight: 700;
  font-size: 0.95rem;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-brass);
  transition: gap var(--transition);
}
.world-cta:hover { gap: 14px; }
.world-micro {
  margin-top: 14px;
  font-size: 0.76rem;
  letter-spacing: 0.5px;
  color: var(--color-charcoal);
  opacity: 0.5;
}

/* ── Property Discovery header (wraps the real listings grid) ── */
.discovery-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}
.discovery-eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-brass);
  margin-bottom: 14px;
}
.discovery-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  color: var(--text-primary);
}

/* ── Local Authority (dark, topographic, location rail) ── */
.authority-section {
  position: relative;
  background: var(--color-forest);
  padding: 100px 24px;
  overflow: hidden;
}
.authority-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.9;
  transition: opacity 1.1s ease;
}
.authority-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
}
.authority-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(14, 35, 64, 0.92), rgba(18, 21, 28, 0.85));
}
.authority-content {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
}
.authority-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.25;
  color: var(--color-ivory);
  max-width: 640px;
  margin-bottom: 20px;
}
.authority-copy {
  color: rgba(247, 246, 242, 0.75);
  font-size: 1rem;
  line-height: 1.8;
  max-width: 560px;
  margin-bottom: 48px;
}
.location-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 36px;
  border-top: 1px solid rgba(247, 246, 242, 0.15);
  padding-top: 32px;
}
.location-item {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: rgba(247, 246, 242, 0.4);
  cursor: default;
  transition: color var(--transition);
  padding: 6px 0;
}
.location-item:hover,
.location-item.active {
  color: var(--color-brass);
}

/* ── Human Moment ── */
.human-moment {
  background: var(--color-ivory);
  padding: 110px 24px;
}
.human-moment-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 860px) {
  .human-moment-inner { grid-template-columns: 0.9fr 1.1fr; gap: 72px; }
}
.human-portrait {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  filter: grayscale(0.15) sepia(0.08);
}
.human-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.human-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.3;
  color: var(--text-primary);
  margin-bottom: 20px;
}
.human-copy {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 20px;
  max-width: 460px;
}
.human-signature {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--color-brass);
  margin-bottom: 24px;
}
.human-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-forest);
  font-weight: 700;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--color-brass);
  padding-bottom: 4px;
  transition: gap var(--transition);
}
.human-cta:hover { gap: 14px; }

/* ── Trust, Quiet ── */
.trust-quiet {
  background: var(--bg-secondary);
  padding: 90px 24px;
}
.trust-quiet-inner {
  max-width: 1000px;
  margin: 0 auto;
}
.trust-eyebrow {
  display: block;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-brass);
  margin-bottom: 48px;
}
.trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 760px) {
  .trust-grid { grid-template-columns: repeat(3, 1fr); }
}
.trust-item {
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
.trust-item h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.trust-item p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* ── Final Conversion ── */
.final-cta {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: var(--color-charcoal);
}
.final-cta-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.final-cta-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.final-cta-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 21, 28, 0.55), rgba(18, 21, 28, 0.85));
}
.final-cta-content {
  position: relative;
  z-index: 1;
  max-width: 680px;
  padding: 80px 24px;
}
.final-cta-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  line-height: 1.3;
  color: var(--color-ivory);
  margin-bottom: 36px;
}
.final-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}
.final-cta-micro {
  font-size: 0.85rem;
  color: rgba(247, 246, 242, 0.6);
}
.final-cta-micro a {
  color: var(--color-brass);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Discovery tag labels: quiet brass, not marketplace pills ── */
.discovery-header + .active-filters .filter-chip,
#listings .tag-btn.active {
  background: var(--color-forest);
  color: var(--color-ivory);
}

/* ══════════════════════════════════════════════════════════
   PREMIUM POLISH PASS — sheen, hairlines, sharper contrast
   ══════════════════════════════════════════════════════════ */

/* Gold hairline at the very top of the page — the "boutique" cue */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 10000;
  background: linear-gradient(90deg, #8A6D3B 0%, #E8C878 22%, #C9A15A 50%, #E8C878 78%, #8A6D3B 100%);
  background-size: 200% 100%;
  animation: hairlineShift 8s linear infinite;
  pointer-events: none;
}
@keyframes hairlineShift {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* Sheen sweep on primary CTAs — a single light pass on hover */
.cine-btn-primary,
.nav-cta,
.fab-post-main {
  position: relative;
  overflow: hidden;
}
.cine-btn-primary::after,
.nav-cta::after,
.fab-post-main::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}
.cine-btn-primary:hover::after,
.nav-cta:hover::after,
.fab-post-main:hover::after {
  left: 130%;
}

/* Sharper hero title — subtle depth without looking heavy */
.cine-hero-title {
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.cine-hero-eyebrow {
  position: relative;
  padding-left: 30px;
}
.cine-hero-eyebrow::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 22px; height: 1px;
  background: var(--color-brass);
  transform: translateY(-50%);
}

/* Listing price — the number that should read "expensive" */
.card-price {
  font-family: var(--font-display);
  letter-spacing: -0.3px;
}

/* Section eyebrows sitewide — a touch more couture */
.discovery-eyebrow,
.trust-eyebrow {
  position: relative;
  padding-left: 30px;
}
.discovery-eyebrow::before,
.trust-eyebrow::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 22px; height: 1px;
  background: var(--color-brass);
  transform: translateY(-50%);
}

/* Two-worlds panels — crisper edge, subtle lift on hover */
.world-panel {
  transition: box-shadow 0.4s ease;
}
.world-panel:hover {
  box-shadow: inset 0 0 0 1px rgba(201, 161, 90, 0.35);
}