/* C1 motion: stickers press onto the page, lift on hover, rings fill, today pulses. Loaded only by c-stickers.html. */
/* Press-in: a sticker arrives lifted (big shadow, tilted, slightly large) and is pressed flat. */
/* Starts visible (lifted and tilted), so the page reads fully before any scrolling */
.rv { opacity: 1; transform: translate(-8px, -14px) rotate(var(--tilt, -3deg)) scale(1.05);
  transition: opacity .35s ease var(--d, 0s), transform .6s cubic-bezier(.25, 1.5, .5, 1) var(--d, 0s), box-shadow .6s ease var(--d, 0s); }
.card.rv, .count.rv, .livecard.rv { box-shadow: 12px 14px 0 color-mix(in srgb, var(--line) 35%, transparent); }
.rv.in { opacity: 1; transform: none; }
.card.rv.in, .count.rv.in { box-shadow: var(--shadow); }
.count.rv.in:nth-child(odd) { transform: rotate(-1deg); } .count.rv.in:nth-child(even) { transform: rotate(1deg); }
/* Hover: the sticker lifts off the page a little */
.card.rv, .count.rv { transition: opacity .35s ease var(--d, 0s), transform .6s cubic-bezier(.25, 1.5, .5, 1) var(--d, 0s), box-shadow .6s ease var(--d, 0s); }
/* Once a sticker has landed (class "settled", set by c1-motion.js) hover reacts quickly with no delay */
.card.settled, .count.settled, .cta { transition: transform .25s cubic-bezier(.3, 1.6, .6, 1), box-shadow .25s ease; }
.card.rv.in:hover, .count.rv.in:hover { transform: translate(-3px, -4px) rotate(-.6deg); box-shadow: 8px 9px 0 var(--line); }
.cta:hover { transform: translate(-3px, -3px) rotate(-1deg); }
/* Hero: highlighter swipes behind the two marked words */
.hero h1 mark, .hero h1 .u { background-repeat: no-repeat; background-size: 0% 100%; transition: background-size .7s cubic-bezier(.6, 0, .2, 1); }
.hero h1 mark { background-color: transparent; background-image: linear-gradient(var(--yt), var(--yt)); transition-delay: .45s; }
.hero h1 .u { background-color: transparent; background-image: linear-gradient(var(--lx), var(--lx)); transition-delay: .75s; }
.hero h1.in mark, .hero h1.in .u { background-size: 100% 100%; }
/* Hero stack: the badge is stamped down, the tape lands, the live note slides in */
.stack.rv { opacity: 1; transform: none; }
.stack .daybadge { transform: rotate(-8deg) scale(1.7); opacity: 0; transition: transform .55s cubic-bezier(.3, 1.7, .5, 1) .25s, opacity .2s ease .25s; }
.stack.in .daybadge { transform: rotate(-8deg); opacity: 1; animation: sway 6s ease-in-out 1.4s infinite; }
@keyframes sway { 50% { transform: rotate(-3deg) translateY(-4px); } }
.stack .tape { transform: rotate(-12deg) translateY(-40px); opacity: 0; transition: transform .5s cubic-bezier(.3, 1.5, .5, 1) .7s, opacity .2s ease .7s; }
.stack.in .tape { transform: rotate(-12deg); opacity: 1; }
.stack .livecard { transform: rotate(9deg) translateX(-40px); opacity: 0; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1) .5s, opacity .3s ease .5s; }
.stack.in .livecard { transform: rotate(3deg); opacity: 1; }
/* Goals: the streak sticker slaps on after its card, the ring fills */
.goal .sticker { transform: rotate(6deg) scale(0); transition: transform .45s cubic-bezier(.3, 1.8, .5, 1) calc(var(--d, 0s) + .45s); }
.goal.in .sticker { transform: rotate(6deg) scale(1); }
.goal.in:hover .sticker { animation: wobble .5s ease; }
@keyframes wobble { 30% { transform: rotate(-6deg) scale(1.12); } 60% { transform: rotate(10deg) scale(1.05); } }
.ring .fg { transition: stroke-dashoffset 1.3s cubic-bezier(.5, 0, .2, 1) calc(var(--d, 0s) + .3s); }
/* Today's entry: a highlighter sweep, and today's calendar cell pulses */
.todaynote { background-image: linear-gradient(90deg, color-mix(in srgb, #fff 45%, transparent), transparent); background-repeat: no-repeat; background-size: 0% 100%; }
.feature.in .todaynote { animation: sweep 1.1s ease .6s both; }
@keyframes sweep { 0% { background-size: 0% 100%; } 60% { background-size: 100% 100%; } 100% { background-size: 100% 100%; background-image: none; } }
.cell.today { animation: ping 2.2s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pop) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 10px transparent; } }
/* Calendar chips pop in one by one when the calendar arrives */
.weeks .chip { transform: scale(0) rotate(-20deg); transition: transform .35s cubic-bezier(.3, 1.8, .5, 1) var(--cd, 0s); }
.rv.in .weeks .chip { transform: none; }
/* The live dot in the hero card already pulses (sticker-base.css) */
/* Plays under reduced motion too, like C2-C5: this PC has Windows animation effects off. Only smooth scrolling stays off there (sticker-base.css). */
.count.rv:not(.in) { transform: translate(-8px, -14px) rotate(var(--tilt, -3deg)) scale(1.05); }