/* =========================================================
   Perla Lichi Design — Shared design system
   Brand palette: espresso #1A1512 · champagne #C2A36B ·
   brass #B8935E · ivory #F8F4ED · taupe #E7DECF
   ========================================================= */

:root{
  --espresso:#1A1512; --espresso-soft:#2A2320; --espresso-deep:#120E0C;
  --champagne:#C2A36B; --brass:#B8935E; --brass-deep:#9A7842;
  --ivory:#F8F4ED; --taupe:#E7DECF; --taupe-deep:#D8CBB4;
  --ease:cubic-bezier(0.16,1,0.3,1);
}

*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; }
body{ margin:0; background:var(--ivory); color:var(--espresso); overflow-x:hidden;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif; font-feature-settings:"liga" 1,"calt" 1; }

.font-serif{ font-family:"Cormorant Garamond",Georgia,serif; }

::selection{ background:var(--champagne); color:var(--espresso); }
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:#F0E9DC; }
::-webkit-scrollbar-thumb{ background:var(--champagne); border-radius:99px; }

/* Lenis */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease),transform 1s var(--ease); will-change:transform,opacity; }
.reveal.in{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.1s; } .reveal-d2{ transition-delay:.2s; } .reveal-d3{ transition-delay:.3s; } .reveal-d4{ transition-delay:.4s; }
.line-grow{ transform:scaleX(0); transform-origin:left; transition:transform 1.3s var(--ease); }
.line-grow.in{ transform:scaleX(1); }

/* ---------- Ambient orbs ---------- */
.orb{ position:absolute; border-radius:9999px; filter:blur(70px); pointer-events:none; will-change:transform; z-index:0; }
@keyframes drift1{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(40px,-30px) scale(1.12);} }
@keyframes drift2{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-50px,40px) scale(1.08);} }
.orb-a{ animation:drift1 16s ease-in-out infinite; }
.orb-b{ animation:drift2 20s ease-in-out infinite; }

/* ---------- Glass ---------- */
.glass{ background:rgba(248,244,237,.7); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); }
.glass-dark{ background:rgba(26,21,18,.6); backdrop-filter:blur(14px) saturate(130%); -webkit-backdrop-filter:blur(14px) saturate(130%); }

/* ---------- Shimmer text ---------- */
.shimmer{
  background:linear-gradient(100deg,#B8935E,#E8D2A6 30%,#C2A36B 50%,#E8D2A6 70%,#B8935E);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; animation:shimmerMove 6s linear infinite;
}
@keyframes shimmerMove{ to{ background-position:200% center; } }

/* ---------- Buttons ---------- */
.btn{ position:relative; overflow:hidden; isolation:isolate; display:inline-flex; align-items:center; gap:.75rem;
  padding:1rem 2rem; border-radius:9999px; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; text-decoration:none; cursor:pointer; transition:color .5s var(--ease),transform .4s var(--ease); }
.btn svg{ transition:transform .4s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn::before{ content:""; position:absolute; inset:0; transform:translateY(100%); transition:transform .55s var(--ease); z-index:-1; }
.btn:hover::before{ transform:translateY(0); }
.btn-dark{ background:var(--espresso); color:var(--ivory); }
.btn-dark::before{ background:linear-gradient(120deg,var(--brass-deep),var(--champagne) 50%,var(--brass-deep)); }
.btn-dark:hover{ color:var(--espresso); }
.btn-gold{ background:var(--champagne); color:var(--espresso); }
.btn-gold::before{ background:var(--espresso); }
.btn-gold:hover{ color:var(--ivory); }
.btn-outline{ border:1px solid rgba(26,21,18,.25); color:var(--espresso); }
.btn-outline::before{ background:var(--espresso); }
.btn-outline:hover{ color:var(--ivory); }
.btn-outline-light{ border:1px solid rgba(248,244,237,.35); color:var(--ivory); }
.btn-outline-light::before{ background:var(--champagne); }
.btn-outline-light:hover{ color:var(--espresso); }

/* ---------- Image zoom ---------- */
.img-zoom{ overflow:hidden; }
.img-zoom img{ transition:transform 1.2s var(--ease); will-change:transform; }
.img-zoom:hover img{ transform:scale(1.06); }

/* ---------- Eyebrow ---------- */
.eyebrow{ letter-spacing:.34em; text-transform:uppercase; font-size:.7rem; font-weight:600; }

/* ---------- Header ---------- */
.site-header{ position:fixed; top:0; left:0; right:0; z-index:50; }
.nav-bar{ transition:all .5s var(--ease); border-bottom:1px solid rgba(184,147,94,.2); }
#navInner{ padding-top:.85rem; padding-bottom:.85rem; transition:padding .5s var(--ease); }
.navlogo{ height:64px; transition:height .5s var(--ease); }
@media (min-width:1024px){ .navlogo{ height:76px; } }
.nav-bar.scrolled #navInner{ padding-top:.45rem; padding-bottom:.45rem; }
.nav-bar.scrolled .navlogo{ height:52px; }
@media (min-width:1024px){ .nav-bar.scrolled .navlogo{ height:58px; } }
.nav-link{ position:relative; }
.nav-link::after{ content:""; position:absolute; left:0; bottom:-4px; height:1px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease); }
.nav-link:hover::after,.nav-link[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }
.nav-link[aria-current="page"]{ color:var(--brass-deep); }
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown{ opacity:0; visibility:hidden; transform:translateY(10px); transition:all .35s var(--ease); }

/* ---------- Custom cursor ---------- */
#cursor{ position:fixed; top:0; left:0; width:9px; height:9px; border-radius:99px; background:var(--champagne);
  pointer-events:none; z-index:90; transform:translate(-50%,-50%); mix-blend-mode:difference;
  transition:width .25s,height .25s,background .25s,opacity .25s; }
#cursor.grow{ width:46px; height:46px; background:rgba(194,163,107,.35); }
@media (hover:none){ #cursor{ display:none; } }

/* ---------- Scroll progress ---------- */
#scrollbar{ position:fixed; top:0; left:0; height:3px; width:0; z-index:60;
  background:linear-gradient(90deg,var(--brass-deep),var(--champagne),#E8D2A6); }

/* ---------- Preloader ---------- */
#preloader{ position:fixed; inset:0; z-index:100; background:var(--espresso); display:grid; place-items:center;
  transition:opacity .8s ease,visibility .8s ease; }
#preloader.done{ opacity:0; visibility:hidden; }
.pl-logo{ width:200px; max-width:56vw; opacity:0; transform:translateY(14px);
  animation:plLogo 1.1s var(--ease) .25s forwards; filter:brightness(0) invert(1); }
@keyframes plLogo{ to{ opacity:1; transform:none; } }
.pl-line{ height:1px; width:0; margin:22px auto 0; background:linear-gradient(90deg,transparent,var(--champagne),transparent);
  animation:plLine 1.6s var(--ease) .5s forwards; }
@keyframes plLine{ to{ width:230px; } }
.pl-sub{ margin-top:16px; color:var(--champagne); letter-spacing:.42em; font-size:11px; text-transform:uppercase;
  opacity:0; animation:plSub .9s ease 1.1s forwards; }
@keyframes plSub{ to{ opacity:.85; } }

/* ---------- Page transition overlay ---------- */
#page-veil{ position:fixed; inset:0; z-index:95; background:var(--espresso); transform:scaleY(0); transform-origin:bottom;
  pointer-events:none; transition:transform .5s var(--ease); }
#page-veil.cover{ transform:scaleY(1); transform-origin:bottom; }
#page-veil.reveal-out{ transform:scaleY(0); transform-origin:top; }
body.page-enter main,body.page-enter .site-footer{ opacity:0; }
body.page-enter-active main,body.page-enter-active .site-footer{ opacity:1; transition:opacity .7s ease .15s; }

/* ---------- Marquee ---------- */
@keyframes marquee{ from{ transform:translate3d(0,0,0);} to{ transform:translate3d(-50%,0,0);} }
.marquee-track{ display:inline-flex; flex-wrap:nowrap; width:max-content; will-change:transform;
  animation:marquee 32s linear infinite; white-space:nowrap; }

/* ---------- Section helpers ---------- */
.section{ position:relative; }
.wrap{ max-width:80rem; margin:0 auto; padding-left:1.25rem; padding-right:1.25rem; }
@media(min-width:1024px){ .wrap{ padding-left:2rem; padding-right:2rem; } }

/* ---------- Cards ---------- */
.card{ transition:transform .5s var(--ease),box-shadow .5s var(--ease); }
.card:hover{ transform:translateY(-8px); }

/* ---------- Forms ---------- */
.field{ width:100%; background:transparent; border:0; border-bottom:1px solid rgba(26,21,18,.25);
  padding:.85rem 0; font-size:1rem; color:var(--espresso); transition:border-color .4s; font-family:inherit; }
.field:focus{ outline:none; border-color:var(--brass-deep); }
.field::placeholder{ color:rgba(26,21,18,.4); }
select.field{ appearance:none; }

/* ---------- Focus visibility / motion ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--brass-deep); outline-offset:3px; border-radius:2px; }

@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto !important; }
  .reveal,.line-grow{ transition:none !important; opacity:1 !important; transform:none !important; }
  .orb-a,.orb-b,.shimmer,.marquee-track{ animation:none !important; }
  .pl-logo,.pl-line,.pl-sub{ animation:none !important; opacity:1 !important; transform:none !important; width:230px; }
  #page-veil{ display:none; }
}