/*
Theme Name: STLV
Description: Тема для strippers-telaviv.com. RTL основной, LTR для /en. Неймспейс lum-.
Version: 9.3
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: stlv
*/

/* ============================================================
   ЛЮМЕН — каркас
   Градиентная сетка на фоне, стеклянные поверхности, цветные тени,
   свет вокруг объектов. Неймспейс lum-.
   Отступы логическими свойствами: одна таблица на RTL и LTR.
   ============================================================ */

/* ---------- 1. Токены ---------- */
:root {
  /* Базовые слои — палитра «Перламутр» */
  --lum-bg:      #f7f2fb;
  --lum-bg-2:    #f1e9f7;
  --lum-bg-3:    #e9def2;

  /* Цвета градиентов */
  --lum-violet:  #8b2fd6;
  --lum-magenta: #d61f69;
  --lum-rose:    #ff4d7d;
  --lum-coral:   #ff6b4a;
  --lum-blue:    #4361ff;

  /* Текст */
  --lum-white:   #1a0f26;
  --lum-soft:    #4b3b5c;
  --lum-dim:     #8b7c9b;

  --lum-wa:      #1fa855;

  /* Градиентная сетка фона — переопределяется палитрой */
  --lum-mesh:
    radial-gradient(58% 44% at 84% 4%,  rgba(255,143,171,.50), transparent 62%),
    radial-gradient(52% 40% at 8% 14%,  rgba(160,150,255,.45), transparent 62%),
    radial-gradient(64% 48% at 52% 96%, rgba(255,196,150,.45), transparent 66%),
    radial-gradient(40% 34% at 92% 60%, rgba(214,31,105,.16),  transparent 62%);
  --lum-grain: .03;
  --lum-foot-bg: linear-gradient(180deg, rgba(247,242,251,0), rgba(233,222,244,.85));

  /* Стекло */
  --lum-glass:   linear-gradient(158deg, rgba(255,255,255,.88), rgba(255,255,255,.58));
  --lum-glass-2: linear-gradient(158deg, rgba(255,255,255,.96), rgba(255,255,255,.72));
  --lum-edge:    rgba(26,15,38,.10);
  --lum-edge-2:  rgba(26,15,38,.20);
  --lum-inner:   inset 0 1px 0 rgba(255,255,255,.92);

  /* Цветные тени */
  --lum-lift:   0 24px 56px -26px rgba(90,40,120,.30);
  --lum-lift-2: 0 40px 90px -34px rgba(90,40,120,.38);
  --lum-glow:   0 20px 52px -18px rgba(214,31,105,.50);
  --lum-glow-2: 0 30px 74px -20px rgba(214,31,105,.62);

  /* Заливки */
  --lum-grad:      linear-gradient(115deg, var(--lum-magenta), var(--lum-rose) 52%, var(--lum-coral));
  --lum-grad-cool: linear-gradient(115deg, var(--lum-blue), var(--lum-violet) 55%, var(--lum-magenta));
  --lum-grad-text: linear-gradient(102deg, #d61f69 6%, #8b2fd6 54%, #ff6b4a 98%);

  /* Шрифты */
  --lum-d: 'Secular One', 'Arial Black', sans-serif;
  --lum-s: 'Heebo', -apple-system, 'Segoe UI', system-ui, sans-serif;

  /* Кегль */
  --lum-t-hero: clamp(3rem, 9.5vw, 7.4rem);
  --lum-t-h2:   clamp(2rem, 5vw, 3.7rem);
  --lum-t-h3:   clamp(1.3rem, 2.4vw, 1.8rem);
  --lum-t-lead: clamp(1.05rem, 1.5vw, 1.25rem);
  --lum-t-body: 1.0625rem;
  --lum-t-sm:   .9375rem;
  --lum-t-xs:   .78rem;

  /* Шаг */
  --lum-1: 4px;  --lum-2: 8px;  --lum-3: 12px; --lum-4: 16px;
  --lum-5: 24px; --lum-6: 32px; --lum-7: 48px; --lum-8: 64px;
  --lum-9: 96px; --lum-10: 136px;

  --lum-r:    16px;
  --lum-r-lg: 26px;
  --lum-r-xl: 34px;
  --lum-pill: 999px;

  --lum-wrap: 1280px;
  /* Галерея карточек шире текста: при 1472 четыре карточки дают ровно 350px */
  --lum-wrap-wide: 1472px;
  --lum-ease: cubic-bezier(.22, .61, .36, 1);
  --lum-spring: cubic-bezier(.34, 1.4, .5, 1);
}

/* ---------- 2. Сброс ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-block-start: 96px; }

body {
  background: var(--lum-bg);
  color: var(--lum-soft);
  font-family: var(--lum-s);
  font-size: var(--lum-t-body);
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Градиентная сетка живёт под всей страницей */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--lum-mesh), var(--lum-bg);
}
/* Мягкое зерно, чтобы градиенты не полосили */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--lum-grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, video { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--lum-rose); color: #fff; }
:focus-visible { outline: 2px solid var(--lum-rose); outline-offset: 3px; border-radius: 4px; }

/* ---------- 3. Типографика ---------- */
h1, h2, h3, h4 { font-family: var(--lum-d); font-weight: 400; line-height: 1.06; color: var(--lum-white); }

.lum-h1 { font-size: var(--lum-t-hero); line-height: .96; letter-spacing: -.015em; }
.lum-h2 { font-size: var(--lum-t-h2); line-height: 1.02; letter-spacing: -.01em; }
.lum-h3 { font-size: var(--lum-t-h3); }

/* Градиентная заливка текста */
.lum-fill {
  background: var(--lum-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding-block-end: .06em;
}

.lum-lead { font-size: var(--lum-t-lead); line-height: 1.7; color: var(--lum-soft); max-inline-size: 52ch; }
.lum-lead strong { color: var(--lum-white); font-weight: 500; }

.lum-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--lum-2);
  padding: 7px var(--lum-4);
  border-radius: var(--lum-pill);
  background: var(--lum-glass);
  border: 1px solid var(--lum-edge);
  box-shadow: var(--lum-inner);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: var(--lum-t-xs);
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--lum-white);
}
.lum-eyebrow::before {
  content: '';
  inline-size: 7px; block-size: 7px;
  border-radius: 50%;
  background: var(--lum-rose);
  box-shadow: 0 0 12px 2px rgba(255,77,125,.9);
  flex: none;
}

.lum-dim { color: var(--lum-dim); }
.lum-sm { font-size: var(--lum-t-sm); }

/* ---------- 4. Сетка ---------- */
.lum-wrap { inline-size: min(100% - 2 * var(--lum-5), var(--lum-wrap)); margin-inline: auto; }
.lum-wrap--wide { inline-size: min(100% - 2 * var(--lum-5), var(--lum-wrap-wide)); }
@media (max-width: 620px) { .lum-wrap { inline-size: min(100% - 2 * var(--lum-4), var(--lum-wrap)); } }

.lum-sec { padding-block: var(--lum-9); position: relative; }
.lum-sec--tight { padding-block: var(--lum-7); }
@media (max-width: 760px) { .lum-sec { padding-block: var(--lum-7); } }

.lum-head { max-inline-size: 60ch; margin-block-end: var(--lum-7); }
.lum-head .lum-h2 { margin-block: var(--lum-4) var(--lum-4); }
.lum-head p { color: var(--lum-soft); }

/* ---------- 5. Стекло ---------- */
.lum-glass {
  background: var(--lum-glass);
  border: 1px solid var(--lum-edge);
  border-radius: var(--lum-r-lg);
  box-shadow: var(--lum-lift), var(--lum-inner);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}

/* Градиентная кромка вокруг выделенного объекта */
.lum-ring { position: relative; }
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
.lum-ring::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--lum-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
}

/* ---------- 6. Кнопки ---------- */
.lum-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lum-2);
  padding: 16px var(--lum-6);
  border-radius: var(--lum-pill);
  font-size: var(--lum-t-sm);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid transparent;
  transition: transform .25s var(--lum-spring), box-shadow .3s, background-color .25s, border-color .25s, color .25s;
}
.lum-btn:hover { transform: translateY(-3px); }
.lum-btn:active { transform: translateY(-1px); }

/* Блик пробегает по кнопке */
.lum-btn::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: -120%;
  inline-size: 60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start .7s var(--lum-ease);
}
.lum-btn:hover::after { inset-inline-start: 130%; }

.lum-btn--grad { background: var(--lum-grad); color: #fff; box-shadow: var(--lum-glow); }
.lum-btn--grad:hover { box-shadow: var(--lum-glow-2); }

.lum-btn--wa { background: linear-gradient(115deg, #1fb355, #25d366 60%, #52e58c); color: #04240f; box-shadow: 0 22px 60px -18px rgba(37,211,102,.6); }
.lum-btn--wa:hover { box-shadow: 0 30px 76px -20px rgba(37,211,102,.78); }

.lum-btn--ghost {
  background: var(--lum-glass);
  border-color: var(--lum-edge);
  color: var(--lum-white);
  box-shadow: var(--lum-inner);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.lum-btn--ghost:hover { border-color: var(--lum-edge-2); background: var(--lum-glass-2); }

.lum-btn--wide { inline-size: 100%; }
.lum-btns { display: flex; flex-wrap: wrap; gap: var(--lum-3); }

/* ---------- 7. Ссылки в тексте ---------- */
.lum-a {
  color: var(--lum-rose);
  background-image: linear-gradient(var(--lum-rose), var(--lum-rose));
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  transition: background-size .35s var(--lum-ease), color .2s;
}
[dir="ltr"] .lum-a { background-position: 0 100%; }
.lum-a:hover { background-size: 100% 1px; color: var(--lum-coral); }
.lum-off { color: var(--lum-dim); }

/* ---------- 8. Текст статьи ---------- */
.lum-txt > * + * { margin-block-start: var(--lum-4); }
.lum-txt h3 {
  font-size: var(--lum-t-h3);
  margin-block-start: var(--lum-7);
  display: flex;
  align-items: center;
  gap: var(--lum-3);
}
.lum-txt h3::before {
  content: '';
  inline-size: 22px; block-size: 3px;
  border-radius: 2px;
  background: var(--lum-grad);
  flex: none;
}
.lum-txt h3 + p { margin-block-start: var(--lum-3); }
.lum-txt p { color: var(--lum-soft); }
.lum-txt strong { color: var(--lum-white); font-weight: 500; }
.lum-txt a { color: var(--lum-rose); border-block-end: 1px solid rgba(255,77,125,.4); transition: border-color .2s, color .2s; }
.lum-txt a:hover { color: var(--lum-coral); border-block-end-color: var(--lum-coral); }

/* ---------- 9. Утилиты ---------- */
.lum-sr { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.lum-up { opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .8s var(--lum-ease), transform .8s var(--lum-ease); }
.lum-up.is-on { opacity: 1; transform: none; }
.lum-up--1 { transition-delay: .1s; }
.lum-up--2 { transition-delay: .2s; }
.lum-up--3 { transition-delay: .3s; }

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