/* RepLog website motion layer, driven by /js/site-anim.js. Loaded by the marketing pages only.
   Rules: nothing here hides content unless <html> has .anim-ready, which the script sets only when motion is allowed
   (so no JS, a JS error or prefers-reduced-motion: reduce = everything visible and still). Motion uses opacity and
   transform only, so nothing shifts the layout. Hidden tabs and off-screen sections pause their loops. */

:root { --ae: cubic-bezier(.16, 1, .3, 1); --ab: cubic-bezier(.2, .8, .2, 1); }

/* The landing page's older .reveal hid content until its own script ran: never hide it here. */
html .reveal { opacity: 1; transform: none; }

/* Anchors land below the sticky top bar (its height is measured by the script). */
:where(html.anim-js [id]) { scroll-margin-top: var(--anim-hdr, 0px); }   /* zero specificity: existing scroll-margins win */
@media (prefers-reduced-motion: no-preference) { html.anim-ready { scroll-behavior: smooth; } }

/* ---------- scroll reveals (.ar = waiting, .ar-in = shown; removed again once the motion is done) ---------- */
/* hiding is instant (no transition); only the way in is animated */
html.anim-ready .ar:not(.ar-in) { opacity: 0 !important; transform: translate3d(0, 28px, 0) !important; transition: none !important; }
html.anim-ready .ar.ar-in { transition: opacity .8s var(--ae) var(--ad, 0s), transform 1s var(--ae) var(--ad, 0s) !important; }
html.anim-ready .ar.ar-z:not(.ar-in) { transform: translate3d(0, 30px, 0) scale(.95) !important; }
/* children that follow their card in a short cascade */
html.anim-ready .ar-in .sg { transition: opacity .6s var(--ae) calc(var(--ad, 0s) + .18s + var(--si, 0) * 60ms), transform .8s var(--ae) calc(var(--ad, 0s) + .18s + var(--si, 0) * 60ms) !important; }
html.anim-ready .ar:not(.ar-in) .sg { opacity: 0 !important; transform: translate3d(0, 12px, 0) !important; transition: none !important; }
/* mockup details: progress bar fills, switches slide on */
html.anim-ready .ar .scrub b { transform-origin: 0 50%; }
html.anim-ready .ar-in .scrub b { transition: transform 1.3s var(--ae) calc(var(--ad, 0s) + .5s); }
html.anim-ready .ar:not(.ar-in) .scrub b { transform: scaleX(0); }
html.anim-ready .ar-in :is(.cm-r i, .mm-sw b)::after { transition: translate .6s var(--ae) calc(var(--ad, 0s) + .8s); }
html.anim-ready .ar-in :is(.cm-r i, .mm-sw b) { transition: background-color .4s calc(var(--ad, 0s) + .8s); }
html.anim-ready .ar:not(.ar-in) :is(.cm-r i.on, .mm-sw b)::after { translate: -17px 0; }
html.anim-ready .ar:not(.ar-in) :is(.cm-r i.on, .mm-sw b) { background-color: rgba(255, 255, 255, .18); }
html.anim-ready .scanmock.av .line { animation: an-scan 2.8s ease-in-out infinite alternate; }
@keyframes an-scan { from { transform: translateY(-48px); } to { transform: translateY(48px); } }

/* ---------- hero ---------- */
html.anim-ready .hx-copy { position: relative; }
html.anim-ready .hx-copy::before, html.anim-ready .hx-copy::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; will-change: transform; }
html.anim-ready .hx-copy::before { left: -22%; top: -14%; width: 84%; height: 86%; background: radial-gradient(closest-side, rgba(255, 122, 0, .17), rgba(255, 90, 40, .06) 55%, transparent); animation: an-drift-a 19s ease-in-out infinite alternate; }
html.anim-ready .hx-copy::after { left: 30%; top: 26%; width: 66%; height: 70%; background: radial-gradient(closest-side, rgba(110, 125, 255, .11), transparent 70%); animation: an-drift-b 23s ease-in-out infinite alternate; }
@keyframes an-drift-a { from { transform: translate3d(-6%, -5%, 0) scale(1); } to { transform: translate3d(12%, 9%, 0) scale(1.16); } }
@keyframes an-drift-b { from { transform: translate3d(8%, 6%, 0) scale(1.08); } to { transform: translate3d(-10%, -8%, 0) scale(.94); } }
html.anim-ready .hx.hx-off :is(.hx-copy, .hx-ph, .hx-chip), html.anim-ready .hx.hx-off .hx-copy::before, html.anim-ready .hx.hx-off .hx-copy::after { animation-play-state: paused; }
/* first-load sequence: words of the headline, then the rest; the phones only move (they hold the LCP image) */
/* .01, not 0: the text counts as painted on the first frame, so the intro never delays the LCP */
html.anim-ready .hx-intro :is(.hx-new, .hx-sub, .hx-cta, .hx-coach, .hx-trust li, .hx-chip, .aw, .aw-b) { opacity: .01; transform: translate3d(0, 16px, 0); }
html.anim-ready .hx-intro .aw { transform: translate3d(0, .36em, 0) rotate(2deg); }
html.anim-ready .hx-intro .hx-visual { transform: translate3d(0, 40px, 0) scale(.965); }
html.anim-ready .hx-intro.hx-play :is(.hx-new, .hx-sub, .hx-cta, .hx-coach, .hx-trust li, .hx-chip, .aw, .aw-b, .hx-visual) { opacity: 1; transform: none; transition: opacity .7s var(--ae) var(--d, 0s), transform 1s var(--ae) var(--d, 0s); }
html.anim-ready .hx-intro.hx-play .hx-visual { transition-duration: 1.4s; }
.aw { display: inline-block; }
.aw-g { -webkit-background-clip: text; background-clip: text; background-repeat: no-repeat; }
.aw-em { background: none !important; }

/* ---------- "New in this update" strip: a slow marquee on wide screens, the swipe row everywhere else ---------- */
.nu-row > li.nu-clone { display: none; }
@media (min-width: 981px) {
  html.anim-ready .nu-mq .nu-row { display: flex; gap: 10px; overflow: hidden; margin: -2px -26px -14px; padding: 8px 26px 22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
  html.anim-ready .nu-mq .nu-row > li { flex: 0 0 236px; animation: an-marquee var(--nu-t, 70s) linear infinite; }
  html.anim-ready .nu-mq .nu-row > li.nu-clone { display: block; }
  html.anim-ready .nu-mq .nu-row:hover > li, html.anim-ready .nu-mq.nu-off .nu-row > li { animation-play-state: paused; }
  html.anim-ready .nu-mq.nu-man .nu-row { overflow-x: auto; scrollbar-width: none; }
  html.anim-ready .nu-mq.nu-man .nu-row > li { animation: none; }
}
@keyframes an-marquee { to { transform: translate3d(calc(-1 * var(--nu-shift, 0px)), 0, 0); } }

/* ---------- cards: lift, soft glow and a light tilt for mouse users; the same lift for keyboard focus ---------- */
html.anim-ready :where(.bx, .hc, .role, .stat, .pc, .tier-c, .step, .nu-row a, .legal .box, .legal .facts > div, .rm-item, .wrap > .card, .grid > .card, .free-note) { --g: 255, 138, 31; }
html.anim-ready .bx { --g: var(--bx); }
@media (hover: hover) and (pointer: fine) {
  html.anim-ready :is(.bx, .hc, .role, .stat, .pc, .tier-c, .step, .nu-row a, .legal .box, .legal .facts > div, .rm-item, .wrap > .card, .grid > .card, .free-note) { position: relative; isolation: isolate; transition: transform .55s var(--ae), box-shadow .55s var(--ae), border-color .3s, background-color .3s; }
  html.anim-ready :is(.bx, .hc, .role, .stat, .pc, .tier-c, .step, .nu-row a, .legal .box, .legal .facts > div, .rm-item, .wrap > .card, .grid > .card, .free-note)::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .45s; background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--g), .14), transparent 45%); box-shadow: inset 0 0 0 1px rgba(var(--g), .26); }
  html.anim-ready :is(.bx, .hc, .role, .stat, .pc, .tier-c, .step, .nu-row a, .legal .box, .legal .facts > div, .rm-item, .wrap > .card, .grid > .card, .free-note):hover { transform: perspective(1100px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translate3d(0, -5px, 0); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .85), 0 20px 60px -28px rgba(var(--g), .5); }
  html.anim-ready :is(.bx, .hc, .role, .stat, .pc, .tier-c, .step, .nu-row a, .legal .box, .legal .facts > div, .rm-item, .wrap > .card, .grid > .card, .free-note):hover::after { opacity: 1; }
}
html.anim-ready :is(.hc, .role, .nu-row a, .tier-c, .legal .box, .legal .facts > div, .rm-item):is(:focus-visible, :has(:is(a, button, summary):focus-visible)) {   /* not while typing in a form field */ transform: translate3d(0, -4px, 0); box-shadow: 0 0 0 2px rgba(255, 138, 31, .9), 0 24px 60px -26px rgba(255, 122, 0, .55); transition: transform .4s var(--ae), box-shadow .3s; }
html.anim-ready :is(.hc, .role, .nu-row a):active { transform: scale(.985); transition-duration: .1s; }

/* ---------- buttons and links ---------- */
html.anim-ready :is(.btn, .btn-c, .st-cta, .dl, .rl-btn, .tier-c .go, .auth-card button, .tabs button, .pr-switch button, .rm-filters button, .rm-vote) { transition: transform .25s var(--ab), background-color .2s, box-shadow .3s, color .2s; }
@media (hover: hover) and (pointer: fine) {
  html.anim-ready :is(.btn.primary, .btn.light, .hx-go, .btn-c, .st-cta, .dl, .tier-c .go):hover { transform: translate3d(0, -2px, 0); }
  html.anim-ready :is(.hx-go, .btn.primary, .st-cta, .btn-c:not(.ghost):not(.light)):hover { box-shadow: 0 14px 34px -12px rgba(255, 122, 0, .65); }
}
html.anim-ready :is(.btn, .btn-c, .st-cta, .dl, .rl-btn, .tier-c .go, .auth-card button, .tabs button, .pr-switch button, .rm-filters button, .rm-vote):active { transform: scale(.96); transition-duration: .08s; }
html.anim-ready :is(.hx-new i, .hc em, .role .go) { display: inline-block; transition: transform .3s var(--ab), background-color .2s, border-color .2s; }
html.anim-ready :is(.hx-new, .hc, .role):is(:hover, :focus-visible) :is(.hx-new i, .hc em, .role .go) { transform: translateX(4px); }
html.anim-ready .sf-col a { transition: color .2s, transform .25s var(--ab); }
html.anim-ready .sf-col a:hover { transform: translateX(3px); }
html.anim-ready .legal a { transition: text-underline-offset .2s, color .2s; }
html.anim-ready .legal a:hover { text-underline-offset: 5px; }
html.anim-ready details.anim-closing > summary::after { transform: none !important; }

/* ---------- scroll progress ---------- */
.anim-progress { position: fixed; z-index: 60; left: 0; top: 0; width: 100%; height: 2px; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #ff7a00, #ff9f3d 60%, #ffc48a); box-shadow: 0 0 10px rgba(255, 122, 0, .55); will-change: transform; }
@supports (animation-timeline: scroll()) { .anim-progress.css { animation: an-progress linear both; animation-timeline: scroll(root block); } }
@keyframes an-progress { to { transform: scaleX(1); } }

/* ---------- pause, print, reduced motion ---------- */
html.anim-hidden *, html.anim-hidden *::before, html.anim-hidden *::after { animation-play-state: paused !important; }
@media print {
  html.anim-ready :is(.ar, .ar .sg, .hx-intro *) { opacity: 1 !important; transform: none !important; }
  .anim-progress { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.anim-ready :is(.ar, .ar .sg, .hx-intro *, .nu-row > li, .hx-copy) { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  html.anim-ready .hx-copy::before, html.anim-ready .hx-copy::after, .anim-progress { display: none; }
}