/* ApexResell craft: физически детайли, които правят сайта да изглежда ръчно правен, а не „AI шаблон“.
   Наши версии на идеи като физически бутон, касова бележка, билет, пощенска марка, ветрило от снимки, фолио.
   Цветовете идват от сайта: --acc --acc-ink --ink --ink-2 --bg --c1..--c4 --f-head --f-body. Скриптът е kit/craft.js. */

/* 1. Физически бутон: лице, ръб и дълбочина; при натискане хлътва */
.c-press{--press:var(--acc);--press-d:4px;position:relative;isolation:isolate;transform:translateY(0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.14),0 var(--press-d) 0 0 color-mix(in srgb,var(--press) 62%,#000),0 calc(var(--press-d) + 8px) 18px -8px rgba(0,0,0,.45);
  transition:transform .14s cubic-bezier(.3,.7,.4,1),box-shadow .14s cubic-bezier(.3,.7,.4,1)}
.c-press:hover{transform:translateY(-1px)}
.c-press:active,.c-press.is-down{transform:translateY(calc(var(--press-d) - 1px));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.12),0 1px 0 0 color-mix(in srgb,var(--press) 62%,#000),0 3px 8px -4px rgba(0,0,0,.4)}
.c-press--ink{--press:var(--ink)}

/* 2. Текст, който се „разшифрова“: ширината не скача */
[data-c~="scramble"]{font-variant-numeric:tabular-nums}
[data-c~="scramble"] .c-sc{opacity:.55}

/* 3. Касова бележка: излиза от процепа при скрол */
.c-receipt{--paper:#FBFAF6;--paper-ink:#1d1b18;position:relative;width:min(100%,380px);margin:0 auto;padding-top:14px}
.c-receipt__slot{position:relative;z-index:2;height:22px;margin:0 -14px;border-radius:14px;background:linear-gradient(#2a2622,#141210);box-shadow:inset 0 2px 3px rgba(255,255,255,.12),inset 0 -6px 8px rgba(0,0,0,.6),0 12px 24px -12px rgba(0,0,0,.5)}
.c-receipt__slot::after{content:"";position:absolute;left:14px;right:14px;top:9px;height:4px;border-radius:4px;background:#000}
.c-receipt__paper{position:relative;z-index:1;margin:-11px 6px 0;padding:26px 22px 34px;background:var(--paper);color:var(--paper-ink);font:500 .92rem/1.5 ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono","Courier New",monospace;
  box-shadow:0 18px 30px -18px rgba(0,0,0,.45);
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 9px repeat-x;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 9px repeat-x;
  transform-origin:top center}
.c-receipt__head{text-align:center;padding-bottom:14px;border-bottom:1.5px dashed rgba(0,0,0,.35);margin-bottom:14px}
.c-receipt__head b{display:block;font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase}
.c-receipt__head span{font-size:.8rem;opacity:.7}
.c-receipt__row{display:flex;align-items:baseline;gap:8px;padding:4px 0}
.c-receipt__row span{flex:0 1 auto;min-width:0}
.c-receipt__row i{flex:1;border-bottom:1.5px dotted rgba(0,0,0,.45);transform:translateY(-4px)}
.c-receipt__row b{flex:none;font-weight:700}
.c-receipt__total{display:flex;justify-content:space-between;margin-top:12px;padding-top:12px;border-top:1.5px dashed rgba(0,0,0,.35);font-weight:800;font-size:1.1rem;letter-spacing:.02em}
.c-receipt__note{margin-top:10px;font-size:.78rem;opacity:.7;text-align:center}
.c-receipt__bar{height:34px;margin:18px auto 0;width:78%;background:repeating-linear-gradient(90deg,#1d1b18 0 2px,transparent 2px 4px,#1d1b18 4px 5px,transparent 5px 8px,#1d1b18 8px 11px,transparent 11px 12px)}
.js .c-receipt[data-c~="receipt"] .c-receipt__paper{clip-path:inset(0 0 100% 0);transform:translateY(-12px)}
.c-receipt.is-printed .c-receipt__paper{clip-path:inset(0 0 -20px 0)!important;transform:none!important;transition:clip-path 1.9s steps(14,end),transform 1.9s steps(14,end)}

/* 4. Билет с перфорация и изрези; леко се накланя под мишката */
.c-ticket{--t-bg:var(--acc);--t-ink:var(--acc-ink);--cut:72%;--notch:13px;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;max-width:620px;color:var(--t-ink);perspective:900px;filter:drop-shadow(0 22px 26px rgba(0,0,0,.28))}
.c-ticket__body{display:contents}
.c-ticket__card{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:var(--cut) auto;border-radius:18px;background:var(--t-bg);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .5s cubic-bezier(.22,1,.36,1);
  -webkit-mask:radial-gradient(circle at var(--cut) 0,#0000 var(--notch),#000 calc(var(--notch) + .5px)) top/100% 51% no-repeat,radial-gradient(circle at var(--cut) 100%,#0000 var(--notch),#000 calc(var(--notch) + .5px)) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle at var(--cut) 0,#0000 var(--notch),#000 calc(var(--notch) + .5px)) top/100% 51% no-repeat,radial-gradient(circle at var(--cut) 100%,#0000 var(--notch),#000 calc(var(--notch) + .5px)) bottom/100% 51% no-repeat}
.c-ticket__main{padding:clamp(20px,3vw,30px);transform:translateZ(18px);display:flex;flex-direction:column;gap:8px}
.c-ticket__kicker{font:700 .72rem/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;opacity:.75}
.c-ticket__title{font:800 clamp(1.5rem,1rem + 1.8vw,2.3rem)/1 var(--f-head);letter-spacing:-.03em}
.c-ticket__text{font-size:.95rem;line-height:1.45;opacity:.85;max-width:34ch}
.c-ticket__stub{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px clamp(14px,2vw,22px);transform:translateZ(10px);
  background-image:linear-gradient(currentColor 50%,transparent 0);background-size:2px 10px;background-repeat:repeat-y;background-position:left top;text-align:center}
.c-ticket__stub b{font:800 1.5rem/1 var(--f-head);letter-spacing:-.02em}
.c-ticket__stub small{font:600 .7rem/1.2 var(--f-body);letter-spacing:.14em;text-transform:uppercase;opacity:.75;writing-mode:vertical-rl;transform:rotate(180deg)}
.c-ticket__holes{position:absolute;inset:0;pointer-events:none;border-radius:18px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--t-ink) 18%,transparent)}
.c-ticket a{color:inherit}

/* 5. Пощенска марка около снимка, с печат */
.c-stamp-w{position:relative;display:inline-block;filter:drop-shadow(0 14px 18px rgba(0,0,0,.28));rotate:var(--rot,-2deg)}
.c-stamp{--s:7px;display:block;padding:calc(var(--s) * 2.2);background:#FBFAF6;
  -webkit-mask:radial-gradient(var(--s),#0000 97%,#000) round calc(-1.5 * var(--s)) calc(-1.5 * var(--s)) / calc(3 * var(--s)) calc(3 * var(--s)),linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--s)) calc(100% - 3 * var(--s));
  mask:radial-gradient(var(--s),#0000 97%,#000) round calc(-1.5 * var(--s)) calc(-1.5 * var(--s)) / calc(3 * var(--s)) calc(3 * var(--s)),linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--s)) calc(100% - 3 * var(--s))}
.c-stamp img{display:block;width:100%;height:100%;object-fit:cover}
.c-stamp figcaption{display:flex;justify-content:space-between;gap:10px;padding-top:8px;color:#1d1b18;font:700 .74rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase}
.c-postmark{position:absolute;right:-18px;top:-16px;width:96px;height:96px;color:color-mix(in srgb,var(--ink) 70%,transparent);rotate:14deg;pointer-events:none;mix-blend-mode:multiply;opacity:.85}
.c-postmark text{font:700 9.5px var(--f-body);letter-spacing:2px;fill:currentColor;text-transform:uppercase}

/* 6. Ветрило от снимки: прелистват се с пръст, с мишка или със стрелките */
.c-fan{--w:clamp(180px,26vw,280px);position:relative;height:calc(var(--w) * 1.42);max-width:100%;margin:0 auto;touch-action:pan-y;outline:none}
.c-fan__card{position:absolute;left:50%;bottom:0;width:var(--w);aspect-ratio:3/4;margin-left:calc(var(--w) / -2);border-radius:14px;overflow:hidden;background:#fff;padding:8px 8px 34px;cursor:grab;
  transform-origin:50% 120%;transform:rotate(calc((var(--p) - (var(--n) - 1) / 2) * var(--spread,9deg))) translateY(calc(var(--lift,0) * -1px));
  box-shadow:0 18px 30px -16px rgba(0,0,0,.45);transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .3s;z-index:var(--z)}
.c-fan__card img{width:100%;height:100%;object-fit:cover;border-radius:8px;pointer-events:none;user-select:none}
.c-fan__card figcaption{position:absolute;left:12px;right:12px;bottom:9px;color:#1d1b18;font:600 .85rem/1.2 var(--f-head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-fan__card.is-top{--lift:18;box-shadow:0 30px 40px -18px rgba(0,0,0,.55)}
@media (hover:hover){.c-fan__card:not(.is-top):hover{--lift:10}}
.c-fan__hint{display:flex;justify-content:center;gap:10px;margin-top:18px;font-size:.85rem;color:var(--ink-2)}
.c-fan__hint button{border:0;width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--bg);font:700 1rem/1 var(--f-body);cursor:pointer}

/* 7. Фолио, което блести при движение и скрол */
.c-foil{position:relative;isolation:isolate;overflow:hidden}
.c-foil::after{content:"";position:absolute;inset:-1px;z-index:2;pointer-events:none;border-radius:inherit;mix-blend-mode:soft-light;opacity:.9;
  background:linear-gradient(115deg,transparent 20%,rgba(255,120,200,.55) 32%,rgba(120,220,255,.55) 42%,rgba(255,240,140,.6) 52%,rgba(150,255,190,.5) 62%,transparent 76%) calc(var(--fx,.5) * 100%) calc(var(--fy,.5) * 100%) / 260% 260% no-repeat,
    repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 2px,transparent 2px 6px);
  transition:background-position .25s ease-out}

/* 8. Бутон, който сменя текста и плавно сменя ширината */
.c-morph{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;transition:width .45s cubic-bezier(.22,1,.36,1)}
.c-morph__in{position:relative;display:grid}
.c-morph__a,.c-morph__b{grid-area:1/1;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .3s}
.c-morph__b{transform:translateY(110%);opacity:0}
.c-morph.is-b .c-morph__a{transform:translateY(-110%);opacity:0}
.c-morph.is-b .c-morph__b{transform:none;opacity:1}

/* 9. Дълъг списък или ред, който плавно избледнява в края */
.c-fade{--fade:36px;overflow:auto;scrollbar-width:none}
.c-fade::-webkit-scrollbar{display:none}
.c-fade.c-fade--y{-webkit-mask:linear-gradient(to bottom,transparent 0,#000 var(--fa,0px),#000 calc(100% - var(--fb,var(--fade))),transparent 100%);mask:linear-gradient(to bottom,transparent 0,#000 var(--fa,0px),#000 calc(100% - var(--fb,var(--fade))),transparent 100%)}
.c-fade.c-fade--x{-webkit-mask:linear-gradient(to right,transparent 0,#000 var(--fa,0px),#000 calc(100% - var(--fb,var(--fade))),transparent 100%);mask:linear-gradient(to right,transparent 0,#000 var(--fa,0px),#000 calc(100% - var(--fb,var(--fade))),transparent 100%)}

@media (max-width:620px){
  .c-ticket{grid-template-columns:1fr}
  .c-ticket__card{--cut:100%;grid-template-columns:1fr;
    -webkit-mask:radial-gradient(circle at 0 calc(100% - 66px),#0000 var(--notch),#000 calc(var(--notch) + .5px)) left/51% 100% no-repeat,radial-gradient(circle at 100% calc(100% - 66px),#0000 var(--notch),#000 calc(var(--notch) + .5px)) right/51% 100% no-repeat;
    mask:radial-gradient(circle at 0 calc(100% - 66px),#0000 var(--notch),#000 calc(var(--notch) + .5px)) left/51% 100% no-repeat,radial-gradient(circle at 100% calc(100% - 66px),#0000 var(--notch),#000 calc(var(--notch) + .5px)) right/51% 100% no-repeat}
  .c-ticket__stub{flex-direction:row;height:66px;padding-block:0;background-image:linear-gradient(90deg,currentColor 50%,transparent 0);background-size:10px 2px;background-repeat:repeat-x;background-position:left top}
  .c-receipt__paper{padding:22px 16px 30px;font-size:.8rem}
  .c-receipt__row b{white-space:nowrap}
  .c-ticket__stub small{writing-mode:horizontal-tb;transform:none}
  .c-postmark{width:76px;height:76px;right:-8px;top:-12px}
}
@media (prefers-reduced-motion:reduce){
  .c-press,.c-fan__card,.c-morph,.c-morph__a,.c-morph__b,.c-ticket__card{transition:none}
  .js .c-receipt[data-c~="receipt"] .c-receipt__paper{clip-path:none;transform:none}
}
.c-receipt__row small{display:block;font-size:.74em;line-height:1.3;opacity:.62;margin-top:2px}