/* One engraved illustration per ticket, using the existing line-art system. */
.program-v5 #program .kq--mini{position:relative}
.program-v5 #program .kq__ico{
 grid-column:2 / 3;
 grid-row:1 / 2;
 opacity:.55;
}
.program-v5 #program .kq__glyph{width:46%;height:46%}
.kq__bubble--right{opacity:0}

@media (prefers-reduced-motion:no-preference){
 .kq__steam{animation:kqSteam 3.3s ease-in-out infinite}
 .kq__steam--middle{animation-delay:-1.1s}
 .kq__steam--right{animation-delay:-2.2s}

 .kq__wave{
  transform-box:view-box;
  transform-origin:center;
  animation:kqWave 2.8s ease-in-out infinite;
 }
 .kq__wave--outer{animation-delay:-.35s}

 .kq__flash{
  transform-box:fill-box;
  transform-origin:center;
  animation:kqFlash 4.8s ease-out infinite;
 }

 .kq__bubble{animation:kqBubble 5.6s ease-in-out -.75s infinite}
 .kq__bubble--right{animation-delay:-3.55s}
}

@keyframes kqSteam{
 0%,100%{opacity:.45;transform:translateY(1px)}
 50%{opacity:1;transform:translateY(-3px)}
}

@keyframes kqWave{
 0%,100%{opacity:.55;transform:scaleX(.96)}
 50%{opacity:1;transform:scaleX(1.11)}
}

@keyframes kqFlash{
 0%,18%,33%,100%{opacity:0;transform:scale(.7)}
 22%{opacity:1;transform:scale(1.18)}
}

@keyframes kqBubble{
 0%,46%,100%{opacity:0;transform:translateY(1.5px)}
 10%,35%{opacity:1;transform:translateY(0)}
}

@media (max-width:760px), (max-height:600px) and (hover:none) and (pointer:coarse){
 .program-v5 #program .kq--mini .kq__body{padding:22px 18px 24px}
 .program-v5 #program .kq__ico{display:none}
}

@media (max-width:640px){
 .program-v5 #program .kq--mini{
  --ticket-icon-size:clamp(52px,16vw,66px);
  --ticket-icon-inset:clamp(12px,4.7vw,20px);
 }

 .program-v5 #program .kq__stub{
  padding-right:calc(var(--ticket-icon-size) + var(--ticket-icon-inset) + 12px);
 }

 .program-v5 #program .kq__time{
  flex-basis:100%;
  justify-content:flex-start;
  margin:0;
  padding:8px 0 0;
  border-left:0;
  border-top:1px dotted rgba(4,38,58,.42);
 }

 .program-v5 #program .kx--mobile-static .kx__perf::before{
  content:none;
 }

 .program-v5 #program .kq__ico{
  display:grid;
  grid-column:1 / 2;
  right:var(--ticket-icon-inset);
  width:var(--ticket-icon-size);
  margin-top:calc(var(--ticket-icon-size) / -2);
  color:#0b4865;
  opacity:.82;
 }

 .program-v5 #program .kq__glyph{
  width:50%;
  height:50%;
  stroke-width:1.7;
  opacity:.74;
 }

 .program-v5 #program .kq__glyph:has(.kq__steam){
  transform:translateY(-1.5px);
 }

 .program-v5 #program .kq__glyph:has(.kq__wave){
  transform:translateY(1.5px);
 }
}