/* ============================================================
   Частковий перенос нового дизайну на /osu2026.
   Підключається ПІСЛЯ style.css і змінює лише: «Про захід», «Організатори
   та партнери», «Місце проведення» (розділи .about*, .partner*, .venue*),
   а також ефекти: заголовки по словах, плитки напрямів, промінь у «Ціні»,
   паралакс гір. Перший екран, шапка, спікери, програма, FAQ — без змін.
   Блок «стилі розділів» згенеровано з різниці style.css (старий → новий);
   «unset» скидає те, що старе правило задавало, а нове — ні.
   ============================================================ */

/* ─── стилі розділів ─────────────────────────────────────────── */
.about__stats {
  padding: unset;
  margin-bottom: unset;
  background: unset;
  border: unset;
  border-radius: unset;
  display: flex;
  align-items: stretch;
  margin: clamp(48px, 6vw, 72px) 0 clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.about__stat {
  text-align: unset;
  flex: 1;
  padding: 30px 0 26px clamp(16px, 2.6vw, 36px);
}
.about__stat:first-child {
  padding-left: 0;
}
.about__stat-div {
  height: unset;
  flex-shrink: 0;
  width: 1px;
  background: var(--border);
}
.about__stat-num {
  background: unset;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: unset;
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
}
.about__stat-lbl {
  letter-spacing: unset;
  text-transform: unset;
  font-size: .92rem;
  font-weight: 500;
  color: var(--muted);
}
.about__features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px clamp(20px, 3vw, 44px);
}
.about__feature {
  padding: unset;
  overflow: unset;
  background: unset;
  border: unset;
  border-radius: unset;
  position: relative;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.about__feature::before {
  inset: unset;
  pointer-events: unset;
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--hc-ink);
  transition: width .5s var(--ease-out);
}
.about__feature:hover::before {
  width: 100%;
}
.about__feature-icon {
  position: unset;
  align-items: unset;
  justify-content: unset;
  width: unset;
  height: unset;
  background: unset;
  border-radius: unset;
  box-shadow: unset;
  display: flex;
  margin-bottom: 18px;
  color: var(--hc-ink);
}
.about__feature-title {
  position: unset;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink-900);
}
.about__feature-text {
  position: unset;
  font-size: .9rem;
  line-height: 1.7;
  color: #5b6472;
}
.partners__row {
  grid-template-columns: unset;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px 32px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.partner {
  padding: unset;
  background: unset;
  border: unset;
  border-radius: unset;
  display: flex;
  flex: 0 1 150px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  filter: grayscale(1);
  opacity: .62;
  transition: filter var(--t-mid), opacity var(--t-mid);
}
.partner:hover {
  border-color: unset;
  box-shadow: unset;
  transform: unset;
  filter: none;
  opacity: 1;
}
.partner:focus-visible {
  filter: none;
  opacity: 1;
}
.partner__logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}
.partner__logo {
  opacity: unset;
  transition: unset;
  width: auto;
  max-width: 130px;
  height: 40px;
  object-fit: contain;
}
.partner--lg .partner__logo {
  max-width: 160px;
  height: 54px;
}
.partner__name {
  transition: unset;
  font-size: .74rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  color: var(--muted);
}
.venue {
  position: relative;
  overflow: hidden;
}
.venue .container {
  position: relative;
  z-index: 1;
}
.venue__mountains {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: clamp(160px, 22vw, 320px);
  pointer-events: none;
}
.venue__ridge--far {
  fill: rgba(77, 128, 232, .07);
}
.venue__ridge--mid {
  fill: rgba(77, 128, 232, .11);
}
.venue__ridge--near {
  fill: rgba(4, 8, 15, .45);
}
.venue__head {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px clamp(32px, 6vw, 96px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.venue__lead {
  max-width: 30em;
  margin-top: 18px;
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .58);
}
.venue__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.venue__facts div {
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.venue__facts div:nth-child(odd) {
  padding-right: 20px;
}
.venue__facts div:nth-child(even) {
  padding-left: 20px;
  border-left: 1px solid rgba(255, 255, 255, .1);
}
.venue__facts dt {
  margin-bottom: 4px;
  font-size: .78rem;
  color: rgba(255, 255, 255, .42);
}
.venue__facts dd {
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--white);
}
.venue__grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 20px;
}
.venue__map {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.venue__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
}
.venue__routes {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 36px);
  background: rgba(255, 255, 255, .035);
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.venue__routes-title {
  margin-bottom: 8px;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--white);
}
.venue__list {
  list-style: none;
  margin: 0 0 28px;
}
.venue__list li {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.venue__list li:last-child {
  border-bottom: 0;
}
.venue__ic {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--teal-300);
  background: rgba(77, 128, 232, .12);
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px rgba(77, 128, 232, .25);
}
.venue__list b {
  display: block;
  margin-bottom: 2px;
  font-size: .98rem;
  color: var(--white);
}
.venue__list span {
  font-size: .88rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .55);
}
.venue__route-btn {
  margin-top: auto;
  align-self: flex-start;
}
.about__feature:hover {
  border-color: unset;
  box-shadow: unset;
}
.partner:hover .partner__logo {
  opacity: unset;
}
.partner:hover .partner__name {
  color: unset;
}

@media (max-width: 600px) {
  .about__stats {
    gap: unset;
    padding-block: unset;
    flex-wrap: wrap;
  }
  .about__stat {
    flex: 0 0 50%;
    padding: 22px 0 18px;
  }
  .about__stat:nth-child(n+5) {
    border-top: 1px solid var(--border);
  }
  .about__features {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .venue__facts dd {
    font-size: 1rem;
  }
  .venue__route-btn {
    align-self: stretch;
  }
}

@media (max-width: 900px) {
  .partners__row {
    grid-template-columns: unset;
    justify-content: center;
    gap: 28px 40px;
  }
}

@media (max-width: 560px) {
  .partner {
    padding: unset;
    flex-basis: 40%;
  }
  .partners__row {
    grid-template-columns: unset;
    gap: unset;
  }
}

@media (max-width: 1024px) {
  .venue__head {
    grid-template-columns: 1fr;
  }
  .venue__grid {
    grid-template-columns: 1fr;
  }
  .venue__map {
    min-height: 320px;
  }
  .venue__map iframe {
    min-height: 320px;
  }
}

/* Організатори та партнери: логотипи завжди кольорові (в оригіналі нового дизайну
   вони були сірі до наведення) */
.partner { filter: none; opacity: 1; }

/* ─── ефекти ──────────────────────────────────────────────────── */
/* ─── 3. Заголовки з'являються по словах ─────────────────────── */
.fx-words .fx-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.fx-words .fx-w > span { display: inline-block; transform: translateY(108%); transition: transform .95s var(--ease-out); transition-delay: calc(var(--i) * 55ms); }
.fx-words.is-in .fx-w > span { transform: none; }

/* ─── 5. Картки напрямів з'являються при скролі (CSS) ──────────
   Анімація прив'язана до положення картки у вікні, а не до часу.
   translate / scale — окремі властивості, тож hover-transform картки не ламається */
@keyframes fx-tile-in {
  from { opacity: 0; translate: 0 56px; scale: .92; filter: blur(6px); }
  to   { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }
}
@supports (animation-timeline: view()) {
  .tp { animation: fx-tile-in linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
  .tp:nth-child(4n+2) { animation-range: entry 4% cover 31%; }   /* сусіди в ряду — з невеликим зсувом */
  .tp:nth-child(4n+3) { animation-range: entry 8% cover 34%; }
  .tp:nth-child(4n+4) { animation-range: entry 12% cover 37%; }
}
/* Safari до 26 і Firefox: та сама анімація на паузі, JS «перемотує» її через від'ємний delay */
.fx-no-sdt .tp { animation: fx-tile-in 1s linear both paused; animation-delay: calc(var(--p, 0) * -1s); animation-timeline: auto; animation-range: normal; }

/* ─── 6. Підсвітка під курсором на картках напрямів ─────────── */
.tp { --mx: -999px; --my: -999px; }
.tp-glow {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(340px circle at var(--mx) var(--my), rgba(77, 128, 232, .18), transparent 45%);
}
.tp-glow::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: radial-gradient(220px circle at var(--mx) var(--my), rgba(153, 184, 255, .85), transparent 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ─── 7. Світловий промінь по рамці поточної ціни ───────────── */
@property --beam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.wave-beam {
  position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--beam), transparent 62%, var(--teal-300) 80%, #99b8ff 88%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: beam 3.6s linear infinite;
}
@keyframes beam { to { --beam: 360deg; } }

/* ─── 9. Карпати в секції «Місце»: легкий паралакс від скролу ──
   Декоративно: без підтримки animation-timeline гори просто стоять */
@supports (animation-timeline: view()) {
  .venue__ridge { animation: fx-ridge linear both; animation-timeline: view(); animation-range: cover 0% cover 70%; }
  .venue__ridge--far { --rise: 70px; }
  .venue__ridge--mid { --rise: 36px; }
  .venue__ridge--near { --rise: 0px; }
}
@keyframes fx-ridge { from { translate: 0 var(--rise); } to { translate: 0 0; } }

/* ─── Логотипи партнерів на комп'ютері ────────────────────────
   Було: flex із space-between — у неповному останньому ряду логотипи розлітались
   по краях, а колонки в різних рядах не збігались. Тепер сітка з рівними
   колонками: усі ряди вирівняні, неповний останній ряд стоїть під тими самими
   колонками. Планшет і телефон — як вище (по три / по два в ряд). */
@media (min-width: 901px) {
  .partners__row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 36px 24px;
    justify-content: stretch;
  }
  .partner { flex: none; justify-self: center; }
}

/* ─── Планшет: «Про захід» ────────────────────────────────────
   На ~600–1024px чотири показники з "1000+" впиралися в роздільники, а
   чотири переваги стискалися в вузькі колонки. Тепер: показники 2×2, переваги
   у дві колонки, на телефоні — в одну. Правила йдуть після блоків вище. */
@media (max-width: 1024px) {
  .about__stat-num { font-size: clamp(2.4rem, 6.4vw, 3.6rem); }
}
@media (max-width: 900px) {
  .about__features { grid-template-columns: repeat(2, 1fr); }
  /* логотипи організаторів: по три в ряд (5 → 3+2, 6 → 3+3) */
  .partner { flex: 0 1 calc((100% - 80px) / 3); }
  .about__stats { display: grid; grid-template-columns: 1fr 1fr; }
  .about__stat-div { display: none; }
  .about__stat { flex: none; padding: 24px 0 20px clamp(16px, 4vw, 28px); }
  .about__stat:nth-child(1), .about__stat:nth-child(5) { padding-left: 0; }
  .about__stat:nth-child(3), .about__stat:nth-child(7) { border-left: 1px solid var(--border); }
  .about__stat:nth-child(n+5) { border-top: 1px solid var(--border); }
}
@media (max-width: 600px) {
  .about__features { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .partner { flex: 0 1 40%; }
}

/* ─── Менше руху ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fx-words .fx-w > span { transform: none !important; transition: none; }
  .tp, .fx-no-sdt .tp { animation: none; }
  .wave-beam, .venue__ridge { animation: none; }
}