@charset "UTF-8";
/* The floating ticket banner moves (the client's ticket-motion-handoff.zip, 2026-10-28): every 5 s it swings a little
   from the bell (0-1.6 s), then a pale gold light crosses the ticket (1.6-2.6 s), then it rests. Loaded only where
   footer.php prints the banner (inc/ticket-banner.php), so its PC size is set here too (end of the file).
   common.css .btn-ticket-fixed keeps the place, the z-index and the smaller sizes, and the link is the same tag as
   before: only the picture inside it moves, so a click still lands on the same image in the same link. */

.tcm-ticket-motion {
  --tcm-motion-period: 5s;
  display: block;
  position: relative;
  /* Near the top of the bell (39 of 364 px in btn-ticket-fixed-pc.png): the banner hangs from it. */
  transform-origin: 50% 10.769231%;
  animation: tcm-ticket-swing var(--tcm-motion-period) ease-in-out infinite;
}

/* The light stays on the ticket: the mask is the banner's own outline without the bell and the holly
   (tools/build_ticket_shine_mask.py), stretched over the same box as the picture. */
.tcm-ticket-motion__shine {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: url(../../images/btn-ticket-fixed-shine-mask.png);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: url(../../images/btn-ticket-fixed-shine-mask.png);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}
.tcm-ticket-motion__shine::before {
  content: "";
  position: absolute;
  top: -30%;
  left: 0;
  width: 32.432432%;
  height: 160%;
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 237, 174, 0.04) 20%,
    rgba(255, 247, 210, 0.32) 50%,
    rgba(255, 237, 174, 0.04) 80%,
    transparent
  );
  transform: translate3d(-166.666667%, 0, 0) skewX(-22deg);
  animation: tcm-ticket-shine var(--tcm-motion-period) ease-in-out infinite;
}

/* 0.3 s -2deg, 0.65 s +2deg, 1.0 s -1deg, 1.3 s +0.5deg, 1.6 s back at rest. */
@keyframes tcm-ticket-swing {
  0%, 32%, 100% { transform: rotate(0deg); }
  6% { transform: rotate(-2deg); }
  13% { transform: rotate(2deg); }
  20% { transform: rotate(-1deg); }
  26% { transform: rotate(0.5deg); }
}

/* Starts and ends outside the ticket, so it never pops in or out while visible. */
@keyframes tcm-ticket-shine {
  0%, 32% {
    transform: translate3d(-166.666667%, 0, 0) skewX(-22deg);
    opacity: 0;
  }
  33% { opacity: 1; }
  51% {
    transform: translate3d(395.833333%, 0, 0) skewX(-22deg);
    opacity: 1;
  }
  52%, 100% {
    transform: translate3d(395.833333%, 0, 0) skewX(-22deg);
    opacity: 0;
  }
}

/* The pointer on the banner or keyboard focus on its link pauses both. They share one period and start together
   (never give one of them a delay), so they stay in step. :focus-visible, not :focus: Chrome and Edge also focus the
   link on a click, so the banner would stand still when the visitor comes back from the KKday tab. */
.btn-ticket-fixed a:focus-visible .tcm-ticket-motion,
.btn-ticket-fixed a:focus-visible .tcm-ticket-motion__shine::before {
  animation-play-state: paused;
}
@media (hover: hover) and (pointer: fine) {
  .btn-ticket-fixed a:hover .tcm-ticket-motion,
  .btn-ticket-fixed a:hover .tcm-ticket-motion__shine::before {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tcm-ticket-motion {
    animation: none;
  }
  .tcm-ticket-motion__shine {
    display: none;
  }
}

/* Bigger on PC, phones as before (the client, 2026-10-28): 1.2 times common.css's 180px from 1200px. Not from a
   smaller width: the LPs keep their text clear of the banner by this width (founder.css), and their 792px minimum
   column still does so at 1200px. PAGE TOP rises with the banner's top and keeps the 15px between them
   (common.css: the banner sits 30px above the bottom; the picture is 320 x 364). */
@media (min-width: 1200px) {
  :root {
    --tcm-ticket-banner-width: 216px;
  }
  .btn-ticket-fixed {
    width: var(--tcm-ticket-banner-width);
  }
  .pagetop a {
    bottom: calc(30px + var(--tcm-ticket-banner-width) * 364 / 320 + 15px);
  }
}