/* ============================================================
   НАПРАВЛЕНИЕ A · «ХОРОВОД»
   Светлое кинетичное редакторское · асимметрия · кольца в движении
   ============================================================ */
@import url('kruzhok-base.css');

.wrap{ max-width:1340px; margin:0 auto; padding:0 clamp(20px,5vw,72px); }

/* секции */
.sec{ position:relative; padding:clamp(110px,15vh,210px) 0; overflow:hidden; }
.sec.dark{ background:var(--ink); color:var(--paper); }
.sec.dark .kicker .dash{ background:var(--paper); }
.sec.red{ background:var(--red); color:var(--paper); }
.sec.red .red, .sec.red .red-it{ color:var(--paper); }
.sec.red .ringframe{ border-color:var(--paper); }

/* перф: scroll-анимируемые элементы выносим в отдельный GPU-слой,
   чтобы поворот/параллакс на скролле были композитом, а не перерисовкой */
[data-orbit], [data-parallax], [data-drift]{ will-change:transform; }

/* большие фоновые кольца */
.bgring{ position:absolute; border-radius:50%; border:2px solid var(--red); opacity:.5; pointer-events:none; z-index:0; }
.sec.dark .bgring{ opacity:.34; }
.sec.red .bgring{ border-color:var(--paper); opacity:.5; }
.bgring.dashed{ border-style:dashed; opacity:.34; }

.aA .wrap{ position:relative; z-index:2; }

/* ---- type scale ---- */
.aA .display{ font-weight:700; line-height:.96; letter-spacing:-2px; margin:0; text-wrap:balance;
  font-size:clamp(52px,10vw,160px); }
.aA .h1{ font-weight:700; line-height:1.0; letter-spacing:-1.5px; margin:0; text-wrap:balance;
  font-size:clamp(44px,7.5vw,118px); }
.aA .h2{ font-weight:700; line-height:1.04; letter-spacing:-1px; margin:0; text-wrap:balance;
  font-size:clamp(34px,5.2vw,82px); }
.aA .h3{ font-weight:700; line-height:1.08; letter-spacing:-.5px; margin:0; text-wrap:balance;
  font-size:clamp(26px,3.4vw,52px); }
.aA .lead{ font-weight:400; line-height:1.5; margin:0; text-wrap:pretty;
  font-size:clamp(19px,2.05vw,31px); }
.aA .small{ font-size:clamp(15px,1.3vw,18px); line-height:1.5; }

/* ============================================================
   HERO — асимметричный, кольца-«хоровод»
   ============================================================ */
.aA .hero{ min-height:100svh; display:flex; align-items:center; padding-top:140px; padding-bottom:90px; }
/* в Telegram навбар скрыт → убираем его компенсирующий отступ.
   safe-area очищает notch, +40px буфер под панель Telegram. */
.tg .hero{ padding-top:calc(env(safe-area-inset-top, 0px) + 40px); min-height:auto; }
.aA .hero .wrap{ width:100%; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,64px); align-items:center; }
.hero-eyebrow{ display:flex; align-items:center; gap:16px; font-size:13px; font-weight:700;
  letter-spacing:5px; text-transform:uppercase; opacity:.55; margin-bottom:34px; }
.hero-eyebrow .dash{ width:46px; height:2px; background:currentColor; opacity:.55; }

.hero-lead{ position:relative; z-index:3; }
.hero-lead .display .name{ color:var(--red); }
.hero-sub{ max-width:30ch; margin-top:38px; }
.hero-sub.muted{ max-width:36ch; }
.hero-scroll{ margin-top:60px; display:inline-flex; align-items:center; gap:14px;
  font-size:12px; letter-spacing:3px; text-transform:uppercase; opacity:.6; font-weight:700; }
.hero-scroll .line{ width:54px; height:2px; background:currentColor; position:relative; overflow:hidden; }
.hero-scroll .line::after{ content:""; position:absolute; inset:0; width:40%; background:var(--red);
  animation:scrollLine 2.4s ease-in-out infinite; }
@keyframes scrollLine{ 0%{ transform:translateX(-120%);} 60%,100%{ transform:translateX(320%);} }

/* портреты — два кольца в «хороводе»: Валя и Рома по очереди в фокусе */
.hero-orbit{ position:relative; justify-self:center;
  width:clamp(340px,42vw,580px); height:clamp(340px,42vw,580px); z-index:1; }
.hero-orbit .o-ring-big{ position:absolute; inset:0; border:2px solid var(--red); border-radius:50%; opacity:.5; }
.hero-orbit .o-ring-big.b{ inset:9%; border-style:dashed; opacity:.3; }

.hero-orbit .pf{ position:absolute; }
.hero-orbit .pf .ringframe{ background:var(--paper); display:block; will-change:transform, filter; }
.hero-orbit .pf .photo{ width:clamp(150px,18vw,250px); height:clamp(150px,18vw,250px); }
.hero-orbit .pf-valya{ top:2%; right:5%; }
.hero-orbit .pf-roma{ bottom:2%; left:5%; }
.hero-orbit .pf-valya .photo{ background-image:url(photos/valya.jpg); background-position:50% 38%; }
.hero-orbit .pf-roma .photo{ background-image:url(photos/roma.jpg); background-position:50% 30%; }

/* имя — над/под кольцом, ярче, когда портрет в фокусе */
.hero-orbit .pf cap{ position:absolute; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-family:'Playfair Display',serif; font-weight:500; font-size:clamp(20px,1.7vw,28px);
  opacity:.22; pointer-events:none; }
.hero-orbit .pf-valya cap{ bottom:calc(100% + 14px); }
.hero-orbit .pf-roma cap{ top:calc(100% + 14px); }

/* дрейф по кругу + поочерёдный фокус */
@media (prefers-reduced-motion:no-preference){
  .hero-orbit .pf{ animation:pfDrift 18s ease-in-out infinite, pfZ 11s ease-in-out infinite; }
  .hero-orbit .pf .ringframe{ animation:pfFocus 11s ease-in-out infinite; }
  .hero-orbit .pf cap{ animation:pfName 11s ease-in-out infinite; }
  .hero-orbit .pf-roma{ animation-delay:-9s,-5.5s; }
  .hero-orbit .pf-roma .ringframe{ animation-delay:-5.5s; }
  .hero-orbit .pf-roma cap{ animation-delay:-5.5s; }
}
@keyframes pfFocus{
  0%,34%  { transform:scale(1.12); filter:grayscale(0) contrast(1.04); }
  50%,84% { transform:scale(.8); filter:grayscale(.62) brightness(.82); }
  100%    { transform:scale(1.12); filter:grayscale(0) contrast(1.04); }
}
@keyframes pfZ{
  0%,44%  { z-index:4; }
  50%,94% { z-index:2; }
  100%    { z-index:4; }
}
@keyframes pfName{
  0%,34%  { opacity:1; }
  50%,84% { opacity:.2; }
  100%    { opacity:1; }
}
@keyframes pfDrift{
  0%  { transform:translate(0,0); }
  25% { transform:translate(9px,-11px); }
  50% { transform:translate(0,-3px); }
  75% { transform:translate(-9px,9px); }
  100%{ transform:translate(0,0); }
}

/* ============================================================
   МАНИФЕСТ — «Что это»  (dark)
   ============================================================ */
.manifesto{ position:relative; }
.manifesto .big-word{ font-family:'Playfair Display',serif; font-weight:700; text-transform:uppercase;
  letter-spacing:1px; line-height:.9; margin:0 0 .2em; font-size:clamp(64px,14vw,200px); }
.manifesto .big-word .o-ring{ font-size:.96em; }
.manifesto-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,90px); align-items:end; }
.notpills{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.notpill{ font-family:'Playfair Display',serif; font-style:italic; font-weight:500;
  font-size:clamp(17px,1.6vw,23px); border:1.5px solid currentColor; border-radius:100px;
  padding:11px 24px; opacity:.85; }
/* зачёркнутые «не-это» */
.notpill.crossed{ opacity:.55; text-decoration:line-through;
  text-decoration-color:var(--red); text-decoration-thickness:2.5px; text-underline-offset:0; }
/* выделенный живой разговор */
.notpill.live{ opacity:1; background:var(--red); border-color:var(--red); color:var(--paper);
  display:inline-flex; align-items:center; gap:11px; }
.notpill.live .dot{ width:9px; height:9px; border-radius:50%; border:2px solid var(--paper); flex:0 0 auto;
  animation:livePulse 2.2s ease-in-out infinite; }
@keyframes livePulse{ 0%,100%{ transform:scale(1); opacity:.9; } 50%{ transform:scale(1.35); opacity:1; } }
@media (prefers-reduced-motion:reduce){ .notpill.live .dot{ animation:none; } }

/* ============================================================
   БЕЗ СНОБИЗМА — крупное утверждение
   ============================================================ */
.snob{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(36px,6vw,90px); align-items:end; }
.snob .small-col{ align-self:end; }

/* ============================================================
   4 АКТА — «хоровод» философов
   ============================================================ */
.acts-head{ display:flex; flex-direction:column; gap:18px; margin-bottom:clamp(60px,8vw,120px); max-width:760px; }
.acts-sub{ font-family:'Playfair Display',serif; font-style:italic; font-weight:500; color:var(--red);
  font-size:clamp(22px,2.8vw,42px); }
.acts{ display:flex; flex-direction:column; gap:clamp(80px,11vw,170px); }
.act{ display:grid; grid-template-columns:clamp(190px,24vw,300px) 1fr; gap:clamp(36px,6vw,96px); align-items:center; }
.act:nth-child(even){ grid-template-columns:1fr clamp(190px,24vw,300px); }
.act:nth-child(even) .act-portrait{ order:2; }
.act:nth-child(even) .act-body{ order:1; text-align:right; }
.act:nth-child(even) .act-head{ justify-content:flex-end; }
.act:nth-child(even) .act-who, .act:nth-child(even) .act-note{ margin-left:auto; }

.act-portrait{ position:relative; justify-self:center; }
.act-portrait .ringframe{ padding:clamp(8px,1.1vw,14px); position:relative; z-index:2;
  transition:transform .6s cubic-bezier(.22,.61,.36,1); }
.act-portrait .photo{ width:clamp(168px,22vw,290px); height:clamp(168px,22vw,290px);
  filter:grayscale(.6) contrast(1.02); transition:filter .6s ease, transform .6s ease; }
.act-portrait:hover .photo{ filter:grayscale(0) contrast(1.05); transform:scale(1.03); }
.act-portrait:hover .ringframe{ transform:rotate(-3deg); }
.act-portrait .echo{ position:absolute; inset:-9%; border:2px solid var(--red); border-radius:50%;
  opacity:.32; z-index:1; transition:transform .6s ease; }
.act-portrait:hover .echo{ transform:scale(1.08) rotate(6deg); }
/* hover-цитата */
.act-quote{ position:absolute; left:50%; top:-10%; transform:translate(-50%,-6px);
  background:var(--paper); color:var(--ink); border:1.5px solid var(--red); border-radius:18px;
  padding:14px 22px; max-width:300px; text-align:center; font-family:'Playfair Display',serif;
  font-style:italic; font-weight:500; font-size:clamp(15px,1.4vw,20px); line-height:1.32;
  opacity:0; pointer-events:none; z-index:6; transition:opacity .35s ease, transform .35s ease;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.5); }
.act-quote::after{ content:""; position:absolute; left:50%; bottom:-9px; transform:translateX(-50%) rotate(45deg);
  width:16px; height:16px; background:var(--paper); border-right:1.5px solid var(--red); border-bottom:1.5px solid var(--red); }
.act-portrait:hover .act-quote{ opacity:1; transform:translate(-50%,-12px); }
.act-head{ display:flex; align-items:baseline; gap:18px; margin-bottom:18px; }
.act-num{ font-weight:700; color:var(--red); font-size:clamp(30px,4vw,62px); line-height:1; }
.act-title{ font-family:'Playfair Display',serif; font-style:italic; font-weight:500;
  font-size:clamp(30px,3.8vw,60px); line-height:1.0; }
.act-who{ font-size:clamp(17px,1.7vw,27px); opacity:.62; max-width:34ch; }
.act-who b{ font-weight:700; opacity:1; }
.act-note{ margin-top:14px; font-size:clamp(15px,1.4vw,20px); opacity:.5; max-width:40ch; }

/* ============================================================
   УСЛОВИЯ — меню (red)
   ============================================================ */
.menu{ display:flex; flex-direction:column; }
.mrow{ display:grid; grid-template-columns:240px 1fr; gap:24px; align-items:baseline;
  padding:clamp(22px,2.8vw,38px) 0; border-top:1.5px solid currentColor; }
.mrow:last-child{ border-bottom:1.5px solid currentColor; }
.mrow .lbl{ font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase; opacity:.7; }
.mrow .val{ font-size:clamp(22px,2.5vw,40px); font-weight:400; line-height:1.25; }
.mrow .val .numc{ font-size:.62em; margin:0 .12em; border-color:var(--paper); color:var(--paper); }
.mrow .val .ink{ color:var(--ink); }
.price{ font-family:'Playfair Display',serif; font-style:italic; font-weight:500; color:var(--ink);
  font-size:clamp(32px,3.6vw,60px); letter-spacing:.5px; }
/* тёмная версия «о чём договариваемся» — красные акценты вместо красного фона */
.sec.dark .menu .mrow .val .numc{ border-color:var(--red); color:var(--red); }
.sec.dark .menu .price{ color:var(--red); }

/* ============================================================
   ВСТРЕЧИ — карточки (прошедшие получают .past)
   ============================================================ */
.meets-head{ display:flex; flex-direction:column; gap:18px; margin-bottom:clamp(40px,6vw,72px); }
.meets{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,40px); }
.meet{ position:relative; border:1.5px solid var(--line); border-radius:24px;
  padding:clamp(28px,3.4vw,50px); display:flex; flex-direction:column; gap:22px;
  transition:transform .5s cubic-bezier(.22,.61,.36,1), border-color .5s; overflow:hidden; background:var(--paper); }
.meet:hover{ transform:translateY(-7px); border-color:var(--red); }
.meet .bgring{ width:260px; height:260px; right:-100px; top:-100px; opacity:.4; }
.meet-tag{ font-size:12px; font-weight:700; letter-spacing:3px; text-transform:uppercase; opacity:.55; }
.meet-date{ display:flex; align-items:baseline; gap:16px; }
.meet-d{ font-family:'Playfair Display',serif; font-style:italic; font-weight:500; color:var(--red);
  font-size:clamp(64px,8vw,120px); line-height:.84; }
.meet-mo{ font-family:'Playfair Display',serif; font-style:italic; font-weight:500; font-size:clamp(26px,3vw,46px); }
.host{ display:flex; align-items:center; gap:16px; }
.host .ringframe{ padding:5px; border-width:2px; flex:0 0 auto; }
.host .photo{ width:62px; height:62px; }
.host .h-name{ font-family:'Playfair Display',serif; font-weight:500; font-size:clamp(20px,2vw,28px); }
.host .h-role{ font-size:11px; letter-spacing:2px; text-transform:uppercase; opacity:.55; font-weight:700; margin-top:4px; }
.meet-rows{ display:flex; flex-direction:column; margin-top:2px; }
.meet-r{ display:grid; grid-template-columns:92px 1fr; gap:16px; padding:14px 0;
  border-top:1px solid var(--line); font-size:clamp(16px,1.5vw,21px); align-items:baseline; }
.meet-r:first-child{ border-top:none; }
.meet-r .rk{ font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; opacity:.5; }
.meet-r .rv .work{ font-family:'Playfair Display',serif; font-style:italic; font-weight:500; }
.meet-r .rv .sub{ display:block; opacity:.55; font-size:.82em; margin-top:4px; }

.meet.past:hover{ transform:none; border-color:var(--line); }
.meet.past .meet-tag{ opacity:.75; }
.meet.past .meet-tag::before{ content:"✓"; color:var(--red); margin-right:8px; letter-spacing:0; }
.meet.past .meet-d{ color:var(--ink); opacity:.42; }
.meet.past .meet-mo, .meet.past .host, .meet.past .meet-rows{ opacity:.62; }
.meet.past .photo{ filter:grayscale(1) contrast(.95); }
.meet.past .host .ringframe{ border-color:var(--line); }
.meet.past .red{ color:inherit; }

/* ============================================================
   ДЛЯ КОГО (dark)
   ============================================================ */
.who{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(34px,6vw,96px); align-items:center; }
.age-stat{ font-weight:700; color:var(--red); line-height:.86; letter-spacing:-3px; white-space:nowrap;
  font-size:clamp(80px,13vw,200px); }
.age-stat .s{ font-family:'Playfair Display',serif; font-style:italic; font-weight:500; }
.age-stat .y{ font-size:.3em; letter-spacing:0; }
.age-note{ font-family:'Playfair Display',serif; font-style:italic; font-weight:500; opacity:.6;
  font-size:clamp(18px,1.8vw,28px); margin-top:20px; }

/* ============================================================
   ФИНАЛ — CTA (dark, центр)
   ============================================================ */
.final{ text-align:center; }
.final .wrap{ display:flex; flex-direction:column; align-items:center; }
.final .bgring{ width:clamp(380px,46vw,660px); height:clamp(380px,46vw,660px);
  left:50%; top:50%; transform:translate(-50%,-50%); }
.final .h1{ position:relative; }
.tg-row{ display:flex; gap:20px; flex-wrap:wrap; justify-content:center; margin-top:48px; position:relative; }
.tg-btn{ display:inline-flex; align-items:center; gap:14px; font-family:'Comfortaa',sans-serif;
  font-weight:700; font-size:clamp(17px,1.7vw,22px); text-decoration:none; color:var(--paper);
  background:var(--red); border:2px solid var(--red); border-radius:100px; padding:16px 32px;
  transition:transform .25s, background .25s; }
.tg-btn .who-n{ font-family:'Playfair Display',serif; font-style:normal; font-weight:500; }
.tg-btn .handle{ opacity:.85; font-weight:400; }
.tg-btn:hover{ transform:translateY(-4px); }
.tg-btn.ghost{ background:transparent; border-color:color-mix(in srgb,var(--paper) 40%,transparent); }
.tg-btn.ghost:hover{ border-color:var(--paper); background:color-mix(in srgb,var(--paper) 8%,transparent); }
.final-note{ margin-top:42px; opacity:.5; font-family:'Playfair Display',serif; font-style:italic;
  font-size:clamp(16px,1.5vw,22px); position:relative; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1280px){
  .meets{ grid-template-columns:1fr 1fr; }
  .meets .meet:nth-child(3){ grid-column:1 / -1; }
}
@media (max-width:980px){
  .aA .hero .wrap{ grid-template-columns:1fr; gap:40px; }
  .hero-orbit{ margin:8px auto 0; width:min(80vw,440px); height:min(80vw,440px); }
  .manifesto-grid, .snob, .who{ grid-template-columns:1fr; gap:32px; }
  .meets{ grid-template-columns:1fr; }
  .act, .act:nth-child(even){ grid-template-columns:1fr; justify-items:center; text-align:center; gap:30px; }
  .act .act-body, .act:nth-child(even) .act-body{ order:2; text-align:center; }
  .act .act-portrait, .act:nth-child(even) .act-portrait{ order:1; }
  .act-head, .act:nth-child(even) .act-head{ justify-content:center; }
  .act-who, .act-note, .act:nth-child(even) .act-who, .act:nth-child(even) .act-note{ margin:0 auto; }
  .mrow{ grid-template-columns:1fr; gap:8px; }
  .nav-cta{ display:none; }
}
@media (max-width:560px){ .hero-orbit .pf-valya{ right:0; } .hero-orbit .pf-roma{ left:0; } }