/*
 * Ticket-tear pieces (includes/ticket_tear.php). Four different papers:
 *   hold    — cart: intact, still
 *   issued  — paid: gold stamp, stub tears to the right and stays
 *   void    — failed payment: jagged tear to the left, crumples
 *   used    — already scanned: torn and settled, no motion
 * Not the pull-to-refresh ticket (that one is small, red, and falls away).
 */
.tk-rip {
    --rip-paper: #f7f1e4;
    --rip-ink: #1c1917;
    --rip-mute: #78716c;
    --rip-rule: #d6d3d1;
    --rip-stamp: #b45309;
    --notch: 9px;
    display: block;
    width: 100%;
    max-width: 520px;
    margin: 0 0 0.85rem;
    padding: 0 0 1.1rem;
    box-sizing: border-box;
    overflow: hidden;
    perspective: 720px;
}
.tk-rip-sheet {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 118px;
    filter: drop-shadow(0 8px 16px rgba(28, 25, 23, .12));
}
.tk-rip-main,
.tk-rip-stub {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255,255,255,.35), transparent 28%),
        var(--rip-paper);
    color: var(--rip-ink);
}
.tk-rip-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.7rem 0.85rem 0.75rem;
    border-radius: 10px 0 0 10px;
    -webkit-mask:
        radial-gradient(circle var(--notch) at 100% 0, #0000 97%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle var(--notch) at 100% 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
            mask:
        radial-gradient(circle var(--notch) at 100% 0, #0000 97%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle var(--notch) at 100% 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
}
.tk-rip-stub {
    flex: 0 0 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.35rem 0.5rem;
    border-radius: 0 10px 10px 0;
    -webkit-mask:
        radial-gradient(circle var(--notch) at 0 0, #0000 97%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle var(--notch) at 0 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
            mask:
        radial-gradient(circle var(--notch) at 0 0, #0000 97%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle var(--notch) at 0 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
}
.tk-rip-perf {
    position: absolute;
    top: var(--notch);
    bottom: var(--notch);
    left: calc(100% - 72px);
    width: 0;
    z-index: 2;
    border-left: 1.5px dashed var(--rip-rule);
    pointer-events: none;
}
.tk-rip-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.tk-rip-brand {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.tk-rip-no {
    font: 600 0.68rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--rip-mute);
}
.tk-rip-title {
    margin: 0 0 0.15rem;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.25;
}
.tk-rip-note {
    margin: 0;
    font-size: 0.72rem;
    color: var(--rip-mute);
    line-height: 1.35;
}
.tk-rip-lines { display: grid; gap: 5px; margin-top: 0.55rem; }
.tk-rip-lines i { display: block; height: 4px; border-radius: 99px; background: var(--rip-rule); }
.tk-rip-lines i:nth-child(1) { width: 88%; }
.tk-rip-lines i:nth-child(2) { width: 62%; }
.tk-rip-lines i:nth-child(3) { width: 40%; }
.tk-rip-stamp {
    position: absolute;
    top: 42%;
    right: 10px;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border: 2.5px solid var(--rip-stamp);
    border-radius: 50%;
    color: var(--rip-stamp);
    transform: rotate(-18deg);
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.45);
    mix-blend-mode: multiply;
    pointer-events: none;
}
.tk-rip-stamp em {
    font-style: normal;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.tk-rip-tab {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.tk-rip-bars {
    display: block;
    width: 42px;
    height: 22px;
    background: repeating-linear-gradient(90deg,
        var(--rip-ink) 0 1px, transparent 1px 3px,
        var(--rip-ink) 3px 5px, transparent 5px 6px,
        var(--rip-ink) 6px 8px, transparent 8px 11px);
    opacity: .8;
}
.tk-rip-edge {
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--rip-mute);
}

/* ---- hold: still, unused reservation ---- */
.tk-rip--hold {
    --rip-paper: #eef2f6;
    --rip-ink: #1e293b;
    --rip-mute: #64748b;
    --rip-rule: #cbd5e1;
    --rip-stamp: #334155;
}
.tk-rip--hold .tk-rip-stamp { opacity: .45; border-style: dashed; }
.tk-rip--hold .tk-rip-stub { background: #1e293b; color: #e2e8f0; }
.tk-rip--hold .tk-rip-edge { color: #94a3b8; }
.tk-rip--hold .tk-rip-bars { filter: invert(1); opacity: .9; }

/* ---- issued: gold, ceremonial tear to the right ---- */
.tk-rip--issued { --rip-paper: #fff1c2; --rip-stamp: #b45309; --rip-rule: #e8c36a; }
.tk-rip--issued .tk-rip-stamp {
    background: radial-gradient(circle at 30% 30%, #fde68a, transparent 55%);
    border-color: #ca8a04;
    color: #92400e;
    opacity: 1;
}
.tk-rip--issued .tk-rip-stub { background: #f5d76e; }
.tk-rip--issued.is-play .tk-rip-sheet { animation: tkRipPrint .7s cubic-bezier(.2, .8, .2, 1) both; }
.tk-rip--issued.is-play .tk-rip-stamp { animation: tkRipGold .55s .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.tk-rip--issued.is-play .tk-rip-stub {
    transform-origin: 0 40%;
    animation: tkRipAdmit 1.05s .85s cubic-bezier(.4, 0, .2, 1) both;
}
.tk-rip--issued.is-play .tk-rip-perf { animation: tkRipPerfFade .4s 1.1s both; }
@keyframes tkRipPrint {
    0% { transform: translateY(-18px) rotateX(8deg); opacity: 0; }
    100% { transform: none; opacity: 1; }
}
@keyframes tkRipGold {
    0% { opacity: 0; transform: rotate(-28deg) scale(1.7); }
    70% { opacity: 1; transform: rotate(-16deg) scale(.94); }
    100% { opacity: 1; transform: rotate(-18deg) scale(1); }
}
@keyframes tkRipAdmit {
    0% { transform: none; }
    22% { transform: translateX(2px) rotate(2deg); }
    100% { transform: translate(10px, 6px) rotate(7deg); }
}
@keyframes tkRipPerfFade { to { opacity: 0; } }

/* ---- void: cold paper, jagged reject to the left ---- */
.tk-rip--void {
    --rip-paper: #f1e4e4;
    --rip-ink: #450a0a;
    --rip-stamp: #b91c1c;
    --rip-rule: #e4b4b4;
    --rip-mute: #7f1d1d;
}
.tk-rip--void .tk-rip-stub { background: #7f1d1d; color: #fee2e2; }
.tk-rip--void .tk-rip-edge { color: #fecaca; }
.tk-rip--void .tk-rip-bars { filter: invert(1); }
.tk-rip--void .tk-rip-main {
    -webkit-mask: none;
            mask: none;
    clip-path: polygon(0 0, 100% 0, 93% 10%, 100% 20%, 90% 32%, 100% 44%, 88% 58%, 100% 72%, 92% 86%, 100% 100%, 0 100%);
}
.tk-rip--void .tk-rip-stamp { border-radius: 4px; transform: rotate(-28deg); }
.tk-rip--void.is-play .tk-rip-stamp { animation: tkRipVoidStamp .4s .15s cubic-bezier(.4, 1.8, .4, 1) both; }
.tk-rip--void.is-play .tk-rip-stub {
    transform-origin: 100% 20%;
    animation: tkRipReject .9s .35s cubic-bezier(.55, 0, .7, .3) both;
}
.tk-rip--void.is-play .tk-rip-main { animation: tkRipCrumple .9s .35s both; }
.tk-rip--void.is-play .tk-rip-sheet { animation: tkRipPrint .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes tkRipVoidStamp {
    0% { opacity: 0; transform: rotate(-8deg) scale(2); }
    100% { opacity: 1; transform: rotate(-28deg) scale(1); }
}
@keyframes tkRipReject {
    0% { transform: none; opacity: 1; }
    100% { transform: translate(-16px, 18px) rotate(-14deg); opacity: 0; }
}
@keyframes tkRipCrumple {
    30% { transform: rotate(-1.5deg) skewX(-1deg); }
    100% { transform: rotate(-2deg); filter: saturate(.7); }
}

/* ---- used: already torn, settled, no motion ---- */
.tk-rip--used {
    --rip-paper: #e8d5b0;
    --rip-ink: #44403c;
    --rip-stamp: #9a3412;
    --rip-mute: #78716c;
    --rip-rule: #c4b08a;
}
.tk-rip--used .tk-rip-stub { background: #d6b87a; }
.tk-rip--used .tk-rip-main { filter: saturate(.82); }
.tk-rip--used .tk-rip-stub {
    transform: translate(8px, 6px) rotate(6deg);
    box-shadow: 0 8px 16px -10px rgba(28, 25, 23, .4);
}
.tk-rip--used .tk-rip-perf { opacity: 0; }
.tk-rip--used .tk-rip-stamp { opacity: .85; }

@media (prefers-reduced-motion: reduce) {
    .tk-rip.is-play .tk-rip-sheet,
    .tk-rip.is-play .tk-rip-stamp,
    .tk-rip.is-play .tk-rip-stub,
    .tk-rip.is-play .tk-rip-main,
    .tk-rip.is-play .tk-rip-perf { animation: none !important; }
    .tk-rip--issued .tk-rip-stub { transform: translate(10px, 6px) rotate(7deg); }
    .tk-rip--void .tk-rip-stub { opacity: 0; }
}