/* Motion sits on top of the calibrated static composition. */
.headline-line {
  position: absolute;
  inset: 0;
}
.headline-line-first {
  clip-path: polygon(0 0,100% 0,100% 39.15%,0 55.78%);
}
.headline-line-second {
  clip-path: polygon(0 55.78%,100% 39.15%,100% 100%,0 100%);
}
.ink-stroke { transform-box: fill-box; }
html[data-motion="intro"] .games-heading h2:after {
  transform-origin: left center;
  animation: marker-draw .32s cubic-bezier(.35,0,.2,1) .56s both;
}
@keyframes marker-draw {
  from { scale: 0 1; }
  to { scale: 1 1; }
}

/* Decorative paper pivots at its taped edge, without moving its anchor. */
.meow-note>img { transform-origin: 30% 12%; }
.orange-smile,.club-stamp { transform-origin: 50% 50%; }
.meow-note>img,.belong-note,.orange-smile,.club-stamp {
  transition: transform .36s cubic-bezier(.2,.8,.25,1.25),rotate .36s cubic-bezier(.2,.8,.25,1.25),scale .36s;
}
html[data-motion="ready"] .meow-note>img {
  animation: paper-flutter 6.4s ease-in-out infinite;
}
@keyframes paper-flutter {
  0%,50%,100% { rotate: 0deg; }
  25% { rotate: 2.6deg; }
  75% { rotate: -2.2deg; }
}

/* The two mascot views breathe as one, anchored at the opaque paw baseline. */
.mascot { transform-origin: 375px 649px; }
html[data-motion="ready"] .mascot {
  animation: cat-breathe 4.6s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes cat-breathe {
  0%,100% { scale: 1 1; }
  50% { scale: 1 1.022; }
}
html[data-motion="ready"] .orange-smile>img {
  animation: smile-rock 5.2s ease-in-out infinite;
}
@keyframes smile-rock {
  0%,50%,100% { rotate: 0deg; }
  25% { rotate: -4.5deg; }
  75% { rotate: 3.5deg; }
}
.mascot:after {
  content: '';
  position: absolute;
  left: 394px;
  top: 430px;
  width: 13px;
  height: 13px;
  background: #fff6bf;
  clip-path: polygon(50% 0,60% 39%,100% 50%,60% 61%,50% 100%,40% 61%,0 50%,40% 39%);
  opacity: 0;
  pointer-events: none;
}
html[data-motion="ready"] .mascot:after {
  animation: pendant-glint 7.3s ease-in-out infinite;
}
@keyframes pendant-glint {
  0%,72%,88%,100% { opacity: 0; scale: .35; rotate: -12deg; }
  79% { opacity: .9; scale: 1; rotate: 12deg; }
}

/* Display lettering moves slowly; paragraph text and navigation stay still. */
html[data-motion="ready"] .headline-line-first {
  animation: headline-drift 4.8s ease-in-out infinite;
}
html[data-motion="ready"] .headline-line-second {
  animation: headline-drift 5.6s ease-in-out .35s infinite;
}
@keyframes headline-drift {
  0%,100% { translate: 0 0; }
  50% { translate: 0 -4.5px; }
}
html[data-motion="ready"] .right-slogan {
  animation: slogan-drift 6.2s ease-in-out .2s infinite;
}
@keyframes slogan-drift {
  0%,100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -6px; rotate: -.55deg; }
}
html[data-motion="ready"] .games-heading h2 {
  animation: heading-drift 5.8s ease-in-out .5s infinite;
}
@keyframes heading-drift {
  0%,100% { translate: 0 0; }
  50% { translate: 0 -2.5px; }
}

.button { --idle-ring: #10111120; }
.button.primary { --idle-ring: #bfff2252; }
html[data-motion="ready"] .button {
  animation: invite-pulse 3.6s ease-in-out infinite;
}
html[data-motion="ready"] .button:not(.primary) { animation-delay: .8s; }
html[data-motion="ready"] .button svg {
  animation: arrow-nudge 3.2s ease-in-out infinite;
}
@keyframes invite-pulse {
  0%,100% { box-shadow: 0 0 0 0 var(--idle-ring); }
  50% { box-shadow: 0 0 0 5.5px var(--idle-ring); }
}
@keyframes arrow-nudge {
  0%,100% { translate: 0 0; }
  50% { translate: 3px -3px; }
}

html[data-motion="ready"] .belong-note {
  animation: paper-rock 6.8s ease-in-out infinite;
}
html[data-motion="ready"] .black-note {
  animation: paper-rock 7.8s ease-in-out .4s infinite;
}
@keyframes paper-rock {
  0%,50%,100% { rotate: 0deg; }
  25% { rotate: 1.4deg; }
  75% { rotate: -1.1deg; }
}
html[data-motion="ready"] .club-stamp {
  animation: stamp-rock 7.2s ease-in-out infinite,stamp-press 6.6s ease-in-out infinite;
}
@keyframes stamp-rock {
  0%,50%,100% { rotate: 0deg; }
  25% { rotate: -2.2deg; }
  75% { rotate: 1.8deg; }
}
@keyframes stamp-press {
  0%,67%,100% { scale: 1; }
  75% { scale: .975; }
  82% { scale: 1.035; }
  91% { scale: 1; }
}
/* The pointer/keyboard feedback takes over immediately from the idle loop. */
html[data-motion="ready"] .button:is(:focus-visible,:active),
html[data-motion="ready"] .button:is(:focus-visible,:active) svg {
  animation: none;
}
@media(hover:hover) and (pointer:fine) {
  html[data-motion="ready"] .button:hover,
  html[data-motion="ready"] .button:hover svg,
  html[data-motion="ready"] .belong-note:hover,
  html[data-motion="ready"] .club-stamp:hover { animation: none; }
}
html[data-page-hidden] .artboard *,
html[data-page-hidden] .artboard *:before,
html[data-page-hidden] .artboard *:after {
  animation-play-state: paused!important;
}

.button,.game-card {
  transition: transform .28s cubic-bezier(.2,.8,.25,1.15),box-shadow .28s ease;
}
.button svg,.card-arrow svg {
  transition: transform .28s cubic-bezier(.2,.8,.25,1.15);
}
.game-card>img {
  transition: transform .42s cubic-bezier(.2,.75,.25,1);
  transform-origin: 62% 50%;
}
/* Reset the original unconditional hover so touch has no sticky hover. */
.button:hover,.game-card:hover { transform: none; box-shadow: none; }
.button:focus-visible {
  transform: translateY(-3px);
  box-shadow: 4px 5px 0 #111;
}
.button:focus-visible svg { transform: translate(4px,-4px); }
.game-card:focus-visible { transform: translateY(-6px); }
.game-card:focus-visible>img { transform: scale(1.045); }
.game-card:focus-visible .card-arrow svg { transform: translate(2px,-2px) rotate(-8deg); }
@media(hover:hover) and (pointer:fine) {
  .button:hover { transform: translateY(-3px); box-shadow: 4px 5px 0 #111; }
  .button:hover svg { transform: translate(4px,-4px); }
  .game-card:hover { transform: translateY(-6px); box-shadow: 0 7px 0 #caff35; }
  .game-card:hover>img { transform: scale(1.045); }
  .game-card:hover .card-arrow svg { transform: translate(2px,-2px) rotate(-8deg); }
  .meow-note:hover>img { animation-play-state: paused; transform: rotate(-2deg) translateY(-2px); }
  .belong-note:hover { rotate: 2deg; }
  .orange-smile:hover { rotate: 9deg; scale: 1.04; }
  .orange-smile:hover>img { animation-play-state: paused; }
  .club-stamp:hover { rotate: -5deg; scale: 1.025; }
}
.button:active { transform: translateY(1px) scale(.975); box-shadow: 1px 1px 0 #111; }
.game-card:active { transform: translateY(-1px) scale(.99); }
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .artboard *,.artboard *:before,.artboard *:after {
    animation: none!important;
    transition: none!important;
  }
  .button:hover,.button:focus-visible,.button:active,
  .game-card:hover,.game-card:focus-visible,.game-card:active,
  .button svg,.game-card>img,.card-arrow svg,.meow-note>img {
    transform: none!important;
  }
  .belong-note,.orange-smile,.club-stamp { rotate: none!important; scale: none!important; }
}