/* the sticker logo assembling itself (same parts + choreography as the app's start-up intro) */
.logo-stage { position: relative; width: min(100%, 980px); aspect-ratio: 2000 / 667; margin: 6px 0 0; font-size: 0; }
.logo-fallback { width: 100%; height: auto; }
.logo-art { position: absolute; inset: 0; }
.logo-art .lp { position: absolute; }
.lp .in { position: relative; width: 100%; height: 100%; }
.lp .in > img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.lp .shine {
  position: absolute; inset: 0; pointer-events: none; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.85) 50%, transparent 58%) 100% 0 / 250% 100% no-repeat;
}
.logo-shake { position: absolute; inset: 0; }
.logo-stage.go .logo-shake { animation: st-shake 0.34s 2.21s linear both; }
.logo-ring {
  position: absolute; left: 82.5%; top: 60%; width: 18%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; border: 6px solid #fff; opacity: 0;
}
.logo-stage.go .logo-ring { animation: st-ring 0.6s 2.21s var(--out) both; }
@keyframes st-shake {
  0%, 100% { transform: none; }
  15% { transform: translate(-1.4%, 2%) rotate(-0.8deg); }
  35% { transform: translate(1.2%, -1.6%) rotate(0.6deg); }
  55% { transform: translate(-0.7%, 1%); }
  75% { transform: translate(0.4%, -0.6%); }
}
@keyframes st-ring { 0% { transform: scale(0.4); opacity: 0; } 8% { opacity: 1; } 100% { transform: scale(2.6); opacity: 0; border-width: 1px; } }
.logo-stage:not(.go) .lp .in { opacity: 0; }
.go .plate .in { animation: st-jelly 0.8s 0.15s both; }
.go .line1 .in { animation: st-drop 0.66s 0.55s both; transform-origin: 50% 100%; }
.go .line2 .in { animation: st-swing 0.72s 0.9s both; transform-origin: 0% 100%; }
.go .bar .in { animation: st-grow 0.55s 1.25s both; transform-origin: 0% 50%; }
.go .arrow .in { animation: st-reveal 0.6s 1.42s both; transform-origin: 20% 80%; }
.go .clock .in { animation: st-fly-tl 0.72s 1.3s both; }
.go .mug .in { animation: st-hop 0.75s 1.45s both; transform-origin: 50% 100%; }
.go .papers .in { animation: st-slide 0.65s 1.55s both; }
.go .notesL .in { animation: st-flutter-l 0.9s 1.6s both; }
.go .noteR .in { animation: st-flutter-r 0.9s 1.72s both; }
.go .stamp .in { animation: st-slam 0.34s 1.99s both; }
@keyframes st-jelly {
  0% { transform: scale(0); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  30% { transform: scale(1.16, 0.82); animation-timing-function: ease-in-out; }
  48% { transform: scale(0.9, 1.1); animation-timing-function: ease-in-out; }
  64% { transform: scale(1.05, 0.96); animation-timing-function: ease-in-out; }
  82% { transform: scale(0.985, 1.015); }
  100% { transform: none; }
}
@keyframes st-drop {
  0% { transform: translateY(-190%) rotate(-8deg); opacity: 0; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  10% { opacity: 1; }
  50% { transform: translateY(0) scale(1.1, 0.8); animation-timing-function: ease-out; }
  70% { transform: translateY(-9%) scale(0.96, 1.05); animation-timing-function: ease-in; }
  86% { transform: translateY(0) scale(1.03, 0.97); }
  100% { transform: none; opacity: 1; }
}
@keyframes st-swing {
  0% { transform: translateX(-130%) rotate(-28deg) scale(0.6); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  20% { opacity: 1; }
  58% { transform: translateX(3%) rotate(5deg) scale(1.05); animation-timing-function: ease-in-out; }
  80% { transform: rotate(-2deg) scale(0.99); }
  100% { transform: none; opacity: 1; }
}
@keyframes st-grow {
  0% { transform: scaleX(0) scaleY(0.6); animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  65% { transform: scaleX(1.05) scaleY(1.08); }
  100% { transform: none; }
}
@keyframes st-reveal {
  0% { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
  70% { clip-path: inset(-20% -20% -20% -20%); transform: scale(1); }
  85% { transform: scale(1.1) rotate(-3deg); }
  100% { clip-path: inset(-20% -20% -20% -20%); transform: none; }
}
@keyframes st-fly-tl {
  0% { transform: translate(-110%, -130%) rotate(-70deg) scale(0.4); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  25% { opacity: 1; }
  60% { transform: rotate(12deg) scale(1.06); animation-timing-function: ease-in-out; }
  82% { transform: rotate(-5deg) scale(0.98); }
  100% { transform: none; opacity: 1; }
}
@keyframes st-hop {
  0% { transform: translateY(170%) scale(0.7); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1); }
  20% { opacity: 1; }
  50% { transform: translateY(-14%) scale(0.96, 1.06); animation-timing-function: ease-in; }
  68% { transform: translateY(0) scale(1.08, 0.88); animation-timing-function: ease-out; }
  85% { transform: scale(0.98, 1.03); }
  100% { transform: none; opacity: 1; }
}
@keyframes st-slide {
  0% { transform: translateX(170%) rotate(30deg); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  20% { opacity: 1; }
  62% { transform: translateX(-8%) rotate(-7deg); }
  84% { transform: translateX(2%) rotate(2deg); }
  100% { transform: none; opacity: 1; }
}
@keyframes st-flutter-l {
  0% { transform: translate(-70%, -170%) rotate(80deg); opacity: 0; animation-timing-function: ease-out; }
  20% { opacity: 1; }
  48% { transform: translate(-14%, -30%) rotate(-24deg); animation-timing-function: ease-in-out; }
  74% { transform: translate(2%, 5%) rotate(9deg); }
  100% { transform: none; opacity: 1; }
}
@keyframes st-flutter-r {
  0% { transform: translate(80%, -180%) rotate(-80deg); opacity: 0; animation-timing-function: ease-out; }
  20% { opacity: 1; }
  48% { transform: translate(12%, -28%) rotate(22deg); animation-timing-function: ease-in-out; }
  74% { transform: translate(-2%, 5%) rotate(-8deg); }
  100% { transform: none; opacity: 1; }
}
@keyframes st-slam {
  0% { transform: translateY(-50%) rotate(-28deg) scale(2.8); opacity: 0; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  62% { transform: scale(0.88, 0.94); opacity: 1; animation-timing-function: ease-out; }
  82% { transform: scale(1.06); }
  100% { transform: none; opacity: 1; }
}
/* idle life once landed — on the img so it doesn't fight the entrance */
.go .clock .in > img { transform-origin: 50% 75%; animation: st-ringing 0.55s 2s both, st-ringing 0.55s 6s both; }
.go.ring-loop .clock .in > img { animation: st-ringing 0.55s both; }
@keyframes st-ringing {
  0%, 100% { transform: none; }
  10% { transform: rotate(10deg); } 20% { transform: rotate(-10deg); } 30% { transform: rotate(8deg); }
  40% { transform: rotate(-7deg); } 52% { transform: rotate(5deg); } 64% { transform: rotate(-3deg); } 80% { transform: rotate(1.5deg); }
}
.go .mug .in > img { transform-origin: 50% 100%; animation: st-bob 1.5s 2.25s ease-in-out infinite alternate; }
@keyframes st-bob { to { transform: translateY(-5%) rotate(-3deg); } }
.go .papers .in > img, .go .noteR .in > img { animation: st-sway 1.7s 2.3s ease-in-out infinite alternate; }
.go .notesL .in > img { animation: st-sway 2s 2.4s ease-in-out infinite alternate-reverse; }
@keyframes st-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.go .arrow .in > img { transform-origin: 15% 85%; animation: st-pulse 0.8s 2.2s ease-in-out infinite alternate; }
@keyframes st-pulse { to { transform: scale(1.06) rotate(-2deg); } }
.go .stamp .in > img { transform-origin: 40% 90%; }
.stamp .in { cursor: var(--cursor); }
.go .stamp.thump .in > img { animation: st-thump 0.4s both; }
@keyframes st-thump {
  0%, 100% { transform: none; }
  40% { transform: translateY(-16%) rotate(-10deg); animation-timing-function: ease-in; }
  65% { transform: translateY(2%) scale(1.06, 0.9); }
}
.go .line1 .in > img { animation: st-float 2.2s 2.4s ease-in-out infinite alternate both; }
.go .line2 .in > img { animation: st-float 2.2s 2.7s ease-in-out infinite alternate both; }
.go .line1 .in > .shine { animation: st-float 2.2s 2.4s ease-in-out infinite alternate both, st-shine 0.75s 2.85s ease-in-out both; }
.go .line2 .in > .shine { animation: st-float 2.2s 2.7s ease-in-out infinite alternate both, st-shine 0.75s 3s ease-in-out both; }
.go.reshine .line1 .in > .shine, .go.reshine .line2 .in > .shine { animation: st-float 2.2s ease-in-out infinite alternate both, st-shine 0.75s ease-in-out both; }
@keyframes st-float { from { translate: 0 0; } to { translate: 0 -2.5%; } }
@keyframes st-shine { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.spark {
  position: absolute; overflow: visible; translate: -50% -50%; scale: 0;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
}
.go .spark { animation: spark 1.1s ease-in-out infinite both; }
@keyframes spark { 0%, 100% { scale: 0; rotate: 0deg; } 45% { scale: 1; rotate: 45deg; } 70% { scale: 0.2; rotate: 80deg; } }