/* RideArrivo dynamic island navbar (see island.js). Brand wordmark sizing lives here too. */
.brand-wordmark{display:block;height:20px;width:auto;flex:none;transform-origin:left center}
.topbar,.mini-topbar{position:relative}
.topbar>*:not(.ar-glow),.mini-topbar>*:not(.ar-glow){position:relative;z-index:1}
.mini-topbar{position:fixed}
/* The sticky wrapper keeps its full height while the bar condenses inside it, so the page below never jumps.
   Size changes use a plain ease (no overshoot); only the small logo and button transforms spring. */
.topbar-wrap{min-height:90px}
@media(max-width:720px){.topbar-wrap{min-height:76px}}
.topbar{transition:min-height .35s cubic-bezier(.22,1,.36,1),padding .35s cubic-bezier(.22,1,.36,1),max-width .35s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,background .3s ease}
.topbar.is-scrolled{min-height:50px;padding-top:5px;padding-bottom:5px;max-width:1060px;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.05)),rgba(10,22,34,.84);box-shadow:0 18px 56px rgba(0,0,0,.5)}
.topbar.is-scrolled .brand-icon{transform:scale(.88)}
.topbar.is-scrolled .brand-wordmark{transform:scale(.92)}
.brand-icon,.brand-wordmark{transition:transform .5s cubic-bezier(.34,1.7,.5,1)}
.mini-topbar.is-scrolled{box-shadow:0 22px 56px rgba(4,13,24,.5)}

/* liquid glow behind the logo and buttons (phones, motion on) */
.ar-glow{display:none}
@media (max-width:859px){
  html[data-ar-fun="on"] .ar-glow{display:block;position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:0}
  html[data-ar-fun="on"] .ar-glow::before,html[data-ar-fun="on"] .ar-glow::after{content:"";position:absolute;top:-90%;height:280%;width:60%;filter:blur(16px);will-change:transform,border-radius}
  html[data-ar-fun="on"] .ar-glow::before{left:-20%;background:radial-gradient(closest-side,rgba(244,163,64,.5),rgba(244,163,64,0));animation:arGlowA 7.5s ease-in-out infinite alternate,arGlowMorph 5.5s ease-in-out infinite alternate}
  html[data-ar-fun="on"] .ar-glow::after{right:-20%;background:radial-gradient(closest-side,rgba(90,140,255,.38),rgba(90,140,255,0));animation:arGlowB 9.5s ease-in-out infinite alternate,arGlowMorph 6.5s ease-in-out -2s infinite alternate}
}
@keyframes arGlowA{0%{transform:translate(0,0) scale(1)}50%{transform:translate(90%,12%) scale(1.25)}100%{transform:translate(170%,-6%) scale(.9)}}
@keyframes arGlowB{0%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-80%,-10%) scale(.9)}100%{transform:translate(-160%,8%) scale(1.2)}}
@keyframes arGlowMorph{0%{border-radius:42% 58% 61% 39%/48% 41% 59% 52%}100%{border-radius:63% 37% 41% 59%/56% 62% 38% 44%}}
@media (prefers-reduced-motion:reduce){.topbar,.brand-icon,.brand-wordmark{transition:none!important}}

/* floating and side pill (desktop) */
@media (min-width:860px){
  .topbar:not(.is-floating){cursor:default}
  .topbar.is-floating{position:fixed;right:auto;margin:0;z-index:80;width:max-content;max-width:calc(100vw - 24px);gap:16px;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;background:rgba(10,22,34,.86);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 18px 44px rgba(0,0,0,.6)}
  .topbar.is-floating.is-dragging{cursor:grabbing;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 26px 60px rgba(0,0,0,.7)}
  .topbar.is-side{flex-direction:column;align-items:center;gap:8px;padding:12px 8px 14px;min-height:0;border-radius:30px;overflow:visible}
  .topbar.is-side::before{content:"";width:22px;height:4px;border-radius:4px;background:currentColor;opacity:.3;margin-bottom:2px}
  .topbar.is-side .brand-wordmark{display:none}
  .topbar.is-side .brand{gap:0}
  .topbar.is-side .nav-links,.topbar.is-side .nav-actions{flex-direction:column;align-items:center;gap:8px;margin:0;padding:0}
  .topbar.is-side .nav-links a,.topbar.is-side .nav-actions>*{position:relative;width:44px;height:44px;min-width:0;padding:0;font-size:0;line-height:0;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:visible}
  .topbar.is-side .nav-links a>*,.topbar.is-side .nav-actions>*>*{display:none}
  .topbar.is-side .nav-links a::before,.topbar.is-side .nav-actions>*::before{content:"";width:22px;height:22px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
  .topbar.is-side .nav-links a{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.500a2.500 2.500 0 0 1 0 5z'/></svg>")}
  .topbar.is-side .nav-links a[href$="#channels"]{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9l-5 4v-4H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/></svg>")}
  .topbar.is-side .nav-links a[href$="#safety"]{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 4 5v6c0 5 3.400 9.500 8 11 4.600-1.500 8-6 8-11V5l-8-3z'/></svg>")}
  .topbar.is-side #identityButton{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4.400 0-8 2.200-8 5v3h16v-3c0-2.800-3.600-5-8-5z'/></svg>")}
  .topbar.is-side #installButton{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 3h2v9.200l3.300-3.300 1.400 1.400L12 16l-5.700-5.700 1.400-1.400L11 12.200V3zM5 18h14v3H5z'/></svg>")}
  .topbar.is-side .status-dot{display:none}
  .topbar.is-side [data-tip]::after{content:attr(data-tip);display:block;position:absolute;top:50%;transform:translateY(-50%);white-space:nowrap;padding:7px 12px;border-radius:999px;background:#f5f8fb;color:#0c2135;font:600 12.5px/1 Inter,system-ui,sans-serif;letter-spacing:0;box-shadow:0 8px 22px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .14s ease;z-index:5}
  .topbar.is-side-left [data-tip]::after{left:calc(100% + 12px)}
  .topbar.is-side-right [data-tip]::after{right:calc(100% + 12px)}
  .topbar.is-side [data-tip]:hover::after,.topbar.is-side [data-tip]:focus-visible::after{opacity:1}
  .topbar.is-side.is-dragging [data-tip]::after{opacity:0}
}

/* PArAsYtE signature: silver wordmark, centred alone at the base of the page, links to parasyte.cloud */
.parasyte-sig{display:flex;justify-content:center;padding:26px 16px calc(34px + env(safe-area-inset-bottom,0px))}
.parasyte-sig a{display:inline-flex;opacity:.92;transition:opacity .15s ease;animation:parasyteSwell 4.2s ease-in-out infinite}
.parasyte-sig a:hover,.parasyte-sig a:focus-visible{opacity:1;animation-play-state:paused}
.parasyte-sig img{height:22px;width:auto;display:block;filter:drop-shadow(0 -1px 0 rgba(255,255,255,.35)) drop-shadow(0 1px 1px rgba(0,0,0,.55))}
@keyframes parasyteSwell{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){.parasyte-sig a{animation:none}}

/* On scroll the one long bar splits into two floating pills: brand on the left, links and Arrivo ID on the right.
   Unscrolled, .nav-right is invisible to layout so the bar looks exactly as before. */
.nav-right{display:contents}
@keyframes pillIn{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:none}}
.topbar.glass.is-scrolled:not(.is-floating):not(.is-side){background:none;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;min-height:0;max-width:1150px;gap:12px;justify-content:space-between;overflow:visible}
.topbar.is-scrolled:not(.is-floating):not(.is-side) .ar-glow{display:none!important}
.topbar.is-scrolled:not(.is-floating):not(.is-side) .brand,
.topbar.is-scrolled:not(.is-floating):not(.is-side) .nav-right{display:flex;align-items:center;min-height:48px;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.04)),rgba(10,22,34,.94);box-shadow:0 14px 40px rgba(0,0,0,.42),0 1px 0 rgba(255,255,255,.08) inset;-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);animation:pillIn .4s cubic-bezier(.22,1,.36,1) both}
.topbar.is-scrolled:not(.is-floating):not(.is-side) .brand{padding:4px 16px 4px 12px;gap:10px}
.topbar.is-scrolled:not(.is-floating):not(.is-side) .brand-icon{transform:none}
.topbar.is-scrolled:not(.is-floating):not(.is-side) .nav-right{margin-left:auto;padding:4px 6px 4px 8px;gap:2px;animation-delay:.05s}
.topbar.is-scrolled:not(.is-floating):not(.is-side) .nav-links{margin:0}
@media(prefers-reduced-motion:reduce){.topbar.is-scrolled .brand,.topbar.is-scrolled .nav-right{animation:none!important}}
/* iPhone Safari zooms the page when a focused text box is under 16px. Keep every text box at 16px on touch screens. */
@media (hover:none) and (pointer:coarse){input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{font-size:16px!important}}