/* =====================================================================
   Sunset Solutions v5: the hero film
   A customer orders on their phone; the business gets it on WhatsApp.
   The stage is drawn at a fixed design size (desktop 1160×600, phone 380×620)
   and scaled to fit, so the choreography is identical at every width.
   Only transform and opacity animate.
   ===================================================================== */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.film-hero { padding: clamp(20px, 3vw, 40px) 0 clamp(40px, 6vw, 72px); background: #17121C; }
.hero-inner {
  position: relative; max-width: 1240px; margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* ---------- Copy ---------- */
.hero-copy { position: relative; z-index: 1; }
.film-hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); line-height: 1.06; margin-top: 16px; color: #FBF7F2; }
.film-hero h1 em { font-style: normal; color: #FF9A5C; }
.film-hero .lead { margin-top: 18px; max-width: 34rem; }
.film-hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 28px; }
.copy-cover {
  position: absolute; inset: -12px; z-index: 2; background: #17121C; pointer-events: none;
  transform: scaleY(0); transform-origin: top center; transition: transform 900ms cubic-bezier(.65, 0, .35, 1);
}
.hero-copy > :not(.copy-cover) { transition: transform 900ms cubic-bezier(.22, 1, .36, 1); }
/* Desktop: while the film plays the copy waits under the cover (still painted, so it counts for search and load speed) */
.film-play .film-hero.d:not(.s-final) .copy-cover { transform: scaleY(1); }
.film-play .film-hero.d:not(.s-final) .hero-copy > :not(.copy-cover) { transform: translateY(16px); }
/* Phones never hide the headline: the copy leads, and the film plays underneath it from the first second */
.film-hero.m .copy-cover { display: none; }
/* Safety net: if the script never runs, the cover lifts by itself */
.film-play .film-hero:not(.film-ready) .copy-cover { animation: cover-lift 900ms cubic-bezier(.65, 0, .35, 1) 6s forwards; }
@keyframes cover-lift { to { transform: scaleY(0); } }

/* ---------- Film frame ---------- */
.film { position: relative; z-index: 2; height: var(--fh, 560px); pointer-events: none; }
.stage {
  position: absolute; left: 50%; top: 0; width: var(--sw, 1160px); height: var(--sh, 600px);
  transform: translateX(-50%) scale(var(--s, 1)); transform-origin: top center;
}
.stage::before {   /* warm glow beneath the phones, like the last light of a sunset */
  content: ""; position: absolute; left: 50%; bottom: -10%; width: 90%; height: 70%; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(233, 30, 99, .28), rgba(255, 122, 24, .12) 55%, rgba(255, 122, 24, 0));
  opacity: 0; transition: opacity 1.2s ease-out;
}
.s-on .stage::before { opacity: 1; }
.cam { position: absolute; inset: 0; transform-origin: 50% 46%; transform: scale(var(--cz, 1)); transition: transform 1.2s cubic-bezier(.65, 0, .35, 1); }
/* A single control row above the scene: what this is, how far along, and a way out */
.film-bar { position: absolute; z-index: 4; left: 0; right: 0; top: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; pointer-events: none; }
.film-tag { justify-self: start; font: 500 .6875rem/1.35 var(--body); letter-spacing: .12em; text-transform: uppercase; color: rgba(251, 247, 242, .5); }
.film-progress { justify-self: center; width: clamp(90px, 18vw, 180px); height: 2px; border-radius: 2px; overflow: hidden; background: rgba(251, 247, 242, .16); }
.film-progress span { display: block; height: 100%; background: linear-gradient(90deg, #E91E63, #FF7A18); transform: scaleX(0); transform-origin: left center; }
.film-btn {
  pointer-events: auto; justify-self: end; display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 15px; border-radius: 999px;
  border: 1px solid rgba(251, 247, 242, .3); background: rgba(23, 18, 28, .35); color: rgba(251, 247, 242, .86);
  font: 500 .75rem/1 var(--body); letter-spacing: .04em; cursor: pointer; white-space: nowrap;
  transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out;
}
.film-btn:hover { background: rgba(251, 247, 242, .12); border-color: rgba(251, 247, 242, .6); color: #FBF7F2; }
.film-btn[hidden] { display: none; }

/* ---------- Phones ---------- */
.ph {
  position: absolute; left: 0; top: 0; width: 250px; height: 520px; padding: 9px; border-radius: 40px;
  background: #0B080D; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .85), inset 0 0 0 1.5px rgba(255, 255, 255, .09);
  transform: translate(var(--x, 0px), var(--y, 0px)) rotate(var(--r, 0deg)) scale(var(--k, 1));
  opacity: var(--o, 1);
  transition: transform 1.1s cubic-bezier(.65, 0, .35, 1), opacity .7s ease-out;
}
.ph::after { content: ""; position: absolute; left: 50%; top: 15px; width: 64px; height: 18px; translate: -50% 0; border-radius: 12px; background: #0B080D; }
.scr { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 31px; background: #FBF7F2; color: #17121C; font: 400 11px/1.35 var(--body); }
.ph-o { z-index: 2; }

/* Desktop choreography (stage 1160 × 600) */
.film-hero.d .ph-c { --x: 455px; --y: 40px; --o: 0; --k: .94; }
.film-hero.d .ph-o { --x: 1240px; --y: 40px; --o: 0; }
.film-hero.d { --cz: 1.14; }
.film-hero.d.s-on .ph-c { --o: 1; --k: 1; }
.film-hero.d.s-pulled { --cz: 1; }
.film-hero.d.s-pulled .ph-c { --x: 300px; }
.film-hero.d.s-pulled .ph-o { --x: 610px; --o: 1; }
.film-hero.d.s-final .ph-c { --x: -10px; --y: 52px; --r: -4deg; }
.film-hero.d.s-final .ph-o { --x: 920px; --y: 30px; --r: 4deg; }

/* Phone choreography (stage 380 × 620) */
.film-hero.m .ph-c { --x: 65px; --y: 30px; --o: 0; --k: .94; }
.film-hero.m .ph-o { --x: 440px; --y: 84px; --o: 0; --k: .9; }
.film-hero.m.s-on .ph-c { --o: 1; --k: 1; }
.film-hero.m.s-pulled .ph-c { --x: 4px; --y: 10px; --k: .88; }
.film-hero.m.s-pulled .ph-o { --x: 126px; --y: 84px; --o: 1; }
/* The last frame is one phone, centred: the confirmed order, with nothing overlapping it */
.film-hero.m.s-final .ph-c { --x: 0px; --y: 30px; --k: .9; --o: 0; }
.film-hero.m.s-final .ph-o { --x: 65px; --y: 50px; --k: 1; --r: 0deg; --o: 1; }

/* On phones the copy leads and the film plays beneath it; a short band above the scene holds the controls */
.film-hero.m .film { margin-top: 18px; height: calc(var(--fh, 560px) + 62px); }
.film-hero.m .stage { top: 62px; }
.film-hero.m .film-bar { grid-template-columns: 1fr auto; grid-template-rows: auto auto; row-gap: 10px; }
.film-hero.m .film-tag { grid-column: 1; grid-row: 1; font-size: .625rem; letter-spacing: .1em; }
.film-hero.m .film-btn { grid-column: 2; grid-row: 1; }
.film-hero.m .film-progress { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; width: auto; }
/* On desktop the row floats above the phones, clear of both */
.film-hero.d .film-bar { top: -24px; }

/* Desktop: the copy sits between the two phones once they part */
.film-hero.d .hero-copy {
  position: absolute; z-index: 1; left: 50%; top: 0; height: var(--fh, 560px); width: min(540px, calc(var(--s, 1) * 540px));
  translate: -50% 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
}
.film-hero.d .hero-copy .lead { margin-left: auto; margin-right: auto; font-size: 1.0625rem; }
.film-hero.d h1 { font-size: clamp(2.3rem, 3.9vw, 3.4rem); }
.film-hero.d .hero-copy .actions { justify-content: center; }

/* ---------- Customer: the order page ---------- */
.op { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; padding: 40px 14px 14px; transition: opacity .45s ease-out, transform .5s ease-out; }
.op-top { display: flex; align-items: center; gap: 9px; }
.op-logo { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #FFE3EA; }
.op-logo svg, .op-art svg { width: 60%; height: 60%; fill: none; stroke: #E91E63; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.op-top b { display: block; font: 500 12.5px/1.2 var(--head); }
.op-top small { color: #6B6472; font-size: 10px; }
.op-hero { height: 86px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 16px; background: linear-gradient(135deg, #FFE3EA, #FFEBD9); }
.op-art { width: 40px; height: 40px; display: grid; place-items: center; }
.op-hero p { font: 500 11px/1.2 var(--head); color: #17121C; }
.op-item { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; background: #fff; border: 1px solid rgba(23, 18, 28, .09); transition: transform .18s ease-out; }
.op-item > div { flex: 1; min-width: 0; }
.op-item b { display: block; font-weight: 500; font-size: 11px; line-height: 1.25; }
.op-field { padding: 9px 10px; border-radius: 12px; background: #fff; border: 1px solid rgba(23, 18, 28, .09); font-size: 10.5px; color: #17121C; }
.op-item small { display: block; color: #6B6472; font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-price { font-weight: 500; font-size: 10.5px; white-space: nowrap; }
.op-price i, .op-total i { font-style: normal; font-variant-numeric: tabular-nums; }
.tick { width: 15px; height: 15px; flex: none; border-radius: 50%; border: 1.5px solid rgba(23, 18, 28, .2); }
.op-item.sel { border-color: #E91E63; }
.op-item.sel .tick { border-color: #E91E63; background: #E91E63; box-shadow: inset 0 0 0 2.5px #fff; }
.op-label { margin-top: 2px; color: #6B6472; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.op-days { display: flex; gap: 6px; }
.op-days span { flex: 1; padding: 7px 0; border-radius: 10px; text-align: center; background: #fff; border: 1px solid rgba(23, 18, 28, .09); font-weight: 500; font-size: 10.5px; transition: transform .18s ease-out; }
.op-days span.sel { background: #17121C; border-color: #17121C; color: #FBF7F2; }
.op-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid rgba(23, 18, 28, .08); }
.op-total small { display: block; color: #6B6472; font-size: 9px; }
.op-total b { font: 500 15px/1.1 var(--head); }
.op-send {
  position: relative; overflow: hidden; margin-left: auto; padding: 11px 16px; border-radius: 999px;
  background: linear-gradient(90deg, #E91E63, #FF7A18); color: #17121C; font-weight: 500; font-size: 11.5px; white-space: nowrap;
  transition: transform .18s ease-out;
}
.s-hover .op-send { animation: breathe .7s ease-in-out infinite alternate; }
.s-sent .op-send, .op-send.press { animation: none; }
.press { transform: scale(.95) !important; }
.op-send::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px; border-radius: 50%; background: rgba(255, 255, 255, .6); transform: scale(0); opacity: 0; }
.op-send.burst::after { animation: btn-ripple 600ms ease-out; }
.op-done {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center;
  opacity: 0; transform: translateY(14px); transition: opacity .45s ease-out .1s, transform .55s cubic-bezier(.22, 1, .36, 1) .1s;
}
.done-check { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #E91E63, #FF7A18); transform: scale(.4); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1) .2s; }
.done-check svg { width: 30px; height: 30px; fill: none; stroke: #17121C; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.op-done b { font: 500 18px/1.2 var(--head); }
.op-done small { color: #6B6472; font-size: 11px; max-width: 170px; }
.s-sent .op { opacity: 0; transform: translateY(-14px); }
.s-sent .op-done { opacity: 1; transform: none; }
.s-sent .done-check { transform: scale(1); }

/* ---------- Business: WhatsApp ---------- */
.wa { background: #EFE7DE; }
.wa-top { display: flex; align-items: center; gap: 9px; padding: 38px 12px 10px; background: #17121C; color: #FBF7F2; }
.wa-av { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #E91E63, #FF7A18); color: #17121C; font: 500 11px var(--head); }
.wa-top b { display: block; font-weight: 500; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.wa-top small { color: rgba(251, 247, 242, .6); font-size: 9.5px; }
.wa-body { display: flex; flex-direction: column; gap: 9px; padding: 14px 12px; }
.bub {
  max-width: 84%; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 6px; border-radius: 12px;
  font-size: 10.5px; box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
  opacity: 0; transform: translateY(10px) scale(.97); transform-origin: left bottom;
  transition: opacity .4s ease-out, transform .5s cubic-bezier(.22, 1, .36, 1);
}
.bub b { font-weight: 500; font-size: 11px; }
.bub-total { font-weight: 500; }
.bub small { align-self: flex-end; display: flex; align-items: center; gap: 3px; color: #6B6472; font-size: 8.5px; }
.bub small svg { width: 13px; height: 13px; fill: none; stroke: #34A0E0; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bub.in { align-self: flex-start; background: #fff; border-top-left-radius: 4px; }
.bub.out { align-self: flex-end; background: #D9FDD3; border-top-right-radius: 4px; transform-origin: right bottom; }
.wa-confirm {
  align-self: flex-start; padding: 8px 14px; border-radius: 999px; background: #17121C; color: #FBF7F2; font-weight: 500; font-size: 11px;
  opacity: 0; transform: translateY(6px); transition: opacity .4s ease-out .25s, transform .4s ease-out .25s;
}
.s-msg .bub.in, .s-confirmed .bub.out { opacity: 1; transform: none; }
.s-msg .wa-confirm { opacity: 1; transform: none; }
.s-confirmed .wa-confirm { opacity: .4; }
.note {
  position: absolute; left: 8px; right: 8px; top: 34px; z-index: 3; display: flex; gap: 9px; align-items: flex-start;
  padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, .97); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(-150%);
  transition: transform .65s cubic-bezier(.2, 1.25, .35, 1), opacity .3s ease-out;
}
.note-app { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; background: #25D366; }
.note-app svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }
.note b { display: block; font-weight: 500; font-size: 9.5px; color: #6B6472; }
.note span { font-size: 10.5px; }
.s-note .note { opacity: 1; transform: none; }
.s-msg .note { opacity: 0; transform: translateY(-150%); transition-duration: .45s, .3s; }

/* ---------- Opening scene: the vague chat, then the X ---------- */
.bad { position: absolute; inset: 0; z-index: 2; background: #EFE7DE; opacity: 0; transition: opacity .5s ease-out; }
.film-hero:not(.s-clear) .bad { opacity: 1; }   /* covers the order page from the very first frame */
.bad-win { transition: opacity .3s ease-out; }
.s-nope .bad-win { opacity: .35; }
.bad-win { position: absolute; top: 78px; left: 0; right: 0; bottom: 0; overflow: hidden; padding: 12px; }
.bad-list { display: flex; flex-direction: column; gap: 7px; transform: translateY(var(--chat-y, 0px)); transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.bad .bub { padding: 7px 10px; }
.bad .bub.show { opacity: 1; transform: none; transition-duration: .25s, .3s; }
.s-nope .ph-c { animation: shake .45s ease-out .1s; }

/* Centred on the customer's phone */
.nope { position: absolute; left: var(--nx, 580px); top: var(--ny, 300px); z-index: 8; width: 0; height: 0; }
.film-hero.d .nope { --nx: 580px; --ny: 300px; }
.film-hero.m .nope { --nx: 190px; --ny: 290px; }
.nope-x i {
  position: absolute; left: -170px; top: -9px; width: 340px; height: 18px; border-radius: 9px;
  background: linear-gradient(90deg, #E91E63, #FF7A18); box-shadow: 0 10px 30px -6px rgba(233, 30, 99, .6);
  transform: rotate(var(--r, 45deg)) scaleX(0); transition: transform .28s cubic-bezier(.3, 1.5, .5, 1), opacity .35s ease-out;
}
.nope-x i + i { --r: -45deg; transition-delay: .12s, 0s; }
.s-nope .nope-x i { transform: rotate(var(--r, 45deg)) scaleX(1); }
.nope-burst i {
  position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: #FFC145; opacity: 0;
}
.nope-burst i:nth-child(3n+2) { background: #E91E63; border-radius: 2px; }
.nope-burst i:nth-child(3n) { background: #FF7A18; }
.s-nope .nope-burst i { animation: burst .9s cubic-bezier(.15, .8, .3, 1) .3s; }
.nope-text {
  position: absolute; left: 0; top: 0; width: max-content; margin: 0; padding: 14px 26px; border-radius: 999px;
  background: #17121C; box-shadow: 0 0 0 2px #FFC145, 0 24px 50px -12px rgba(0, 0, 0, .7);
  color: #FBF7F2; font: 500 30px/1.15 var(--head); text-align: center; white-space: nowrap;
  opacity: 0; transform: translate(-50%, -50%) scale(.3); transition: opacity .25s ease-out .35s, transform .55s cubic-bezier(.3, 1.6, .5, 1) .35s;
}
.nope-text em { font-style: normal; color: #FF9A5C; }
.film-hero.m .nope-text { font-size: 25px; padding: 12px 22px; }
.s-nope .nope-text { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
.s-clear .nope-x i { opacity: 0; transition-delay: 0s; }
.s-clear .nope-text { opacity: 0; transform: translate(-50%, -140%) scale(1.05) rotate(-3deg); transition: opacity .4s ease-in, transform .5s ease-in; }

/* ---------- The cursor (a fingertip on phones) ---------- */
.f-cursor {
  position: absolute; left: 0; top: 0; z-index: 10; width: 24px; height: 24px; opacity: 0;
  transform: translate(var(--cx, 900px), var(--cy, 560px));
  transition: transform .6s cubic-bezier(.65, 0, .35, 1), opacity .3s ease-out;
}
.show-cursor .f-cursor { opacity: 1; }
.f-cursor .arrow { position: relative; z-index: 1; width: 24px; height: 24px; fill: #fff; stroke: #17121C; stroke-width: 1.3; stroke-linejoin: round; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }
.f-tap { position: absolute; left: -9px; top: -9px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; opacity: 0; }
.f-cursor.tapping .f-tap { animation: tap-ring .5s ease-out; }
.film-hero.m .f-cursor .arrow { display: none; }
.film-hero.m .f-cursor::before { content: ""; position: absolute; left: -12px; top: -12px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .35); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8); transition: transform .18s ease-out; }
.film-hero.m .f-cursor.tapping::before { transform: scale(.8); }
.film-hero.m .f-tap { left: -12px; top: -12px; width: 36px; height: 36px; }

/* ---------- "See it as your business" ---------- */
.try {
  position: relative; z-index: 3; max-width: 700px; margin: 28px auto 0; padding: 26px clamp(18px, 4vw, 34px) 28px; text-align: center;
  border-radius: 28px; background: linear-gradient(160deg, rgba(233, 30, 99, .16), rgba(255, 122, 24, .08) 60%, rgba(251, 247, 242, .03));
  box-shadow: inset 0 0 0 1px rgba(255, 154, 92, .35);
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .6s ease-out, transform .6s ease-out;
}
/* Two soft rings pulse out from the card once, as the film ends, to invite a try */
.try::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px #FF9A5C; opacity: 0; pointer-events: none;
}
.played .try::before { animation: try-ping 1.4s ease-out .5s 2; }
.played .try, html:not(.film-play) .try { opacity: 1; transform: none; pointer-events: auto; }
.try-kicker { font: 500 .75rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: #FFC145; }
.try-label { margin-top: 10px; font: 500 clamp(1.375rem, 3vw, 1.75rem)/1.2 var(--head); color: #FBF7F2; }
.try-label em { font-style: normal; color: #FF9A5C; }
.try-sub { margin: 8px auto 0; max-width: 30rem; font-size: .9375rem; color: rgba(251, 247, 242, .75); }
.try-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.try input[hidden] { display: none; }
.try input, .try select {
  min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(251, 247, 242, .22);
  background: rgba(251, 247, 242, .06); color: #FBF7F2; font: 400 1rem var(--body);
}
.try input { flex: 1 1 220px; min-width: 0; }
.try input::placeholder { color: rgba(251, 247, 242, .6); }
.try select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF7F2' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
.try select option { color: #17121C; }
.try input:focus, .try select:focus { outline: 2px solid #E91E63; outline-offset: 2px; border-color: transparent; }
.try .btn { min-height: 46px; }
.try-cta { margin-top: 10px; color: #FBF7F2; }
.try-cta[hidden] { display: none; }
.film-hero .try-cta span { background-image: linear-gradient(rgba(251, 247, 242, .3), rgba(251, 247, 242, .3)); }

/* Snap to a state without animating (used by Skip and when a replay rewinds) */
.f-instant, .f-instant * { transition: none !important; animation: none !important; }

@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.05); } }
@keyframes tap-ring { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(1.8); } }
@keyframes shake { 0%, 100% { translate: 0 0; } 20% { translate: -9px 0; } 40% { translate: 8px 0; } 60% { translate: -6px 0; } 80% { translate: 4px 0; } }
@keyframes burst {
  from { opacity: 1; transform: rotate(var(--a)) translateX(30px) scale(1.2); }
  to { opacity: 0; transform: rotate(var(--a)) translateX(210px) scale(.4); }
}
@keyframes try-ping { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.06, 1.25); } }

@media (max-width: 520px) {
  .try-row select, .try-row .btn { flex: 1 1 140px; }
}