/* ============================================================
   VELOUR — Premium layer (transitions · luxe details)
   ============================================================ */

/* ---------- PAGE TRANSITION (Plum curtain + Logo + Single Gold Loader) ---------- */
.page-transition{
  position:fixed; inset:0; z-index:9998;
  background:linear-gradient(135deg,#2A1220 0%,#6E2639 50%,#3B1A2B 100%);
  transform:translateY(-100%); pointer-events:none;
  transition:transform .6s cubic-bezier(.7,0,.2,1);
  will-change:transform;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.page-transition.is-in{ transform:translateY(0); pointer-events:all; }
.page-transition__mark{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--serif); font-weight:500; color:var(--gold-soft);
  font-size:clamp(2.4rem,7vw,4.2rem); letter-spacing:.18em; line-height:1;
  text-transform:uppercase;
  position:relative; z-index:1;
  opacity:0; transform:translateY(12px);
  transition:opacity .5s ease .15s, transform .5s ease .15s;
}
.page-transition__mark::after{
  content:"Nail \00B7 Lash \00B7 Brow";
  font-family:'Parisienne',cursive; font-weight:400; color:#F5EDE3;
  letter-spacing:.04em; font-size:clamp(.95rem,2.6vw,1.4rem); margin-top:2px;
  text-transform:none;
}
.page-transition.is-in .page-transition__mark{ opacity:1; transform:none; }

/* Single clean gold sliding bar (no dark track) */
.page-transition::after{
  content:""; width:120px; height:2px; margin-top:20px;
  background:linear-gradient(90deg,transparent,var(--gold-soft),transparent);
  position:relative; overflow:hidden;
  opacity:0; transition:opacity .4s ease .15s;
  background-size:60% 100%;
  background-repeat:no-repeat;
  background-position:-60% 0;
  animation:pt-bar-sweep 1s ease-in-out infinite;
}
.page-transition.is-in::after{ opacity:1; }
@keyframes pt-bar-sweep{
  0%{ background-position:-60% 0 }
  100%{ background-position:160% 0 }
}

/* ---------- SCROLL PROGRESS ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:1200;
  background:linear-gradient(90deg,var(--gold-soft),var(--gold),var(--rose-deep));
  box-shadow:0 0 10px rgba(201,163,107,.5);
  transition:width .12s linear;
}

/* ---------- BACK TO TOP ---------- */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:1100;
  width:46px; height:46px; border-radius:50%;
  background:var(--plum); color:var(--gold-soft);
  display:grid; place-items:center; font-size:1.2rem;
  border:1px solid rgba(201,163,107,.45);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .45s var(--ease), transform .45s var(--ease), background .45s var(--ease), color .45s var(--ease);
}
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background:var(--gold); color:var(--plum); }

/* ---------- HERO LAUNCH (slow, staggered — matched to freebuff) ---------- */
.js-ready .hero{ opacity:0; transform:scale(1.015); transition:opacity 1.2s var(--ease), transform 1.4s var(--ease); }
body.is-loaded .hero{ opacity:1; transform:none; }

@keyframes velourHeroUp{
  from{ opacity:0; transform:translateY(40px); }
  to  { opacity:1; transform:translateY(0); }
}

/* stage the headline, subline and CTAs so they drift up slowly,
   beginning as the film preloader dissolves. Timed to match freebuff. */
.js-ready .hero__inner > .reveal{ opacity:0; }
body.is-loaded .hero__inner > .reveal{
  animation: velourHeroUp 1s ease-out both;
}
body.is-loaded .hero__inner > .reveal:nth-child(1){ animation-delay:.40s; }
body.is-loaded .hero__inner > .reveal:nth-child(2){ animation-delay:.70s; }
body.is-loaded .hero__inner > .reveal:nth-child(3){ animation-delay:.95s; }
body.is-loaded .hero__inner > .reveal:nth-child(4){ animation-delay:1.15s; }

@media (prefers-reduced-motion:reduce){
  .js-ready .hero{ opacity:1!important; transform:none!important; transition:none!important; }
  .js-ready .hero__inner > .reveal{ opacity:1!important; animation:none!important; }
  .preloader{ transition:none; }
}

/* ---------- PREMIUM FOOTER CREDIT ---------- */
.footer__credit{
  width:100%; text-align:center; margin-top:24px; padding-top:22px;
  border-top:1px solid rgba(201,163,107,.12);
  font-family:var(--sans); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(251,246,240,.35);
  display:flex; align-items:center; justify-content:center; gap:14px;
}
.footer__credit a{ color:var(--gold-soft); text-decoration:none; transition:color .35s var(--ease); }
.footer__credit a:hover{ color:var(--gold); }

@media (prefers-reduced-motion:reduce){
  .preloader::after{ animation:none; }
  .preloader__bar::after{ animation:none; }
}