/* Чекбокс-«заколка»: при включении золотая заколка влетает сверху справа и втыкается в квадрат.
   Разметку строит hairpin.js: оборачивает <input type="checkbox"> в .hp, сам input остаётся (прозрачный, ловит клики).
   Анимируются только transform / opacity / clip-path — без размытия по кадрам и без гигантских рамок (иначе дёргается фон). */
.hp { position: relative; display: inline-block; flex: none; width: 20px; height: 20px; margin-top: 2px; z-index: 2; --hp-a: 30deg; --hp-s: 118deg; --hp-gold: 212, 175, 55; }
.hp > input { position: absolute; inset: 0; width: 100% !important; height: 100% !important; margin: 0; opacity: 0; cursor: pointer; z-index: 5; pointer-events: auto; }

/* Квадрат — как обычный чекбокс */
.hp-face { position: absolute; inset: 0; pointer-events: none; }
.hp-box { position: absolute; inset: 0; box-sizing: border-box; background: #fff; border: 1.5px solid #767676; border-radius: 3px; }
.hp > input:focus-visible ~ .hp-face .hp-box { outline: 2px solid rgb(var(--hp-gold)); outline-offset: 2px; }
.hp-tear { position: absolute; inset: 0; width: 20px; height: 20px; overflow: visible; opacity: 0; transform: scale(0); }
.hp.is-on .hp-tear { opacity: 1; transform: none; }

/* Заколка: ось наклонена на --hp-a; всё, что ниже точки входа (y = 64 в рисунке), срезано clip-path — ушло в дырку */
.hp-axis, .hp-saxis, .hp-fshadow { position: absolute; left: 10px; top: 10px; width: 0; height: 0; pointer-events: none; }
.hp-axis { transform: rotate(var(--hp-a)); z-index: 4; }
.hp-pin, .hp-sil { position: absolute; left: -20px; top: -64px; width: 40px; height: 120px; overflow: visible; transform-origin: 20px 64px; }
.hp-pin { clip-path: inset(0 0 120px 0); transform: translateY(70px); filter: drop-shadow(0 0 2.5px rgba(var(--hp-gold), .55)); }
.hp.is-on .hp-pin { clip-path: inset(0 0 56px 0); transform: none; }

/* Золотая «тень» воткнутой заколки: ложится вправо-вниз, на текст */
.hp-sil { color: rgb(var(--hp-gold)); }
.hp-saxis { transform: rotate(var(--hp-s)); z-index: 3; opacity: 0; }
.hp.is-on .hp-saxis { opacity: 1; }
.hp-saxis .hp-sil { clip-path: inset(0 0 56px 0); transform: scaleY(.62); filter: blur(2px); opacity: .55; }

/* Слой полёта: на весь экран, всё за краем обрезается — страница не расширяется (иначе мобильный Chromium дёргает фон) */
.hp-sky { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 10050; --hp-gold: 212, 175, 55; }
.hp-anchor { position: absolute; left: 0; top: 0; width: 20px; height: 20px; }
.hp-anchor .hp-pin { clip-path: none; transform: none; opacity: 0; }

/* Тень в полёте: золотое пятно, вытянутое вдоль падающей тени. Два слоя — мягкий и чёткий, при снижении
   один перетекает в другой (размытие задано градиентом, а не filter — так дешевле для браузера) */
.hp-fshadow { z-index: 3; opacity: 0; }
.hp-spot { position: absolute; left: -36px; top: -12px; width: 72px; height: 24px; border-radius: 50%; transform: rotate(28deg); }
.hp-fs-soft { background: radial-gradient(closest-side, rgba(var(--hp-gold), .55), rgba(var(--hp-gold), .22) 55%, rgba(var(--hp-gold), 0)); opacity: .7; }
.hp-fs-sharp { background: radial-gradient(closest-side, rgba(var(--hp-gold), .95), rgba(var(--hp-gold), .6) 45%, rgba(var(--hp-gold), 0) 80%); opacity: 0; transform: rotate(28deg) scale(.6, .7); }

@media (prefers-reduced-motion: reduce) { .hp * { animation: none !important; } }