/* TearTicket: vanilla port of the React Bits component */
.tear-ticket {
  --tt-w: 460px;
  --tt-h: 250px;
  --tt-stub: 150px;
  --tt-bg: #27272a;
  --tt-stub-bg: #27272a;
  --tt-ink: #f5f5f5;
  --tt-edge: transparent;
  --tt-edge-w: 1;
  --tt-parallax: 6px;
  --tt-body-w: 310px;
  --tt-body-h: 250px;
  --tt-inset: 8px;
  --tt-span: 0.78;
  --tt-art-radius: 8px;
  --tt-fit: 1;

  position: relative;
  width: min(var(--tt-w), 100%);
  color: var(--tt-ink);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.tear-ticket[data-disabled] { opacity: 0.6; }

.tear-ticket__stage {
  position: absolute; top: 0; left: 0;
  width: var(--tt-w);
  height: var(--tt-h);
  transform: scale(var(--tt-fit));
  transform-origin: top left;
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tear-ticket[data-shift='x'] .tear-ticket__stage { transform: translateX(calc(var(--tt-stub) * var(--tt-fit) / 2)) scale(var(--tt-fit)); }
.tear-ticket[data-shift='y'] .tear-ticket__stage { transform: translateY(calc(var(--tt-stub) * var(--tt-fit) / 2)) scale(var(--tt-fit)); }

.tear-ticket__plane { position: absolute; inset: 0; }
.tear-ticket__piece { position: absolute; inset: 0; pointer-events: none; }
.tear-ticket__piece--stub { outline: none; will-change: transform; }
.tear-ticket__piece--stub:focus-visible .tear-ticket__paper--stub { outline: 2px solid var(--accent, #39ff8a); outline-offset: -6px; }

.tear-ticket__edge {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.tear-ticket__edge path { fill: none; stroke: var(--tt-edge); stroke-width: var(--tt-edge-w); }

.tear-ticket__paper { position: absolute; inset: 0; background: var(--tt-bg); pointer-events: auto; }
.tear-ticket__paper--stub { background: var(--tt-stub-bg); cursor: grab; touch-action: none; }
.tear-ticket[data-grabbing] .tear-ticket__paper--stub { cursor: grabbing; }
.tear-ticket[data-disabled] .tear-ticket__paper--stub { cursor: default; }

.tear-ticket__art {
  position: absolute;
  top: var(--tt-inset); left: var(--tt-inset);
  width: calc(var(--tt-body-w) - var(--tt-inset) * 2);
  height: calc(var(--tt-body-h) * var(--tt-span) - var(--tt-inset) * 2);
  border-radius: var(--tt-art-radius);
  overflow: hidden;
}
.tear-ticket__image {
  position: absolute;
  top: calc(var(--tt-parallax) * -1);
  left: calc(var(--tt-parallax) * -1);
  width: calc(100% + var(--tt-parallax) * 2);
  max-width: none;
  height: calc(100% + var(--tt-parallax) * 2);
  object-fit: cover;
  -webkit-user-drag: none;
  transition: filter 700ms ease;
}
.tear-ticket[data-used] .tear-ticket__image { filter: grayscale(1) brightness(0.75); }
.tear-ticket__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    var(--tt-bg) 0%,
    color-mix(in srgb, var(--tt-bg) 72%, transparent) 30%,
    color-mix(in srgb, var(--tt-bg) 18%, transparent) 58%,
    transparent 80%
  );
}

.tear-ticket__content {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: calc(var(--tt-w) - var(--tt-stub));
  transition: opacity 500ms ease;
}
.tear-ticket[data-used] .tear-ticket__content { opacity: 0.55; }
.tear-ticket__stub { position: absolute; top: 0; right: 0; bottom: 0; width: var(--tt-stub); }

.tear-ticket[data-orientation='vertical'] .tear-ticket__content { bottom: auto; width: 100%; height: calc(var(--tt-h) - var(--tt-stub)); }
.tear-ticket[data-orientation='vertical'] .tear-ticket__stub { top: auto; left: 0; width: auto; height: var(--tt-stub); }

.tear-ticket[data-instant] .tear-ticket__stage,
.tear-ticket[data-instant] .tear-ticket__content,
.tear-ticket[data-instant] .tear-ticket__image { transition-duration: 0ms; }

.tear-ticket__fibres {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.tear-ticket__fibres path { fill: none; stroke: var(--tt-bg); stroke-linecap: round; opacity: 0; }

.tear-ticket__sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .tear-ticket__stage { transition: none; }
}