/* ============================================================================
   stilist.ru — Beauty-first Design System (BM_DS v1.0)
   Custom CSS for things Tailwind can't express inline:
   aurora hero animations, confetti, scroll helpers, masonry, scrollbar-hide.
   Color tokens (rose/stone/amber/fuchsia/violet/emerald) come from default
   Tailwind palette. Fonts configured in tw.js.
   ============================================================================ */

:root {
  --beauty-50:  #FFF1F2;
  --beauty-100: #FFE4E6;
  --beauty-200: #FECDD3;
  --beauty-400: #FB7185;
  --beauty-500: #F43F5E;
  --beauty-600: #E11D48;
  --beauty-700: #BE123C;
  --beauty-900: #881337;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-feature-settings: "cv11", "ss01"; }

/* Mangomint-style floating color blobs ------------------------------------- */
.hero-bg {
  position: absolute; inset: 0; overflow: hidden;
  background: linear-gradient(160deg, #F4EBFF 0%, #FFE6F0 48%, #FFEFE2 100%); /* soft brand gradient: violet → pink → peach */
  z-index: 0;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: multiply;
  will-change: transform;
}
.blob-1 {
  width: min(520px, 130vw); height: min(520px, 130vw);
  background: radial-gradient(circle, rgba(255,201,163,0.85) 0%, transparent 65%); /* peach #FFC9A3 */
  top: -120px; left: -80px;
  animation: float-1 14s ease-in-out infinite;
}
.blob-2 {
  width: min(420px, 110vw); height: min(420px, 110vw);
  background: radial-gradient(circle, rgba(250,164,205,0.78) 0%, transparent 65%); /* pink #FAA4CD */
  top: 40px; right: -60px;
  animation: float-2 11s ease-in-out infinite;
}
.blob-3 {
  width: min(380px, 100vw); height: min(380px, 100vw);
  background: radial-gradient(circle, rgba(192,152,245,0.62) 0%, transparent 65%); /* violet #C098F5 */
  bottom: -80px; left: 25%;
  animation: float-3 16s ease-in-out infinite;
}
.blob-4 {
  width: min(300px, 80vw); height: min(300px, 80vw);
  background: radial-gradient(circle, rgba(192,152,245,0.40) 0%, transparent 65%); /* soft violet */
  bottom: 20px; right: 15%;
  animation: float-4 18s ease-in-out infinite;
}
/* Dark variant for B2B / dark heroes */
.hero-bg--dark { background: #0C0A09; }
.hero-bg--dark .blob { mix-blend-mode: screen; filter: blur(90px); }

@keyframes float-1 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(40px,-25px) scale(1.06)} 66%{transform:translate(-20px,18px) scale(0.94)} }
@keyframes float-2 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-30px,20px) scale(0.96)} 66%{transform:translate(25px,-15px) scale(1.05)} }
@keyframes float-3 { 0%,100%{transform:translate(0,0) scale(1)} 40%{transform:translate(20px,-30px) scale(1.04)} 70%{transform:translate(-35px,10px) scale(0.97)} }
@keyframes float-4 { 0%,100%{transform:translate(0,0) scale(1)} 25%{transform:translate(-25px,-20px) scale(1.07)} 75%{transform:translate(30px,25px) scale(0.95)} }

/* Fresha-style spinning conic aurora --------------------------------------- */
.spinning-aurora {
  position: absolute; inset: -30%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    #FDA4AF 0deg, #F9A8D4 45deg, #E879F9 90deg, #A78BFA 135deg,
    #67E8F9 180deg, #86EFAC 225deg, #FDE68A 270deg, #FDBA74 315deg, #FDA4AF 360deg
  );
  filter: blur(70px) saturate(1.4);
  animation: spin-aurora 12s linear infinite;
  opacity: 0.65;
  will-change: transform;
}
@keyframes spin-aurora { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.aurora-overlay {
  position: absolute; inset: 0;
  background: rgba(255,241,242,0.55);
  backdrop-filter: blur(2px);
}

/* Utilities ---------------------------------------------------------------- */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

.tabular-nums { font-variant-numeric: tabular-nums; }

/* Reveal-on-scroll (paired with site.js IntersectionObserver) */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s ease-out, transform .6s ease-out; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* Masonry (CSS columns) — portfolio / blog grids */
.masonry { column-gap: 0.5rem; }
.masonry > * { break-inside: avoid; margin-bottom: 0.5rem; }
@media (min-width: 768px) { .masonry { column-count: 3; } }
@media (min-width: 1024px) { .masonry { column-count: 4; } }

/* Image placeholder wrapper — warm gradient shows if photo fails to load */
.img-ph { background: linear-gradient(135deg, #FFC9A3 0%, #FAA4CD 50%, #C098F5 100%); }
.img-ph > img { transition: opacity .5s ease; }

/* Scroll progress bar (article pages) */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: #F43F5E; z-index: 60; transition: width .1s linear; }
@media (min-width: 768px) { .scroll-progress { top: 70px; } }

/* Confetti (success / review) ---------------------------------------------- */
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 40; }
.confetti i {
  position: absolute; top: -12px; width: 10px; height: 14px; opacity: 0;
  animation: confetti-fall 3s ease-in forwards;
}
@keyframes confetti-fall {
  0%   { opacity: 1; transform: translateY(-10vh) rotate(0deg); }
  100% { opacity: 0; transform: translateY(105vh) rotate(720deg); }
}

/* Range slider (filter price) ---------------------------------------------- */
input[type="range"].rose-range { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 9999px; background: #E7E5E4; outline: none; }
input[type="range"].rose-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 9999px; background: #F43F5E; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); cursor: pointer; }
input[type="range"].rose-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 9999px; background: #F43F5E; border: 3px solid #fff; cursor: pointer; }

/* OTP digit cells ---------------------------------------------------------- */
.otp-cell { width: 48px; height: 56px; text-align: center; font-size: 24px; font-weight: 700; border-radius: 12px; border: 1px solid #E7E5E4; background: #fff; }
.otp-cell:focus { border-color: #FB7185; box-shadow: 0 0 0 3px #FFE4E6; outline: none; }

/* Prose tweaks (Tailwind typography plugin handles the rest) */
.prose img { border-radius: 1rem; }
.prose h2, .prose h3 { font-family: "Plus Jakarta Sans", sans-serif; }

/* Bottom sheet (filters / mobile menu) */
.sheet-enter { transform: translateY(100%); }
.sheet-enter-active { transform: translateY(0); transition: transform .3s ease-out; }

/* Hide native number spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .blob, .spinning-aurora, .confetti i, [data-reveal] { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* Print (legal / article) */
@media print {
  [data-site-nav], [data-site-footer], .scroll-progress, .sticky-cta, .no-print { display: none !important; }
}