/* =========================================================
   COMPONENTS — shared UI pieces used across sections
   glass, loader, scroll progress, cursor, nav, buttons
   ========================================================= */

/* ---------- Glass ---------- */
.glass{
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.65);
  box-shadow:0 8px 32px rgba(90,64,102,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
}
.glass-deep{
  background:rgba(56,37,63,0.85);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.08);
}

/* ---------- Loader ---------- */
#loader{
  position:fixed; inset:0; z-index:9999;
  background:var(--cream);
  display:flex; align-items:center; justify-content:center;
  transition:opacity 0.8s ease, visibility 0.8s ease;
}
#loader.hidden{opacity:0; visibility:hidden; pointer-events:none;}
.loader-inner{text-align:center;}
.loader-mark{
  font-family:var(--font-display); font-style:italic; font-size:2.4rem; color:var(--plum);
  position:relative; display:inline-block;
}
.loader-bar{
  width:180px; height:2px; background:rgba(56,37,63,0.12); margin:1.4rem auto 0; overflow:hidden; border-radius:2px;
}
.loader-bar span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--lavender-deep),var(--gold));
  animation:loadbar 1.6s ease-in-out forwards;
}
@keyframes loadbar{0%{width:0%;}100%{width:100%;}}

/* ---------- Scroll progress ---------- */
#scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--lavender-deep),var(--gold));
  z-index:9000; transition:width 0.1s ease-out;
}

/* ---------- Custom cursor ---------- */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:8500;
  border-radius:50%; transform:translate(-50%,-50%);
}
.cursor-dot{width:6px; height:6px; background:var(--plum);}
.cursor-ring{width:34px; height:34px; border:1px solid var(--lavender-deep); transition:width 0.25s,height 0.25s,border-color 0.25s,background 0.25s;}
.cursor-ring.active{width:56px; height:56px; background:rgba(198,182,232,0.18); border-color:var(--gold);}
@media (hover:none), (pointer:coarse){.cursor-dot,.cursor-ring{display:none;}}

/* ---------- Navigation ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  padding:1.1rem 1.5rem;
  transition:padding 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}
nav.scrolled{
  padding:0.65rem 1.5rem;
  background:rgba(251,247,243,0.75);
  backdrop-filter:blur(16px);
  box-shadow:0 4px 24px rgba(90,64,102,0.06);
  border-bottom:1px solid rgba(56,37,63,0.06);
}
.nav-inner{max-width:1240px; margin:0 auto; display:flex; align-items:center; justify-content:space-between;}
.nav-logo{font-family:var(--font-display); font-style:italic; font-size:1.3rem; color:var(--plum);}
.nav-logo span{color:var(--lavender-deep);}
.nav-links{display:flex; gap:2.1rem; list-style:none;}
.nav-links a{
  font-size:0.82rem; font-weight:600; letter-spacing:0.03em; color:var(--plum-soft);
  position:relative; padding:0.3rem 0; transition:color 0.3s;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:1.5px;
  background:linear-gradient(90deg,var(--lavender-deep),var(--gold)); transition:width 0.35s ease;
}
.nav-links a:hover, .nav-links a.active{color:var(--plum);}
.nav-links a:hover::after, .nav-links a.active::after{width:100%;}
.nav-cta{
  font-family:var(--font-mono); font-size:0.72rem; font-weight:500; letter-spacing:0.05em;
  padding:0.55rem 1.2rem; border-radius:100px; border:1px solid var(--plum);
  transition:all 0.35s ease;
}
.nav-cta:hover{background:var(--plum); color:var(--cream);}
.nav-toggle{display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:950;}
.nav-toggle span{width:24px; height:2px; background:var(--plum); transition:0.3s;}
@media (max-width:860px){
  .nav-links{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px);
    background:rgba(251,247,243,0.98); backdrop-filter:blur(20px);
    flex-direction:column; justify-content:center; align-items:flex-start; padding:2rem 2.5rem;
    transform:translateX(100%); transition:transform 0.45s cubic-bezier(.65,0,.35,1);
    box-shadow:-8px 0 40px rgba(90,64,102,0.12);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{font-size:1.05rem;}
  .nav-cta{display:none;}
  .nav-toggle{display:flex;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:0.55rem;
  font-family:var(--font-mono); font-size:0.78rem; font-weight:500; letter-spacing:0.04em;
  padding:0.9rem 1.7rem; border-radius:100px; cursor:pointer; border:1px solid transparent;
  transition:transform 0.35s cubic-bezier(.34,1.56,.64,1), box-shadow 0.35s ease, background 0.35s ease, color 0.35s ease, border-color .35s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--plum); color:var(--cream); box-shadow:0 10px 30px rgba(56,37,63,0.25);}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 16px 36px rgba(56,37,63,0.32);}
.btn-outline{border-color:var(--plum); color:var(--plum);}
.btn-outline:hover{background:var(--plum); color:var(--cream); transform:translateY(-3px);}
.btn-ghost{border-color:rgba(56,37,63,0.25); color:var(--plum-soft);}
.btn-ghost:hover{border-color:var(--plum); color:var(--plum); transform:translateY(-3px);}
.btn-sm{padding:0.6rem 1.2rem; font-size:0.7rem;}