/* S2 · The Skip (#skip) — THE FEED homepage, design.md Part III (FINAL-SPEC §4 S2).
   The markup is the FINISHED state; client/home/s02-skip.ts adds the timeline
   classes on the section, cumulatively:
     .is-armed  → .is-run (ad bar fills, 3s) → .is-ready (Skip enabled)
     → .is-cursor (hand glides in) → .is-tap → .is-skipped (double slab slices
     the ad away, the reel snaps in) → .is-done (Replay shows).
   .is-instant switches every transition/animation off for one frame (reset /
   finishing silently). The player chrome + Skip button are media UI: they sit
   in a dir="ltr" box and never mirror. */

/* ═══ band + decorative slabs ═══════════════════════════════════════════════ */
.skip {
  isolation: isolate;
}
/* top-start dark slab, continuing the cover's diagonal (slope = --slab-tilt) */
.skip__corner {
  position: absolute;
  z-index: 0;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 132px;
  block-size: 43px;
  background: var(--slab);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  pointer-events: none;
}
.skip__corner:dir(rtl) {
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}
:root[data-theme="dark"] .skip__corner {
  background: var(--surface-2);
}
/* the bottom-end paper triangle behind the hand cut-out (slide 2), ≥900 */
.skip__floor,
.skip__bleed {
  display: none;
}

/* ═══ layout ════════════════════════════════════════════════════════════════ */
.skip__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--s-7);
}
.skip__copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-inline-size: 0;
}
.skip__device {
  position: relative;
  display: grid;
  justify-self: center;
  inline-size: clamp(220px, 64vw, 380px);
}
.skip__stage,
.skip__btn {
  grid-area: 1 / 1;
}
.skip__foot {
  display: flex;
  justify-content: center;
  min-block-size: 44px;
}

@media (min-width: 900px) {
  .skip__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 1fr auto 1fr;
    column-gap: clamp(16px, 2vw, 32px);
    row-gap: var(--s-6);
  }
  .skip__copy {
    grid-column: 1 / span 6;
    grid-row: 2;
  }
  .skip__foot {
    grid-column: 1 / span 6;
    grid-row: 3;
    align-self: start;
    justify-content: flex-start;
  }
  .skip__device {
    grid-column: 8 / span 4;
    grid-row: 1 / span 3;
    justify-self: center;
    inline-size: min(100%, 300px);
  }
  .skip__corner {
    inline-size: 38%;
    block-size: 22%;
  }
  /* the big hand + film-strip cut-out, bleeding off the end edge; it lives in
     the full-bleed band (outside the zoomed .wrap) */
  .skip__floor {
    display: block;
    position: absolute;
    z-index: 0;
    inset-block-end: 0;
    inset-inline-end: 0;
    inline-size: 58%;
    block-size: 62%;
    background: var(--screen);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    pointer-events: none;
  }
  .skip__floor:dir(rtl) {
    clip-path: polygon(0 0, 0 100%, 100% 100%);
  }
  .skip__bleed {
    display: block;
    position: absolute;
    z-index: 1;
    inset-block-end: 0;
    inset-inline-end: 0;
    block-size: min(92%, calc(860px * var(--ui-zoom, 1)));
    aspect-ratio: 699 / 1100;
    translate: 24% 0;
    pointer-events: none;
  }
  .skip__bleed:dir(rtl) {
    translate: -24% 0;
  }
  .skip__hand {
    block-size: 100%;
    inline-size: auto;
  }
  .skip__bleed:dir(rtl) .skip__hand {
    transform: scaleX(-1);
  }
}
/* 900–1279: the phone fills nearly all the room beside the copy, so the hand
   cut-out could only sit BEHIND it (a stray blurred blob) — leave the paper
   floor triangle on its own there */
@media (min-width: 900px) and (max-width: 1279.98px) {
  .skip__bleed {
    display: none;
  }
}
@media (min-width: 1280px) {
  .skip__device {
    grid-column: 7 / span 4;
    inline-size: min(100%, 380px);
  }
  .skip__bleed {
    translate: 10% 0;
  }
  .skip__bleed:dir(rtl) {
    translate: -10% 0;
  }
}
/* 1280–1919: the gap between the phone and the end edge grows ~0.38px per
   viewport px; size the cut-out to that gap and bleed 40% of it off the edge
   so the film strip + hands sit wholly beside the phone, never behind it
   (≥1920 the full-size cut-out already clears the phone) */
@media (min-width: 1280px) and (max-width: 1919.98px) {
  .skip__bleed {
    block-size: min(92%, 860px, calc(99vw - 680px));
    translate: 40% 0;
  }
  .skip__bleed:dir(rtl) {
    translate: -40% 0;
  }
}

/* ═══ copy ══════════════════════════════════════════════════════════════════ */
.skip__echo {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.skip__echo-line {
  font-size: 0.78em;
  opacity: 0.86;
}
.skip__copy {
  container-type: inline-size;
}
.page-home .skip__h {
  /* "COMMERCIAL" must fit the copy column whole (never break inside a word) */
  font-size: min(calc(var(--fs-h2) * 0.92), 11.2cqi);
  overflow-wrap: normal;
}
.page-home:lang(ar) .skip__h {
  font-size: min(var(--fs-ar-h2), 10.5cqi);
  max-inline-size: 14ch;
}
.skip__line {
  margin: 0;
  max-inline-size: 22ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 100%;
  font-size: clamp(1.25rem, 0.98rem + 1.15vw, 2.125rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.page-home:lang(ar) .skip__line {
  font-family: var(--font-ar-text);
  font-weight: 600;
  font-size: clamp(1.375rem, 1.05rem + 1.35vw, 2.5rem);
  line-height: 1.55;
  max-inline-size: none;
  letter-spacing: 0;
}
/* on the yellow band the karaoke pill is a black slab with the word in yellow */
.skip .cap-pill {
  background: var(--slab);
}
.skip [data-captions] .w.is-key-on {
  color: var(--yellow);
}
html:not(.js-motion) .skip [data-captions] .w[data-key]:not(.is-red) {
  background: var(--slab);
  color: var(--yellow);
  padding-inline: 0.12em;
}
.skip__line .w[data-key] {
  margin-inline: 0.1em;
}
/* the post-skip re-pop starts from a hard cut, not a fade-out */
.skip .skip__line.is-reset .w {
  transition: none;
}

/* ═══ the phone + its layers ════════════════════════════════════════════════ */
.skip__stage {
  position: relative;
  min-inline-size: 0;
}
.phone--skip {
  inline-size: 100%;
}
.phone--skip .phone__screen {
  isolation: isolate;
  overflow: clip;
}
:root[data-theme="dark"] .phone--skip {
  outline: 1px solid var(--line);
}
.skip__after,
.skip__ad,
.skip__slice,
.skip__chrome {
  position: absolute;
  inset: 0;
}

/* the AFTER: the real reel */
.skip__after {
  z-index: 1;
  background: var(--slab);
  transform-origin: 50% 50%;
  transition:
    opacity 500ms var(--ease-out) 120ms,
    transform 500ms var(--ease-out) 120ms;
}
.skip__video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.skip__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--yellow);
}
.skip__empty svg {
  inline-size: 56%;
  block-size: auto;
}
/* a soft scrim top + bottom so the chips stay legible on any frame */
.skip__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--scrim), transparent 22%),
    linear-gradient(to top, var(--scrim), transparent 30%);
  pointer-events: none;
}
.skip__tag {
  position: absolute;
  inset-block-start: 9%;
  inset-inline: 6%;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--on-slab);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: clamp(0.6875rem, 4.4cqi, 0.9375rem);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
}
.skip__tag-mark {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2.3em;
  block-size: 2.3em;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--on-yellow);
}
.skip__tag-mark svg {
  inline-size: 72%;
  block-size: auto;
}
.skip__tag-brand {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.skip__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: none;
  place-items: center;
  inline-size: 22%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--scrim);
  color: var(--on-slab);
  pointer-events: none;
}
.skip__play svg {
  inline-size: 46%;
  block-size: auto;
  fill: currentColor;
  translate: 6% 0;
}
/* reduced motion / no-JS: the poster carries a play mark until it plays */
html:not(.js-motion) .skip:not(.is-playing) .skip__play {
  display: grid;
}
.skip__like {
  position: absolute;
  inset-block-end: 13%;
  inset-inline-start: 6%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: 6px;
  padding-inline: 9px 12px;
  border-radius: var(--r-pill);
  background: var(--scrim);
  color: var(--on-slab);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(0.75rem, 5cqi, 1rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.skip__like-ico {
  inline-size: 1.15em;
  block-size: 1.15em;
  fill: var(--red);
}
.skip__likes {
  position: relative;
  display: inline-flex;
}
.skip__odo {
  display: none;
}
.skip.has-odo .skip__likes-num {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.skip.has-odo .skip__odo {
  display: inline-flex;
}
.skip__odo-d {
  display: inline-block;
  block-size: 1em;
  overflow: hidden;
}
.skip__odo-strip {
  display: flex;
  flex-direction: column;
  transform: translateY(calc(var(--to, 0) * -1em));
  transition: transform 1200ms var(--ease-out);
  transition-delay: calc(300ms + var(--di, 0) * 60ms);
}
.skip__odo-strip > span {
  display: block;
  block-size: 1em;
  line-height: 1;
}
.skip__hearts {
  position: absolute;
  inset-block-end: 17%;
  inset-inline-start: 9%;
  display: none;
  pointer-events: none;
}
.skip__heart {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: clamp(16px, 9cqi, 30px);
  aspect-ratio: 1;
  opacity: 0;
  --hr: -6deg;
}
.skip__heart svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  fill: var(--red);
}
.skip__heart--1 {
  inset-inline-start: 22px;
  --hr: 12deg;
}
.skip__heart--2 {
  inset-inline-start: 6px;
  --hr: -12deg;
}

/* the BEFORE: the B&W commercial (hidden in the finished state) */
.skip__ad {
  z-index: 2;
  visibility: hidden;
  overflow: clip;
  background: linear-gradient(var(--surface-2), var(--screen) 70%);
}
.skip__ad-img {
  /* a tight crop of the motion-blurred film strip reads as grainy B&W
     commercial footage (and never repeats the big cut-out beside the phone) */
  position: absolute;
  inset-block-start: -56%;
  inset-inline-start: -100%;
  inline-size: 318%;
  block-size: auto;
  max-inline-size: none;
  filter: grayscale(1) contrast(1.08);
  transform-origin: 62% 70%;
}
.skip__ad-top {
  position: absolute;
  inset-block-start: 9%;
  inset-inline: 6%;
  display: flex;
  align-items: center;
  gap: 7px;
  inline-size: fit-content;
  max-inline-size: 88%;
  padding-block: 5px;
  padding-inline: 5px 12px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--screen) 88%, transparent);
  color: var(--on-yellow);
  font-family: var(--font-text);
  font-size: clamp(0.6875rem, 4.2cqi, 0.9375rem);
  line-height: 1.15;
}
.skip__ad-avatar {
  flex: none;
  inline-size: 2.2em;
  block-size: 2.2em;
  border-radius: 50%;
  background: var(--ink-muted);
  box-shadow: 0 0 0 2px var(--screen);
}
.skip__ad-who {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}
.skip__ad-who b {
  font-weight: 700;
}
.skip__ad-who span {
  opacity: 0.62;
  font-size: 0.86em;
}
/* the shouty "commercial" line, set like a cheap TV ad */
.skip__ad-line {
  position: absolute;
  inset-block-start: 40%;
  inset-inline: 6%;
  padding-block: 0.3em 0.35em;
  padding-inline: 0.4em;
  background: var(--slab);
  color: var(--on-slab);
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(1rem, 10cqi, 2.125rem);
  line-height: 0.95;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-4deg);
}
.page-home:lang(ar) .skip__ad-line {
  font-family: var(--font-ar-display);
  font-weight: 800;
  font-stretch: normal;
  font-size: clamp(1rem, 8.6cqi, 1.875rem);
  line-height: 1.35;
  text-transform: none;
}
.skip__ad-cta {
  position: absolute;
  inset-block-end: 20%;
  inset-inline: 6%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.7em;
  padding-inline: 0.9em;
  border-radius: var(--r-xs);
  background: var(--slab);
  color: var(--on-slab);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: clamp(0.6875rem, 4.4cqi, 0.9375rem);
  line-height: 1;
}
/* the ad CONTENT follows the page language (dir set in the template) while
   the ad's own crop + the transport UI stay ltr: in rtl the start inset is
   the RIGHT edge, so 318% − 100% − 100% = 118% keeps the same physical crop */
.skip__ad-img:dir(rtl) {
  inset-inline-start: -118%;
}
.skip__ad-cta:dir(rtl) svg {
  transform: scaleX(-1);
}
.skip__ad-cta svg {
  inline-size: 1.1em;
  block-size: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the double slab (black trailing, yellow leading), skewed on the brand tilt */
.skip__slice {
  z-index: 3;
  overflow: clip;
  pointer-events: none;
}
.skip__slab {
  position: absolute;
  inset: 0;
  display: none;
  transform: translateX(-115%);
}
.skip__slab-k,
.skip__slab-y {
  position: absolute;
  inset-block: -4%;
  transform: skewX(calc(var(--slab-tilt) * -1));
}
.skip__slab-k {
  inset-inline-start: 0;
  inline-size: 18%;
  background: var(--slab);
}
.skip__slab-y {
  inset-inline-start: 17.5%;
  inline-size: 60%;
  background: var(--yellow);
}

/* player chrome: "Ad · 0:03" + the ad progress bar */
.skip__chrome {
  z-index: 4;
  inset-block-start: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-inline: 6%;
  padding-block-end: 6%;
  pointer-events: none;
  transition: opacity var(--d-sm) var(--ease-out);
}
.skip__time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-block: 4px;
  padding-inline: 5px 8px;
  border-radius: var(--r-xs);
  background: var(--scrim);
  color: var(--on-slab);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(0.625rem, 4cqi, 0.8125rem);
  line-height: 1;
}
.skip__time b {
  padding-block: 2px;
  padding-inline: 5px;
  border-radius: 3px;
  background: var(--yellow);
  color: var(--on-yellow);
  font-family: var(--font-text);
  font-weight: 700;
}
.skip__bar {
  position: relative;
  align-self: stretch;
  block-size: 4px;
}
.skip__bar-clip {
  position: absolute;
  inset: 0;
  overflow: clip;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--on-slab) 35%, transparent);
}
.skip__bar-fill {
  position: absolute;
  inset: 0;
  background: var(--yellow);
}
.skip__bar-head {
  position: absolute;
  inset: 0;
}
.skip__bar-dot {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0;
  inline-size: 12px;
  block-size: 12px;
  margin-block-start: -6px;
  margin-inline-end: -6px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 2px var(--slab);
}

/* ═══ the Skip button (a real button over the phone's bottom-end corner) ════ */
/* phones: the button stays inside the bezel (a real player's Skip sits on the
   screen); ≥900 it may overhang the phone's corner, as on profile slide 2 */
.skip__btn {
  position: relative;
  z-index: 5;
  align-self: end;
  justify-self: end;
  margin-block-end: 22%;
  margin-inline-end: 5%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--on-yellow);
  border-radius: var(--r-sm);
  cursor: pointer;
  perspective: 500px;
  -webkit-tap-highlight-color: transparent;
}
.skip__face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-block-size: 50px;
  min-inline-size: 7.5em;
  padding-inline: 18px 14px;
  border: 2.5px solid var(--on-yellow);
  border-radius: var(--r-sm);
  background: var(--yellow);
  color: var(--on-yellow);
  box-shadow: var(--sh-2);
  font-family: var(--font-display);
  font-weight: 760;
  font-stretch: 105%;
  font-size: clamp(0.9375rem, 0.86rem + 0.3vw, 1.1875rem);
  line-height: 1;
  white-space: nowrap;
  transform-origin: 50% 50%;
  transition:
    opacity var(--d-sm) var(--ease-out),
    transform var(--d-sm) var(--ease-out);
}
.page-home:lang(ar) .skip__face {
  font-family: var(--font-ar-display);
  font-weight: 700;
  font-stretch: normal;
}
.skip__ready {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.skip__glyph {
  inline-size: 1.05em;
  block-size: 1.05em;
  fill: currentColor;
}
.skip__wait {
  display: none;
}
.skip__n {
  display: inline-block;
  min-inline-size: 0.7em;
  font-weight: 600;
  text-align: center;
}
@media (hover: hover) and (pointer: fine) {
  .skip:not(.is-armed) .skip__btn:hover .skip__face,
  .skip.is-ready:not(.is-skipped) .skip__btn:hover .skip__face {
    transform: translateY(-2px);
  }
}
.skip:not(.is-armed) .skip__btn:active .skip__face,
.skip.is-ready .skip__btn:active .skip__face {
  transform: scale(0.95);
  transition-duration: 90ms;
}
@media (min-width: 900px) {
  .skip__btn {
    margin-inline-end: -7%;
  }
}
.page-home .skip__btn:focus-visible {
  outline-offset: 4px;
}

/* the hand cursor (inline SVG, black outline, paper fill) + its tap ripple */
.skip__cursor {
  position: absolute;
  z-index: 2;
  inset-block-start: calc(60% - 3px);
  inset-inline-start: calc(78% - 23px);
  display: none;
  inline-size: 56px;
  block-size: 56px;
  pointer-events: none;
}
.skip__cursor svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}
.skip__cursor-hand {
  fill: var(--on-slab);
  stroke: var(--on-yellow);
  stroke-width: 1.7;
  stroke-linejoin: round;
}
.skip__cursor-line {
  fill: none;
  stroke: var(--on-yellow);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.skip__ripple {
  position: absolute;
  z-index: 1;
  inset-block-start: calc(60% - 22px);
  inset-inline-start: calc(78% - 22px);
  inline-size: 44px;
  block-size: 44px;
  border: 2px solid var(--on-yellow);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

/* ═══ Replay ════════════════════════════════════════════════════════════════ */
.skip__replay {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  padding-inline: 16px 20px;
  border: 1.5px solid var(--on-yellow);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--on-yellow) 8%, transparent);
  color: var(--on-yellow);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--d-xs) var(--ease-out);
}
.page-home:lang(ar) .skip__replay {
  font-family: var(--font-ar-text);
  font-size: var(--fs-ar-ui);
  letter-spacing: 0;
  text-transform: none;
}
.skip__replay[hidden] {
  display: none;
}
.skip__replay svg {
  inline-size: 18px;
  block-size: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.skip__replay:dir(rtl) svg {
  transform: scaleX(-1);
}
@media (hover: hover) and (pointer: fine) {
  .skip__replay:hover {
    transform: translateY(-1px);
  }
}
.skip__replay:active {
  transform: scale(0.97);
}

/* ═══ the timeline states (set by s02-skip.ts; never present without motion) ═ */
.skip__bar-fill,
.skip__bar-head {
  transition: transform 3000ms linear;
}
.skip.is-armed .skip__ad {
  visibility: visible;
}
.skip.is-armed:not(.is-run) .skip__bar-fill,
.skip.is-armed:not(.is-run) .skip__bar-head {
  transform: translateX(-100%);
}
.skip.is-run .skip__ad-img {
  animation: skip-kb 4.6s linear both;
}
.skip.is-armed:not(.is-skipped) .skip__after {
  opacity: 0;
  transform: scale(0.96);
}
.skip.is-armed:not(.is-skipped) .skip__like {
  opacity: 0;
  transform: scale(0.7);
}
.skip__like {
  transform-origin: 0 50%;
  transition:
    opacity 260ms var(--ease-pop) 300ms,
    transform 260ms var(--ease-pop) 300ms;
}
.skip.is-armed:not(.is-skipped) .skip__odo-strip {
  transform: translateY(calc(var(--from, 0) * -1em));
}

/* countdown: a dark pill "Skip in 3, 2, 1"; a tap is ignored (aria-disabled) */
.skip.is-armed:not(.is-ready) .skip__face {
  border-color: transparent;
  background: color-mix(in srgb, var(--slab) 80%, transparent);
  color: var(--on-slab);
  box-shadow: none;
}
.skip.is-armed:not(.is-ready) .skip__wait {
  display: inline;
}
.skip.is-armed:not(.is-ready) .skip__ready {
  display: none;
}
.skip.is-armed:not(.is-ready) .skip__btn {
  cursor: default;
}
/* the flip to "Skip ad" */
.skip.is-ready:not(.is-tap) .skip__face {
  animation: skip-flip 280ms var(--ease-pop) both;
}

/* the hand cursor glides in, then taps */
.skip.is-cursor .skip__cursor {
  display: block;
  animation: skip-cursor-in 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.skip.is-tap .skip__cursor svg {
  transform-origin: 41% 8%;
  animation: skip-press 220ms var(--ease-out) both;
}
.skip.is-tap .skip__face {
  animation: skip-press-btn 220ms var(--ease-out) both;
}
.skip.is-tap .skip__ripple {
  animation: skip-ripple 500ms var(--ease-out) both;
}

/* the skip: the double slab slices across, the ad is cut away behind it */
.skip.is-skipped .skip__slab {
  display: block;
  animation: skip-slice 560ms var(--ease-wipe) both;
}
.skip.is-skipped .skip__ad {
  animation: skip-adout 560ms var(--ease-wipe) both;
}
.skip.is-skipped .skip__chrome {
  opacity: 0;
}
.skip.is-skipped .skip__hearts {
  display: block;
}
.skip.is-skipped .skip__heart {
  animation: skip-heart 1200ms var(--ease-out) both;
  animation-delay: calc(300ms + var(--hi, 0) * 160ms);
}
.skip__heart--1 {
  --hi: 1;
}
.skip__heart--2 {
  --hi: 2;
}
.skip.is-skipped .skip__btn {
  visibility: hidden;
  transition: visibility 0s linear 300ms;
}
.skip.is-skipped .skip__face {
  transform: translateY(10px) scale(0);
  transition-timing-function: var(--ease-in);
}
.skip.is-skipped .skip__cursor {
  opacity: 0;
  transition: opacity 260ms linear 200ms;
}
/* finished: nothing of the ad is left, even after a silent finish */
.skip.is-done .skip__ad,
.skip.is-done .skip__slab,
.skip.is-done .skip__hearts,
.skip.is-done .skip__cursor {
  display: none;
}
.skip.is-done .skip__replay:not([hidden]) {
  animation: skip-pop var(--d-sm) var(--ease-pop) both;
}
/* reset / silent finish: one frame with no motion at all */
.skip.is-instant,
.skip.is-instant * {
  transition: none !important;
  animation: none !important;
}

@keyframes skip-kb {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08) translateY(-2%);
  }
}
@keyframes skip-flip {
  from {
    transform: rotateX(90deg);
  }
  to {
    transform: rotateX(0);
  }
}
@keyframes skip-cursor-in {
  from {
    opacity: 0;
    transform: translate(150%, 190%);
  }
  25% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes skip-press {
  50% {
    transform: scale(0.86);
  }
}
@keyframes skip-press-btn {
  50% {
    transform: scale(0.94);
  }
}
@keyframes skip-ripple {
  from {
    opacity: 0.5;
    transform: scale(0.6);
  }
  to {
    opacity: 0;
    transform: scale(1.8);
  }
}
/* one carrier moves both slabs across the screen (in % of the screen width) */
@keyframes skip-slice {
  from {
    transform: translateX(-118%);
  }
  to {
    transform: translateX(140%);
  }
}
/* the ad's start edge rides 3% inside the black slab's trailing edge (the
   skewed edge leans ±39.4% of the screen width over its height) */
@keyframes skip-adout {
  from {
    clip-path: polygon(-75.4% 0, 100% 0, 100% 100%, -154.4% 100%);
  }
  to {
    clip-path: polygon(182.4% 0, 100% 0, 100% 100%, 103.4% 100%);
  }
}
@keyframes skip-heart {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5) rotate(0);
  }
  15% {
    opacity: 1;
    transform: translateY(-40%) scale(1.05) rotate(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-460%) scale(0.9) rotate(var(--hr));
  }
}
@keyframes skip-pop {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(0.3em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}