/* SkyPRO_NN — токены дизайна (светлая «бумага» + латунный свет) */
:root {
  --pusk-bg: #F5F3EE;          /* тёплая бумага */
  --pusk-surface: #FFFFFF;
  --pusk-surface-2: #FBF9F4;
  --pusk-fg: #15171A;          /* чернила */
  --pusk-muted: #6C6F74;
  --pusk-line: #E6E1D7;
  --pusk-accent: #B07A24;      /* латунь */
  --pusk-accent-2: #E7B25C;    /* свет */
  --pusk-accent-soft: #F3E7D2;
  --pusk-dark: #14140F;        /* тёмная секция */
  --pusk-dark-2: #1E1D15;
  --pusk-dark-line: #2C2A20;

  --pusk-font-display: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --pusk-font-body: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --radius: 18px;

  /* мост для shadcn-классов из библиотеки */
  --background: var(--pusk-bg);
  --foreground: var(--pusk-fg);
  --card: var(--pusk-surface);
  --card-foreground: var(--pusk-fg);
  --popover: var(--pusk-surface);
  --popover-foreground: var(--pusk-fg);
  --primary: var(--pusk-fg);
  --primary-foreground: #ffffff;
  --secondary: var(--pusk-surface-2);
  --secondary-foreground: var(--pusk-fg);
  --muted: var(--pusk-surface-2);
  --muted-foreground: var(--pusk-muted);
  --accent: var(--pusk-accent);
  --accent-foreground: #ffffff;
  --border: var(--pusk-line);
  --input: var(--pusk-line);
  --ring: var(--pusk-accent);
}

html { scroll-behavior: smooth; }
body { font-family: var(--pusk-font-body); background: var(--pusk-bg); color: var(--pusk-fg); -webkit-font-smoothing: antialiased; }
h1, h2, h3, .font-display { font-family: var(--pusk-font-display); }

::selection { background: var(--pusk-accent); color: #fff; }

/* «Световая линия» — фирменный разделитель */
.light-line { position: relative; height: 1px; background: var(--pusk-line); overflow: hidden; }
.light-line::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 26%;
  background: linear-gradient(90deg, transparent, var(--pusk-accent-2), transparent);
  animation: lightSweep 6s ease-in-out infinite;
}
@keyframes lightSweep {
  0%   { transform: translateX(-120%); opacity: 0; }
  15%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translateX(420%); opacity: 0; }
}
.light-line--dark { background: var(--pusk-dark-line); }

/* Появление при скролле */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Пульс латунной точки */
.pulse-dot { position: relative; }
.pulse-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 9999px;
  background: var(--pusk-accent-2); opacity: .55; animation: pulseRing 2.4s ease-out infinite;
}
@keyframes pulseRing { 0% { transform: scale(1); opacity: .55; } 70%,100% { transform: scale(2.6); opacity: 0; } }

/* Мягкое свечение под фото */
.glow-frame { position: relative; }
.glow-frame::before {
  content: ""; position: absolute; inset: -18% -14% -22% -14%; z-index: -1;
  background: radial-gradient(60% 55% at 60% 40%, rgba(231,178,92,.45), transparent 70%);
  filter: blur(28px); pointer-events: none;
}

/* Аккордеон FAQ */
.faq details > summary { list-style: none; cursor: pointer; }
.faq details > summary::-webkit-details-marker { display: none; }
.faq details .faq-icon { transition: transform .3s ease; }
.faq details[open] .faq-icon { transform: rotate(45deg); }
.faq details .faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.faq details[open] .faq-body { grid-template-rows: 1fr; }
.faq details .faq-body > div { overflow: hidden; }

/* Калькулятор */
input[type=range] { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 9999px; background: var(--pusk-line); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; height: 24px; width: 24px; border-radius: 9999px; background: var(--pusk-fg);
  border: 3px solid var(--pusk-surface); box-shadow: 0 2px 8px rgba(0,0,0,.18); cursor: pointer;
}
input[type=range]::-moz-range-thumb { height: 22px; width: 22px; border-radius: 9999px; background: var(--pusk-fg); border: 3px solid var(--pusk-surface); cursor: pointer; }

/* Слайдер «до/после» */
#sbs-root { cursor: ew-resize; }
#sbs-before { transition: clip-path .15s cubic-bezier(.34,1.4,.64,1); }
#sbs-divider { transition: left .15s cubic-bezier(.34,1.4,.64,1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .light-line::after { display: none; }
  .pulse-dot::after { animation: none; }
}