/* «Щенячий патруль: Динофільм» premiere promo — cinematic bottom strip around
   the real film poster. Jungle gradient fading in from transparent with a warm
   volcano glow, a leafy silhouette edge, drifting fireflies, a slow-breathing
   paw-print watermark, and a poster + CTA card. Plus two gags: a pup parachutes
   in top-right («Гав! Діно вже в кіно!») and a chibi T-rex runs across the
   screen as the finale. Pure CSS; only the CTA + close are clickable. */

.pp-promo {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 188px;
  z-index: 1150;                 /* below the .call-fab (z-index:1200) so «Подзвонити» stays on top */
  pointer-events: none;
  overflow: hidden;
  font-family: inherit;
  --pp-night: #0a2c16;
  --pp-jungle: #114d27;
  --pp-leaf: #1f7a3e;
  --pp-sun: #ffd23f;
  --pp-lava: #ff7f2a;
  --pp-red: #e33d3d;
  --pp-red2: #c92f2f;
  /* jungle dusk: transparent at the top → deep green, volcano glow at the right */
  background:
    radial-gradient(120% 120% at 88% 130%, rgba(255,127,42,.35), transparent 55%),
    linear-gradient(180deg, rgba(10,44,22,0) 0%, rgba(10,44,22,0) 12%, rgba(10,44,22,.72) 42%, var(--pp-jungle) 74%, #0d3b1e 100%);
}
.pp-promo.is-hidden { display: none; }

/* paw-print watermark, slowly "breathing" */
.pp-promo__paw {
  position: absolute; right: 4%; bottom: -26px; width: 180px; height: 180px;
  opacity: .16; color: #9fe8b4;
  animation: pp-paw-breathe 8s ease-in-out infinite;
  transform: rotate(-14deg);
}
.pp-promo__paw svg { width: 100%; height: 100%; display: block; }
@keyframes pp-paw-breathe { 0%,100%{ transform: rotate(-14deg) scale(1);} 50%{ transform: rotate(-10deg) scale(1.06);} }

/* leafy silhouette along the top edge of the strip */
.pp-promo__leaves { position: absolute; left: 0; bottom: 128px; width: 100%; height: 30px; display: block; }
.pp-promo__leaves .lv { fill: rgba(6,26,13,.85); }

/* drifting fireflies */
.pp-promo__fly { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ffe28a; opacity: 0; box-shadow: 0 0 8px #ffd23f; animation: pp-firefly 6s ease-in-out infinite; }
.pp-promo__fly.f1 { left: 30%; bottom: 60px; animation-delay: .3s; }
.pp-promo__fly.f2 { left: 46%; bottom: 90px; animation-delay: 1.6s; }
.pp-promo__fly.f3 { left: 62%; bottom: 52px; animation-delay: 2.7s; }
.pp-promo__fly.f4 { left: 20%; bottom: 82px; animation-delay: 3.5s; width: 3px; height: 3px; }
.pp-promo__fly.f5 { left: 72%; bottom: 96px; animation-delay: 4.4s; }
@keyframes pp-firefly { 0%,100%{ opacity:0; transform: translate(0,6px);} 45%,55%{ opacity:.95; transform: translate(6px,-6px);} }

/* CTA card (poster + text + button) */
.pp-promo__cta {
  pointer-events: auto;
  position: absolute; left: 26px; bottom: 22px;   /* left side — keep clear of the bottom-right call button */
  display: flex; align-items: stretch; gap: 16px;
  padding: 12px 16px 12px 12px;
  border-radius: 16px;
  text-decoration: none;
  color: #f0fbef;
  background: linear-gradient(180deg, rgba(16,54,29,.92), rgba(7,28,15,.94));
  border: 1px solid rgba(255,210,63,.4);
  box-shadow: 0 16px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(3px);
  animation: pp-cta-in .55s cubic-bezier(.2,.9,.3,1.25) both;
  max-width: min(560px, calc(100vw - 44px));
}
@keyframes pp-cta-in { from{ opacity:0; transform: translateY(26px);} to{ opacity:1; transform: translateY(0);} }

/* the real film poster with a slow shine sweep */
.pp-promo__poster {
  position: relative; flex: 0 0 auto;
  width: 96px; height: 144px; border-radius: 10px; overflow: hidden;
  background: #0d3b1e url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='4' height='4' fill='%23124526'/></svg>");
  box-shadow: 0 10px 22px rgba(0,0,0,.5);
}
.pp-promo__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-promo__poster::after {
  content: ""; position: absolute; top: -60%; left: -120%; width: 60%; height: 220%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.38), transparent);
  transform: rotate(8deg); animation: pp-shine 5.5s ease-in-out 1.5s infinite;
}
@keyframes pp-shine { 0%,72%{ left:-120%; } 88%,100%{ left:150%; } }

.pp-promo__info { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
.pp-promo__eyebrow {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #4a2a05; background: linear-gradient(180deg, var(--pp-sun), var(--pp-lava));
  padding: .16rem .5rem; border-radius: 999px;
}
.pp-promo__title { font-size: 1.5rem; font-weight: 800; line-height: 1.05; letter-spacing: -.01em; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.pp-promo__meta { font-size: .82rem; color: #b6e3c2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pp-promo__age { font-size: .7rem; font-weight: 700; color: #f0fbef; border: 1px solid rgba(182,227,194,.5); border-radius: 6px; padding: 0 .35rem; }
.pp-promo__btn {
  align-self: flex-start; margin-top: 4px; white-space: nowrap;
  font-weight: 800; font-size: .9rem; color: #fff;
  background: linear-gradient(180deg, var(--pp-red), var(--pp-red2));
  padding: .5rem 1rem; border-radius: 999px;
  box-shadow: 0 8px 18px rgba(227,61,61,.4);
  animation: pp-btn-pulse 2.4s ease-in-out infinite;
}
@keyframes pp-btn-pulse { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.05);} }

.pp-promo__close {
  pointer-events: auto;
  position: absolute; right: 12px; top: 12px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18); cursor: pointer;
  background: rgba(10,44,22,.6); color: #e7f8e9; font-size: 17px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .15s ease;
}
.pp-promo__close:hover { background: rgba(10,44,22,.9); transform: scale(1.08); }

/* ---------------------------------------------------------------------------
   Gag #1: a pup parachutes in from the top, barks the invitation, and a breeze
   carries him off the right edge. CSS-only timeline; JS just adds .is-run. */

.pp-pup {
  position: fixed;
  top: 0; right: clamp(24px, 15vw, 240px);
  width: 160px; height: 330px;
  z-index: 1140;
  pointer-events: none;
  display: none;
  transform: translate(0, calc(-100% - 30vh));
}
.pp-pup.is-run {
  display: block;
  animation: pp-drop 10s both;
}

.pp-pup__sway {
  position: absolute; left: 0; top: 96px; width: 160px; height: 230px;
  transform-origin: 80px -40px;   /* pivot above the canopy → gentle pendulum */
  animation: pp-sway 3s ease-in-out infinite;
}
.pp-pup__body { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
@keyframes pp-sway { 0%,100%{ transform: rotate(3deg);} 50%{ transform: rotate(-3deg);} }

/* speech bubble */
.pp-pup__bubble {
  position: absolute; right: calc(100% - 14px); top: 210px;
  display: flex; flex-direction: column; gap: 1px;
  white-space: nowrap;
  background: #fff; color: #14421f;
  font-weight: 800; font-size: .95rem; line-height: 1.25;
  padding: .5rem .8rem; border-radius: 14px 14px 4px 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  opacity: 0; transform: scale(.6); transform-origin: 100% 80%;
}
.pp-pup__bubble small { font-weight: 600; font-size: .74rem; color: #5b7a62; }
.pp-pup__bubble::after {
  content: ""; position: absolute; right: -7px; bottom: 8px;
  border: 8px solid transparent; border-left-color: #fff; border-bottom-width: 3px; border-top-width: 3px;
}
.pp-pup.is-run .pp-pup__bubble { animation: pp-bubble 10s both; }

/* 10s master timeline: slow parachute descent, hang & bob, breeze carries him
   off the right edge */
@keyframes pp-drop {
  0%   { transform: translate(0, calc(-100% - 30vh)); animation-timing-function: cubic-bezier(.3,.5,.5,1); }
  22%  { transform: translate(0, 0); animation-timing-function: ease-in-out; }
  38%  { transform: translate(0, -8px); animation-timing-function: ease-in-out; }
  54%  { transform: translate(0, 0); animation-timing-function: ease-in-out; }
  70%  { transform: translate(0, -8px); animation-timing-function: ease-in-out; }
  80%  { transform: translate(0, 0); animation-timing-function: cubic-bezier(.5,-.1,.75,.4); }
  99%  { opacity: 1; }
  100% { transform: translate(calc(30vw + 200px), -18vh) rotate(8deg); opacity: 0; }
}
@keyframes pp-bubble {
  0%, 26%  { opacity: 0; transform: scale(.6); }
  30%      { opacity: 1; transform: scale(1.06); }
  33%      { opacity: 1; transform: scale(1); }
  74%      { opacity: 1; transform: scale(1); }
  80%,100% { opacity: 0; transform: scale(.6); }
}

/* ---------------------------------------------------------------------------
   Gag #2 (finale): chibi T-rex sprints across the screen above the banner. */

.pp-dino {
  position: fixed;
  left: 0; bottom: 200px;
  width: 240px; height: 170px;
  z-index: 1140;
  pointer-events: none;
  display: none;
  transform: translateX(-260px);
}
.pp-dino.is-run {
  display: block;
  animation: pp-run 3.4s linear both;
}
.pp-dino__bounce { display: block; width: 100%; height: 100%; animation: pp-gallop .38s ease-in-out infinite; }
.pp-dino__body { width: 100%; height: 100%; display: block; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); }
.pp-dino__leg { transform-origin: 50% 40%; }
.pp-dino__leg.back { animation: pp-leg .38s ease-in-out infinite; }
.pp-dino__leg.front { animation: pp-leg .38s ease-in-out infinite reverse; }
@keyframes pp-run { from { transform: translateX(-260px); } to { transform: translateX(calc(100vw + 40px)); } }
@keyframes pp-gallop { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-9px);} }
@keyframes pp-leg { 0%,100%{ transform: rotate(14deg);} 50%{ transform: rotate(-14deg);} }

@media (max-width: 640px) {
  .pp-promo { height: 158px; }
  /* leave the bottom-right free for the round call button (~54px) */
  .pp-promo__cta { left: 10px; right: auto; bottom: 14px; gap: 12px; padding: 10px 12px 10px 10px; max-width: calc(100vw - 84px); }
  .pp-promo__poster { width: 78px; height: 116px; }
  .pp-promo__title { font-size: 1.2rem; }
  .pp-promo__meta { font-size: .76rem; }
  .pp-promo__btn { font-size: .82rem; padding: .42rem .8rem; }
  .pp-promo__leaves { bottom: 108px; }
  .pp-promo__paw { width: 140px; height: 140px; }

  .pp-pup { right: 10px; width: 118px; height: 244px; }
  .pp-pup__sway { top: 70px; width: 118px; height: 170px; transform-origin: 59px -30px; }
  .pp-pup__bubble { top: 150px; font-size: .82rem; }
  .pp-pup__bubble small { font-size: .68rem; }

  .pp-dino { bottom: 168px; width: 170px; height: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-promo *, .pp-promo__leaves path { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .pp-promo__cta { animation: pp-cta-in .35s ease both; }
  .pp-pup, .pp-pup.is-run, .pp-dino, .pp-dino.is-run { display: none !important; }
}