/* Pre-rendered motion for the exact cutout art already used by Onimli.
   Each figure starts as a complete still and is replaced by its canvas only
   while the 40-frame sequence is playing. Surrounding copy never moves. */

.kinetic-paper {
  display: block;
  margin: 0;
  aspect-ratio: var(--kinetic-paper-ratio, 8 / 5);
  isolation: isolate;
  contain: layout paint;
  pointer-events: none;
}

.kinetic-paper__poster,
.kinetic-paper__canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.kinetic-paper__canvas {
  position: absolute;
  inset: 0;
}

.kinetic-paper__canvas[hidden],
.kinetic-paper__poster[hidden] {
  display: none;
}

html.a11y-no-motion .kinetic-paper__canvas {
  display: none !important;
}

/* Home hero: the rendered frame is wider and shorter than the original tall
   source, because the receiver needs room to swing. The receiver itself fills
   34.8% of that stage horizontally and 82% of it vertically, so the stage is
   sized and offset from the incumbent receiver width — the object keeps exactly
   the position and scale it had as a plain <img>. */
.hero-receiver.kinetic-paper {
  --kinetic-paper-ratio: 2 / 3;
  --hero-receiver-width: clamp(245px, 25vw, 360px);
  top: calc(-250px - var(--hero-receiver-width) * 0.388);
  left: calc(clamp(28px, 8vw, 128px) - var(--hero-receiver-width) * 0.937);
  width: calc(var(--hero-receiver-width) * 2.875);
  height: auto;
  opacity: 1;
  transform-origin: 50% 9%;
}

html.cutout-motion .home-entry .hero-receiver.kinetic-paper,
html.cutout-motion .home-entry:not(.is-cutout-visible) .hero-receiver.kinetic-paper,
html.a11y-no-motion .hero-receiver.kinetic-paper {
  opacity: 1;
  transition: none;
  transform: rotate(7deg) !important;
}

/* Existing home illustrations retain the dimensions and transforms supplied
   by cutout-site.css. Only their frame geometry changes. */
.demo-proof__object.kinetic-paper {
  --kinetic-paper-ratio: 8 / 5;
  width: min(148%, 765px);
  max-width: none;
  margin-inline: -24%;
}

.demo-proof__object.kinetic-paper .kinetic-paper__canvas {
  filter:
    drop-shadow(0 34px 34px rgb(23 22 18 / 0.2))
    drop-shadow(0 8px 10px rgb(23 22 18 / 0.12));
}

.scene-machine__visual {
  display: grid;
  width: 100%;
  justify-items: center;
}

.scene-machine__visual > .kinetic-paper {
  --kinetic-paper-ratio: 8 / 5;
  position: relative;
  width: min(141%, 705px);
  max-width: none;
  margin-inline: -20%;
  filter:
    drop-shadow(0 40px 40px rgb(23 22 18 / 0.24))
    drop-shadow(0 10px 12px rgb(23 22 18 / 0.14));
}

.spam-stamp.kinetic-paper {
  --kinetic-paper-ratio: 5 / 6;
  right: calc(46% - clamp(58px, 5.8vw, 74px));
  bottom: calc(-10px - clamp(104px, 10.1vw, 131px));
  width: clamp(274px, 26.5vw, 345px);
  height: auto;
  transition: none;
  transform: rotate(-7deg);
}

/* The phone and paper tag remain the same live-information composition. The
   rendered pixels form the physical object; HTML copy stays readable above it. */
.facts-panel .summary-object--kinetic {
  width: min(100%, 560px);
  height: auto;
  min-height: 0;
  aspect-ratio: 600 / 820;
  margin: 0 auto;
  overflow: visible;
}

.kinetic-paper--summary {
  --kinetic-paper-ratio: 600 / 820;
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  filter: drop-shadow(0 28px 30px rgb(23 22 18 / 0.22));
}

.facts-panel .summary-object--kinetic .summary-object__screen {
  z-index: 3;
  top: 15%;
  right: 30%;
  width: 35%;
  min-height: 34%;
  padding: 22px 14px 16px;
}

.facts-panel .summary-object--kinetic .summary-object__tag-copy {
  z-index: 4;
  top: 59%;
  right: 27%;
  bottom: auto;
  width: 42%;
}

.connection-object--kinetic .kinetic-paper {
  --kinetic-paper-ratio: 48 / 23;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 165%;
  max-width: 710px;
  filter: drop-shadow(0 24px 26px rgb(23 22 18 / 0.19));
  transform: translate(-50%, -50%);
}

/* Inner-page opening objects replace only their own incumbent raster. */
html.site-shell body.page-shell .page-head.page-head--kinetic > .wrap {
  position: relative;
  z-index: 1;
}

html.site-shell body.page-shell .page-head.page-head--kinetic > .page-head-kinetic {
  position: absolute;
  z-index: 0;
  margin: 0;
  pointer-events: none;
}

html.site-shell body.page-shell--how .page-head.page-head--kinetic::before,
html.site-shell body.page-shell[data-visual="ai-hebrew-answering-machine"] .page-head.page-head--kinetic::before,
html.site-shell body.page-shell[data-visual="kosher-phone-direct-line"] .page-head.page-head--kinetic::before {
  background-image: none !important;
  opacity: 0 !important;
}

html.site-shell body.page-shell--how .page-head-kinetic--how {
  --kinetic-paper-ratio: 120 / 71;
  top: 32%;
  left: -24px;
  width: min(62vw, 790px);
  opacity: 0.9;
  filter: grayscale(1) contrast(1.08) drop-shadow(0 20px 30px rgb(32 29 24 / 0.13));
  /* The stage adds a small transparent margin around the engraving, so the
     soft edge is measured on the artwork rather than on the frame. */
  -webkit-mask-image: radial-gradient(ellipse 73% 68% at 35% 45%, #000 57%, transparent 100%);
  mask-image: radial-gradient(ellipse 73% 68% at 35% 45%, #000 57%, transparent 100%);
}

html.site-shell body.page-shell[data-visual="ai-hebrew-answering-machine"] .page-head-kinetic--ai {
  --kinetic-paper-ratio: 24 / 17;
  top: 21%;
  left: clamp(-58px, -4.5vw, -18px);
  width: min(52vw, 663px);
  filter: drop-shadow(0 25px 24px rgb(32 29 24 / 0.17));
}

html.site-shell body.page-shell[data-visual="kosher-phone-direct-line"] .page-head-kinetic--kosher {
  --kinetic-paper-ratio: 1;
  top: 42px;
  left: calc(6% - 3.6vw);
  width: min(37vw, 462px);
  filter: drop-shadow(0 25px 24px rgb(32 29 24 / 0.17));
}

/* The pricing machine was the incumbent mobile opening object. Desktop keeps
   the existing price-ticket composition. */
html.site-shell body.page-shell--pricing .page-head-kinetic--pricing {
  display: none;
}

html.site-shell.a11y-large-text body.page-shell .page-head-kinetic {
  display: none !important;
}

@media (max-width: 980px) and (min-width: 821px) {
  .hero-receiver.kinetic-paper {
    left: calc(2vw - var(--hero-receiver-width) * 0.937);
    opacity: 0.62;
  }
}

@media (max-width: 820px) {
  .hero-receiver.kinetic-paper {
    display: none;
  }

  .demo-proof__object.kinetic-paper {
    width: calc(100% + 32px);
    max-width: 680px;
  }

  .scene-machine__visual > .kinetic-paper {
    width: min(132%, 660px);
    max-width: none;
  }

  #spam .spam-stamp.kinetic-paper {
    right: auto;
    bottom: -49px;
    left: -50px;
    display: block;
    width: 195px;
    opacity: 0.88;
  }

  .facts-panel .summary-object--kinetic {
    display: block;
    width: min(100%, 318px);
    height: auto;
    min-height: 0;
    aspect-ratio: 600 / 820;
    margin: 14px auto 0;
  }

  .facts-panel .summary-object--kinetic .summary-object__screen {
    top: 15%;
    right: 30%;
    width: 36%;
    min-height: 34%;
    padding: 16px 10px 10px;
  }

  .facts-panel .summary-object--kinetic .summary-object__screen span {
    padding-bottom: 9px;
    font-size: 0.68rem;
  }

  .facts-panel .summary-object--kinetic .summary-object__screen strong {
    margin-top: 11px;
    font-size: 0.88rem;
  }

  .facts-panel .summary-object--kinetic .summary-object__screen p {
    margin: 7px 0 14px;
    font-size: 0.72rem;
  }

  .facts-panel .summary-object--kinetic .summary-object__screen small {
    font-size: 0.68rem;
  }

  .facts-panel .summary-object--kinetic .summary-object__tag-copy {
    top: 60%;
    right: 27%;
    bottom: auto;
    width: 44%;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 4px 7px;
    font-size: 0.61rem;
  }

  .facts-panel .summary-object--kinetic .summary-object__tag-copy strong {
    font-size: 0.68rem;
  }

  .connection-object--kinetic .kinetic-paper {
    width: 114%;
  }

  html.site-shell body.page-shell--how .page-head-kinetic--how,
  html.site-shell body.page-shell[data-visual="ai-hebrew-answering-machine"] .page-head-kinetic--ai,
  html.site-shell body.page-shell[data-visual="kosher-phone-direct-line"] .page-head-kinetic--kosher,
  html.site-shell body.page-shell--pricing .page-head-kinetic--pricing {
    top: auto;
    left: 50%;
    opacity: 1;
    transform: translateX(-50%);
  }

  html.site-shell body.page-shell--how .page-head-kinetic--how {
    bottom: -8px;
    display: block;
    width: min(114vw, 430px);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 78%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 20%, #000 78%, transparent);
  }

  html.site-shell body.page-shell[data-visual="ai-hebrew-answering-machine"] .page-head-kinetic--ai {
    bottom: -15px;
    width: min(84vw, 320px);
  }

  html.site-shell body.page-shell[data-visual="kosher-phone-direct-line"] .page-head-kinetic--kosher {
    bottom: -28px;
    width: min(70vw, 275px);
  }

  html.site-shell body.page-shell--pricing .page-head.page-head--kinetic::before {
    background-image: none !important;
    opacity: 0 !important;
  }

  html.site-shell body.page-shell--pricing .page-head-kinetic--pricing {
    --kinetic-paper-ratio: 12 / 13;
    bottom: -36px;
    display: block;
    width: min(68vw, 260px);
    filter: drop-shadow(0 18px 18px rgb(32 29 24 / 0.15));
  }
}

@media (max-width: 420px) {
  .scene-machine__visual > .kinetic-paper {
    width: 136%;
    margin-inline: -18%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kinetic-paper,
  .kinetic-paper * {
    animation: none !important;
    transition: none !important;
  }
}