/*
# File: /assets/css/main.css
# Version: 1.3
# Description: Mobile-first, one-screen. Эффекты: ripple, burst, tilt-parallax, shine, breathing. Подпись-ссылка под заголовком карточки.
*/

/* ===== Тема ===== */
:root{
  --bg:#f3f6f5;
  --panel:#ffffff;
  --text:#0b1f1a;
  --muted:#5c6f69;
  --brand:#1f7a68;
  --accent:#ffd24d;
  --line:#e6ecea;
  --shadow:0 6px 18px rgba(8,24,20,0.08);

  /* Эффекты */
  --pulse-shadow:0 8px 22px rgba(8,24,20,0.10);
  --pulse-shadow-2:0 14px 28px rgba(8,24,20,0.14);
}

/* ===== Базовая типографика ===== */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  overflow:hidden; /* один экран без прокрутки */
}

/* Сообщение для noJS */
.nojs{background:#ffe8c7;color:#5a3b00;padding:12px;text-align:center;font-size:14px}

/* ===== Фон (parallax layer) ===== */
.bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(31,122,104,0.15), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(255,210,77,0.25), transparent 60%),
    linear-gradient(180deg, #f7faf9 0%, #eef3f2 100%);
  filter:saturate(105%);
  transform:translateZ(0);
  transition:transform .12s ease;
}

/* ===== FX canvas (частицы) ===== */
.fx-canvas{
  position:fixed;inset:0;z-index:2;pointer-events:none;display:block;
}

/* ===== Контейнер страницы ===== */
.page{
  position:relative;z-index:1;
  max-width:860px;margin:0 auto;
  padding:20px clamp(16px,4vw,32px) 24px;
  height:100svh; /* высота экрана */
  display:flex;flex-direction:column;justify-content:space-between;
}

/* ===== Шапка / логотип ===== */
.hero{display:flex;align-items:center;gap:16px;margin-top:2px}
.logo{
  width:76px;height:76px;flex:0 0 auto;background:var(--panel);
  border-radius:18px;box-shadow:var(--shadow);display:grid;place-items:center;
  transform:translateZ(0);
}
.logo svg{width:56px;height:56px}
.logo-card{fill:var(--brand)}
.logo-road{fill:none;stroke:#fff;stroke-width:14;stroke-linecap:round}
.logo-dot{fill:var(--accent)}
.brand h1{margin:0;font-size:clamp(22px,5vw,36px);letter-spacing:0.3px}
.brand .tagline{margin:4px 0 0;color:var(--muted);font-size:14px}

/* Shine эффект (разовый проблеск) */
.shine-once{position:relative;overflow:hidden;}
.shine-once::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.65) 50%, transparent 100%);
  transform:translateX(-120%);
  animation:shine 1.1s .15s ease forwards;
}
@keyframes shine{ to{ transform:translateX(120%) } }

/* ===== Кнопка "Открыть в браузере" ===== */
.open-in-browser{margin:8px 0 8px}
.btn{border:0;border-radius:12px;padding:12px 16px;font-weight:600;cursor:pointer}
.btn-outline{background:transparent;border:2px solid var(--brand);color:var(--brand)}
.btn-outline:active{transform:translateY(1px)}

/* ===== Список ссылок (без прокрутки — вмещаем в экран) ===== */
.links{display:grid;gap:12px;margin:10px 0}
.card{
  position:relative;
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;
  align-items:center;padding:14px;border-radius:16px;background:var(--panel);
  box-shadow:var(--shadow);text-decoration:none;color:inherit;transform:translateZ(0);
  transition:transform .12s ease, box-shadow .12s ease, background .2s ease;
  will-change:transform;
  overflow:hidden; /* для ripple */
}
.card:active{transform:scale(0.985)}
.card:hover{box-shadow:var(--pulse-shadow)}
.icon{
  width:36px;
  height:36px;
  border-radius:10px;
  background-size:70%;
  background-position:center;
  background-repeat:no-repeat;
}

/* TikTok */
.ic-tiktok{
  background-image:url("/assets/icons/tiktok.svg");
}

/* Instagram */
.ic-instagram{
  background-image:url("/assets/icons/instagram.svg");
}

/* Telegram */
.ic-telegram{
  background-image:url("/assets/icons/telegram.svg");
}

/* YouTube */
.ic-youtube{
  background-image:url("/assets/icons/youtube.svg");
}
.text .title{font-weight:700;letter-spacing:.2px}
.text .desc{color:var(--muted);font-size:13px;margin-top:2px}

/* Подпись-ссылка под заголовком карточки */
.text .desc a.suburl{
  color:var(--muted);
  text-decoration:underline;
  text-underline-offset:2px;
  word-break:break-all;
}

.chev{font-size:22px;color:var(--muted)}

/* Breathing pulse для карточек (мягко, экономно) */
.card.live{ animation: card-breathe 2.8s ease-in-out infinite; }
.card.live:active{ animation-play-state:paused }
@keyframes card-breathe{
  0%,100%{ box-shadow:var(--shadow); transform: translateZ(0) }
  50%{ box-shadow:var(--pulse-shadow-2); transform: translate3d(0,-0.5px,0) }
}

/* ===== Преимущества и подвал ===== */
.benefits{display:grid;gap:12px;grid-template-columns:1fr}
.b-card{background:var(--panel);border-radius:16px;padding:12px 14px;box-shadow:var(--shadow)}
.b-title{font-weight:700}
.b-desc{color:var(--muted);margin-top:4px}
.foot{text-align:center;color:var(--muted);font-size:13px}
.foot .small{margin-top:4px}

/* ===== Ripple (чернила) ===== */
.ripple{
  position:absolute; border-radius:50%;
  transform: translate(-50%, -50%) scale(0);
  opacity:.25; pointer-events:none;
  background: currentColor;
  mix-blend-mode: multiply;
  animation: ripple-ink .5s ease-out forwards;
}
@keyframes ripple-ink{ to{ transform: translate(-50%, -50%) scale(1); opacity:0 } }

/* ===== Десктоп/планшет (вторично) ===== */
@media (min-width:760px){
  .hero{gap:20px}
  .logo{width:92px;height:92px}
  .logo svg{width:68px;height:68px}
  .links{gap:14px}
  .benefits{grid-template-columns:repeat(3,1fr)}
}

/* ===== Respect reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation:none !important; transition:none !important }
}