/* Копия local-platform/public/ticket.css из кабинета (репозиторий investor-fintech-lk).
   Правьте там и переносите сюда: билет в мини-аппе и в кабинете один и тот же. */
/* Билет: металл и эмаль нарисованы в SVG (ticket-art.js), здесь — то, что
   делает его живым: голографический отлив, блик за курсором, наклон и
   переворот. Отлив не заходит на оборот с кодом — сканеру нужен чистый QR.

   Слои: .tkt-inner наклоняется (плавно, из скрипта), .tkt-card внутри
   переворачивается (медленно, на переходе). Разнесены, чтобы наклон не
   сбивал переворот и наоборот. */
.tkt{--mx:32%;--my:30%;--rx:0deg;--ry:0deg;--hue:0deg;position:relative;width:100%;aspect-ratio:320/720;perspective:1600px;
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.tkt[data-layout=horizontal]{aspect-ratio:720/300}
.tkt-inner,.tkt-card{position:absolute;inset:0;transform-style:preserve-3d}
.tkt-inner{transform:rotateX(var(--rx)) rotateY(var(--ry));will-change:transform}
.tkt-card{transform:rotateY(calc(var(--flip,0deg) + var(--spin,0deg)));transition:transform .9s cubic-bezier(.45,.05,.2,1)}
.tkt.is-flipped{--flip:180deg}
.tkt.is-dragging .tkt-card{transition:none}
.tkt-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(0);
  filter:drop-shadow(0 18px 26px rgba(4,10,22,.45)) drop-shadow(0 3px 6px rgba(4,10,22,.35))}
.tkt-back{transform:rotateY(180deg) translateZ(0)}
/* билет — вещь, а не текст: не выделяется и не таскается как картинка */
.tkt-face svg{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}

/* отлив: радужные полосы, которые едут за светом, и тонкая «царапина» голограммы */
.tkt-foil,.tkt-glare{position:absolute;inset:0;pointer-events:none;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.tkt-foil{mix-blend-mode:color-dodge;opacity:.2;background-size:320% 320%,100% 100%;
  background-image:linear-gradient(115deg,#ffd9f4 0%,#c6efff 14%,#fff4c4 28%,#d8cbff 42%,#c4ffe9 56%,#ffd9f4 70%,#c6efff 84%,#fff4c4 100%),
  repeating-linear-gradient(55deg,rgba(255,255,255,0) 0 3px,rgba(255,255,255,.22) 3px 4px);
  background-position:var(--mx) var(--my),0 0;filter:hue-rotate(var(--hue));animation:tkt-drift 9s ease-in-out infinite alternate}
.tkt[data-foil=prism] .tkt-foil{opacity:.3;background-image:linear-gradient(115deg,#ff8fd8,#8fd8ff,#fff38f,#b28fff,#8fffc8,#ff8fd8,#8fd8ff),repeating-linear-gradient(55deg,rgba(255,255,255,0) 0 2px,rgba(255,255,255,.3) 2px 3px)}
.tkt[data-foil=aurora] .tkt-foil{opacity:.28;background-image:linear-gradient(115deg,#7dffd6,#6f8cff,#c67dff,#7dffd6,#6f8cff,#c67dff),repeating-linear-gradient(55deg,rgba(255,255,255,0) 0 3px,rgba(255,255,255,.18) 3px 4px)}
.tkt[data-foil=gold] .tkt-foil{opacity:.25;background-image:linear-gradient(115deg,#fff2bf,#ffc86b,#fffaf0,#ffd98a,#fff2bf,#ffc86b),repeating-linear-gradient(55deg,rgba(255,255,255,0) 0 3px,rgba(255,255,255,.2) 3px 4px)}
.tkt[data-foil=none] .tkt-foil{display:none}
.tkt-glare{mix-blend-mode:soft-light;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.85),rgba(255,255,255,.18) 28%,transparent 58%);opacity:.6}
.tkt[data-state=expired] .tkt-foil{opacity:.12}
.tkt[data-state=expired] .tkt-face{opacity:.72}
@keyframes tkt-drift{from{filter:hue-rotate(calc(var(--hue) - 25deg))}to{filter:hue-rotate(calc(var(--hue) + 25deg))}}
@media (prefers-reduced-motion:reduce){.tkt-card{transition:none}.tkt-foil{animation:none}}

/* стопка: билеты лежат друг на друге, наведённый приподнимается */
.tkt-stack{position:relative;width:min(280px,72vw);margin:0 auto}
.tkt-stack>.tkt-slot{position:absolute;left:0;width:100%;transition:transform .45s cubic-bezier(.2,.8,.2,1);cursor:pointer;border:0;padding:0;background:none}
.tkt-stack>.tkt-slot:hover,.tkt-stack>.tkt-slot:focus-visible{transform:translateY(-34px) rotate(-1.2deg)}
.tkt-stack>.tkt-slot:focus-visible{outline:3px solid #d6ae52;outline-offset:6px;border-radius:14px}

/* просмотр: билет крупно; нажать — перевернуть, потянуть — покрутить */
.tkt-viewer{position:fixed;inset:0;z-index:50;display:grid;place-items:center;gap:18px;padding:24px 16px calc(24px + env(safe-area-inset-bottom));
  background:radial-gradient(ellipse at 50% 35%,rgba(40,70,120,.55),rgba(5,10,20,.94) 70%);backdrop-filter:blur(6px);grid-template-rows:1fr auto}
.tkt-viewer[hidden]{display:none}
.tkt-viewer .tkt{height:min(76vh,720px);width:auto;touch-action:none;cursor:pointer}
.tkt-viewer .tkt[data-layout=horizontal]{height:auto;width:min(92vw,900px)}
.tkt-viewer .tkt.is-dragging{cursor:grabbing}
.tkt-viewer.is-code{background:#fff}
.tkt-viewer-bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.tkt-viewer-bar button{font:600 15px/1 'IBM Plex Sans',system-ui,sans-serif;min-height:46px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1);color:#fff;cursor:pointer}
.tkt-viewer-bar button:focus-visible{outline:3px solid #d6ae52;outline-offset:3px}
.tkt-viewer.is-code .tkt-viewer-bar button{color:#071d3a;border-color:#071d3a33;background:#f1f3f7}