/* SLEDEXT · menu, contacts and plaques of the route sites · v1.0 (24.09.2026) · the design of The Five Islands Odyssey
   Glass: assets/sledext-glass.js + assets/liquid-glass.js. Every [data-glass] shape has a CSS frosted look of its own;
   while the WebGL glass draws it (class lg-live) the CSS look is switched off. */

/* ---- the glass canvas: over the backdrop, under the text ---- */
#lg{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:0;pointer-events:none}

/* ---- frosted look of every glass shape (film moving, WebGL missing) ---- */
[data-glass]{background:rgba(8,14,12,.22);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
  transition:background-color .35s ease,box-shadow .35s ease,-webkit-backdrop-filter .35s ease,backdrop-filter .35s ease}
[data-glass].lg-live{background-color:transparent;-webkit-backdrop-filter:blur(0px) saturate(1);backdrop-filter:blur(0px) saturate(1);box-shadow:inset 0 0 0 1px rgba(255,255,255,0)}

/* ---- menu · desktop ---- */
#menu.sx-menu{position:fixed;top:21px;left:50%;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:32px;
  padding:9px 11px 9px 24px;border-radius:100px;border:0;
  transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .3s cubic-bezier(.22,1,.36,1),background-color .35s ease,box-shadow .35s ease,-webkit-backdrop-filter .35s ease,backdrop-filter .35s ease}
.sx-menu .logo{position:relative;display:block;width:70px;height:36px;cursor:pointer;flex:none}
.sx-menu .logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .5s linear}
.sx-menu .mlinks{display:flex;gap:24px;align-items:center}
.sx-menu .mlink{position:relative;font:500 11.25px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(245,248,249,.78);cursor:pointer;white-space:nowrap;text-decoration:none;transition:color .15s linear}
.sx-menu .mlink::before{content:none}
.sx-menu .mlink:hover{color:#4FC4E8}
.sx-menu .mlink.act{color:#F5F8F9}
.sx-menu .cta{display:inline-flex;align-items:center;border:0;border-radius:999px;background:linear-gradient(115deg,#CBFF1A 0%,#2FE0C8 52%,#39B8E8 100%);
  color:#08090A;font:800 12.2px/1 'Manrope',system-ui,sans-serif;letter-spacing:0;text-transform:uppercase;padding:11px 21px;cursor:pointer;white-space:nowrap;
  text-decoration:none;transition:transform .15s cubic-bezier(.22,1,.36,1),background .5s linear}
.sx-menu .cta:hover{transform:scale(1.02);color:#08090A}
.sx-menu button.mlink{background:none;border:0;padding:0;display:inline-flex;align-items:center;gap:7px}
.sx-menu .ct-tg svg{width:9px;height:6px;display:block;transition:transform .2s cubic-bezier(.22,1,.36,1)}
.sx-menu.ct-open .ct-tg{color:#F5F8F9}
.sx-menu.ct-open .ct-tg svg{transform:rotate(180deg)}
.sx-menu .ct-drop{position:absolute;top:calc(100% + 12px);left:0;display:flex;gap:10px;pointer-events:none}
.sx-menu .ct-dot{width:52px;height:52px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  font:500 12px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.08em;color:#F5F8F9;text-decoration:none;
  opacity:0;transform:translateY(-8px) scale(.72);
  transition:opacity .18s linear,transform .34s cubic-bezier(.3,1.45,.6,1),background-color .35s ease,box-shadow .35s ease,-webkit-backdrop-filter .35s ease,backdrop-filter .35s ease}
.sx-menu .ct-dot:nth-child(2){transition-delay:.035s,.035s,0s,0s,0s,0s}
.sx-menu .ct-dot:nth-child(3){transition-delay:.07s,.07s,0s,0s,0s,0s}
.sx-menu.ct-open .ct-drop{pointer-events:auto}
.sx-menu.ct-open .ct-dot{opacity:1;transform:none}
.sx-menu .ct-dot:hover{color:#C5F500}
.sx-menu .ct-dot:focus-visible,.sx-menu .ct-tg:focus-visible,.msg:focus-visible{outline:2px solid #C5F500;outline-offset:3px}

/* ---- menu · phones (mobile.html): logo · contacts · request ---- */
.sx-m{--sxu:min(calc(100vw / 390),1.3px)}
.sx-m #menu.sx-menu{top:calc(var(--sxu)*12 + env(safe-area-inset-top));gap:calc(var(--sxu)*16);padding:calc(var(--sxu)*6) calc(var(--sxu)*6) calc(var(--sxu)*6) calc(var(--sxu)*14);border-radius:999px}
.sx-m .sx-menu .logo{width:calc(var(--sxu)*44);height:calc(var(--sxu)*22)}
.sx-m .sx-menu .cta{font-size:calc(var(--sxu)*10.5);letter-spacing:.02em;padding:calc(var(--sxu)*9) calc(var(--sxu)*14)}
.sx-m .sx-menu .ct-tg{flex:none;width:calc(var(--sxu)*34);height:calc(var(--sxu)*34);border-radius:999px;border:1px solid rgba(245,248,249,.32);
  background:none;color:#F5F8F9;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;transition:border-color .15s linear,color .15s linear}
.sx-m .sx-menu .ct-tg svg{width:calc(var(--sxu)*17);height:calc(var(--sxu)*17);display:block}
.sx-m .sx-menu .ct-tg .ic-x,.sx-m .sx-menu.ct-open .ct-tg .ic-b{display:none}
.sx-m .sx-menu.ct-open .ct-tg .ic-x{display:block}
.sx-m .sx-menu.ct-open .ct-tg{border-color:#C5F500;color:#C5F500}
.sx-m .sx-menu .ct-drop{top:calc(100% + var(--sxu)*10);left:0;right:0;justify-content:center;gap:calc(var(--sxu)*10)}
.sx-m .sx-menu .ct-dot{width:calc(var(--sxu)*50);height:calc(var(--sxu)*50);font-size:calc(var(--sxu)*11.5)}

/* ---- plaques ---- */
.sx-plq{border-radius:28px}
.sx-cap{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:14px 14px 14px 40px;border-radius:999px;text-align:left}
.sx-cap .sx-ph{display:flex;flex-direction:column;gap:10px}
.sx-cap .sx-ph-l{font:500 12px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;color:#4FC4E4;text-transform:uppercase;white-space:nowrap}
.sx-cap .sx-ph-v{font:400 21px/1 'Onest',system-ui,sans-serif;color:#F5F8F9;white-space:nowrap;text-decoration:none}
.sx-cap .sx-ph-v:hover{color:#C5F500}
.msg-row{display:flex;gap:10px;flex:none}
.msg{display:inline-flex;align-items:center;gap:12px;height:54px;padding:0 22px 0 7px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(245,248,249,.3);
  background:rgba(245,248,249,.06);color:#F5F8F9;font:500 16px/1 'Onest',system-ui,sans-serif;text-decoration:none;white-space:nowrap;
  transition:box-shadow .15s linear,background-color .15s linear}
.msg .mk{flex:none;width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(245,248,249,.14);
  font:500 12px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.06em;transition:background-color .15s linear,color .15s linear}
.msg:hover{color:#F5F8F9;box-shadow:inset 0 0 0 1px #C5F500;background:rgba(245,248,249,.1)}
.msg:hover .mk{background:#C5F500;color:#08090A}
.sx-go{flex:none;display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;background:#C5F500;color:#08090A;border-radius:999px;
  padding:18px 34px;font:600 17px/1 'Onest',system-ui,sans-serif;text-decoration:none;white-space:nowrap;transition:transform .15s cubic-bezier(.22,1,.36,1)}
.sx-go:hover{transform:scale(1.02);color:#08090A}

/* ---- plaques · phones ---- */
.sx-m .sx-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--sxu)*8)}
.sx-m .sx-card{border-radius:calc(var(--sxu)*18);padding:calc(var(--sxu)*14) calc(var(--sxu)*16);text-align:left}
.sx-m .sx-card.full{grid-column:1/-1}
.sx-m .sx-cards.two{grid-template-columns:repeat(2,1fr)}
.sx-m .sx-card .cl{display:block;font:500 calc(var(--sxu)*10)/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.16em;color:#4FC4E4;text-transform:uppercase}
.sx-m .sx-card .ct{display:block;margin-top:calc(var(--sxu)*8);font:400 calc(var(--sxu)*20)/1.2 'Onest',system-ui,sans-serif;color:#F5F8F9;white-space:nowrap;text-decoration:none}
.sx-m .sx-card.msgc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--sxu)*8);padding:calc(var(--sxu)*14) calc(var(--sxu)*4);text-decoration:none}
.sx-m .msgc .mk{font:500 calc(var(--sxu)*10)/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.16em;color:#4FC4E4}
.sx-m .msgc .mn{font:500 calc(var(--sxu)*15)/1 'Onest',system-ui,sans-serif;color:#F5F8F9}

@media (prefers-reduced-motion:reduce){.sx-menu .ct-dot,[data-glass],#menu.sx-menu{transition:none}}

/* ---- menu hidden while the page travels / on stops without a menu (class-based pages) ---- */
#menu.sx-menu.hide{transform:translate(-50%,-160%)}
body.navoff #menu.sx-menu{transform:translate(-50%,-160%);opacity:0;pointer-events:none}