/* Хʼюстон — згортання глибоких розділів. Версія 2: «рентген-архів».
 *
 * Версія 1 була кнопка. Кнопка нічого не каже про те, що під нею, і
 * виглядає як чужа деталь, приклеєна під текстом. Тут інша ідея:
 * розділ — це знімок у теці, а шухляда — край плівки.
 *
 * Три речі роблять образ:
 *   1) перфорація на зрізі. Дірки як на рентгенівській плівці — саме
 *      те, що пацієнт бачив у клініці. Текст не «обрізаний», він іде
 *      під край плівки;
 *   2) номер справи в Namu 1930, тим самим шрифтом, що заголовки. Не
 *      підключаємо жодного нового шрифту: обидва вже в сторінці;
 *   3) промінь. При наведенні лаймова смуга проходить уздовж лінійки
 *      зліва направо, при розкритті — згори вниз по розділу.
 *
 * Ніяких заокруглених пігулок і тіней: це прилад, а не кнопка. Лінійка
 * в 1 px, трековані капітелі, діафрагма замість плюса.
 */

:root{
  --hxf-h:380px;                       /* скільки видно у згорнутому стані */
  --hxf-rule:rgba(232,228,220,.14);
  --hxf-hole:#050403;
}
@media(min-width:900px){:root{--hxf-h:460px}}

/* ---------- згорнутий розділ ---------- */
html.hx-on section[data-fold]{
  max-height:var(--hxf-h);
  overflow:hidden;
  position:relative;
  transition:max-height .5s cubic-bezier(.22,.61,.36,1);
  /* текст не обривається — він іде під край плівки */
  -webkit-mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.28) 86%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.28) 86%,transparent 100%)}
html.hx-on section[data-fold].hxf-open{
  -webkit-mask-image:none;mask-image:none}
html.hx-on section[data-fold].hxf-done{max-height:none;overflow:visible}

/* ---------- перфорація на зрізі ----------
   Дірка — не намальоване коло, а «пробите» темніше за тло плюс тонкий
   світлий край згори: так вона читається як отвір, а не пляма. */
html.hx-on .hxf-edge{
  position:absolute;left:0;right:0;bottom:0;height:15px;pointer-events:none;
  background-image:
    linear-gradient(180deg,rgba(232,228,220,.10),transparent 2px),
    radial-gradient(circle 3.2px at 11px 8px,
      var(--hxf-hole) 0 99%, transparent 100%);
  background-size:100% 100%, 24px 15px;
  background-repeat:no-repeat, repeat-x;
  opacity:.9;z-index:4}
html.hx-on section[data-fold].hxf-open .hxf-edge{opacity:0;transition:opacity .3s ease}

/* ---------- шухляда ----------
 * Версія 2 була підпис із номером. Виглядало як заголовок, а не як
 * елемент керування: на телефоні наведення немає взагалі, тож стан
 * спокою мусить сам казати «мене можна натиснути».
 *
 * Тому: власна поверхня з межею, лаймовий торець ліворуч, і праворуч
 * окремий жетон зі словом «Показати» та шевроном. Слово-дія читається
 * як кнопка надійніше за будь-який знак. Шеврон обертається на 180°,
 * коли розділ відкрито.
 */
.hxf-btn{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:18px;width:100%;min-height:64px;
  margin:0 0 42px;padding:0 16px 0 20px;
  background:linear-gradient(180deg,rgba(255,255,255,.058),rgba(255,255,255,.024));
  border:1px solid rgba(232,228,220,.16);border-radius:12px;
  color:var(--cream,#eae7e0);font:inherit;text-align:left;cursor:pointer;
  position:relative;overflow:hidden;
  transition:background .24s ease,border-color .24s ease,transform .18s ease}
.hxf-btn:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.088),rgba(255,255,255,.04));
  border-color:rgba(182,212,70,.45)}
.hxf-btn:active{transform:scale(.995);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015))}
.hxf-btn:focus-visible{outline:2px solid rgba(182,212,70,.9);outline-offset:3px}

/* лаймовий торець — видно навіть периферійним зором */
.hxf-btn::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,rgba(182,212,70,.95),rgba(158,188,50,.55));
  transition:width .24s ease}
.hxf-btn:hover::before{width:5px}

/* номер справи — той самий шрифт, що заголовки розділів */
.hxf-n{
  font-family:"Namu 1930",Impact,sans-serif;
  font-size:24px;line-height:1;font-weight:600;
  color:rgba(182,212,70,.62);
  font-variant-numeric:tabular-nums;
  transition:color .24s ease}
.hxf-btn:hover .hxf-n{color:var(--lime,#9ebc32)}

/* назва розділу — трековані капітелі, як eyebrow сайту */
.hxf-t{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(232,228,220,.82);line-height:1.45}

/* жетон дії: слово плюс шеврон */
.hxf-go{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 13px;border-radius:100px;
  background:rgba(182,212,70,.12);
  border:1px solid rgba(182,212,70,.4);
  transition:background .24s ease,border-color .24s ease}
.hxf-btn:hover .hxf-go{background:rgba(182,212,70,.2);border-color:rgba(182,212,70,.65)}
.hxf-go-t{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--lime,#9ebc32);white-space:nowrap}
.hxf-ch{
  width:9px;height:9px;flex:0 0 9px;
  border-right:1.5px solid var(--lime,#9ebc32);
  border-bottom:1.5px solid var(--lime,#9ebc32);
  transform:translateY(-2px) rotate(45deg);
  transition:transform .32s cubic-bezier(.22,.61,.36,1)}
.hxf-btn[aria-expanded="true"] .hxf-ch{transform:translateY(1px) rotate(225deg)}

/* промінь уздовж верхньої межі при наведенні */
.hxf-btn::after{
  content:"";position:absolute;left:0;top:0;height:1px;width:38%;
  background:linear-gradient(90deg,transparent,rgba(182,212,70,.95),transparent);
  transform:translateX(-110%);opacity:0}
@media(hover:hover){
  .hxf-btn:hover::after{animation:hxf-run .78s cubic-bezier(.4,0,.2,1) both}
}
@keyframes hxf-run{
  0%{transform:translateX(-110%);opacity:0}
  18%{opacity:1}
  100%{transform:translateX(300%);opacity:0}
}

/* вузький екран: жетон лишається, назва переноситься */
@media(max-width:560px){
  .hxf-btn{gap:14px;padding:0 12px 0 16px;min-height:60px}
  .hxf-n{font-size:20px}
  .hxf-t{font-size:11px;letter-spacing:.1em}
  .hxf-go{padding:7px 11px;gap:7px}
  .hxf-go-t{font-size:10px}
}
@media(max-width:380px){
  .hxf-go-t{display:none}
  .hxf-go{padding:8px;border-radius:50%}
}

/* ---------- прохід сканера при розкритті ---------- */
html.hx-on section[data-fold] .hxf-scan{
  position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(182,212,70,.75),transparent);
  opacity:0;z-index:5}
html.hx-on section[data-fold].hxf-scanning .hxf-scan{animation:hxf-scan .68s ease-out both}
@keyframes hxf-scan{
  0%{opacity:0;transform:translateY(0)}
  12%{opacity:1}
  100%{opacity:0;transform:translateY(var(--hxf-scan-to,600px))}
}

@media(prefers-reduced-motion:reduce){
  html.hx-on section[data-fold]{transition:none}
  html.hx-on section[data-fold].hxf-scanning .hxf-scan{animation:none}
  .hxf-btn::after{animation:none!important}
  .hxf-ch,.hxf-go,.hxf-n,.hxf-t,.hxf-btn,.hxf-btn::before{transition:none}
  .hxf-btn:active{transform:none}
}

/* Обгортка кнопки повторює колонку тексту сторінки: .wrap дає
   max-width і бічні поля. Без неї кнопка розтягувалась на все вікно,
   а текст лишався у 1160 px — вони не збігалися. */
.hxf-wrap{margin-top:-8px}

/* --- висота прев'ю по розділах ---
   Зріз має лягати в проміжок між рядками, а не крізь картку.
   Числа виміряні в браузері; при зміні тексту розділу — переміряти. */
@media(min-width:900px){
  #pros-0{--hxf-h:667px}
  #yak-stavlyat{--hxf-h:638px}
  #koly-koronka{--hxf-h:586px}
  #dity{--hxf-h:592px}
  #fold-orthodontics-3{--hxf-h:632px}
  #fold-microscope-0{--hxf-h:606px}
  #fold-microscope-1{--hxf-h:698px}
  #fold-microscope-2{--hxf-h:653px}
  #fold-microscope-3{--hxf-h:700px}
  #whit-0{--hxf-h:589px}
  #whit-1{--hxf-h:539px}
  #whit-2{--hxf-h:630px}
  #fold-therapy-0{--hxf-h:590px}
  #vydy-kariesu{--hxf-h:670px}
  #chomu-yakisno{--hxf-h:600px}
  #surg-1{--hxf-h:590px}
  #fold-surgery-1{--hxf-h:660px}
  #vydalennya{--hxf-h:740px}
  #osnova{--hxf-h:853px}
  #chystka-vidy{--hxf-h:643px}
  #fold-endodontics-0{--hxf-h:665px}
  #prohnoz{--hxf-h:628px}
}
@media(max-width:899px){
  #pros-0{--hxf-h:535px}
  #yak-stavlyat{--hxf-h:508px}
  #koly-koronka{--hxf-h:548px}
  #dity{--hxf-h:553px}
  #fold-orthodontics-3{--hxf-h:537px}
  #fold-microscope-0{--hxf-h:504px}
  #fold-microscope-1{--hxf-h:540px}
  #fold-microscope-2{--hxf-h:547px}
  #fold-microscope-3{--hxf-h:603px}
  #whit-0{--hxf-h:523px}
  #whit-1{--hxf-h:540px}
  #whit-2{--hxf-h:682px}
  #fold-therapy-0{--hxf-h:503px}
  #vydy-kariesu{--hxf-h:516px}
  #chomu-yakisno{--hxf-h:556px}
  #surg-1{--hxf-h:594px}
  #fold-surgery-1{--hxf-h:516px}
  #vydalennya{--hxf-h:518px}
  #osnova{--hxf-h:510px}
  #chystka-vidy{--hxf-h:692px}
  #fold-endodontics-0{--hxf-h:508px}
  #prohnoz{--hxf-h:929px}
}