/* Version 1.9.13: gentle compact header with a restrained sea shimmer on the SVG wordmark. */
.site-header{
  --ex-header-progress:0;
  isolation:isolate;
  transition:background-color .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.site-header.is-scrolled{
  background:rgba(255,255,255,.97);
  border-color:rgba(226,230,237,.94);
  box-shadow:0 13px 38px rgba(33,45,63,.105);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
.site-header::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:2px;
  background:var(--accent,#ed4457);
  transform:scaleX(var(--ex-header-progress));
  transform-origin:left center;
  pointer-events:none;
  z-index:5;
}
.site-header .brand .logo{transition:transform .55s cubic-bezier(.19,1,.22,1);transform-origin:left center}
.site-header.is-compact .brand .logo{transform:scale(.9)}
/* The brand does not move. Only a narrow clipped tide and a masked light
   reflection animate, keeping all motion inside the logo itself. */
.site-header .brand:has(> .logo-wordmark){position:relative;isolation:isolate}
.site-header .brand:has(> .logo-wordmark)::before{
  content:"";
  position:absolute;
  z-index:2;
  pointer-events:none;
  left:6px;
  bottom:-4px;
  width:min(132px,calc(100% - 12px));
  height:7px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='8' viewBox='0 0 48 8'%3E%3Cpath d='M0 4 C8 0 16 0 24 4 S40 8 48 4' fill='none' stroke='%2369bdcc' stroke-width='1.65' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-size:48px 7px;
  opacity:.52;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  animation:ex-logo-tide 5.5s linear infinite;
  transition:opacity .5s ease;
}
.site-header .brand:has(> .logo-wordmark)::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(104deg,transparent 42%,rgba(82,181,202,.25) 47%,rgba(255,255,255,.58) 50%,rgba(82,181,202,.2) 53%,transparent 60%);
  background-size:250% 100%;
  background-position:125% center;
  -webkit-mask:url('odesa-wordmark.svg') left center/contain no-repeat;
  mask:url('odesa-wordmark.svg') left center/contain no-repeat;
  opacity:0;
  animation:ex-logo-sea-glint 7.4s linear infinite;
  transition:transform .55s cubic-bezier(.19,1,.22,1);
  transform-origin:left center;
}
.site-header.is-compact .brand:has(> .logo-wordmark)::before{opacity:.22}
.site-header.is-compact .brand:has(> .logo-wordmark)::after{transform:scale(.9)}
.site-header .brand:has(> .logo-wordmark):hover::before{opacity:.85}
@keyframes ex-logo-tide{to{background-position:48px 0}}
@keyframes ex-logo-sea-glint{
  0%,11%{background-position:125% center;opacity:0}
  17%{opacity:.8}
  32%{background-position:-125% center;opacity:.8}
  39%,100%{background-position:-125% center;opacity:0}
}
.site-header .header-actions{transition:transform .55s cubic-bezier(.19,1,.22,1),gap .3s ease}
.site-header.is-compact .header-actions{transform:translateY(-2px)}
@media(min-width:1101px){
  .site-header .header-inner{transition:grid-template-rows .56s cubic-bezier(.19,1,.22,1)}
  .site-header.is-compact .header-inner{grid-template-rows:70px auto}
  .site-header .main-menu{transition:transform .56s cubic-bezier(.19,1,.22,1)}
  .site-header.is-compact .main-menu{transform:translateY(-2px)}
  .site-header .main-menu>li>a{
    transition:color .23s ease,padding .56s cubic-bezier(.19,1,.22,1);
  }
  .site-header.is-compact .main-menu>li>a{padding-top:13px;padding-bottom:13px}
  .site-header .main-menu>li::after{
    content:"";
    position:absolute;
    left:0;
    right:22px;
    bottom:8px;
    height:2px;
    border-radius:2px;
    background:var(--accent,#ed4457);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .25s cubic-bezier(.22,.68,0,1);
    pointer-events:none;
  }
  .site-header .main-menu>li:hover::after,
  .site-header .main-menu>li:focus-within::after,
  .site-header .main-menu>li.current-menu-item::after,
  .site-header .main-menu>li.current-menu-ancestor::after{transform:scaleX(1)}
  .site-header.is-compact .main-menu>li::after{bottom:5px}
}
@media(max-width:1100px){
  .site-header .header-inner{transition:height .56s cubic-bezier(.19,1,.22,1)}
  .site-header.is-compact .header-inner{height:74px}
  .site-header.is-compact #site-nav{max-height:calc(100dvh - 86px)}
}
@media(max-width:640px){
  .site-header.is-compact .header-inner{height:68px}
  .site-header.is-compact #site-nav{max-height:calc(100dvh - 80px)}
}
@media(prefers-reduced-motion:reduce){
  .site-header,.site-header .header-inner,.site-header .brand .logo,
  .site-header .header-actions,.site-header .main-menu,
  .site-header .main-menu>li>a,.site-header .main-menu>li::after{transition:none!important}
  .site-header .brand::before,.site-header .brand::after{animation:none!important;transition:none!important}
  .site-header .brand:has(> .logo-wordmark)::after{opacity:0!important}
}