/* Shir Beauty — design tokens (option B · Blush, font set 01) */
:root {
  --white: #ffffff;
  --blush-50: #fbf5f4;
  --blush-100: #fbf3f2;
  --blush-200: #f6e3e2;
  --blush-300: #efd3d4;
  --rose-400: #c98b90;
  --rose-500: #c07c84;
  --rose-700: #8e4a57;
  --rose-800: #6e3442;
  --ink: #2a1f22;
  --muted: #6a585d;
  --line: #f0dedf;
  --ok: #1f7a4a;
  --wa: #25d366;

  --f-display: 'Bellefair', 'Frank Ruhl Libre', serif;
  --f-body: 'Assistant', system-ui, sans-serif;
  --f-script: 'Pinyon Script', cursive;
  --f-caps: 'Italiana', serif;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  --radius: 18px;
  --shadow: 0 30px 60px -32px rgba(142, 74, 87, .45);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-body); color: var(--ink); background: var(--white); line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: var(--rose-700); text-decoration: none; }
a:hover { color: var(--rose-800); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--rose-700); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.script { font-family: var(--f-script); color: var(--rose-500); font-weight: 400; }
.display { font-family: var(--f-display); font-weight: 400; }

.logo { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; color: var(--ink); }
.logo__script { font-family: var(--f-script); font-size: 46px; color: var(--rose-700); }
.logo__caps { font-family: var(--f-caps); font-size: 13px; letter-spacing: .5em; margin-top: -4px; padding-inline-start: .5em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 999px; padding: 17px 34px; font-weight: 700; font-size: 15px;
  background: var(--rose-700); color: #fff; box-shadow: 0 16px 30px -14px rgba(142, 74, 87, .7);
  transition: transform .35s var(--ease), box-shadow .35s, background .35s, opacity .3s;
}
.btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 20px 34px -14px rgba(142, 74, 87, .8); }
.btn:disabled { opacity: .4; transform: none; box-shadow: none; }
.btn--ghost { background: #fff; color: var(--rose-700); border: 1px solid #ebcbcc; box-shadow: none; }
.btn--ghost:hover { background: var(--rose-700); color: #fff; }
.btn--soft { background: var(--blush-200); color: var(--rose-800); box-shadow: none; padding: 13px 26px; font-size: 14px; }
.btn--soft:hover { background: var(--rose-700); color: #fff; }
.btn--block { width: 100%; }

/* page-ready choreography: intro animations wait until fonts are in,
   then everything starts together (an inline script in <head> releases it after 2.5s regardless) */
html.wait-ready:not(.is-ready) *, html.wait-ready:not(.is-ready) *::before { animation-play-state: paused !important; }
.veil { position: fixed; inset: 0; z-index: 300; background: var(--blush-100); display: grid; place-items: center; pointer-events: none; transition: clip-path .85s var(--ease-io); clip-path: inset(0 0 0 0); }
.veil .logo__script { font-size: 64px; transition: opacity .5s, transform .9s var(--ease-io); }
html.is-ready .veil { clip-path: inset(0 0 100% 0); }
html.is-ready .veil .logo__script { opacity: 0; transform: translateY(-30px); }

/* scroll reveal */
/* animation (not transition) so it never fights an element's own hover transitions;
   fill-mode backwards hands control back to normal styles once it ends */
.rv { opacity: 0; }
.rv.in { opacity: 1; animation: rise 1.1s var(--ease) backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(36px) scale(.985); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* images fade in when decoded */
img { transition: opacity .9s var(--ease); }
img.img-wait { opacity: 0; }

/* thin progress line while scrolling */
.scroll-progress { position: fixed; top: 0; inset-inline: 0; height: 2px; background: linear-gradient(90deg, var(--rose-400), var(--rose-700)); transform-origin: right; transform: scaleX(0); z-index: 200; pointer-events: none; }

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

/* soft cross-fade between pages (Chrome / Edge / Safari 18+) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .35s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .55s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

@keyframes up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.up { animation: up 1s var(--ease) both; }
.d1 { animation-delay: .1s; } .d2 { animation-delay: .22s; } .d3 { animation-delay: .34s; } .d4 { animation-delay: .46s; } .d5 { animation-delay: .6s; }

.toast {
  position: fixed; inset-inline: 0; bottom: 26px; margin: 0 auto; width: max-content; max-width: calc(100% - 32px);
  background: var(--ink); color: #fff; padding: 14px 20px; border-radius: 12px; font-weight: 600; z-index: 100;
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .5); animation: up .4s var(--ease) both;
}
.toast--error { background: #9b2c2c; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; }
  img.img-wait { opacity: 1; }
}