/* ============================================================
   VESTA — Base: reset, typography, motion primitives
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  /* iOS/Android: sem pull-to-refresh nem corrente de scroll — quem rola é o
     html, então a regra precisa estar AQUI (no body não pega) */
  overscroll-behavior-y: none;
  /* se o elástico ainda aparecer: o que vaza em cima é creme (casa com as
     telas) e embaixo é chrome (vira extensão da nav — sem vão claro) */
  background: linear-gradient(var(--bg) 0 50%, var(--chrome) 50% 100%);
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-15);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  overflow-x: clip;   /* a página nunca rola de lado — só os rails internos */
}

img, video, svg { max-width: 100%; display: block; }
img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.22; text-wrap: balance; }
p, figure, figcaption { margin: 0; }   /* figure sem reset herda 1em + 40px por lado do browser */
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
input, select, textarea { font: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* display = Poppins semibold (a cara do app original) */
.serif { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }

/* Numerals in prices / stats */
.tnum { font-variant-numeric: tabular-nums; }

/* ---- Screen-reader only ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   Motion primitives
   ============================================================ */

/* Screen enter: rise + settle (focal, one per navigation) */
@keyframes screen-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes screen-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-8px); }
}

/* Card cascade (staggered via --i) */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.cascade > * {
  animation: rise-in var(--t-slow) var(--ease-out) both;
  animation-delay: calc(min(var(--i, 0), 8) * 45ms);
}

/* Sheet / modal */
@keyframes sheet-up {
  from { transform: translateY(100%); }
  to   { transform: none; }
}
@keyframes sheet-down {
  from { transform: none; }
  to   { transform: translateY(100%); }
}
@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes pop-in {
  from { opacity: 0; transform: scale(.92) translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Heart burst */
@keyframes heart-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.35); }
  60% { transform: scale(.92); }
  100% { transform: scale(1); }
}

/* Shimmer skeleton */
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.skeleton {
  background: linear-gradient(100deg, #E9E5DF 40%, #F5F2ED 50%, #E9E5DF 60%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
  border-radius: var(--r-md);
}

/* Typing dots (stylist chat) */
@keyframes dot-bounce {
  0%, 60%, 100% { transform: none; opacity: .45; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Try-on reveal — the signature moment: image materializes from blur */
@keyframes unveil {
  0%   { opacity: 0; filter: blur(18px) saturate(.6); transform: scale(1.04); }
  60%  { opacity: 1; }
  100% { opacity: 1; filter: none; transform: none; }
}
.unveil { animation: unveil var(--t-focal) var(--ease-out) both; }

/* Pressable — universal touch feedback */
.pressable { transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), filter var(--t-fast) var(--ease-out); }
.pressable:active { transform: scale(.97); }

@media (hover: hover) {
  .hover-lift { transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); }
  .hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
}

/* Spin */
@keyframes spin { to { transform: rotate(1turn); } }

/* ---- Reduced motion: keep state changes, drop travel ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
  .skeleton { animation: none; }
}