/* ================= LANDING (Claude-style: text+form left, visual right) ================= */
/* .reg-lang-row/.reg-lang-opt — переключатель RU/EN в форме регистрации и,
   по тому же паттерну, языковой чекбокс Проектов/Кейсов/Выставок/Альбомов и
   чекбокс "личная/групповая выставка" в кабинете (см. js/cabinet-main.js).
   Раньше эти классы стилизовались ТОЛЬКО внутри @media(max-width:600px)
   ниже — на десктопе (и на промежуточных ширинах) правило вообще не
   применялось, и опции рендерились дефолтным блочным потоком браузера без
   выравнивания (ТЗ "Отображение названий": "чекбокс... сейчас криво").
   Базовое правило здесь действует на всех ширинах; мобильный блок ниже
   остаётся как есть — те же значения, дублирование безопасно.
   Баг (скриншот "Слетела вёрстка", чекбокс "Персональная/Групповая" в
   Выставках): в кабинете .reg-lang-opt всегда лежит внутри .field (см.
   разметку выше — .field > .reg-lang-row > label.reg-lang-opt), а более
   специфичное правило .field label{ display:block } (см. ниже) перебивало
   .reg-lang-opt{ display:flex } по специфичности (0,0,1,1 против 0,0,1,0) —
   в итоге радио-кнопка и подпись теряли выравнивание/gap друг с другом и
   наезжали на текст соседней опции. Тот же баг был и у RU/EN-переключателей
   языка (просто менее заметен на двух буквах). Селектор ниже уточнён до
   .reg-lang-row .reg-lang-opt (0,0,2,0) — это специфичнее .field label
   независимо от порядка правил в файле, и чинит все места, использующие
   этот паттерн, а не только Выставки. */
.reg-lang-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:6px; }
.reg-lang-row .reg-lang-opt{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; }

  .landing-split{
    display:grid; grid-template-columns: 1.05fr 0.95fr; min-height: calc(100vh - 73px);
  }
  .landing-intro{
    position:relative; overflow:hidden; overflow-y:auto;
    background: var(--surface);
    padding: 56px clamp(28px,5vw,80px); display:flex; flex-direction:column; justify-content:center;
  }
  .intro-glow{
    position:absolute; width:420px; height:420px; border-radius:50%; right:-140px; top:-160px;
    background: radial-gradient(circle, rgba(255,77,109,0.06) 0%, transparent 70%); pointer-events:none;
  }
  .hero-eyebrow{
    font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--ink-soft); margin-bottom:18px; display:flex; align-items:center; gap:10px; position:relative; z-index:2;
  }
  .hero-eyebrow::before{ content:''; width:22px; height:1px; background:var(--ink-soft); display:inline-block; }
  .hero-tagline{
    margin-top:18px; font-size:16px; color:var(--ink-soft); max-width:440px; line-height:1.55; position:relative; z-index:2;
  }
  .hero-cta{ display:none; }
  .hero-collage{ display:none; }
  /* ---- Мобильный вход в форму (ТЗ от 10 сентября) ----
     .hero-mobile-cta (кнопка "Создать портфолио" + ссылка "Войти", см.
     index.html) существует только для мобильной версии лендинга — на
     десктопе форма (.auth-card) и так сразу видна рядом с текстом хиро,
     этот блок здесь не нужен. Показывается только внутри
     @media(max-width:880px) в css/responsive.css. */
  .hero-mobile-cta{ display:none; }
  /* Статичные супрематические фигуры — только для мобильного hero, см.
     разметку в index.html и позиционирование в @media(max-width:880px)
     css/responsive.css. На десктопе своя, интерактивная композиция
     (.cloud-cursor/.supr-rect выше), эта копия там не нужна. */
  .hero-supr-mobile{ display:none; }

  .landing-visual{
    position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
    background:
      radial-gradient(ellipse 640px 480px at 88% -6%, rgba(255,255,255,0.75) 0%, transparent 58%),
      radial-gradient(ellipse 820px 460px at 6% 108%, rgba(23,176,163,0.30) 0%, transparent 62%),
      linear-gradient(178deg, #CFEBFF 0%, #86C3FF 32%, #3E92F2 64%, #1768D6 100%);
  }
  .cloud-canvas{
    position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1;
    /* фигуры рисуются напрямую в canvas-контексте, без доп. SVG-фильтров */
  }
  .landing-visual:hover{ cursor:none; }

  /* ===== КУРСОР: супрематическая композиция из прямоугольников (глитч) ===== */
  .cloud-cursor {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    z-index: 6;
    pointer-events: none;
    transform-origin: 150px 150px;
    /* начальное положение (вне экрана) */
    transform: translate(-400px, -400px);
    opacity: 0;
    transition: opacity .25s ease, transform 0.08s ease-out;
  }

  .cloud-cursor.is-active {
    opacity: 1;
  }

  /* прямоугольники супрематической композиции — заданы в % от контейнера
     (300×300), суммарно перекрывают ~85%+ площади. Палитра — малиновый
     (цвет логотипа, var(--coral) = #FF4D6D)/чёрный/синий/жёлтый, вместо
     классического супрематического красного — так композиция курсора
     перекликается с фирменным цветом. */
  .supr-rect {
    position: absolute;
    mix-blend-mode: multiply;
    opacity: 0.6;
    will-change: transform, clip-path;
    animation: supr-glitch 3.2s infinite steps(1, end);
  }

  .supr-rect--a {
    width: 92%; height: 34%; top: 6%; left: -8%;
    background: #FF4D6D; /* малиновый — цвет логотипа */
    transform: rotate(-16deg);
    box-shadow: 6px 0 0 rgba(255, 40, 110, 0.35), -6px 0 0 rgba(0, 220, 255, 0.28);
    animation-delay: 0s;
  }
  .supr-rect--b {
    width: 78%; height: 46%; top: 40%; left: 20%;
    background: #17181C; /* чёрный */
    transform: rotate(10deg);
    opacity: 0.66;
    box-shadow: 5px 0 0 rgba(255, 0, 90, 0.3), -5px 0 0 rgba(0, 200, 255, 0.25);
    animation-delay: -0.6s;
  }
  .supr-rect--c {
    width: 58%; height: 88%; top: -6%; left: 26%;
    background: #2148C2; /* синий */
    transform: rotate(-7deg);
    opacity: 0.55;
    box-shadow: 5px 0 0 rgba(255, 60, 0, 0.28), -5px 0 0 rgba(0, 255, 200, 0.22);
    animation-delay: -1.2s;
  }
  .supr-rect--d {
    width: 92%; height: 22%; top: 68%; left: -10%;
    background: #F2C230; /* жёлтый */
    transform: rotate(20deg);
    opacity: 0.62;
    box-shadow: 5px 0 0 rgba(255, 0, 120, 0.3), -5px 0 0 rgba(0, 180, 255, 0.25);
    animation-delay: -1.8s;
  }
  .supr-rect--e {
    width: 30%; height: 30%; top: 8%; left: 58%;
    background: #F4EFE3; /* тёплый белый акцент */
    transform: rotate(45deg);
    opacity: 0.7;
    box-shadow: 4px 0 0 rgba(255, 40, 110, 0.3), -4px 0 0 rgba(0, 220, 255, 0.25);
    animation-delay: -2.4s;
  }

  /* глитч: рывки смещения/скоса и обрезки clip-path в редкие "вспышки" */
  @keyframes supr-glitch {
    0%, 92%, 100% { transform-origin: center; clip-path: inset(0 0 0 0); filter: none; }
    93% { transform: translate(-5px, 2px) skewX(-3deg); clip-path: inset(12% 0 46% 0); filter: saturate(1.6) contrast(1.15); }
    94% { transform: translate(4px, -3px) skewX(2deg); clip-path: inset(52% 0 6% 0); filter: saturate(1.3); }
    95% { transform: translate(-2px, 0) skewX(0deg); clip-path: inset(0 8% 0 0); filter: none; }
    96% { transform: translate(3px, 2px) skewX(-2deg); clip-path: inset(30% 0 20% 0); filter: saturate(1.5); }
    97%, 99% { transform: translate(0,0); clip-path: inset(0 0 0 0); filter: none; }
  }
  /* сохраняем исходный угол поворота прямоугольника поверх глитч-анимации */
  .supr-rect--a { animation-name: supr-glitch-a; }
  .supr-rect--b { animation-name: supr-glitch-b; }
  .supr-rect--c { animation-name: supr-glitch-c; }
  .supr-rect--d { animation-name: supr-glitch-d; }
  .supr-rect--e { animation-name: supr-glitch-e; }
  @keyframes supr-glitch-a {
    0%, 92%, 100% { transform: rotate(-16deg) translate(0,0) skewX(0deg); clip-path: inset(0 0 0 0); }
    93% { transform: rotate(-16deg) translate(-5px, 2px) skewX(-3deg); clip-path: inset(12% 0 46% 0); }
    94% { transform: rotate(-16deg) translate(4px, -3px) skewX(2deg); clip-path: inset(52% 0 6% 0); }
    96% { transform: rotate(-16deg) translate(3px, 2px) skewX(-2deg); clip-path: inset(30% 0 20% 0); }
  }
  @keyframes supr-glitch-b {
    0%, 90%, 100% { transform: rotate(10deg) translate(0,0) skewX(0deg); clip-path: inset(0 0 0 0); }
    91% { transform: rotate(10deg) translate(5px, -2px) skewX(2deg); clip-path: inset(18% 0 38% 0); }
    92% { transform: rotate(10deg) translate(-4px, 3px) skewX(-3deg); clip-path: inset(44% 0 10% 0); }
    95% { transform: rotate(10deg) translate(-3px, -1px) skewX(1deg); clip-path: inset(6% 0 60% 0); }
  }
  @keyframes supr-glitch-c {
    0%, 94%, 100% { transform: rotate(-7deg) translate(0,0) skewY(0deg); clip-path: inset(0 0 0 0); }
    95% { transform: rotate(-7deg) translate(-3px, 4px) skewY(-2deg); clip-path: inset(20% 0 30% 0); }
    96% { transform: rotate(-7deg) translate(4px, -2px) skewY(2deg); clip-path: inset(55% 0 8% 0); }
  }
  @keyframes supr-glitch-d {
    0%, 91%, 100% { transform: rotate(20deg) translate(0,0) skewX(0deg); clip-path: inset(0 0 0 0); }
    92% { transform: rotate(20deg) translate(4px, 2px) skewX(3deg); clip-path: inset(10% 0 50% 0); }
    93% { transform: rotate(20deg) translate(-5px, -3px) skewX(-2deg); clip-path: inset(48% 0 12% 0); }
  }
  @keyframes supr-glitch-e {
    0%, 96%, 100% { transform: rotate(45deg) translate(0,0); clip-path: inset(0 0 0 0); }
    97% { transform: rotate(45deg) translate(-3px, 3px); clip-path: inset(0 0 0 0); }
    98% { transform: rotate(45deg) translate(3px, -3px); clip-path: inset(0 0 0 0); }
  }

  /* при наведении на интерактивные элементы (is-hot) — усиление глитча и контраста */
  .cloud-cursor.is-hot .supr-rect {
    opacity: 0.82;
    filter: saturate(1.4) contrast(1.1);
    animation-duration: 1.4s;
  }

  /* при клике (is-down) — резкая вспышка */
  .cloud-cursor.is-down .supr-rect {
    opacity: 0.95;
    filter: saturate(1.7) contrast(1.25);
    animation-duration: 0.6s;
  }

  /* адаптив: масштаб контейнера, композиция (в %) подстраивается сама */
  @media (max-width: 820px) {
    .cloud-cursor {
      width: 220px;
      height: 220px;
      transform-origin: 110px 110px;
    }
  }
  @media (max-width: 600px) {
    .cloud-cursor {
      width: 160px;
      height: 160px;
      transform-origin: 80px 80px;
    }
  }

  .auth-card{
    width:100%; max-width:400px; margin-top:34px; position:relative; z-index:2;
  }
  .auth-card h2{ font-size:20px; margin-bottom:6px; }
  .auth-sub{ color:var(--ink-faint); font-size:13px; margin-bottom:22px; }
  .field{ margin-bottom:14px; }
  .field label{ display:block; font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; }
  .field input{
    width:100%; padding:13px 14px; border-radius:12px; border:1.5px solid var(--border);
    font-size:14px; font-family:inherit; background:#FCFCFE; transition:border-color .2s ease;
  }
  .field input:focus{ outline:none; border-color:var(--ink); }
  .field select{
    width:100%; padding:13px 40px 13px 14px; border-radius:12px; border:1.5px solid var(--border);
    font-size:14px; font-family:inherit; background-color:#FCFCFE; transition:border-color .2s ease; color:var(--ink);
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B5F6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position: right 14px center;
    background-size:16px;
    cursor:pointer;
  }
  .field select:focus{ outline:none; border-color:var(--ink); }
  .field textarea{
    width:100%; padding:13px 14px; border-radius:12px; border:1.5px solid var(--border);
    font-size:14px; font-family:inherit; background:#FCFCFE; transition:border-color .2s ease;
    resize:vertical; min-height:96px; line-height:1.5; color:var(--ink);
  }
  .field textarea:focus{ outline:none; border-color:var(--ink); }
  .field textarea::placeholder, .field input::placeholder{ color:var(--ink-faint); }
  /* Поля с форматированием (contenteditable, см. js/rich-editor.js) — та же
     "рамка" оформления, что и у textarea/input выше, но без тега textarea:
     плейсхолдер тут не браузерный, а имитируется CSS через content:attr(),
     когда поле пустое. Правило намеренно НЕ ограничено `.field` — то же
     поле встречается и вне `.field` (например, карточка альбома в
     кабинете, см. js/cabinet-gallery-and-reviews.js). */
  .richtext-editable{
    width:100%; padding:13px 14px; border-radius:12px; border:1.5px solid var(--border);
    font-size:14px; font-family:inherit; background:#FCFCFE; transition:border-color .2s ease;
    min-height:96px; line-height:1.5; color:var(--ink); cursor:text;
  }
  .richtext-editable:focus{ outline:none; border-color:var(--ink); }
  .richtext-editable:empty:before{ content:attr(data-placeholder); color:var(--ink-faint); pointer-events:none; }
  /* Внутри поля во время редактирования используем те же отступы, что и на
     показе (см. .dm-desc/.dm-field в css/modals.css), чтобы то, что видит
     автор при наборе текста, максимально совпадало с тем, что увидят
     остальные — как и задумано в contenteditable-редакторе (ТЗ 2.09). */
  .richtext-editable p{ margin:0 0 12px; }
  .richtext-editable p:last-child{ margin-bottom:0; }
  .richtext-editable h2{ font-size:19px; font-weight:800; margin:18px 0 10px; }
  .richtext-editable h3{ font-size:16px; font-weight:700; margin:16px 0 8px; }
  .richtext-editable h2:first-child, .richtext-editable h3:first-child{ margin-top:0; }
  .richtext-editable blockquote{
    margin:0 0 12px; padding:4px 0 4px 14px; border-left:3px solid var(--border); color:var(--ink-soft); font-style:italic;
  }
  .richtext-editable ul, .richtext-editable ol{ margin:0 0 12px; padding-left:22px; }
  .richtext-editable li{ margin-bottom:4px; }
  .divider{ display:none; }
  .auth-foot{ margin-top:16px; text-align:left; font-size:13px; color:var(--ink-soft); }
  .auth-foot .link{ color:var(--coral); font-weight:700; cursor:pointer; }
  .auth-forgot .link{ cursor:pointer; }
  .reg-lang-row{ display:flex; gap:14px; margin-top:6px; }
  .reg-lang-row .reg-lang-opt{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; cursor:pointer; }
  .reg-agree-row{
    display:flex; align-items:flex-start; gap:9px; margin:6px 0 16px; cursor:pointer; user-select:none;
  }
  .reg-agree-row input{ width:16px; height:16px; min-width:16px; margin-top:1px; accent-color:var(--ink); cursor:pointer; }
  .reg-agree-text{ font-size:11.5px; line-height:1.45; color:var(--ink-faint); }
  .reg-agree-text .link{ color:var(--ink-soft); text-decoration:underline; font-weight:600; }
  .reg-agree-row.reg-agree-invalid .reg-agree-text{ color:var(--coral); }

  /* ================= LISTING ================= */