/* Маскот-сова — живёт своей жизнью поверх страницы.
   Тело анимируется покадрово (реальные кадры видео: моргание, взмах
   крыла), перемещение по странице — отдельным слоем transform поверх. */

.owl-window,
.owl-crack {
  position: fixed;
  z-index: 40;
  pointer-events: none;
}

/* Круглое «окошко» — постоянный тихий элемент декора, снизу справа */
.owl-window {
  right: 22px;
  bottom: 22px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #4a3120 0%, var(--espresso) 70%, #1c0f08 100%);
  box-shadow:
    0 0 0 4px rgba(251, 243, 231, 0.9),
    0 8px 18px -6px rgba(0,0,0,.35);
  overflow: hidden;
}

/* Тонкая «щель» — у нижнего края портфолио-секции */
.owl-crack {
  left: 6%;
  width: 8px;
  height: 46px;
  border-radius: 6px;
  background: linear-gradient(180deg, transparent, var(--espresso) 30%, #1c0f08 50%, var(--espresso) 70%, transparent);
  bottom: 140px;
  opacity: .85;
}

.owl-mascot {
  position: fixed;
  z-index: 41;
  width: 76px;
  height: auto;
  pointer-events: none;
  left: 0;
  top: 0;
  opacity: 0;
  transform: translate(-9999px, -9999px);
  will-change: transform, opacity;
}

/* «Сцена» — держит пропорции кадра, дальше внутри крутится кроссфейд */
.owl-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 900 / 962;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.28));
}

.owl-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
  transition: opacity .38s ease;
}
.owl-frame.is-visible { opacity: 1; }

/* лёгкое покачивание «дыхания» — само тело чуть пружинит, независимо
   от того, какой кадр сейчас показан */
@keyframes owlBreathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2px) scale(1.01); }
}
.owl-stage { animation: owlBreathe 2.6s ease-in-out infinite; }
.owl-mascot.act-fly .owl-stage,
.owl-mascot.act-flap .owl-stage { animation: none; } /* во время взмаха дыхание не нужно, там своя динамика кадров */

/* ---- Выглядывает из круглого окна (правый нижний угол) ---- */
@keyframes owlPeekWindow {
  0%   { opacity: 0; transform: translate(var(--ox), calc(var(--oy) + 40px)) scale(.9); }
  12%  { opacity: 1; transform: translate(var(--ox), var(--oy)) scale(1); }
  45%  { opacity: 1; transform: translate(var(--ox), calc(var(--oy) - 3px)) scale(1); }
  55%  { opacity: 1; transform: translate(var(--ox), var(--oy)) rotate(-4deg) scale(1); }
  65%  { opacity: 1; transform: translate(var(--ox), var(--oy)) rotate(3deg) scale(1); }
  85%  { opacity: 1; transform: translate(var(--ox), var(--oy)) scale(1); }
  100% { opacity: 0; transform: translate(var(--ox), calc(var(--oy) + 44px)) scale(.9); }
}

/* ---- Вылезает из щели сбоку ---- */
@keyframes owlCrawlCrack {
  0%   { opacity: 0; transform: translate(calc(var(--ox) - 30px), var(--oy)) rotate(-90deg) scale(.7); }
  15%  { opacity: 1; transform: translate(var(--ox), var(--oy)) rotate(-90deg) scale(.85); }
  30%  { opacity: 1; transform: translate(var(--ox), var(--oy)) rotate(0deg) scale(1); }
  70%  { opacity: 1; transform: translate(var(--ox), var(--oy)) rotate(0deg) scale(1); }
  85%  { opacity: 1; transform: translate(calc(var(--ox) - 6px), var(--oy)) rotate(-25deg) scale(.9); }
  100% { opacity: 0; transform: translate(calc(var(--ox) - 30px), var(--oy)) rotate(-90deg) scale(.7); }
}

/* ---- Отряхивается ---- */
@keyframes owlShake {
  0%   { opacity: 0; transform: translate(var(--ox), var(--oy)) rotate(0deg) scale(.9); }
  10%  { opacity: 1; transform: translate(var(--ox), var(--oy)) rotate(0deg) scale(1); }
  20%,28%,36%,44% { transform: translate(var(--ox), var(--oy)) rotate(-10deg) scale(1); }
  24%,32%,40%     { transform: translate(var(--ox), var(--oy)) rotate(10deg) scale(1); }
  50%  { transform: translate(var(--ox), var(--oy)) rotate(0deg) scale(1); }
  90%  { opacity: 1; transform: translate(var(--ox), var(--oy)) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(var(--ox), var(--oy)) rotate(0deg) scale(.9); }
}

/* ---- Взмахивает крыльями на месте (движение тела — лёгкий подскок,
   само крыло анимируется сменой реальных кадров, см. owl-mascot.js) ---- */
@keyframes owlFlap {
  0%   { opacity: 0; transform: translate(var(--ox), calc(var(--oy) + 10px)) scale(.9); }
  10%  { opacity: 1; transform: translate(var(--ox), var(--oy)) scale(1); }
  30%,50%,70% { transform: translate(var(--ox), calc(var(--oy) - 5px)) scale(1); }
  40%,60%,80% { transform: translate(var(--ox), var(--oy)) scale(1); }
  90%  { opacity: 1; transform: translate(var(--ox), var(--oy)) scale(1); }
  100% { opacity: 0; transform: translate(var(--ox), calc(var(--oy) + 10px)) scale(.9); }
}

/* ---- Пролетает вдоль страницы (крыло машет кадрами всю дорогу) ---- */
@keyframes owlFlyAcross {
  0%   { opacity: 0; transform: translate(-90px, var(--oy)) rotate(-8deg); }
  8%   { opacity: 1; }
  25%  { transform: translate(25vw, calc(var(--oy) - 30px)) rotate(6deg); }
  50%  { transform: translate(50vw, var(--oy)) rotate(-6deg); }
  75%  { transform: translate(75vw, calc(var(--oy) - 24px)) rotate(6deg); }
  92%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(100vw + 90px), var(--oy)) rotate(-8deg); }
}

.owl-mascot.act-peek-window  { animation: owlPeekWindow 4.2s ease-in-out both; }
.owl-mascot.act-crawl-crack  { animation: owlCrawlCrack 4.6s ease-in-out both; }
.owl-mascot.act-shake        { animation: owlShake 3s ease-in-out both; }
.owl-mascot.act-flap         { animation: owlFlap 3.4s ease-in-out both; }
.owl-mascot.act-fly          { animation: owlFlyAcross 7s linear both; width: 100px; }

@media (max-width: 640px) {
  .owl-window { width: 42px; height: 42px; right: 14px; bottom: 14px; }
  .owl-mascot { width: 56px; }
  .owl-mascot.act-fly { width: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .owl-mascot { display: none; }
}