/* ═══ Skin By Francaise — 2026 Refresh: intro, motion, quiz, pills, compare ═══ */

/* ─── PAGE TRANSITION VEIL ─── */
#sbf-veil{position:fixed;inset:0;z-index:9998;background:#0a0a0a;opacity:0;pointer-events:none;transition:opacity .35s ease}
#sbf-veil.on{opacity:1;pointer-events:all}

/* ─── HERO KEN BURNS ─── */
.hero-bg img{animation:sbfKenBurns 16s ease-out forwards}
@keyframes sbfKenBurns{from{transform:scale(1.12)}to{transform:scale(1)}}

/* ─── REVEAL TUNING (fix dead black gaps) ─── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ─── FLOATING PILLS ─── */
.sbf-pills{position:fixed;right:22px;bottom:22px;z-index:900;display:flex;flex-direction:column;gap:10px;align-items:flex-end;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .5s ease,transform .5s ease}
.sbf-pills.show{opacity:1;transform:translateY(0);pointer-events:all}
.sbf-pill{font-family:'Montserrat',sans-serif;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;padding:13px 26px;border-radius:40px;cursor:pointer;text-decoration:none;text-align:center;transition:transform .3s,background .3s,color .3s}
.sbf-pill:hover{transform:translateY(-2px)}
.sbf-pill-book{background:#c9a96e;color:#0a0a0a;border:1px solid #c9a96e}
.sbf-pill-book:hover{background:#dfc8a2;color:#0a0a0a}
.sbf-pill-quiz{background:rgba(10,10,10,.85);color:#c9a96e;border:1px solid rgba(201,169,110,.5);backdrop-filter:blur(8px)}
.sbf-pill-quiz:hover{color:#dfc8a2}

/* ─── SKIN QUIZ MODAL ─── */
#sbf-quiz{position:fixed;inset:0;z-index:9500;background:rgba(10,10,10,.92);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;padding:5vw}
#sbf-quiz.open{display:flex}
.sbf-quiz-box{background:#1a1a1a;border:1px solid rgba(201,169,110,.3);max-width:560px;width:100%;padding:48px 40px;position:relative;max-height:88vh;overflow-y:auto}
.sbf-quiz-close{position:absolute;top:14px;right:18px;background:none;border:none;color:#c9a96e;font-size:1.5rem;cursor:pointer;line-height:1}
.sbf-quiz-box .sbf-q-label{font-family:'Montserrat',sans-serif;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:#a8854a;margin-bottom:10px}
.sbf-quiz-box h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:1.6rem;color:#f5f0e8;margin-bottom:26px;line-height:1.3}
.sbf-quiz-opts{display:flex;flex-direction:column;gap:10px}
.sbf-quiz-opts button{font-family:'Montserrat',sans-serif;font-size:.8rem;letter-spacing:.05em;text-align:left;padding:15px 20px;background:transparent;border:1px solid rgba(201,169,110,.25);color:#d4cfc7;cursor:pointer;transition:border-color .3s,background .3s,color .3s}
.sbf-quiz-opts button:hover{border-color:#c9a96e;background:rgba(201,169,110,.08);color:#f5f0e8}
.sbf-quiz-progress{display:flex;gap:6px;margin-bottom:28px}
.sbf-quiz-progress span{height:2px;flex:1;background:rgba(201,169,110,.18)}
.sbf-quiz-progress span.done{background:#c9a96e}
.sbf-quiz-result p{color:#d4cfc7;font-size:.88rem;line-height:1.8;margin-bottom:14px}
.sbf-quiz-result .sbf-rec{font-family:'Cormorant Garamond',serif;font-size:1.35rem;color:#c9a96e;margin-bottom:16px}
.sbf-quiz-result a.sbf-pill{display:inline-block;margin:6px 8px 0 0}

@media(max-width:600px){
  .sbf-pills{right:14px;bottom:14px}
  .sbf-pill{padding:11px 20px;font-size:.62rem}
  .sbf-quiz-box{padding:36px 24px}
}
@media(prefers-reduced-motion:reduce){
  .hero-bg img{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
}