/* Геометрия и каскад approved HTML reference, без demo/runtime dependency. */
@font-face { font-family: Im7vtMascotMontserrat; src:url('../images/mascot/montserrat.woff2') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; }
#im7vt-mascot { position:fixed; right:env(safe-area-inset-right, 0px); bottom:env(safe-area-inset-bottom, 0px); width:1920px; height:1080px; transform:scale(var(--mascot-scale,1)); transform-origin:right bottom; overflow:hidden; pointer-events:none; z-index:90000; font-family:Im7vtMascotMontserrat,Arial,sans-serif; color:#433228; line-height:normal; }
#im7vt-mascot.stage--mobile { width:440px; height:854px; }
#im7vt-mascot, #im7vt-mascot *, #im7vt-mascot *::before, #im7vt-mascot *::after { box-sizing:border-box; }
#im7vt-mascot button { font:inherit; text-transform:none; letter-spacing:0; margin:0; min-width:0; min-height:0; }
#im7vt-mascot img { max-width:none; }
#im7vt-mascot .invite { position: absolute; inset: 0; background: transparent; }
#im7vt-mascot .invite--mobile { display: none; }
#im7vt-mascot.stage--mobile .invite--desktop { display: none; }
#im7vt-mascot.stage--mobile .invite--mobile { display: block; }
#im7vt-mascot .bubble { position: absolute; background: #fff; color: #433228; }
#im7vt-mascot .bubble .mascot-title,
#im7vt-mascot .bubble p { margin: 0; }
#im7vt-mascot .bubble-head { position: absolute; display: flex; justify-content: space-between; align-items: flex-start; }
#im7vt-mascot .bubble p { position: absolute; color: #7b6e66; font-weight: 500; letter-spacing: 0; }
#im7vt-mascot .bubble .mascot-title { font-weight: 700; letter-spacing: 0; }
#im7vt-mascot .cta { position: absolute; padding: 0; border: 0; color: #fff; background: #faa61a; font-weight: 700; cursor: pointer; }
#im7vt-mascot .tail { position: absolute; display: block; width: 0; height: 0; }
#im7vt-mascot .close { position: absolute; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 50%; }
#im7vt-mascot .close::before { content: ""; position: absolute; border: solid #ccc; border-radius: 50%; }
#im7vt-mascot .close::after { content: "×"; position: absolute; inset: 0; display: grid; place-items: center; color: #7b6e66; font-family: Arial, sans-serif; font-weight: 400; line-height: 1; }
#im7vt-mascot .bubble--desktop { left: 1574.0168px; top: 618.563px; width: 216.98px; height: 235.75px; border-radius: 25.38px; box-shadow: 0 7px 15px rgb(67 50 40 / 20%); }
#im7vt-mascot .bubble-head--desktop { left: 19.03394px; top: 19.03339px; width: 178.92px; height: 44px; }
#im7vt-mascot .bubble-head--desktop .mascot-title { width: 157.34px; font-size: 17.7647057px; line-height: 22px; }
#im7vt-mascot .bubble--desktop p { left: 19.03369px; top: 73.18488px; width: 178.92px; height: 90px; font-size: 15.2268906px; line-height: 18px; }
#im7vt-mascot .cta--desktop { left: 19.03369px; top: 173.3361px; width: 178.92px; height: 43.38px; border-radius: 38.97px; font-size: 15.2268896px; line-height: 18px; }
#im7vt-mascot .close--desktop { width: 21.75px; height: 21.75px; }
#im7vt-mascot .bubble-head--desktop .close { left: 157.3445px; top: 0; }
#im7vt-mascot .close--desktop::before { left: .91px; top: .91px; width: 19.94px; height: 19.94px; border-width: .91px; }
#im7vt-mascot .close--desktop::after { font-size: 13px; transform: translateY(-.2px); }
#im7vt-mascot .tail--desktop { left: 210.6389px; top: 189.5292px; border-top: 11.42px solid transparent; border-bottom: 11.42px solid transparent; border-left: 22.84px solid white; }
#im7vt-mascot .mascot-viewport { position: absolute; overflow: hidden; }
#im7vt-mascot .mascot-viewport--desktop { left: 1806px; top: 719px; width: 114px; height: 204px; }
#im7vt-mascot .mascot-viewport--desktop img { position: absolute; left: -2.0455767px; top: -2.76221px; width: 213px; height: 246.6666667px; }
#im7vt-mascot .bubble--mobile { left: 136px; top: 500px; width: 186.75px; height: 206.08px; border-radius: 21.84px; box-shadow: 0 6.02px 12.91px rgb(67 50 40 / 20%); }
#im7vt-mascot .bubble-head--mobile { left: 16.38159px; top: 16.38123px; width: 153.99px; height: 38px; }
#im7vt-mascot .bubble-head--mobile .mascot-title { width: 135.42px; font-size: 15.2892952px; line-height: 19px; }
#im7vt-mascot .bubble--mobile p { left: 16.38141px; top: 63.1181px; width: 153.99px; height: 80px; font-size: 13.1051102px; line-height: 15.7261322px; }
#im7vt-mascot .cta--mobile { left: 16.38141px; top: 151.8549px; width: 153.99px; height: 37.84px; border-radius: 33.54px; font-size: 13.1051102px; line-height: 16px; }
#im7vt-mascot .close--mobile { left: 135.4195px; top: 0; width: 18.72px; height: 18.72px; }
#im7vt-mascot .close--mobile::before { left: .78009px; top: .78009px; width: 17.16px; height: 17.16px; border-width: .78px; }
#im7vt-mascot .close--mobile::after { font-size: 11px; transform: translateY(-.2px); }
#im7vt-mascot .tail--mobile { left: 181.5255px; top: 166.0048px; border-top: 9.83px solid transparent; border-bottom: 9.83px solid transparent; border-left: 19.66px solid white; }
#im7vt-mascot .mascot-viewport--mobile { left: 342px; top: 591px; width: 98.11px; height: 175.57px; }
#im7vt-mascot .mascot-viewport--mobile img { position: absolute; left: -1.58856px; top: -2.3718167px; width: 183.3333333px; height: 212.3333333px; }
#im7vt-mascot[data-state="video"] .invite { display: none; }
#im7vt-mascot .bubble,
#im7vt-mascot .mascot-viewport { will-change: left, top, width, height, border-radius, transform, opacity; }
#im7vt-mascot .bubble {
  transition:
    left 560ms cubic-bezier(.22,1,.36,1),
    top 560ms cubic-bezier(.22,1,.36,1),
    width 560ms cubic-bezier(.22,1,.36,1),
    height 560ms cubic-bezier(.22,1,.36,1),
    border-radius 560ms cubic-bezier(.22,1,.36,1),
    box-shadow 360ms ease;
}
#im7vt-mascot .bubble > .bubble-head,
#im7vt-mascot .bubble > p,
#im7vt-mascot .bubble > .cta {
  transition: opacity 150ms ease, transform 240ms ease;
}
#im7vt-mascot .morph-video { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 220ms ease 90ms; }
#im7vt-mascot .morph-video__title { position: absolute; margin: 0; color: #433228; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#im7vt-mascot .morph-video__area { position: absolute; overflow: hidden; background: #d9d9d9; }
#im7vt-mascot .morph-video__play { position: absolute; left: 50%; top: 50%; padding: 0; border: 0; border-radius: 50%; background: #faa61a; transform: translate(-50%,-50%); box-shadow: 0 5.08px 15.23px rgb(250 166 26 / 40%); cursor: pointer; }
#im7vt-mascot .morph-video__play::after { content: ""; position: absolute; left: 42%; top: 50%; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 14px solid white; transform: translate(-35%,-50%); }
#im7vt-mascot .morph-video__close { z-index: 2; }
#im7vt-mascot[data-state="video"] .invite { display: block; }
#im7vt-mascot[data-state="video"] .bubble > .bubble-head,
#im7vt-mascot[data-state="video"] .bubble > p,
#im7vt-mascot[data-state="video"] .bubble > .cta { opacity: 0; transform: translateY(-5px); pointer-events: none; }
#im7vt-mascot[data-state="video"] .bubble > .tail { opacity: 0; }
#im7vt-mascot[data-state="video"] .morph-video { opacity: 1; pointer-events: auto; }
#im7vt-mascot.stage--desktop[data-state="video"] .bubble--desktop { left: 1283.43701px; top: 528px; width: 507.56px; height: 330.73px; border-radius: 25.38px; }
#im7vt-mascot .bubble--desktop .morph-video__title { left: 15.2269px; top: 15.22693px; width: 424px; height: 22px; font-size: 17.7647057px; line-height: 22px; }
#im7vt-mascot .bubble--desktop .morph-video__close { left: 470.5835px; top: 15.3506px; width: 21.75px; height: 21.75px; }
#im7vt-mascot .bubble--desktop .morph-video__area { left: 15.2269px; top: 47.37817px; width: 477.11px; height: 268.37px; border-radius: 19.03px; }
#im7vt-mascot .bubble--desktop .morph-video__play { width: 50.76px; height: 50.76px; }
#im7vt-mascot.stage--mobile[data-state="video"] .bubble--mobile { left: 17px; top: 390px; width: 406px; height: 264.58px; border-radius: 20.3px; }
#im7vt-mascot .bubble--mobile .morph-video__title { left: 12.18px; top: 12.18px; width: 360px; height: 19px; font-size: 13.7px; line-height: 19px; }
#im7vt-mascot .bubble--mobile .morph-video__close { left: 376px; top: 10.5px; width: 18.72px; height: 18.72px; }
#im7vt-mascot .bubble--mobile .morph-video__area { left: 12.18px; top: 39px; width: 381.69px; height: 214.7px; border-radius: 15.22px; }
#im7vt-mascot .bubble--mobile .morph-video__play { width: 44px; height: 44px; }
@media (prefers-reduced-motion: reduce) {
#im7vt-mascot .bubble,
#im7vt-mascot .mascot-viewport,
#im7vt-mascot .morph-video,
#im7vt-mascot .bubble > * { animation: none !important; transition-duration: 1ms !important; }
}
#im7vt-mascot.stage--desktop .mascot-viewport--desktop { top: 836px; }
#im7vt-mascot.stage--desktop .bubble--desktop { top: 735.563px; }
#im7vt-mascot.stage--desktop[data-state="video"] .bubble--desktop { top: 645px; }
#im7vt-mascot.stage--desktop .invite--desktop { display: block; }
#im7vt-mascot.stage--desktop .invite--mobile { display: none !important; }
#im7vt-mascot.stage--mobile .invite--desktop { display: none !important; }
#im7vt-mascot.stage--mobile .invite--mobile { display: block; }
#im7vt-mascot .mascot-viewport {
  opacity: 0;
  transform: translateX(115%) translateY(18px) rotate(5deg);
  transition: opacity 180ms ease, transform 720ms cubic-bezier(.16,1.18,.3,1);
}
#im7vt-mascot .bubble {
  opacity: 0;
  transform: translateY(12px) scale(.92);
  transform-origin: 100% 78%;
  transition:
    left 560ms cubic-bezier(.22,1,.36,1),
    top 560ms cubic-bezier(.22,1,.36,1),
    width 560ms cubic-bezier(.22,1,.36,1),
    height 560ms cubic-bezier(.22,1,.36,1),
    border-radius 560ms cubic-bezier(.22,1,.36,1),
    box-shadow 360ms ease,
    opacity 200ms ease,
    transform 420ms cubic-bezier(.22,1,.36,1);
}
#im7vt-mascot .morph-video__title { text-overflow: clip; }
#im7vt-mascot .bubble--desktop .morph-video__title { width: 442px; font-size: 15.2px; line-height: 22px; }
#im7vt-mascot .bubble--mobile .morph-video__title { width: 350px; font-size: 11.6px; line-height: 18px; }
#im7vt-mascot .morph-video__play::after {
  left: 53%; top: 50%;
  border-top-width: 7.6px;
  border-bottom-width: 7.6px;
  border-left-width: 13.2px;
  transform: translate(-50%,-50%);
}
@media (prefers-reduced-motion: reduce) {
#im7vt-mascot .bubble,
#im7vt-mascot .mascot-viewport { transition-delay: 0ms !important; transition-duration: 1ms !important; }
}
#im7vt-mascot .bubble { animation: none !important; opacity: 0; pointer-events: none; transform: translate(24px, 12px) scale(.86); transform-origin: right bottom; transition: left 560ms cubic-bezier(.22,1,.36,1), top 560ms cubic-bezier(.22,1,.36,1), width 560ms cubic-bezier(.22,1,.36,1), height 560ms cubic-bezier(.22,1,.36,1), border-radius 560ms ease, opacity 230ms ease, transform 440ms cubic-bezier(.2,1.12,.3,1); }
#im7vt-mascot .mascot-viewport { opacity: 1; transform: translateX(125%) rotate(5deg); transform-origin: right bottom; transition: transform 760ms cubic-bezier(.18,1.14,.32,1); }
#im7vt-mascot[data-phase='peeking'] .mascot-viewport,
#im7vt-mascot[data-phase='invite'] .mascot-viewport,
#im7vt-mascot[data-phase='video'] .mascot-viewport,
#im7vt-mascot[data-phase='closing-card'] .mascot-viewport { transform: translateX(0) rotate(0); }
#im7vt-mascot[data-phase='invite'] .bubble,
#im7vt-mascot[data-phase='video'] .bubble { opacity: 1; pointer-events: auto; transform: none; }
#im7vt-mascot[data-phase='closing-card'] .bubble { opacity: 0; transform: translate(32px, 14px) scale(.78); transition-duration: 340ms; }
#im7vt-mascot[data-state='video'][data-phase='closing-card'] .bubble { transform: translate(22px, 36px) scale(.12); }
#im7vt-mascot[data-phase='leaving'] .mascot-viewport { transform: translateX(125%) rotate(5deg); transition-duration: 520ms; transition-timing-function: cubic-bezier(.55,0,.8,.45); }
#im7vt-mascot[data-phase='hidden'] .bubble,
#im7vt-mascot[data-phase='hidden'] .mascot-viewport { transition: none; visibility: hidden; }
#im7vt-mascot .morph-video { overflow: hidden; border-radius: inherit; transition: opacity 190ms ease; }
#im7vt-mascot[data-state='video'] .morph-video { transition-delay: 220ms; }
#im7vt-mascot .bubble > .tail { transition: opacity 130ms ease; }
#im7vt-mascot .morph-video__title { text-overflow: clip; white-space: normal; overflow: visible; }
#im7vt-mascot .bubble--desktop .morph-video__title { width: 442px; font-size: 15.2px; }
#im7vt-mascot .bubble--mobile .morph-video__title { width: 350px; font-size: 11.6px; }
#im7vt-mascot .morph-video__close { position: absolute; }
#im7vt-mascot .bubble--desktop .morph-video__close { left: auto; right: 15.23px; }
#im7vt-mascot .bubble--mobile .morph-video__close { left: auto; right: 11.28px; }
#im7vt-mascot .morph-video__play::after { left: 52%; top: 50%; transform: translate(-50%, -50%); }
#im7vt-mascot[data-state='video'] .bubble-head,
#im7vt-mascot[data-state='video'] .bubble > p,
#im7vt-mascot[data-state='video'] .bubble > .cta { visibility: hidden; }
@media(prefers-reduced-motion:reduce) {
#im7vt-mascot .bubble,
#im7vt-mascot .mascot-viewport,
#im7vt-mascot .morph-video { transition-duration: 1ms; transition-delay: 0ms; }
}
/* Website adapter: only controls accept pointers, bitmap and tail never do. */
#im7vt-mascot .mascot-viewport, #im7vt-mascot .tail { pointer-events:none !important; }
#im7vt-mascot[data-phase='invite'] .bubble { pointer-events:none; }
#im7vt-mascot[data-phase='invite'] .cta, #im7vt-mascot[data-phase='invite'] .bubble-head .close { pointer-events:auto; }
#im7vt-mascot[data-blocked='true'] { visibility:hidden; }
#im7vt-mascot[data-state='video'] { z-index:100010; }
#im7vt-mascot .morph-video__media { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#d9d9d9; }
#im7vt-mascot .morph-video__media:not([controls]) { pointer-events:none; }
#im7vt-mascot .morph-video__play[hidden] { display:none; }
#im7vt-mascot .morph-video__error { position:absolute; inset:15px; margin:0; font-size:13px; color:#433228; }
body.im7vt-mascot-modal-open { overflow:hidden; }

/* USER revision: independent full-viewport gallery-style viewer, native media aspect. */
#im7vt-mascot[data-state='video'] { visibility: hidden; }
#im7vt-mascot-viewer { --video-card-radius:32px; --video-card-padding:20px; position:fixed; inset:0; z-index:2147483647; display:flex; align-items:center; justify-content:center; background:rgba(18,14,12,.9); overscroll-behavior:contain; padding:env(safe-area-inset-top,0px) 16px env(safe-area-inset-bottom,0px); font-family:Im7vtMascotMontserrat,Arial,sans-serif; color:#433228; }
#im7vt-mascot-viewer[hidden] { display:none; }
#im7vt-mascot-viewer, #im7vt-mascot-viewer * { box-sizing:border-box; }
#im7vt-mascot-viewer .mascot-viewer__card { width:var(--video-width, min(90vw,900px)); max-width:100%; border-radius:var(--video-card-radius); overflow:hidden; background:#fff; }
#im7vt-mascot-viewer .mascot-viewer__header { position:relative; display:flex; align-items:center; gap:12px; padding:12px 14px; min-height:64px; }
#im7vt-mascot-viewer h2 { flex:1; min-width:0; margin:0; font:700 16px/1.35 Im7vtMascotMontserrat,Arial,sans-serif; }
#im7vt-mascot-viewer button { display:grid; place-items:center; flex-shrink:0; padding:0; margin:0; border:0; color:white; background:#faa61a; cursor:pointer; }
#im7vt-mascot-viewer button:focus-visible { outline:3px solid #433228; outline-offset:3px; }
#im7vt-mascot-viewer button svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#im7vt-mascot-viewer .mascot-viewer__close { width:36px; height:36px; border-radius:50%; }
#im7vt-mascot-viewer .mascot-viewer__area { border-radius:max(0px, calc(var(--video-card-radius) - var(--video-card-padding))); overflow:hidden; position:relative; width:100%; aspect-ratio:var(--video-ratio, 1.538888889); background:#120e0c; }
#im7vt-mascot-viewer video { display:block; width:100%; height:100%; object-fit:contain; }
#im7vt-mascot-viewer .mascot-viewer__play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:60px; height:60px; border-radius:50%; box-shadow:0 5px 15px #0004; }
#im7vt-mascot-viewer .mascot-viewer__play svg { fill:currentColor; stroke:none; }
#im7vt-mascot-viewer .mascot-viewer__fullscreen { position:absolute; right:12px; bottom:12px; width:40px; height:40px; border-radius:10px; background:rgba(18,14,12,.75); }
#im7vt-mascot-viewer.is-playing .mascot-viewer__fullscreen { bottom:56px; }
#im7vt-mascot-viewer [hidden] { display:none !important; }
#im7vt-mascot-viewer .mascot-viewer__error { position:absolute; left:12px; right:12px; top:12px; padding:10px; color:#433228; background:white; font-size:13px; }
#im7vt-mascot-viewer:fullscreen { width:100%; height:100% !important; top:0 !important; }
@media(max-width:760px) { #im7vt-mascot-viewer h2 { font-size:13px; } #im7vt-mascot-viewer .mascot-viewer__header { gap:8px; padding:10px; } }

/* Mini playback first; only the expand control opens the gallery-style backdrop. */
#im7vt-mascot[data-state='video']:not([data-blocked='true']) { visibility:visible; }
#im7vt-mascot[data-state='video'] .bubble { visibility:hidden; pointer-events:none; }
#im7vt-mascot-viewer:not(.is-expanded) { background:transparent; pointer-events:none; z-index:100010; padding:0; }
#im7vt-mascot-viewer:not(.is-expanded) .mascot-viewer__card { position:absolute; right:calc(var(--mini-right) + env(safe-area-inset-right,0px)); bottom:calc(var(--mini-bottom) + env(safe-area-inset-bottom,0px)); pointer-events:auto; box-shadow:0 7px 15px rgb(67 50 40 / 20%); }
#im7vt-mascot-viewer.is-expanded .mascot-viewer__card { position:relative; }

/* Match header #price: yellow → red, 150ms ease; pressed dark red. */
#im7vt-mascot .bubble > .cta {
  color:#433228;
  transition:opacity 150ms ease, transform 240ms ease, background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
#im7vt-mascot-viewer .mascot-viewer__play,
#im7vt-mascot-viewer .mascot-viewer__close {
  transition:background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
@media (hover:hover) {
  #im7vt-mascot .cta:hover,
  #im7vt-mascot .cta:focus-visible,
  #im7vt-mascot-viewer .mascot-viewer__play:hover,
  #im7vt-mascot-viewer .mascot-viewer__play:focus-visible,
  #im7vt-mascot-viewer .mascot-viewer__close:hover,
  #im7vt-mascot-viewer .mascot-viewer__close:focus-visible { background-color:#ba1b1e; color:#fff; }
}
#im7vt-mascot .cta:active,
#im7vt-mascot-viewer .mascot-viewer__play:active,
#im7vt-mascot-viewer .mascot-viewer__close:active { background-color:#a31114; color:#fff; }
@media (prefers-reduced-motion:reduce) {
  #im7vt-mascot .bubble > .cta,
  #im7vt-mascot-viewer .mascot-viewer__play,
  #im7vt-mascot-viewer .mascot-viewer__close { transition:none; }
}

/* Darken only the preview; keep Play and expand controls at full brightness. */
#im7vt-mascot-viewer:not(.is-playing) .mascot-viewer__area::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:rgba(0,0,0,.5);
  pointer-events:none;
}
#im7vt-mascot-viewer .mascot-viewer__play,
#im7vt-mascot-viewer .mascot-viewer__fullscreen,
#im7vt-mascot-viewer .mascot-viewer__error { z-index:2; }

/* White card inset: 20px around the media, with a matching title-to-video gap. */
#im7vt-mascot-viewer .mascot-viewer__card { padding:var(--video-card-padding); }
#im7vt-mascot-viewer .mascot-viewer__header { padding:0 0 20px; min-height:56px; }

/* Close the card first, then let the existing mascot leaving phase run. */
#im7vt-mascot-viewer .mascot-viewer__card {
  opacity:1;
  transform: none;
  transform-origin:right bottom;
  transition:opacity 230ms ease, transform 340ms cubic-bezier(.2,1.12,.3,1);
}
#im7vt-mascot-viewer.is-closing .mascot-viewer__card {
  opacity:0;
  transform:translate(22px,36px) scale(.12);
  pointer-events:none;
}
@media(prefers-reduced-motion:reduce) {
  #im7vt-mascot-viewer .mascot-viewer__card { transition-duration:1ms; }
}