/* ══════════════════════════════════════════════════════════
   UX Enhancements — Andrej Avi Real Estate
   Shared across all pages. Non-destructive layer.
   ══════════════════════════════════════════════════════════ */

/* ── 0. Skip to content ── */
.skip-link {
  position: fixed;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: var(--color-accent, #C9A96E);
  color: var(--color-primary, #0d1b2a);
  font-family: 'Geist Mono', monospace;
  font-size: .75rem;
  letter-spacing: .1em;
  padding: 10px 24px;
  transition: top .3s ease;
}
.skip-link:focus {
  top: 12px;
}

/* ── 0a. Footer social icons visibility ── */
footer a[aria-label="Instagram"],
footer a[aria-label="LinkedIn"] {
  border-color: rgba(245,242,238,.2) !important;
  color: rgba(245,242,238,.45) !important;
}
footer a[aria-label="Instagram"]:hover,
footer a[aria-label="LinkedIn"]:hover {
  border-color: var(--color-accent, #C9A96E) !important;
  color: var(--color-accent, #C9A96E) !important;
}

/* ── 0b. Design Tokens ── */
:root {
  /* Primärfarben */
  --color-perla: #F5F2EE;
  --color-notte: #0F0F0F;
  --color-midnight: #1A2844;
  --color-anthrazit: #3D3D3D;
  --color-stabile: #C4C0B8;
  --color-primary: #0d1b2a;
  --color-primary-mid: #1A2844;

  /* Akzent — warmer Messing-Ton */
  --color-accent: #C9A96E;
  --color-accent-light: #D4BA8A;
  --color-accent-muted: rgba(201,169,110,0.15);

  /* Schatten */
  --shadow-sm: 0 2px 8px rgba(13,27,42,0.04);
  --shadow-md: 0 8px 28px rgba(13,27,42,0.08);
  --shadow-lg: 0 16px 48px rgba(13,27,42,0.12);

  /* Motion */
  --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.25s;
  --duration-normal: 0.45s;
  --duration-slow: 0.7s;

  /* Spacing (8px Grid) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-section: clamp(80px, 10vw, 160px);
}

/* ── 0b. Typography Fine-Tuning ── */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 1. cursor:pointer on all interactive elements ── */
a,
button,
select,
[onclick],
[role="button"],
.btn-perla,
.btn-midnight,
.btn-outline,
.btn-outline-light,
.nav-link,
.nav-cta,
.mob-link,
.lang-btn,
.hamburger,
.fab,
.filter-btn,
.prop-card,
summary {
  cursor: pointer;
}

/* ── 2. Hover transitions (safety net for elements missing transition) ── */
a,
button,
.nav-link,
.nav-cta,
.mob-link,
.fab {
  transition-property: color, background-color, border-color, opacity, transform, box-shadow;
  transition-duration: 0.25s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Don't override elements that already define specific transitions */
.btn-perla,
.btn-midnight,
.btn-outline,
.btn-outline-light,
.reveal,
.hero-bg,
#navbar {
  /* these already have hand-tuned transitions — leave as-is */
}

/* ── 3. Focus-visible states for keyboard navigation ── */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid #1A2844;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Light backgrounds: dark outline */
.btn-perla:focus-visible,
.btn-outline:focus-visible,
.filter-btn:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline-color: #1A2844;
}

/* Dark backgrounds: light outline */
.btn-midnight:focus-visible,
.btn-outline-light:focus-visible,
.nav-link:focus-visible,
.nav-cta:focus-visible,
.lang-btn:focus-visible,
.hamburger:focus-visible,
.mob-link:focus-visible,
.fab:focus-visible,
.btn-perla:focus-visible {
  outline-color: #F5F2EE;
}

/* On perla bg */
.btn-perla:focus-visible {
  outline-color: #1A2844;
}

/* ── 4. FAB pulse animation (WhatsApp button) ── */
.fab {
  animation: fabp 3s ease-in-out 3s 1;
}
@keyframes fabp {
  0%   { box-shadow: 0 4px 18px rgba(37,211,102,.35); }
  50%  { box-shadow: 0 4px 18px rgba(37,211,102,.35), 0 0 0 16px rgba(37,211,102,.08); }
  100% { box-shadow: 0 4px 18px rgba(37,211,102,.35); }
}

/* ── 5. Detail polish ── */
::selection {
  background: #C9A96E;
  color: #0d1b2a;
}
::-moz-selection {
  background: #C9A96E;
  color: #0d1b2a;
}
html {
  scroll-padding-top: 80px;
  scrollbar-width: thin;
  scrollbar-color: #C9A96E #0d1b2a;
}
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #0d1b2a; }
::-webkit-scrollbar-thumb { background: #C9A96E; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #D4BA8A; }

/* ── 6. Hero enhancements ── */

/* Deeper hero background */
#hero {
  background: var(--color-primary, #0d1b2a) !important;
}

/* Subtle radial gradient for depth */
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 45%, rgba(26,40,68,.5) 0%, rgba(13,27,42,0) 70%),
    radial-gradient(ellipse 50% 50% at 80% 20%, rgba(201,169,110,.03) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}

/* Ensure content above pseudo-elements */
.hero-content, .h-scroll { position: relative; z-index: 10 !important; }

/* Gold accent lines beside eyebrow */
.h-eyebrow {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.h-eyebrow::before,
.h-eyebrow::after {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--color-accent, #C9A96E);
  opacity: 0.4;
}

/* ── 7. Preloader ── */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-primary, #0d1b2a);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  transition: opacity .6s var(--ease-luxury), visibility .6s;
}
.preloader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader-wordmark {
  font-family: 'Geist Mono', monospace;
  font-size: .85rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--color-perla, #F5F2EE);
  opacity: 0;
  transform: translateY(8px);
  animation: preloaderFadeIn .7s var(--ease-luxury) .1s forwards;
}
.preloader-line {
  width: 0;
  height: 1px;
  background: var(--color-accent, #C9A96E);
  animation: preloaderLineGrow 1s var(--ease-luxury) .3s forwards;
}
@keyframes preloaderFadeIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes preloaderLineGrow {
  to { width: 48px; }
}

/* ── 8. Hero grain texture for depth ── */
#hero::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  pointer-events: none;
  z-index: 1;
}

/* ── 6. Typography & Spacing polish ── */
.eyebrow, .eyebrow-light {
  font-size: 0.82rem;
}
.rule, .rule-light {
  width: 32px;
  transition: width .6s cubic-bezier(.22,1,.36,1);
}
.reveal.visible .rule,
.reveal.visible .rule-light {
  width: 32px;
}

/* ── 6. Micro-interactions ── */

/* Glassmorphism nav on scroll */
#navbar {
  transition: background .5s var(--ease-luxury), backdrop-filter .5s, -webkit-backdrop-filter .5s, height .35s var(--ease-luxury), box-shadow .35s !important;
}
#navbar.scrolled {
  background: rgba(26,40,68,.82) !important;
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 1px 30px rgba(0,0,0,.15);
}

/* Active nav link */
.nav-link[aria-current="page"] {
  color: #F5F2EE !important;
}
.nav-link[aria-current="page"]::after {
  width: 100% !important;
  opacity: .4;
}

/* Nav link underline: smoother, thinner */
.nav-link::after {
  height: 1px;
  transition: width .4s cubic-bezier(.22,1,.36,1);
}

/* Buttons: slide-fill animation */
.btn-perla,
.btn-midnight,
.btn-outline-light {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.btn-perla::before,
.btn-midnight::before,
.btn-outline-light::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  transition: left var(--duration-normal) var(--ease-luxury);
  z-index: -1;
}
.btn-perla::before { background: var(--color-midnight); }
.btn-midnight::before { background: var(--color-perla); }
.btn-outline-light::before { background: var(--color-perla); }

.btn-perla:hover::before,
.btn-midnight:hover::before,
.btn-outline-light:hover::before {
  left: 0;
}
.btn-perla:hover { color: var(--color-perla); transform: translateY(-2px); }
.btn-midnight:hover { color: var(--color-midnight); transform: translateY(-2px); }
.btn-outline-light:hover { color: var(--color-midnight); transform: translateY(-2px); }

.btn-outline:hover {
  transform: translateY(-2px);
}

/* Service blocks: refined hover */
.svc {
  position: relative;
}
.svc::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(26,40,68,.04);
  border-radius: 4px;
  opacity: 0;
  transition: opacity .4s var(--ease-luxury);
  pointer-events: none;
}
.svc:hover::before { opacity: 1; }
.svc:hover { transform: translateX(8px) !important; }
.svc-icon { transition: transform .4s var(--ease-luxury); }
.svc:hover .svc-icon { transform: scale(1.15) rotate(-5deg); }
.svc:hover .svc-arrow { transform: translateX(6px); }

/* Cards: premium lift on hover */
.prop-card {
  transition: transform var(--duration-normal) var(--ease-luxury), box-shadow var(--duration-normal) var(--ease-luxury);
}
.prop-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
}
.prop-card:hover .prop-img img {
  transform: scale(1.06);
}
.feat-card:hover .feat-img img {
  transform: scale(1.05);
}

/* Region cards: enhanced zoom */
.region:hover img {
  transform: scale(1.08) !important;
}
.region:hover .region-overlay {
  background: rgba(26,40,68,.5) !important;
}

/* Blog cards: enhanced lift */
.blog-card:hover {
  transform: translateY(-6px) !important;
}
.blog-card:hover .blog-img img {
  transform: scale(1.05) !important;
}

/* FAQ items: smooth expand */
.faq-a {
  transition: max-height .5s cubic-bezier(.22,1,.36,1);
}
.faq-icon {
  transition: transform .4s cubic-bezier(.22,1,.36,1), background .3s, color .3s;
}

/* Stat numbers: subtle scale on reveal */
.stat-num {
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.reveal.visible .stat-num {
  transform: scale(1);
}

/* Footer links: smoother hover */
.foot-link {
  transition: color .3s cubic-bezier(.22,1,.36,1);
}

/* ── 7. Mobile readability boost ── */
@media (max-width: 640px) {
  /* === Tiny text (.62-.65rem) — boost significantly === */
  div[style*="font-size:.62rem"],
  div[style*="font-size:.65rem"],
  span[style*="font-size:.65rem"],
  span[style*="font-size:.62rem"],
  .detail-label {
    font-size: .78rem !important;
  }

  /* === Small labels (.7rem) — form labels, footer bottom links === */
  .form-label, .field-label,
  div[style*="font-size:.7rem"],
  span[style*="font-size:.7rem"],
  a[style*="font-size:.7rem"] {
    font-size: .85rem !important;
  }

  /* === Small text (.72-.78rem) — stat labels, nav-size text, footer links === */
  .stat-lbl,
  .foot-link,
  div[style*="font-size:.72rem"],
  div[style*="font-size:.75rem"],
  div[style*="font-size:.76rem"],
  div[style*="font-size:.78rem"],
  a[style*="font-size:.78rem"],
  p[style*="font-size:.76rem"] {
    font-size: .88rem !important;
  }

  /* === Card titles (Italiana) === */
  div[style*="font-family:'Italiana'"][style*="font-size:1.1rem"],
  div[style*="font-family:'Italiana'"][style*="font-size:1.15rem"],
  div[style*="font-family:'Italiana'"][style*="font-size:1.2rem"],
  div[style*="font-family:'Italiana'"][style*="font-size:1.3rem"] {
    font-size: 1.4rem !important;
  }

  /* === Card/section descriptions (.8-.84rem) === */
  p[style*="font-size:.8rem"],
  p[style*="font-size:.82rem"],
  p[style*="font-size:.84rem"] {
    font-size: .94rem !important;
    line-height: 1.82 !important;
  }

  /* === Section body text (.875-.95rem) === */
  p[style*="font-size:.875rem"],
  p[style*="font-size:.9rem"],
  p[style*="font-size:.95rem"] {
    font-size: 1rem !important;
    line-height: 1.82 !important;
  }

  /* === Eyebrow labels === */
  .eyebrow, .eyebrow-light {
    font-size: .88rem !important;
    letter-spacing: .18em !important;
  }

  /* === Reduce excessive letter-spacing on small screens === */
  .stat-lbl,
  .detail-label,
  div[style*="letter-spacing:.22em"],
  div[style*="letter-spacing:.24em"] {
    letter-spacing: .14em !important;
  }

  /* === Property detail values === */
  .detail-value {
    font-size: .92rem !important;
  }

  /* === Footer bottom row === */
  div[style*="font-size:.72rem"][style*="letter-spacing"] {
    font-size: .82rem !important;
  }
}

/* ── 8. prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  /* Disable scroll-reveal animation */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Disable hero entrance animations */
  .h-eyebrow,
  .h-heading,
  .h-sub,
  .h-cta,
  .h-rule,
  .h-scroll {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* Disable hero background zoom */
  .hero-bg,
  .hero-bg.loaded {
    transform: none !important;
    transition: none !important;
  }

  /* Reduce all transitions to near-instant */
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  /* Keep scroll behavior instant */
  html {
    scroll-behavior: auto !important;
  }
}