/* owl.css — сова-помічниця ліцею «Самара» (див. owl.js) */

.owl {
  --owl-css: 1;               /* маркер: owl.js чекає, доки цей файл застосується */
  --owl-size: 124px;          /* ширина малюнка сови */
  --owl-logo: 112px;          /* логотип під час інтро */
  --owl-badge: 30px;          /* маленький значок логотипа */
  --owl-accent: var(--focus, #5A2D82);
  --owl-name-color: var(--muted, #5F5868);  /* ім'я над текстом: 6,8:1 на білому */
  /* --owl-k — множник розміру (owl.js зменшує сову у вузькій колонці);
     --owl-min-lines — мінімальна висота тексту бульбашки в рядках (опція minLines) */
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 14px;
  min-height: calc(var(--owl-size) * var(--owl-k, 1) * 1.25 + 8px);
  font-family: var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  color: var(--text, #2B2730);
  -webkit-tap-highlight-color: transparent;
}
.owl, .owl *, .owl *::before, .owl *::after { box-sizing: border-box; }
.owl--stacked { flex-wrap: wrap; }

/* ---------- малюнок ---------- */
.owl-figure {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  width: calc(var(--owl-size) * var(--owl-k, 1));
  height: calc(var(--owl-size) * var(--owl-k, 1) * 1.25);
  margin: 8px 0 0 calc(var(--owl-badge) * .55);
  pointer-events: none;
  will-change: transform;
}
.owl-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.owl-actor { pointer-events: visiblePainted; cursor: pointer; }
.owl--intro .owl-actor { cursor: default; }

/* ---------- логотип / значок ---------- */
.owl-logo {
  position: absolute;
  left: 0; top: 0;
  z-index: 3;
  width: var(--owl-logo);
  height: var(--owl-logo);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transform-origin: 0 0;
  transform: scale(.27);
  transition: filter .15s ease;
}
.owl-logo:hover { filter: brightness(1.05); }
.owl-logo:focus-visible { outline: 10px solid var(--owl-accent); outline-offset: 6px; }
/* невидима зона дотику навколо маленького значка (≥ 44 px; --owl-hit задає owl.js у масштабі кнопки) */
.owl-logo::after { content: ''; position: absolute; inset: calc(var(--owl-hit, 0px) * -1); border-radius: 50%; }
.owl .owl-logo-img { display: block; width: 100%; height: 100%; max-width: none; border-radius: 50%; user-select: none; -webkit-user-drag: none; }
.owl-logo-patch { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.owl--intro .owl-logo { z-index: 1; cursor: default; }

.owl--hidden .owl-figure,
.owl--hidden .owl-logo,
.owl--hidden .owl-bubble { visibility: hidden; }

/* ---------- бульбашка ---------- */
.owl-bubble {
  position: relative;
  flex: 1 1 210px;
  min-width: 0;
  max-width: 360px;
  margin-top: max(0px, calc(8px + var(--owl-size) * var(--owl-k, 1) * .54 - 30px));
  padding: 9px 16px 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #E3DEE6);
  border-radius: var(--radius, 6px);
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--text, #2B2730);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-4px);
  transform-origin: 0 30px;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.owl-bubble::before {           /* хвостик до сови */
  content: '';
  position: absolute;
  left: -7px;
  top: 23px;
  width: 14px;
  height: 14px;
  background: var(--surface, #fff);
  border-left: 1px solid var(--line, #E3DEE6);
  border-bottom: 1px solid var(--line, #E3DEE6);
  border-bottom-left-radius: 2px;
  transform: rotate(45deg);
}
.owl--stacked .owl-bubble { flex-basis: 100%; margin-top: 2px; transform-origin: 40px 0; max-width: none; }
.owl--stacked .owl-bubble::before { left: calc(var(--owl-size) * var(--owl-k, 1) * .5 + var(--owl-badge) * .55 - 7px); top: -7px; transform: rotate(135deg); }
/* «показує праворуч» — крило тягнеться до бульбашки, тож хвостик піднімаємо до очей */
.owl-bubble::before { transition: top .3s ease; }
.owl[data-mood="point"][data-dir="right"]:not(.owl--stacked) .owl-bubble::before { top: 6px; }
.owl-bubble--on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.owl-bubble-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--owl-name-color);
  margin-bottom: 1px;
}
.owl-bubble-text { overflow-wrap: break-word; min-height: calc(var(--owl-min-lines, 0) * 1.5em); }
.owl-bubble-text .owl-ch { opacity: 0; transition: opacity .12s linear; }
.owl-bubble-text .owl-ch.on,
.owl-bubble-text.owl-typed .owl-ch { opacity: 1; }
/* математика — richHTML із notation.js (стилі .m — у lab.css, owl.js підключає його сам) */
.owl-bubble .m { font-size: 1.06em; white-space: nowrap; }   /* формула не розривається між рядками */

/* ================================================================== */
/*  SVG: частини сови й настрої                                         */
/* ================================================================== */
.owl-svg g, .owl-svg path, .owl-svg ellipse, .owl-svg circle { transform-box: view-box; }

/* дихання, пензлик */
.owl-breath { transform-origin: 100px 219px; animation: owl-breathe 3.8s ease-in-out infinite; }
@keyframes owl-breathe { 0%, 100% { transform: none; } 50% { transform: scale(1.014, 1.024); } }

.owl-tassel { transform-origin: 47.5px 32.5px; animation: owl-tassel 2.9s ease-in-out infinite; }
@keyframes owl-tassel { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(7deg); } }
.owl--flap .owl-tassel, .owl--celebrate .owl-tassel, .owl--hop .owl-tassel { animation-duration: .55s; }

/* голова: нахил і кивки */
.owl-head {
  transform-origin: 100px 128px;
  transform: rotate(var(--owl-tilt, 0deg));
  transition: transform .8s cubic-bezier(.45, 0, .25, 1);
}
.owl-head-in { transform-origin: 100px 128px; }
.owl[data-mood="think"] .owl-head { transform: rotate(7deg); }
.owl[data-mood="happy"] .owl-head { transform: rotate(-3deg); }
.owl[data-mood="oops"] .owl-head { transform: translateY(-2.5px); }
.owl[data-mood="point"][data-dir="left"] .owl-head { transform: rotate(-6deg); }
.owl[data-mood="point"][data-dir="right"] .owl-head { transform: rotate(6deg); }
.owl[data-mood="point"][data-dir="up"] .owl-head { transform: rotate(-4deg) translateY(-1.5px); }
/* «говорить»: кивок і брови — настрій talk; дзьоб рухається лише поки друкується текст (.owl--talking) */
.owl--talking .owl-head-in,
.owl[data-mood="talk"] .owl-head-in { animation: owl-nod 1.15s ease-in-out infinite; }
@keyframes owl-nod {
  0%, 100% { transform: none; }
  30% { transform: rotate(-2deg) translateY(.8px); }
  65% { transform: rotate(1.6deg) translateY(-.4px); }
}

/* повіки */
.owl-lid { transition: transform .16s ease; }
.owl-lid-up { transform: translateY(-33.5px); }
.owl-lid-low { transform: translateY(14px); }
.owl[data-mood="think"] .owl-lid-up { transform: translateY(-34.5px); }
.owl[data-mood="oops"] .owl-lid-up { transform: translateY(-42px); }
/* радість — очі-дужки «^ ^» */
.owl-svg .owl-eye-happy {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scaleY(.3);
  transition: opacity .12s ease, transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.owl[data-mood="happy"] .owl-svg .owl-eye-happy, .owl--wave .owl-svg .owl-eye-happy { opacity: 1; transform: none; }
.owl[data-mood="happy"] .owl-eye, .owl--wave .owl-eye { opacity: 0; transform: scaleY(.2); }
.owl.owl--blink .owl-lid-up { transform: translateY(-5px); transition-duration: .06s; }
.owl.owl--blink .owl-lid-low { transform: translateY(5px); transition-duration: .06s; }

/* очі й погляд */
.owl-eye { transition: transform .28s cubic-bezier(.3, 1.6, .5, 1), opacity .1s ease; }
.owl-eye-l { transform-origin: 79px 90px; }
.owl-eye-r { transform-origin: 121px 90px; }
.owl-eye-l .owl-pupil { transform-origin: 79px 91px; }
.owl-eye-r .owl-pupil { transform-origin: 121px 91px; }
.owl-pupil { transition: transform .25s ease; }
.owl-look { transition: transform .4s cubic-bezier(.3, .7, .3, 1); }
.owl[data-mood="oops"] .owl-eye { transform: scale(1.09); }
.owl[data-mood="oops"] .owl-pupil { transform: scale(.72); }
.owl[data-mood="think"] .owl-look { transform: translate(4.5px, -5.5px); }
.owl[data-mood="point"][data-dir="left"] .owl-look { transform: translate(-5.5px, 1px); }
.owl[data-mood="point"][data-dir="right"] .owl-look { transform: translate(5.5px, 1px); }
.owl[data-mood="point"][data-dir="up"] .owl-look { transform: translate(-2.5px, -6px); }

/* брови */
.owl-brow { transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.owl-brow-l { transform-origin: 76px 66px; }
.owl-brow-r { transform-origin: 124px 66px; }
.owl[data-mood="happy"] .owl-brow-l, .owl--wave .owl-brow-l { transform: translateY(-4px) rotate(-5deg); }
.owl[data-mood="happy"] .owl-brow-r, .owl--wave .owl-brow-r { transform: translateY(-4px) rotate(5deg); }
.owl[data-mood="oops"] .owl-brow-l { transform: translateY(-8px) rotate(-11deg); }
.owl[data-mood="oops"] .owl-brow-r { transform: translateY(-8px) rotate(11deg); }
.owl[data-mood="think"] .owl-brow-l { transform: translateY(1.5px) rotate(4deg); }
.owl[data-mood="think"] .owl-brow-r { transform: translateY(-6px) rotate(-6deg); }
.owl[data-mood="talk"] .owl-brow-l { transform: translateY(-1.5px) rotate(-3deg); }
.owl[data-mood="talk"] .owl-brow-r { transform: translateY(-1.5px) rotate(3deg); }

/* дзьоб */
.owl-beak-low, .owl-beak-up { transition: transform .14s ease; }
.owl-mouth { transform-origin: 100px 112px; transform: scaleY(0); transition: transform .14s ease; }
.owl--talking .owl-beak-low { animation: owl-jaw .24s ease-in-out infinite alternate; }
.owl--talking .owl-beak-up { animation: owl-jaw-up .24s ease-in-out infinite alternate; }
.owl--talking .owl-mouth { animation: owl-mouth .24s ease-in-out infinite alternate; }
@keyframes owl-jaw { from { transform: translateY(0); } to { transform: translateY(4.5px); } }
@keyframes owl-jaw-up { from { transform: translateY(0); } to { transform: translateY(-1px); } }
@keyframes owl-mouth { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.owl[data-mood="oops"] .owl-beak-low { transform: translateY(4px); }
.owl[data-mood="oops"] .owl-beak-up { transform: translateY(-1px); }
.owl[data-mood="oops"] .owl-mouth { transform: scaleY(.9); }

/* крила: пози настроїв (зовнішня група) + рухи (внутрішня) */
.owl-wing { transition: transform .5s cubic-bezier(.3, 1.3, .5, 1), opacity .15s ease; }
.owl-wing-open { opacity: 0; }
.owl[data-mood="point"][data-dir="left"] .owl-wing-l .owl-wing-open,
.owl[data-mood="point"][data-dir="up"] .owl-wing-l .owl-wing-open,
.owl[data-mood="point"][data-dir="right"] .owl-wing-r .owl-wing-open,
.owl--flap .owl-wing-open, .owl--celebrate .owl-wing-open,
.owl--wave .owl-wing-r .owl-wing-open { opacity: 1; }
.owl[data-mood="point"][data-dir="left"] .owl-wing-l .owl-wing-fold,
.owl[data-mood="point"][data-dir="up"] .owl-wing-l .owl-wing-fold,
.owl[data-mood="point"][data-dir="right"] .owl-wing-r .owl-wing-fold,
.owl--flap .owl-wing-fold, .owl--celebrate .owl-wing-fold,
.owl--wave .owl-wing-r .owl-wing-fold { opacity: 0; }
.owl-wing-l, .owl-wing-l .owl-wing-in { transform-origin: 67px 124px; }
.owl-wing-r, .owl-wing-r .owl-wing-in { transform-origin: 133px 124px; }
.owl[data-mood="happy"] .owl-wing-l { transform: rotate(20deg); }
.owl[data-mood="happy"] .owl-wing-r { transform: rotate(-20deg); }
.owl[data-mood="oops"] .owl-wing-l { transform: rotate(13deg); }
.owl[data-mood="oops"] .owl-wing-r { transform: rotate(-13deg); }
.owl[data-mood="point"][data-dir="left"] .owl-wing-l { transform: rotate(80deg); }
.owl[data-mood="point"][data-dir="right"] .owl-wing-r { transform: rotate(-80deg); }
.owl[data-mood="point"][data-dir="up"] .owl-wing-l { transform: rotate(124deg); }
.owl[data-mood="think"] .owl-wing-r { transform: rotate(-8deg); opacity: 0; }
.owl-think-wing {
  opacity: 0;
  transform-origin: 152px 174px;
  transform: rotate(38deg) scale(.6);
  transition: opacity .16s ease, transform .45s cubic-bezier(.3, 1.3, .5, 1);
}
.owl[data-mood="think"] .owl-think-wing { opacity: 1; transform: none; }

.owl--adjust-l .owl-wing-l .owl-wing-in { animation: owl-adjust-l 1.2s ease-in-out; }
.owl--adjust-r .owl-wing-r .owl-wing-in { animation: owl-adjust-r 1.2s ease-in-out; }
@keyframes owl-adjust-l {
  0%, 100% { transform: none; }
  22% { transform: rotate(18deg) scale(1.05, 1.02); }
  40% { transform: rotate(8deg); }
  56% { transform: rotate(14deg) scale(1.03, 1); }
  76% { transform: rotate(2deg); }
}
@keyframes owl-adjust-r {
  0%, 100% { transform: none; }
  22% { transform: rotate(-18deg) scale(1.05, 1.02); }
  40% { transform: rotate(-8deg); }
  56% { transform: rotate(-14deg) scale(1.03, 1); }
  76% { transform: rotate(-2deg); }
}
/* під час «поправляння» крило на мить розправляється */
.owl--adjust-l .owl-wing-l .owl-wing-open, .owl--adjust-r .owl-wing-r .owl-wing-open { animation: owl-spread-open 1.2s linear; }
.owl--adjust-l .owl-wing-l .owl-wing-fold, .owl--adjust-r .owl-wing-r .owl-wing-fold { animation: owl-spread-fold 1.2s linear; }
@keyframes owl-spread-open { 0%, 13% { opacity: 0; } 14%, 58% { opacity: 1; } 59%, 100% { opacity: 0; } }
@keyframes owl-spread-fold { 0%, 13% { opacity: 1; } 14%, 58% { opacity: 0; } 59%, 100% { opacity: 1; } }
.owl--adjust-l .owl-body, .owl--adjust-r .owl-body { animation: owl-settle 1.2s ease-in-out; transform-origin: 100px 219px; }
@keyframes owl-settle { 0%, 100% { transform: none; } 30% { transform: scale(1.012, .99); } 60% { transform: scale(.996, 1.006); } }

.owl--flap .owl-wing-l .owl-wing-in,
.owl--celebrate .owl-wing-l .owl-wing-in { animation: owl-flap-l .22s ease-in-out infinite alternate; }
.owl--flap .owl-wing-r .owl-wing-in,
.owl--celebrate .owl-wing-r .owl-wing-in { animation: owl-flap-r .22s ease-in-out infinite alternate; }
@keyframes owl-flap-l { from { transform: rotate(12deg); } to { transform: rotate(118deg); } }
@keyframes owl-flap-r { from { transform: rotate(-12deg); } to { transform: rotate(-118deg); } }

.owl--wave .owl-wing-r .owl-wing-in { animation: owl-wave 1s ease-in-out; }
@keyframes owl-wave {
  0%, 100% { transform: none; }
  22% { transform: rotate(-120deg); }
  40% { transform: rotate(-96deg); }
  58% { transform: rotate(-122deg); }
  76% { transform: rotate(-98deg); }
}

/* стрибки */
.owl-actor { transform-origin: 100px 222px; }
.owl--hop .owl-actor { animation: owl-hop .62s cubic-bezier(.3, .6, .4, 1); }
@keyframes owl-hop {
  0%, 100% { transform: none; }
  18% { transform: scale(1.06, .92); }
  45% { transform: translateY(-14px) scale(.97, 1.04); }
  74% { transform: translateY(0) scale(1.05, .95); }
}
.owl--celebrate .owl-actor { animation: owl-jump2 1.45s ease-in-out; }
@keyframes owl-jump2 {
  0%, 100% { transform: none; }
  10% { transform: scale(1.07, .9); }
  27% { transform: translateY(-28px) scale(.96, 1.05); }
  44% { transform: translateY(0) scale(1.07, .92); }
  54% { transform: scale(1.02, .97); }
  70% { transform: translateY(-18px) scale(.98, 1.03); }
  86% { transform: translateY(0) scale(1.05, .95); }
}
.owl--shake .owl-actor { animation: owl-shake .5s ease-in-out; }
@keyframes owl-shake {
  0%, 100% { transform: none; }
  15% { transform: translateX(-2.5px) rotate(-2deg); }
  35% { transform: translateX(2.5px) rotate(2deg); }
  55% { transform: translateX(-1.6px) rotate(-1deg); }
  75% { transform: translateX(1px); }
}

/* наїжачене пір'я (ой) */
.owl-ruffle { transform: scale(0); transition: transform .28s cubic-bezier(.3, 1.7, .5, 1); }
.owl-ruffle-w { transform-origin: 38px 158px; }
.owl-ruffle-hl { transform-origin: 43px 88px; }
.owl-ruffle-hr { transform-origin: 157px 88px; }
.owl[data-mood="oops"] .owl-ruffle { transform: scale(1); }

/* ефекти */
.owl-book { transform-origin: 100px 232px; }
.owl-fx { pointer-events: none; }
.owl-think-dots circle { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0); }
.owl[data-mood="think"] .owl-think-dots circle { animation: owl-dot 2s ease-in-out infinite; }
.owl[data-mood="think"] .owl-think-dots circle:nth-child(2) { animation-delay: .22s; }
.owl[data-mood="think"] .owl-think-dots circle:nth-child(3) { animation-delay: .44s; }
@keyframes owl-dot {
  0% { opacity: 0; transform: scale(0); }
  22%, 72% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(.6); }
}
.owl-sparkle { opacity: 0; transform: scale(.2); }
.owl[data-mood="happy"] .owl-sparkle { animation: owl-twinkle 1.7s ease-in-out infinite; }
.owl[data-mood="happy"] .owl-sparkle-2 { animation-delay: .45s; }
.owl[data-mood="happy"] .owl-sparkle-3 { animation-delay: .9s; }
@keyframes owl-twinkle {
  0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); }
  40%, 60% { opacity: 1; transform: scale(1) rotate(45deg); }
}

/* ---------- телефон ---------- */
@media (max-width: 600px) {
  .owl { --owl-size: 72px; --owl-logo: 96px; --owl-badge: 26px; gap: 10px; }
  .owl-bubble { font-size: 16px; max-width: none; padding: 8px 13px 10px; }
  .owl-bubble::before { top: 21px; }
}

/* ---------- менше руху ---------- */
@media (prefers-reduced-motion: reduce) {
  .owl *, .owl *::before { animation: none !important; transition: none !important; }
}

/* телефон і планшет: не дрібніше за 14 px (SPEC 7.5) */
@media (max-width: 1099.98px), (pointer: coarse) {
  .owl-bubble-name { font-size: 14px; }
}