/* ============================================================
   Ария Огнева — главная, раздел «60 минут в Zoom» (#format)
   Плашки-факты + лента из пяти стеклянных кристаллов — шаги созвона.
   Лента листается пальцем справа налево (scroll-snap), края тают (mask-image),
   карточка по тапу переворачивается (rotateY), на обороте — подробности.
   Форма — как у лесенки курса (info.css → .mod-h): огранённая крыша, рёбра призмы,
   срезанные нижние углы; тело — стекло на градиентах, без backdrop-filter.
   Анимации — только transform и opacity. Логика — assets/js/route.js.
   ============================================================ */

#format{
  /* стекло и грани кристалла — светлая тема; цвета — тройки RGB палитры из site.css (радужная / прежняя розовая) */
  --rt-fill:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.46));
  --rt-fill-b:radial-gradient(100% 46% at 50% 106%,rgba(var(--glow-rgb),.17),rgba(var(--glow-rgb),0) 72%),linear-gradient(180deg,rgba(255,255,255,.93),rgba(var(--wt-rgb),.8));
  --rt-shade:rgba(var(--shade-rgb),.24);
  --rt-glow:rgba(var(--glow-rgb),.42);
  --rt-hi:rgba(255,255,255,.72); --rt-lo:rgba(var(--shade-rgb),.05); --rt-ln:rgba(var(--edge-rgb),.2);
  --rt-glint:rgba(255,255,255,.62);
  --rt-chip:linear-gradient(180deg,rgba(255,255,255,.84),rgba(var(--tint-rgb),.5));
  --rt-chip-rim:inset 0 1px 0 rgba(255,255,255,1),inset 0 0 0 1px rgba(var(--rose-rgb),.5),inset 0 -4px 10px rgba(var(--rose2-rgb),.22);
  --rt-get:linear-gradient(100deg,rgba(var(--glow-rgb),.09),rgba(169,228,239,.17));
  --rt-flame:radial-gradient(circle at 50% 72%,#fff 0 14%,#ffc2dc 30%,#ff3d8b 52%,transparent 74%);
  --rt-acc:var(--pink-2);
  /* геометрия: на ПК видно четыре карточки и край пятой */
  --rt-w:clamp(270px,calc((100vw - max(var(--gut),(100vw - var(--wrap)) / 2) - 80px) / 4.3),300px);
  --rt-gap:20px;
  --rt-roof:38px; --rt-ch:12px;
  --rt-cut:polygon(0 var(--rt-roof),50% 0,100% var(--rt-roof),100% calc(100% - var(--rt-ch)),calc(100% - var(--rt-ch)) 100%,var(--rt-ch) 100%,0 calc(100% - var(--rt-ch)));
}
html[data-theme="night"] #format{
  --rt-fill:linear-gradient(180deg,rgba(56,19,41,.78),rgba(30,10,22,.62));
  --rt-fill-b:radial-gradient(100% 46% at 50% 106%,rgba(255,61,139,.24),rgba(255,61,139,0) 72%),linear-gradient(180deg,rgba(62,21,45,.95),rgba(34,11,25,.92));
  --rt-shade:rgba(0,0,0,.55);
  --rt-glow:rgba(255,61,139,.4);
  --rt-hi:rgba(255,179,209,.07); --rt-lo:rgba(0,0,0,.2); --rt-ln:rgba(255,143,189,.22);
  --rt-glint:rgba(255,255,255,.15);
  --rt-chip:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,92,158,.1));
  --rt-chip-rim:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,179,209,.2);
  --rt-get:linear-gradient(100deg,rgba(255,61,139,.16),rgba(169,228,239,.06));
  --rt-acc:var(--pink);
}

/* ---------- плашки-факты ---------- */
.rt-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 clamp(34px,4vw,50px);padding:0;list-style:none}
.rt-fact{position:relative;isolation:isolate;display:flex;align-items:center;gap:14px;min-width:0;padding:14px 18px 14px 14px;border-radius:20px;
  background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--glass-rim),var(--shadow-s)}
.rt-fact::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--gloss);pointer-events:none}
.rt-ic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:var(--rt-chip);box-shadow:var(--rt-chip-rim)}
.rt-ic svg{width:24px;height:24px;fill:none;stroke:var(--pink-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rt-fact>span{min-width:0}
.rt-fact b{display:block;font-family:var(--f-display);font-weight:var(--fw-display);font-size:20px;line-height:1.15}
.rt-fact small{display:block;margin-top:3px;font-size:14px;line-height:1.3;color:var(--ink-2)}

/* ---------- подпись и стрелки над лентой ---------- */
.rt-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.rt-cap{margin:0;display:grid;gap:5px}
.rt-cap b{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-display);font-style:var(--em-style);font-weight:var(--fw-display);font-size:21px;line-height:1.2;color:var(--pink-2);text-wrap:balance}
.rt-cap b::before{content:"";flex:none;width:15px;height:20px;background:var(--crystal) center/contain no-repeat}
.rt-cap span{font-size:15px;line-height:1.4;color:var(--ink-3)}
.rt-arrows{flex:none}
.rt-arrows button{transition:transform .3s var(--ease),opacity .3s}
.rt-arrows button[data-route="-1"]{transform:scaleX(-1)}
.rt-arrows button[data-route="-1"]:hover{transform:scaleX(-1) translateY(-2px)}
.rt-arrows button[aria-disabled="true"]{opacity:.38;cursor:default}
.rt-arrows button[data-route="1"][aria-disabled="true"]:hover{transform:none}
.rt-arrows button[data-route="-1"][aria-disabled="true"]:hover{transform:scaleX(-1)}
#format.rt-static .rt-arrows{visibility:hidden}

/* ---------- лента: во всю ширину экрана, первая карточка — по краю текста ---------- */
.rt-track{--pl:max(var(--gut),calc((100% - var(--wrap)) / 2));
  --fl:clamp(14px,var(--pl),160px); --fr:clamp(44px,var(--pl),160px);
  position:relative;display:flex;align-items:stretch;gap:var(--rt-gap);margin:0;padding:40px var(--pl) 46px;list-style:none;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pl);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%)}
.rt-track::-webkit-scrollbar{display:none}
.rt-track.rt-drag{cursor:grabbing;scroll-snap-type:none;-webkit-user-select:none;user-select:none}
.rt-track.rt-drag .rt-card{pointer-events:none}
@media (hover:hover) and (pointer:fine){ .rt-track{cursor:grab} }
.rt-item{position:relative;flex:none;display:flex;width:var(--rt-w);scroll-snap-align:start}

/* карточки въезжают справа налево, по очереди */
.rt-track.rv{transform:none}
.rt-track.rv .rt-item{opacity:0}
.rt-track.rv.in .rt-item{opacity:1;animation:rtIn 1s var(--ease) both;animation-delay:calc(var(--i) * 90ms)}
@keyframes rtIn{from{opacity:0;translate:72px 0}to{opacity:1;translate:0 0}}

/* ---------- карточка-кристалл ---------- */
.rt-card{position:relative;isolation:isolate;display:flex;width:100%;margin:0;padding:0;border:0;background:none;color:var(--ink);text-align:left;
  font:inherit;perspective:1500px;-webkit-tap-highlight-color:transparent;transition:transform .5s var(--ease)}
.rt-card:focus-visible{outline:2px solid var(--pink);outline-offset:6px}
/* тень-подложка (filter на самой кнопке сломал бы стекло) */
.rt-card::before{content:"";position:absolute;left:7%;right:7%;bottom:-17px;height:30px;z-index:-2;border-radius:50%;
  background:radial-gradient(closest-side,var(--rt-shade),transparent);transition:transform .5s var(--ease)}
/* огненный ореол перевёрнутой карточки */
.rt-card::after{content:"";position:absolute;inset:-18px -20px -30px;z-index:-1;border-radius:46%;
  background:radial-gradient(closest-side,var(--rt-glow) 62%,transparent);opacity:0;transition:opacity .6s var(--ease)}
.rt-card[aria-expanded="true"]::after{opacity:1}
@media (hover:hover){
  .rt-card:hover{transform:translateY(-6px)}
  .rt-card:hover::before{transform:scaleX(.9)}
  .rt-card:hover .rt-tap::before{background-image:var(--crystal-lit)}
}

/* переворот: обе стороны в одной ячейке — высота не прыгает */
.rt-in{flex:1 1 auto;min-width:0;display:grid;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transition:transform .72s cubic-bezier(.45,.05,.22,1)}
.rt-card[aria-expanded="true"] .rt-in{transform:rotateY(180deg)}
.rt-face{grid-area:1/1;position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;min-width:0;
  padding:calc(var(--rt-roof) + 18px) 25px 24px;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.rt-front{transform:rotateY(0deg)}
.rt-back{transform:rotateY(180deg)}

/* форма: огранённая крыша, рёбра призмы, срезанные нижние углы; кромка — слой под стеклом.
   07.11: рёбра призмы — на 6 % от края (было 13 %), чтобы не резали текст (мама: «кристаллы наезжают на текст») */
.rt-sh{position:absolute;inset:0;z-index:-1;overflow:hidden;-webkit-clip-path:var(--rt-cut);clip-path:var(--rt-cut);background:var(--grad-iris)}
.rt-sh::before,.rt-sh::after{content:"";position:absolute;inset:1.5px;-webkit-clip-path:var(--rt-cut);clip-path:var(--rt-cut)}
.rt-sh::before{background:var(--rt-fill)}
.rt-sh::after{background:
  linear-gradient(to bottom right,transparent calc(50% - .7px),var(--rt-ln) 50%,transparent calc(50% + .7px)) 10.714% 0/44% var(--rt-roof) no-repeat,
  linear-gradient(to bottom left,transparent calc(50% - .7px),var(--rt-ln) 50%,transparent calc(50% + .7px)) 89.286% 0/44% var(--rt-roof) no-repeat,
  linear-gradient(180deg,var(--rt-hi),transparent) 0 0/100% var(--rt-roof) no-repeat,
  linear-gradient(var(--rt-ln),var(--rt-ln)) 0 calc(var(--rt-roof) - 1px)/100% 1px no-repeat,
  linear-gradient(112deg,transparent 22%,rgba(255,255,255,.3) 30%,transparent 38%) 0 var(--rt-roof)/100% 100% no-repeat,
  linear-gradient(90deg,var(--rt-hi) 0 6%,var(--rt-ln) 6% calc(6% + 1px),transparent calc(6% + 1px) calc(94% - 1px),var(--rt-ln) calc(94% - 1px) 94%,var(--rt-lo) 94%) 0 var(--rt-roof)/100% 100% no-repeat}
/* оборот: кромка-призма (в розовой палитре — огненная) и тёплое стекло */
.rt-back .rt-sh{background:var(--grad-rim)}
.rt-back .rt-sh::before,.rt-back .rt-sh::after{inset:2px}
.rt-back .rt-sh::before{background:var(--rt-fill-b)}
/* блик пробегает по стеклу лицевой стороны */
.rt-gl{position:absolute;inset:0;background:linear-gradient(104deg,transparent 36%,var(--rt-glint) 50%,transparent 64%);
  transform:translateX(-110%);animation:rtGlint 9s ease-in-out infinite;animation-delay:calc(var(--i) * .7s + 1.5s)}
@keyframes rtGlint{0%,74%{transform:translateX(-110%)}100%{transform:translateX(110%)}}

/* лицевая сторона */
.rt-n{display:block;margin:0 0 12px -.02em;padding:0 .08em 0 .02em;font-family:var(--f-display);font-style:var(--em-style);font-weight:var(--fw-display);font-size:46px;line-height:1;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.rt-t{display:block;font-family:var(--f-display);font-weight:var(--fw-display);font-size:23px;line-height:1.16;text-wrap:balance}
.rt-s{display:block;margin:10px 0 18px;font-size:15px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
/* подсказка «нажмите» — маленькая стеклянная плашка с кристалликом */
.rt-tap{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding:7px 13px 7px 10px;border-radius:999px;background:var(--rt-chip);box-shadow:var(--rt-chip-rim);font-size:13px;font-weight:600;line-height:1;color:var(--ink-2)}
.rt-tap::before{content:"";flex:none;width:12px;height:16px;background:var(--crystal) center/contain no-repeat;animation:rtTap 2.6s ease-in-out infinite}
@keyframes rtTap{0%,100%{transform:none}50%{transform:translateY(-3px) scale(1.14)}}

/* оборот */
.rt-bn{display:block;margin-bottom:12px;font-family:var(--f-display);font-style:var(--em-style);font-weight:var(--fw-display);font-size:17px;line-height:1.25;color:var(--rt-acc);text-wrap:balance}
.rt-lis{display:block;margin-bottom:16px}
.rt-li{position:relative;display:block;padding-left:19px;font-size:14.5px;line-height:1.45;color:var(--ink-2);text-wrap:balance}
.rt-li+.rt-li{margin-top:7px}
.rt-li::before{content:"";position:absolute;left:0;top:.3em;width:9px;height:12px;background:var(--crystal-lit) center/contain no-repeat}
.rt-get{display:block;margin-top:auto;padding:11px 13px;border-radius:14px;background:var(--rt-get);font-size:14px;line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.rt-get b{font-weight:700;color:var(--ink)}

/* огонёк над верхушкой перевёрнутого кристалла */
.rt-fl{position:absolute;left:50%;top:-34px;width:26px;height:33px;margin-left:-13px;pointer-events:none;
  background:var(--rt-flame);-webkit-mask:var(--flame-i) center bottom/contain no-repeat;mask:var(--flame-i) center bottom/contain no-repeat;
  opacity:0;transform-origin:50% 100%;transition:opacity .3s}
.rt-card[aria-expanded="true"] .rt-fl{opacity:1;transition:opacity .45s .45s;animation:rtFlame .8s ease-in-out infinite alternate}
@keyframes rtFlame{0%{transform:scale(1,1) skewX(0)}50%{transform:scale(.93,1.08) skewX(2deg)}100%{transform:scale(1.04,.95) skewX(-2deg)}}

/* ---------- под лентой (телефон): точки и «Листайте» ---------- */
.rt-foot{display:none;align-items:center;justify-content:space-between;gap:16px;margin-top:-16px}
.rt-dots{display:flex;gap:8px}
.rt-dots i{width:10px;height:14px;background:var(--crystal) center/contain no-repeat;opacity:.42;transition:opacity .35s,transform .45s var(--ease)}
.rt-dots i.on{background-image:var(--crystal-lit);opacity:1;transform:translateY(-2px) scale(1.25)}
.rt-swipe{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--ink-3);transition:opacity .4s}
.rt-swipe .arr{animation:rtNudge 1.8s ease-in-out infinite}
@keyframes rtNudge{0%,100%{transform:none}50%{transform:translateX(5px)}}
#format.rt-end .rt-swipe{opacity:.35}
#format.rt-static .rt-foot{display:none}

/* ---------- адаптив ---------- */
@media (max-width:1080px){
  .rt-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  #format{--rt-w:min(72vw,330px);--rt-gap:14px;--rt-roof:30px;--rt-ch:10px}
  .rt-arrows{display:none}
  .rt-track{padding:36px var(--pl) 42px}
  .rt-foot{display:flex}
}
@media (max-width:560px){
  /* правая колонка шире: «План текстом» должен влезть в одну строку */
  .rt-facts{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:10px}
  .rt-fact{gap:9px;padding:12px 10px 12px 10px;border-radius:18px}
  .rt-ic{width:36px;height:36px;border-radius:12px}
  .rt-ic svg{width:20px;height:20px}
  .rt-fact b{font-size:17px}
  .rt-fact small{margin-top:2px;font-size:12.5px}
  .rt-cap b{font-size:19px}
  .rt-cap span{font-size:14px}
  .rt-face{padding:calc(var(--rt-roof) + 15px) 22px 20px}
  .rt-n{margin-bottom:10px;font-size:40px}
  .rt-t{font-size:21px}
  .rt-s{font-size:14.5px}
  .rt-li{font-size:14px}
  .rt-get{font-size:13.5px}
}
/* узкие телефоны (360–380): подписи плашек — в одну строку */
@media (max-width:380px){
  .rt-facts{grid-template-columns:minmax(0,1fr) minmax(0,1.22fr)}
  .rt-fact{gap:8px;padding:10px 8px 10px 9px}
  .rt-ic{width:32px;height:32px;border-radius:11px}
  .rt-ic svg{width:18px;height:18px}
  .rt-fact b{font-size:16px}
  .rt-fact small{font-size:12px}
}