/* Primary color variables */
:root {
  --color-primary: #315f61;
  --color-primary-dark: #24494b;
  --color-accent: #d7ad49;
  --color-soft: #f9f8f4;
  --app-width: 430px;
}

html,
body {
  background: #eef2f1;
}

body {
  color: #24494b;
}

.aura-shell {
  width: 100%;
  max-width: var(--app-width);
  min-height: 100vh;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 38px rgba(36, 73, 75, 0.11);
  overflow-x: hidden;
  position: relative;
}

.aura-wordmark {
  color: var(--color-primary);
  letter-spacing: .12em;
  font-weight: 500;
}

.aura-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.aura-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fbfef8;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

body.page-loaded .aura-splash {
  opacity: 0;
  visibility: hidden;
}

.aura-splash img, .aura-splash video {
  width: min(46vw, 180px);
  height: auto;
  animation: auraSplashIn .55s ease both;
}


  
}

@keyframes auraSplashIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes auraSplashOut {
  to { opacity: 0; visibility: hidden; }
}

.aura-card {
  border: 1px solid rgba(49, 95, 97, .09);
  box-shadow: 0 16px 44px rgba(36, 73, 75, .08);
}

.aura-bottom-nav {
  width: 100%;
  max-width: var(--app-width);
  margin: 0 auto;
  left: 0;
  right: 0;
}

.aura-bottom-nav > div {
  width: 100%;
}

.aura-bottom-nav a {
  min-width: 0;
  text-align: center;
}

@media (min-width: 768px) {
  .aura-admin-shell {
    max-width: none;
    min-height: 100vh;
  }

  .aura-admin-shell .aura-force-mobile-hidden {
    display: flex !important;
  }

  .aura-admin-shell .aura-force-mobile-show,
  .aura-admin-shell .aura-bottom-nav {
    display: none !important;
  }

  .aura-admin-shell main {
    padding: 1.5rem;
  }
}

@media (max-width: 767px) {
  .aura-admin-shell main {
    padding-left: .75rem;
    padding-right: .75rem;
  }
}

.aura-footer-social {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 9999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 24px rgba(0, 0, 0, .12);
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.aura-footer-social svg {
  width: .625rem;
  height: .625rem;
}

.aura-footer-social:hover {
  color: #fff;
  background-color: rgba(215, 173, 73, .16);
  border-color: rgba(215, 173, 73, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 14px 30px rgba(0, 0, 0, .18);
  transform: translateY(-2px);
}

.aura-footer-social:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scrollbar-hide::-webkit-scrollbar {
  
}

@media (min-width: 768px) {
  .aura-desktop-as-mobile {
    max-width: var(--app-width) !important;
  }

  .aura-force-mobile-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .aura-force-mobile-stack {
    flex-direction: column !important;
  }

  .aura-force-mobile-hidden {
    display: none !important;
  }

  .aura-force-mobile-show {
    display: flex !important;
  }

  .aura-search-header,
  .aura-search-actions {
    flex-direction: column !important;
  }

  .aura-search-sort {
    width: 100% !important;
  }

  .aura-search-page {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }
}

@media (min-width: 1024px) {
  .aura-search-mobile-panel {
    display: block !important;
  }

  .aura-search-layout {
    display: block !important;
  }

  .aura-search-desktop-sidebar {
    display: none !important;
  }
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Card hover effects */
.property-card { transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease; }
.property-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(0,0,0,0.14); }

/* Image gallery */
.gallery-thumb { cursor: pointer; transition: opacity 0.2s; }
.gallery-thumb:hover { opacity: 0.8; }

/* Chat bubbles */
.msg-mine { border-radius: 18px 18px 4px 18px; }
.msg-theirs { border-radius: 18px 18px 18px 4px; }

/* Stripe element */
.StripeElement { padding: 12px; border: 1px solid #e5e7eb; border-radius: 12px; background: white; }
.StripeElement--focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(49,95,97,0.15); }
.StripeElement--invalid { border-color: #ef4444; }

/* Loading spinner */
.spinner { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Flash animations */
@keyframes slideDown { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.flash-alert { animation: slideDown 0.3s ease; }

/* Mobile bottom nav */
.bottom-nav { box-shadow: 0 -1px 0 #e5e7eb; }

/* Wishlist heart animation */
.wishlist-btn.active svg { fill: var(--color-primary); }
.wishlist-btn svg { transition: transform 0.15s ease; }
.wishlist-btn:active svg { transform: scale(1.3); }

/* Print styles */
@media print {
  .no-print { display: none !important; }
  body { font-size: 12pt; }
}

/* Responsive image */
.property-gallery img { object-fit: cover; }

/* Star rating */
.stars-filled { color: #fbbf24; }
.stars-empty { color: #d1d5db; }

/* =====================================================
   MOTION & ANIMATION SYSTEM
   ===================================================== */

/* Hero entrance animations */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-animate {
  animation: heroFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-animate-delay-1 { animation-delay: 0.18s; }
.hero-animate-delay-2 { animation-delay: 0.34s; }
.hero-animate-delay-3 { animation-delay: 0.50s; }

/* Scroll-triggered fade-up */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

/* Button press micro-interaction */
.btn-press { transition: transform 0.12s ease, box-shadow 0.12s ease; }
.btn-press:active { transform: scale(0.96); }

/* Navbar link underline slide */
nav a { position: relative; }

/* Page transition fade */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
main { animation: pageFadeIn 0.35s ease both; }