/* ════════════════════════════════════════════════════════════
   base.css — Shared site shell
   Used by both Exposé and Onepager pages.
   Contains: variables, reset, scroll-progress, preloader,
             navigation (incl. mobile), footer, reveal animations.
   Source: extracted from VillaStarnberg_Expose.html (most complete).
════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════
   VARIABLES
══════════════════════════════════════════ */
:root {
  --navy:    #102749;
  --navy-2:  #0C294E;
  --black:   #04142A;
  --gold:    #C9A36B;
  --gold-2:  #dbb87e;
  --gold-3:  #edd8ad;
  --cream:   #EDE8E3;
  --dim:     rgba(237,232,227,.55);
  --faint:   rgba(237,232,227,.18);
  --ease:    cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
}

/* ══════════════════════════════════════════
   RESET & BASE
══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;overflow-x:hidden}
body{
  background:var(--black);color:var(--cream);
  font-family:'Lato',sans-serif;font-weight:300;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:var(--black)}
a{text-decoration:none;color:inherit}

/* ══════════════════════════════════════════
   SCROLL PROGRESS
══════════════════════════════════════════ */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px; width: 0%;
  background: linear-gradient(to right, var(--gold), var(--gold-3), var(--gold));
  z-index: 9990;
  transition: width .08s linear;
  box-shadow: 0 0 10px rgba(201,163,107,.45);
  pointer-events: none;
}

/* ══════════════════════════════════════════
   PRELOADER
══════════════════════════════════════════ */
#preloader{
  position:fixed;inset:0;z-index:9998;
  background:var(--black);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  transition:opacity .9s var(--ease-out),visibility .9s;
}
#preloader.done{opacity:0;visibility:hidden;pointer-events:none}
.pl-logo-wrap{
  display:flex;align-items:center;gap:20px;
  animation:plShimmer 2s ease-in-out infinite;
}
@keyframes plShimmer{
  0%,100%{opacity:.7}
  50%{opacity:1;filter:drop-shadow(0 0 18px rgba(201,163,107,.25))}
}
.pl-logo{width:72px;height:auto;border-radius:10px;flex-shrink:0}
.pl-brand-text{display:flex;flex-direction:column;gap:4px}
.pl-brand-title{
  font-family:"Cormorant Garamond",serif;font-weight:300;
  font-size:1.55rem;letter-spacing:.06em;
  color:var(--gold);line-height:1.05;
}
.pl-brand-sub{
  font-family:"Lato",sans-serif;font-weight:300;
  font-size:.52rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(201,163,107,.42);
}
.pl-line{
  width:0;height:1px;
  background:linear-gradient(to right,transparent,var(--gold),transparent);
  animation:plLineGrow 1.8s .35s var(--ease-out) forwards;
}
@keyframes plLineGrow{to{width:220px}}


/* ══════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:800;
  display:flex;align-items:center;justify-content:space-between;
  padding:30px 56px;
  transition:padding .5s var(--ease),background .5s;
}

nav::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(to right,transparent,rgba(201,163,107,.15),transparent);
  opacity:0;transition:opacity .5s;
}
nav.scrolled{background:rgba(4,20,42,.92);backdrop-filter:blur(20px);padding:18px 56px}
nav.scrolled::after{opacity:1}
.nav-brand{
  display:flex;align-items:center;gap:14px;
  text-decoration:none;flex-shrink:0;
}
.nav-brand-logo{width:44px;height:auto;border-radius:7px;flex-shrink:0;display:block}
.nav-brand-info{display:flex;flex-direction:column;gap:3px}
.nav-brand-title{
  font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:0.92rem;letter-spacing:.04em;
  color:var(--gold);line-height:1.15;
}
.nav-brand-sub{
  font-family:'Lato',sans-serif;font-weight:300;
  font-size:0.46rem;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(201,163,107,.52);
}
.nav-center{
  position:absolute;left:50%;transform:translateX(-50%);
  display:flex;gap:48px;list-style:none;
}
.nav-center a{
  font-family:'Lato',sans-serif;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(201,163,107,.7);transition:color .3s;
  position:relative;padding-bottom:3px;
}

.nav-center a {
  text-shadow: 0 1px 8px rgba(4,20,42,.8);
}

.nav-center a::after{
  content:'';position:absolute;bottom:0;left:0;
  width:0;height:1px;background:var(--gold);
  transition:width .35s var(--ease-out);
}
.nav-center a:hover{color:var(--gold)}
.nav-center a:hover::after{width:100%}

.nav-btn{
  font-family:'Lato',sans-serif;font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;
  padding:10px 26px;
  border:1px solid var(--gold);
  background:rgba(201,163,107,.1);
  color:var(--gold);
  transition:background .4s var(--ease-out), color .4s var(--ease-out);
}
.nav-btn:hover{
  background:var(--gold);
  color:var(--black);
}
/* ══════════════════════════════════════════
   HAMBURGER + MOBILE NAV
══════════════════════════════════════════ */
.nav-burger{
  display:none;flex-direction:column;justify-content:center;
  gap:5px;background:none;border:none;cursor:pointer;padding:4px;z-index:810;
}
.nav-burger span{
  display:block;width:22px;height:1px;
  background:var(--gold);
  transition:transform .3s var(--ease),opacity .3s;
}
.nav-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.nav-mobile{
  display:none;position:fixed;top:0;left:0;right:0;
  background:rgba(4,20,42,.97);backdrop-filter:blur(20px);
  padding:90px 32px 48px;flex-direction:column;gap:0;
  z-index:799;border-bottom:1px solid rgba(201,163,107,.15);
  transform:translateY(-100%);transition:transform .45s var(--ease-out);
}
.nav-mobile.open{transform:translateY(0)}
.nav-mobile a{
  font-family:'Lato',sans-serif;font-size:.62rem;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(201,163,107,.7);
  padding:18px 0;border-bottom:1px solid rgba(201,163,107,.08);transition:color .3s;
}
.nav-mobile a:hover{color:var(--gold)}
.nav-mobile-cta{
  margin-top:24px;border:1px solid var(--gold)!important;
  color:var(--gold)!important;text-align:center;
  padding:14px 24px!important;background:rgba(201,163,107,.08);
}

@media(max-width:1100px){
  .nav-burger{display:flex}
  .nav-mobile{display:flex}
  .nav-btn,.nav-center{display:none}
}



/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
footer{
  background:var(--black);
  border-top:1px solid rgba(201,163,107,.15);
  padding:72px 56px 52px;
}
.footer-inner{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:48px;
  border-bottom:1px solid rgba(201,163,107,.08);
  padding-bottom:48px;margin-bottom:32px;
}
.footer-brand{display:flex;align-items:center;gap:16px}
.footer-brand-logo{width:56px;height:auto;border-radius:9px;flex-shrink:0;display:block}
.footer-brand-info{display:flex;flex-direction:column;gap:0}
.footer-brand-name{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:1.8rem;letter-spacing:.1em;color:var(--gold);line-height:1}
.footer-brand-name em{font-style:italic;color:var(--gold-2)}
.footer-tag{font-family:'Lato',sans-serif;font-size:.48rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(201,163,107,.45);margin-top:8px}
.footer-divider{
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.footer-divider-diamond{width:8px;height:8px;background:var(--gold);transform:rotate(45deg);opacity:.4}
.footer-divider-line{width:1px;height:48px;background:linear-gradient(to bottom,transparent,rgba(201,163,107,.3),transparent)}
.footer-links{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.footer-links a{font-family:'Lato',sans-serif;font-size:.62rem;letter-spacing:.12em;color:rgba(201,163,107,.45);transition:color .3s}
.footer-links a:hover{color:var(--gold)}
.footer-bottom{
  display:flex;justify-content:center;
}
.footer-bottom p{font-family:'Lato',sans-serif;font-size:.58rem;color:rgba(237,232,227,.2);letter-spacing:.08em;line-height:2;text-align:center}

/* ══════════════════════════════════════════
   REVEAL
══════════════════════════════════════════ */
.fade-up{opacity:0;transform:translateY(44px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.fade-up.vis{opacity:1;transform:none}
.fade-in{opacity:0;transition:opacity 1.2s var(--ease-out)}
.fade-in.vis{opacity:1}
.fade-right{opacity:0;transform:translateX(-30px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.fade-right.vis{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.22s}.d3{transition-delay:.34s}.d4{transition-delay:.46s}

@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes fadeRight{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}