/* «Людина-павук» premiere promo — cinematic bottom strip built around the real
   film poster. Dusk-city gradient fading in from transparent, a dark skyline edge,
   faint drifting sparks, a slow-breathing web watermark, and a poster + CTA card.
   Plus the drop-in gag: chibi Spidey descends from the top on a thread, apologises
   («Ой, вибачаюсь!») and zips away. Pure CSS; only the CTA + close are clickable. */

.sp-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;
  --sp-night: #0b1026;
  --sp-navy: #14213d;
  --sp-blue: #1d3557;
  --sp-red: #d62828;
  --sp-red2: #a4161a;
  --sp-silk: #e8ecf8;
  /* dusk city: transparent at the top → deep night blue with a red premiere glow */
  background:
    radial-gradient(120% 120% at 12% 130%, rgba(214,40,40,.30), transparent 55%),
    linear-gradient(180deg, rgba(11,16,38,0) 0%, rgba(11,16,38,0) 12%, rgba(11,16,38,.72) 42%, var(--sp-navy) 74%, #101a33 100%);
}
.sp-promo.is-hidden { display: none; }

/* corner spider-web watermark, slowly "breathing" */
.sp-promo__web {
  position: absolute; right: 3%; bottom: -34px; width: 200px; height: 200px;
  opacity: .16; color: #9fb4e8;
  animation: sp-web-breathe 9s ease-in-out infinite;
  transform-origin: 100% 100%;
}
.sp-promo__web svg { width: 100%; height: 100%; display: block; }
@keyframes sp-web-breathe { 0%,100%{ transform: scale(1) rotate(0deg);} 50%{ transform: scale(1.05) rotate(-2deg);} }

/* dark skyline silhouette along the top edge of the strip */
.sp-promo__skyline { position: absolute; left: 0; bottom: 128px; width: 100%; height: 26px; display: block; }
.sp-promo__skyline .sk-b { fill: rgba(6,10,26,.85); }

/* drifting neon sparks (city lights bokeh) */
.sp-promo__spark { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #ffd6d6; opacity: 0; box-shadow: 0 0 6px #ff9d9d; animation: sp-glimmer 6s ease-in-out infinite; }
.sp-promo__spark.s1 { left: 30%; bottom: 60px; animation-delay: .3s; }
.sp-promo__spark.s2 { left: 46%; bottom: 90px; animation-delay: 1.6s; background: #d6e4ff; box-shadow: 0 0 6px #9db8ff; }
.sp-promo__spark.s3 { left: 62%; bottom: 52px; animation-delay: 2.7s; }
.sp-promo__spark.s4 { left: 20%; bottom: 82px; animation-delay: 3.5s; width: 2px; height: 2px; background: #d6e4ff; box-shadow: 0 0 6px #9db8ff; }
.sp-promo__spark.s5 { left: 72%; bottom: 96px; animation-delay: 4.4s; }
@keyframes sp-glimmer { 0%,100%{ opacity:0; transform: translateY(6px);} 45%,55%{ opacity:.9; transform: translateY(-4px);} }

/* CTA card (poster + text + button) */
.sp-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: #eef1fb;
  background: linear-gradient(180deg, rgba(20,28,58,.92), rgba(9,13,32,.94));
  border: 1px solid rgba(214,40,40,.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: sp-cta-in .55s cubic-bezier(.2,.9,.3,1.25) both;
  max-width: min(560px, calc(100vw - 44px));
}
@keyframes sp-cta-in { from{ opacity:0; transform: translateY(26px);} to{ opacity:1; transform: translateY(0);} }

/* the real film poster with a slow shine sweep */
.sp-promo__poster {
  position: relative; flex: 0 0 auto;
  width: 96px; height: 144px; border-radius: 10px; overflow: hidden;
  background: #101a33 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='4' height='4' fill='%23152142'/></svg>");
  box-shadow: 0 10px 22px rgba(0,0,0,.5);
}
.sp-promo__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-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: sp-shine 5.5s ease-in-out 1.5s infinite;
}
@keyframes sp-shine { 0%,72%{ left:-120%; } 88%,100%{ left:150%; } }

.sp-promo__info { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
.sp-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: #fff; background: linear-gradient(180deg, var(--sp-red), var(--sp-red2));
  padding: .16rem .5rem; border-radius: 999px;
}
.sp-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); }
.sp-promo__meta { font-size: .82rem; color: #aebde6; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-promo__age { font-size: .7rem; font-weight: 700; color: #eef1fb; border: 1px solid rgba(174,189,230,.5); border-radius: 6px; padding: 0 .35rem; }
.sp-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(--sp-red), var(--sp-red2));
  padding: .5rem 1rem; border-radius: 999px;
  box-shadow: 0 8px 18px rgba(214,40,40,.4);
  animation: sp-btn-pulse 2.4s ease-in-out infinite;
}
@keyframes sp-btn-pulse { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.05);} }

.sp-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(11,16,38,.6); color: var(--sp-silk); font-size: 17px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .15s ease;
}
.sp-promo__close:hover { background: rgba(11,16,38,.9); transform: scale(1.08); }

/* ---------------------------------------------------------------------------
   Drop-in gag: Spidey descends on a thread, apologises, zips back up.
   Timeline lives entirely in CSS; JS only adds .is-run (and respects the
   once-per-visit guard). The whole thing is decorative and non-interactive. */

.sp-spidey {
  position: fixed;
  top: 0; right: clamp(24px, 16vw, 260px);
  width: 150px; height: 330px;
  z-index: 1140;
  pointer-events: none;
  display: none;
  transform: translateY(calc(-100% - 45vh));
}
.sp-spidey.is-run {
  display: block;
  animation: sp-drop 9s both;
}

/* silk thread: fills the wrapper above the body, plus a long tail upward so the
   line stays attached to the top of the screen while sliding */
.sp-spidey__thread {
  position: absolute; left: 50%; top: 0; width: 3px; height: 148px;
  margin-left: -1.5px;            /* aligns with x=70 of the 140-wide body svg */
  background: linear-gradient(180deg, rgba(232,236,248,.35), rgba(232,236,248,.9));
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(232,236,248,.35);
}
.sp-spidey__thread::before {
  content: ""; position: absolute; left: 0; bottom: 100%; width: 3px; height: 60vh;
  background: rgba(232,236,248,.55);
}

.sp-spidey__sway {
  position: absolute; left: 5px; top: 142px; width: 140px; height: 190px;
  transform-origin: 65px -142px;   /* pivot far up on the thread → pendulum feel */
  animation: sp-sway 3.2s ease-in-out infinite;
}
.sp-spidey__body { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
@keyframes sp-sway { 0%,100%{ transform: rotate(2.4deg);} 50%{ transform: rotate(-2.4deg);} }

/* shy wave with the right hand while apologising */
.sp-spidey__arm { transform-origin: 88px 96px; animation: sp-wave .7s ease-in-out 3.4s 4 alternate; }
@keyframes sp-wave { from{ transform: rotate(0deg);} to{ transform: rotate(16deg);} }

/* speech bubble */
.sp-spidey__bubble {
  position: absolute; right: calc(100% - 18px); top: 208px;
  display: flex; flex-direction: column; gap: 1px;
  white-space: nowrap;
  background: #fff; color: #14213d;
  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%;
}
.sp-spidey__bubble small { font-weight: 600; font-size: .74rem; color: #5b6684; }
.sp-spidey__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;
}
.sp-spidey.is-run .sp-spidey__bubble { animation: sp-bubble 9s both; }

/* finale: Spidey swings across the whole screen on a web line (pendulum from the
   top edge, right → left, with a horizontal drift so wide screens get covered) */
.sp-swing {
  position: fixed; inset: 0;
  z-index: 1141;
  pointer-events: none;
  display: none;
  --sp-swing-len: min(72vh, 620px);
}
.sp-swing.is-run { display: block; }
.sp-swing__pendulum { position: absolute; top: -6px; left: 50%; width: 0; height: 0; }
.sp-swing.is-run .sp-swing__pendulum { animation: sp-swing-drift 2.7s linear both; }
.sp-swing__arm {
  position: absolute; top: 0; left: 0;
  width: 0; height: var(--sp-swing-len);
  transform-origin: 0 0;
  opacity: 0;
}
.sp-swing.is-run .sp-swing__arm { animation: sp-swing-arc 2.7s cubic-bezier(.45,.05,.55,.95) both; }
.sp-swing__line {
  position: absolute; top: 0; left: -1.5px; width: 3px; height: 100%;
  background: linear-gradient(180deg, rgba(232,236,248,.25), rgba(232,236,248,.9));
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(232,236,248,.3);
}
.sp-swing__hero {
  position: absolute; top: calc(100% - 8px); left: -60px;
  width: 120px; height: 171px; display: block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}
@keyframes sp-swing-arc {
  0%   { transform: rotate(-78deg); opacity: 0; }
  6%   { opacity: 1; }
  50%  { transform: rotate(0deg); }
  94%  { opacity: 1; }
  100% { transform: rotate(78deg); opacity: 0; }
}
@keyframes sp-swing-drift {
  from { transform: translateX(18vw); }
  to   { transform: translateX(-18vw); }
}

/* one 9s master timeline: drop in (0–16%), bounce, hang & bob, dip, zip away */
@keyframes sp-drop {
  0%   { transform: translateY(calc(-100% - 45vh)); animation-timing-function: cubic-bezier(.25,.7,.35,1); }
  16%  { transform: translateY(0); animation-timing-function: ease-in-out; }
  21%  { transform: translateY(-16px); animation-timing-function: ease-in-out; }
  26%  { transform: translateY(0); animation-timing-function: ease-in-out; }
  42%  { transform: translateY(-6px); animation-timing-function: ease-in-out; }
  56%  { transform: translateY(0); animation-timing-function: ease-in-out; }
  70%  { transform: translateY(-6px); animation-timing-function: ease-in-out; }
  80%  { transform: translateY(0); animation-timing-function: ease-in-out; }
  88%  { transform: translateY(16px); animation-timing-function: cubic-bezier(.6,-.2,.8,.4); }
  100% { transform: translateY(calc(-100% - 45vh)); }
}
@keyframes sp-bubble {
  0%, 24%  { opacity: 0; transform: scale(.6); }
  28%      { opacity: 1; transform: scale(1.06); }
  31%      { opacity: 1; transform: scale(1); }
  78%      { opacity: 1; transform: scale(1); }
  85%,100% { opacity: 0; transform: scale(.6); }
}

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

  .sp-swing { --sp-swing-len: 58vh; }
  .sp-swing__hero { width: 90px; height: 128px; left: -45px; top: calc(100% - 6px); }

  .sp-spidey { right: 12px; width: 110px; height: 250px; }
  .sp-spidey__thread { height: 104px; }
  .sp-spidey__sway { left: 4px; top: 100px; width: 102px; height: 139px; transform-origin: 47px -100px; }
  .sp-spidey__bubble { top: 148px; font-size: .82rem; }
  .sp-spidey__bubble small { font-size: .68rem; }
}

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