/* Горното меню на началната: стъклено хапче "Споменчо" с три черти, от което изскача менюто.
   Сменя менюто на витрината (.spx-island на компютър, .spx-glass на телефон); те остават в DOM, скрити.
   Движат се само transform и opacity. Стъкло с размит фон не бива да си сменя размера, нито да реже
   движещи се деца по заобления си ръб: Safari на iPhone примигва и пуска съдържанието извън ръба.
   Затова менюто е готова карта с постоянен размер, която се уголемява от хапчето, както менютата в iOS.
   Без апостроф и знак за долар. */

html body .spx-island, html body .spx-glass { display: none !important; }

.sphn { --ink: #f7f1e5; --out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 0.5s;
  --panel-w: min(360px, calc(100vw - 24px)); --shift: calc((var(--panel-w) - 184px) / 2);
  font-family: Manrope, Arial, sans-serif; -webkit-tap-highlight-color: transparent; }

/* страницата зад отвореното меню потъмнява; не се скролва под пръста */
.sphn-scrim { position: fixed; inset: 0; z-index: 2147481990; background: rgba(6, 8, 18, 0.46); opacity: 0; visibility: hidden; touch-action: none; transition: opacity 0.3s var(--out), visibility 0s 0.3s; }
.sphn[data-open="true"] .sphn-scrim { opacity: 1; visibility: visible; transition: opacity 0.3s var(--out), visibility 0s; }

/* стъклото: тъмно, прозрачно, с размит фон отдолу, светъл ръб отгоре и мека сянка под него */
.sphn-mat { background: linear-gradient(180deg, rgba(44, 50, 78, 0.5) 0%, rgba(22, 26, 46, 0.62) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(1.8) brightness(1.06); backdrop-filter: blur(22px) saturate(1.8) brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(255, 255, 255, 0.05), inset 0 10px 22px -14px rgba(255, 255, 255, 0.16),
    0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px -10px rgba(0, 0, 0, 0.72), 0 34px 64px -34px rgba(0, 0, 0, 0.7); }
/* картата с менюто е по-плътно стъкло от хапчето (като менютата в iOS): текстът не се бори с картината отдолу */
.sphn-panel.sphn-mat { background: linear-gradient(180deg, rgba(38, 44, 70, 0.8) 0%, rgba(18, 22, 40, 0.88) 100%); }
/* без размиване отдолу (стари браузъри) стъклото е почти плътно */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sphn-mat, .sphn-panel.sphn-mat { background: linear-gradient(180deg, rgba(40, 46, 72, 0.97), rgba(20, 24, 42, 0.98)); }
}
/* телефон и таблет: без размиване изобщо. Размит фон на fixed елемент примигва в Safari на iPhone
   (при скрол, над видеото, при движение); витрината също го беше изключила за своето хапче */
@media (hover: none), (pointer: coarse) {
  .sphn-mat, .sphn-panel.sphn-mat { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(180deg, rgba(40, 46, 72, 0.97), rgba(20, 24, 42, 0.98)); }
}
/* ръбът: светлината пада отгоре и откъм курсора, затова ръбът е най-ярък там (ъгълът е в nav.js) */
.sphn-rim { position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ang, 200deg), rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.14) 22%, rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0.1) 70%, rgba(255, 255, 255, 0.62));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }

/* хапчето: размерът му не се мени. Отвори ли се менюто, стъклото му избледнява и остава това на картата,
   а логото и чертите се разтварят до краищата й */
.sphn-pill { position: fixed; top: 12px; left: 50%; z-index: 2147482000; width: 184px; height: 48px; margin-left: -92px; border-radius: 24px; color: var(--ink); cursor: pointer; transition: scale 0.5s var(--ease); }
.sphn-pill.sphn-press { scale: 0.965; transition: scale 0.12s ease-out; }
.sphn[data-intro="true"] .sphn-pill { animation: sphn-drop 0.8s var(--ease) both; }
@keyframes sphn-drop { from { opacity: 0; transform: translateY(-24px) scale(0.9); } to { opacity: 1; transform: none; } }
.sphn-pill-bg { position: absolute; inset: 0; border-radius: inherit; transition: opacity 0.22s ease; }
.sphn[data-open="true"] .sphn-pill-bg { opacity: 0; }
.sphn-logo { position: absolute; left: 16px; top: 12px; display: block; height: 24px; transition: transform var(--dur) var(--ease); }
.sphn-logo img { display: block; height: 24px; width: auto; }
.sphn-burger { position: absolute; right: 6px; top: 6px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 18px; background: transparent; color: inherit; cursor: pointer; transition: transform var(--dur) var(--ease), background-color 0.2s ease; }
.sphn-burger:focus-visible { outline: 2px solid rgba(247, 241, 229, 0.8); outline-offset: -2px; }
.sphn[data-open="true"] .sphn-logo { transform: translateX(calc(var(--shift) * -1)); }
.sphn[data-open="true"] .sphn-burger { transform: translateX(var(--shift)); }
/* три черти, които стават X: горната и долната се завъртат към средата, средната се прибира */
.sphn-burger i { position: absolute; left: 9px; width: 18px; height: 1.8px; border-radius: 1px; background: var(--ink); transition: transform var(--dur) var(--ease), opacity 0.2s ease; }
.sphn-burger i:nth-child(1) { top: 12px; }
.sphn-burger i:nth-child(2) { top: 17.1px; }
.sphn-burger i:nth-child(3) { top: 22.2px; }
.sphn[data-open="true"] .sphn-burger i:nth-child(1) { transform: translateY(5.1px) rotate(45deg); }
.sphn[data-open="true"] .sphn-burger i:nth-child(2) { transform: scaleX(0); opacity: 0; }
.sphn[data-open="true"] .sphn-burger i:nth-child(3) { transform: translateY(-5.1px) rotate(-45deg); }

/* картата с менюто: стои под хапчето, с готов размер. Затворена е смалена до ширината на хапчето
   (184 от 360 е около 0,52) и прозрачна; отваря се с пружина от центъра на хапчето */
.sphn-panel { position: fixed; top: 12px; left: 50%; z-index: 2147481995; width: var(--panel-w); margin-left: calc(var(--panel-w) / -2); padding: 54px 10px 12px; border-radius: 26px; color: var(--ink);
  transform-origin: 50% 24px; transform: scale(0.52); opacity: 0; visibility: hidden; pointer-events: none; touch-action: none;
  transition: transform 0.26s var(--out), opacity 0.16s ease, visibility 0s 0.26s; }
.sphn[data-open="true"] .sphn-panel { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: transform var(--dur) var(--ease), opacity 0.2s ease, visibility 0s; }
/* редовете идват един след друг (--i), при затваряне изчезват заедно и бързо */
.sphn-st { opacity: 0; transform: translateY(-6px); transition: opacity 0.12s ease, transform 0.2s ease; }
.sphn[data-open="true"] .sphn-st { opacity: 1; transform: none; transition: opacity 0.35s var(--out) calc(0.06s + var(--i, 0) * 0.03s), transform var(--dur) var(--ease) calc(0.06s + var(--i, 0) * 0.03s); }
.sphn-items { position: relative; display: grid; }
.sphn-item { position: relative; display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 14px; border-radius: 14px; color: var(--ink); font: 600 17px/1 Manrope, Arial, sans-serif; letter-spacing: -0.01em; text-decoration: none; }
.sphn-item::after { content: "→"; font-weight: 400; opacity: 0.35; }
.sphn-item:active { background: rgba(255, 255, 255, 0.075); }
.sphn-item:focus-visible { outline: 2px solid rgba(247, 241, 229, 0.7); outline-offset: -2px; }
.sphn-sep { height: 1px; margin: 8px 14px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0)); }
.sphn-langs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 4px 4px 10px; padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, 0.18); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.06); }
.sphn-langs a { display: grid; place-items: center; height: 34px; border-radius: 9px; color: rgba(247, 241, 229, 0.72); font: 700 12.5px/1 Manrope, Arial, sans-serif; letter-spacing: 0.04em; text-decoration: none; }
.sphn-langs a[aria-current="page"] { color: var(--ink); background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 3px rgba(0, 0, 0, 0.35); }
.sphn-cta { display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; margin: 0 4px; border-radius: 12px; background: linear-gradient(180deg, #f9d982 0%, #f3c252 100%); color: #1a1406; font: 800 16px/1 Manrope, Arial, sans-serif; letter-spacing: -0.01em; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 0 rgba(146, 96, 8, 0.5), 0 12px 24px -14px rgba(0, 0, 0, 0.9); }
.sphn-cta:active { filter: brightness(0.96); }
.sphn-cta:focus-visible { outline: 2px solid #fbf3e2; outline-offset: 3px; }

/* мишка: отблясък, който следва курсора, и светла плочка, която се плъзга от ред на ред.
   На телефон hover залепва след допир, затова там ги няма */
@media (hover: hover) {
  .sphn-light { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0.55; transition: opacity 0.5s var(--out);
    background: radial-gradient(130px circle at var(--lx, 40px) var(--ly, -20px), rgba(255, 244, 226, 0.2), rgba(255, 244, 226, 0.06) 45%, rgba(255, 244, 226, 0) 70%); }
  .sphn-pill:hover .sphn-light, .sphn-panel:hover .sphn-light { opacity: 1; }
  .sphn-burger:hover { background-color: rgba(255, 255, 255, 0.07); }
  .sphn-hover { position: absolute; left: 0; right: 0; top: 0; height: 48px; border-radius: 14px; background: rgba(255, 255, 255, 0.075); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); opacity: 0; pointer-events: none; transition: transform 0.45s var(--ease), opacity 0.25s ease; }
  .sphn-item::after { transform: translateX(-4px); transition: opacity 0.25s ease, transform 0.35s var(--ease); }
  .sphn-item:hover::after, .sphn-item:focus-visible::after { opacity: 0.8; transform: none; }
  .sphn-langs a { transition: background-color 0.2s ease, color 0.2s ease; }
  .sphn-langs a:hover { color: var(--ink); background-color: rgba(255, 255, 255, 0.06); }
}
@media (hover: none) { .sphn-light, .sphn-hover { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .sphn-scrim, .sphn-pill, .sphn-pill-bg, .sphn-logo, .sphn-burger, .sphn-burger i, .sphn-panel, .sphn-st, .sphn-light, .sphn-hover, .sphn-item::after { transition: none !important; }
  .sphn[data-intro="true"] .sphn-pill { animation: none; }
}