/* =========================================================
   Ортодонт — анімації. Підключається після redesign.css.
   Усе приховане «до появи» працює лише коли є JS (.js-anim).
   ========================================================= */

:root { --ease: cubic-bezier(.2, .7, .2, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); }

/* ---------- Смужка прогресу ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000;
  background: linear-gradient(90deg, var(--sage), #c9a99a, var(--sage-dark));
  transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}

/* ---------- Шапка стискається при прокрутці ---------- */
.header-section > .container { transition: padding .4s var(--ease); }
.header-section.is-scrolled { box-shadow: 0 10px 30px -20px rgba(75,106,94,.4); }
.header-section.is-scrolled > .container { padding-top: 10px; padding-bottom: 10px; }
.main-menu li a { position: relative; }

/* ---------- Кнопки: відблиск + магніт ---------- */
.site-btn, .team-btn {
  position: relative; overflow: hidden; isolation: isolate;
  transform: translate(var(--bx, 0px), var(--by, 0px));
  transition: transform .35s var(--ease-spring), background .3s, color .3s, box-shadow .3s;
}
.site-btn:hover { transform: translate(var(--bx, 0px), calc(var(--by, 0px) - 2px)); }
.site-btn::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); transition: left .7s var(--ease);
}
.site-btn:hover::before { left: 130%; }
.hs-item .site-btn { animation: btnPulse 3.2s 2s ease-in-out infinite; }
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 10px 24px -12px rgba(95,133,116,.8), 0 0 0 0 rgba(143,174,159,.45); }
  50% { box-shadow: 0 10px 24px -12px rgba(95,133,116,.8), 0 0 0 14px rgba(143,174,159,0); }
}

/* ---------- Hero: слова виринають, фото «дихає» ---------- */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w > span { display: inline-block; }
.js-anim .owl-item .hs-item h2 .w > span { transform: translateY(110%); }
.js-anim .owl-item.active .hs-item h2 .w > span { animation: wordUp .9s var(--ease) both; animation-delay: calc(var(--i) * 80ms + .15s); }
.js-anim .page-info-section h2 .w > span { transform: translateY(110%); }
.js-anim .page-info-section.is-in h2 .w > span { animation: wordUp .9s var(--ease) both; animation-delay: calc(var(--i) * 80ms + .2s); }
@keyframes wordUp { from { transform: translateY(110%) rotate(4deg); } to { transform: none; } }

.owl-item.active .hs-item p.fons { animation: fadeUp 1s .55s var(--ease) both; }
.owl-item.active .hs-item .site-btn { animation: fadeUp 1s .75s var(--ease) both, btnPulse 3.2s 2.5s ease-in-out infinite; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* фото повільно наближається (ефект Кена Бернса) і злегка рухається за курсором */
.hs-item::after { transform: scale(1.02); transform-origin: 70% 40%; }
.owl-item.active .hs-item::after { animation: kenBurns 9s ease-out both; }
@keyframes kenBurns { from { transform: scale(1.14); } to { transform: scale(1.02); } }
.hs-item > .container { transform: translate(calc(var(--mx, 0) * 10px), calc(var(--my, 0) * 6px)); transition: transform 1s var(--ease); }

/* декоративний шар: білі іскорки й світлі кола поверх фото */
.hero-deco {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
  transform: translate(calc(var(--mx, 0) * -22px), calc(var(--my, 0) * -16px));
  transition: transform 1s var(--ease);
}
.hero-deco::before, .hero-deco::after {
  content: ""; position: absolute; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28);
  animation: ringPulse 7s ease-in-out infinite;
}
.hero-deco::before { width: 520px; height: 520px; left: -180px; top: -160px; }
.hero-deco::after { width: 280px; height: 280px; left: 38%; bottom: -120px; animation-delay: -3s; }
@keyframes ringPulse { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.08); opacity: 1; } }
.sparkle { position: absolute; display: block; width: 26px; height: 26px; color: #fff; animation: twinkle 3.4s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(255,255,255,.7)); }
.sparkle svg { width: 100%; height: 100%; fill: currentColor; }
.sparkle.s1 { left: 52%; top: 22%; }
.sparkle.s2 { left: 8%; bottom: 26%; width: 16px; height: 16px; animation-delay: -1.2s; }
.sparkle.s3 { left: 44%; top: 62%; width: 14px; height: 14px; animation-delay: -2.3s; color: #f0d9cf; }
@keyframes twinkle {
  0%, 100% { transform: scale(.4) rotate(0deg); opacity: .15; }
  50% { transform: scale(1.1) rotate(90deg); opacity: 1; }
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ---------- Поява під час прокрутки ---------- */
.js-anim .reveal { transition: opacity 1s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s), clip-path 1.2s var(--ease) var(--d, 0s); }
.js-anim .reveal-up:not(.is-in) { opacity: 0; transform: translateY(46px); }
.js-anim .reveal-zoom { clip-path: inset(0 0 0 0 round 28px); }
.js-anim .reveal-zoom:not(.is-in) { clip-path: inset(14% 14% 14% 14% round 28px); opacity: 0; transform: scale(1.06); }
.js-anim .facts-section .fact.reveal:not(.is-in) { transform: translateY(46px) scale(.94); }

/* риска під заголовком «розтягується» */
.js-anim .heading__after::after { transition: width 1s .35s var(--ease); }
.js-anim .reveal:not(.is-in) .heading__after::after,
.js-anim .heading__after.reveal:not(.is-in)::after { width: 0; }

/* ---------- Картки з нахилом і «прожектором» ---------- */
.tilt { transform-style: preserve-3d; transition: transform .5s var(--ease); }
.services-section .service.tilt.is-in { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease), opacity 1s var(--ease); }
.services-section .service.tilt::before {
  background: radial-gradient(320px circle at var(--px, 50%) var(--py, 0%), rgba(143,174,159,.18), transparent 60%), var(--surface);
}
.sf-box.tilt, .doc-card.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.sf-box-warp:nth-child(n) .sf-box.tilt:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); }
.service:hover .service-icon { animation: wobble .8s var(--ease-spring); }
.sf-box:hover i { animation: wobble .8s var(--ease-spring); display: inline-block; }
@keyframes wobble {
  0% { transform: rotate(0) scale(1); }
  30% { transform: rotate(-10deg) scale(1.12); }
  60% { transform: rotate(7deg) scale(1.05); }
  100% { transform: rotate(0) scale(1); }
}

/* ---------- Цифри: іконки погойдуються ---------- */
.facts-section .fact i { display: inline-block; animation: bob 4s ease-in-out infinite; }
.facts-section .fact:nth-child(2) i { animation-delay: -1s; }
.facts-section .fact:nth-child(3) i { animation-delay: -2s; }
.facts-section .fact:nth-child(4) i { animation-delay: -3s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px) rotate(-4deg); } }
.facts-section .fact h2 { font-variant-numeric: tabular-nums; }

/* хвилі над і під блоком з цифрами */
.facts-section { overflow: hidden; }
.facts-section::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 46px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v18c-100 22-200 22-300 0S700-4 600 18 400 40 300 18 100-4 0 18z' fill='%23faf7f3'/%3E%3C/svg%3E") repeat-x 0 0 / 1200px 46px;
  animation: waveX 22s linear infinite;
}
@keyframes waveX { to { background-position: 1200px 0; } }

/* ---------- Біжучий рядок ---------- */
.marquee {
  overflow: hidden; background: var(--sage-dark); color: #fff;
  padding: 22px 0; transform: rotate(-1.2deg); margin: -10px -20px 40px; position: relative; z-index: 2;
  box-shadow: 0 20px 40px -30px rgba(75,106,94,.6);
}
.marquee-track { display: flex; align-items: center; gap: 34px; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 32px); font-style: italic; white-space: nowrap; }
.marquee i { display: inline-flex; width: 18px; height: 18px; color: #f0d9cf; animation: spin 6s linear infinite; }
.marquee i svg { width: 100%; height: 100%; fill: currentColor; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Галерея: підпис виїжджає ---------- */
.text-img { transform: translate3d(0, -20%, 0); transition: opacity .4s, transform .5s var(--ease); }
.card__inner:hover .text-img { transform: translate3d(0, -50%, 0); }
.card__inner .work__item { transition: transform .5s var(--ease), box-shadow .5s; }
.card__inner:hover .work__item { transform: translateY(-6px) rotate(-1deg); box-shadow: var(--shadow-lg); }
.gallery-section .card__inner:nth-child(even):hover .work__item { transform: translateY(-6px) rotate(1deg); }

/* ---------- Відгуки ---------- */
.owl-item.center .testimonial-item .quta { animation: quotePop 2.8s ease-in-out infinite; }
@keyframes quotePop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12) rotate(-6deg); } }
.testimonial-item .ts-content { transition: box-shadow .5s var(--ease), padding .5s var(--ease), transform .5s var(--ease); }
.owl-item.center .testimonial-item .ts-content { transform: translateY(-8px); }

/* ---------- Футер: хвиля зверху ---------- */
.footer-top-section::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 46px; z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v18c-100 22-200 22-300 0S700-4 600 18 400 40 300 18 100-4 0 18z' fill='%23faf7f3'/%3E%3C/svg%3E") repeat-x 0 0 / 1200px 46px;
  animation: waveX 30s linear infinite reverse;
}
.fw-links ul li a { display: inline-block; transition: transform .3s var(--ease), color .3s; }
.fw-links ul li a:hover { transform: translateX(6px); }
.footer-widget .fw-social a { transition: transform .4s var(--ease-spring), background .3s, color .3s; }
.footer-widget .fw-social a:hover { transform: translateY(-4px) rotate(-8deg); }

/* ---------- Акордеон ---------- */
.acc-body { animation: none; overflow: hidden; }
.acc-summary { transition: color .3s, padding .4s var(--ease); }
.acc-summary:hover { padding-left: 34px; }
.acc-icon { transition: background .3s, transform .5s var(--ease-spring); }
.acc-item[open] .acc-icon { transform: rotate(180deg); }

/* ---------- Інфо-смуга: іконки підстрибують ---------- */
.hi-item:hover .hs-icon { animation: wobble .8s var(--ease-spring); }

/* ---------- Телефони й планшети ---------- */
@media (max-width: 991px) {
  .sparkle.s1 { left: 80%; top: 12%; }
  .hero-deco::before { width: 300px; height: 300px; }
}

/* ---------- Повага до налаштувань «менше руху» ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .marquee-track { transform: none; }
}

/* слова заголовка успадковують колір заголовка */
.hs-item h2 .w, .hs-item h2 .w > span,
.page-info-section h2 .w, .page-info-section h2 .w > span { color: inherit !important; }
/* власна поява тексту в банері замість старої з шаблону */
.js-anim .hs-item h2, .js-anim .hs-item p, .js-anim .hs-item .site-btn { top: 0 !important; transition: none !important; }
.js-anim .hs-item h2 { opacity: 1 !important; }
/* нахилений біжучий рядок не повинен давати горизонтальну прокрутку */
@media (max-width: 991px) { .marquee { margin: 0 0 30px !important; transform: none; } }
/* логотип трохи зменшується, коли шапка «стискається» */
.site-logo__img { transition: height .4s var(--ease), transform .5s var(--ease-spring); }
.ba-logo { transition: font-size .4s var(--ease); }
.header-section.is-scrolled .site-logo__img { height: 52px; }
.header-section.is-scrolled .ba-logo { font-size: 32px; }