/*!
 * BOATPRO — brand marquee
 * Part of the BOATPRO WordPress theme.
 * Author: Martin Žunec
 */

/* WE FIX / BRAND MARQUEE */
    .brands-section{
      position:relative;
      overflow:hidden;
      padding:92px 0 88px;
      background:#2a2b2b;
      color:#fff;
    }
    .brands-section:before{
      content:"";
      position:absolute;
      width:430px;
      height:430px;
      right:-190px;
      top:-250px;
      border-radius:50%;
      background:rgba(160,62,53,.16);
      filter:blur(2px);
      pointer-events:none;
    }
    .brands-head{
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
      gap:56px;
      align-items:end;
      margin-bottom:42px;
    }
    .brands-head .eyebrow{color:#d9a39e}
    .brands-head h2{
      max-width:760px;
      margin:.45rem 0 0;
      color:#fff;
      font-size:clamp(2.5rem,4.8vw,4.8rem);
      line-height:.98;
      letter-spacing:-.05em;
    }
    .brands-head p{
      max-width:480px;
      margin:0 0 4px auto;
      color:rgba(255,255,255,.68);
      line-height:1.65;
      font-size:.98rem;
    }
    .brands-stage{
      position:relative;
      z-index:2;
      margin-inline:calc((100vw - min(100vw - 40px,var(--max))) / -2);
      padding:18px 0;
    }
    .brands-glow{
      position:absolute;
      inset:14% 16% 8%;
      background:radial-gradient(circle at center,rgba(160,62,53,.14),transparent 64%);
      pointer-events:none;
    }
    .brand-marquee{
      position:relative;
      overflow:hidden;
      padding:8px 0;
      -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
      mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
    }
        .brand-track{
      display:flex;
      width:max-content;
      will-change:transform;
    }
    .brand-group{
      display:flex;
      align-items:center;
      gap:14px;
      padding-right:14px;
    }
    .brand-track-one{animation:brandRailLeft 42s linear infinite}
    .brand-track-two{animation:brandRailRight 39s linear infinite}
    .brands-stage:hover .brand-track{animation-play-state:paused}
    .brand-card{
      width:210px;
      height:98px;
      flex:0 0 210px;
      display:grid;
      place-items:center;
      padding:14px 18px;
      border-radius:16px;
      background:#f7f6f3;
      border:1px solid rgba(255,255,255,.12);
      box-shadow:0 12px 30px rgba(0,0,0,.14);
      overflow:hidden;
    }
    
    .brand-nameplate{
      width:100%;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:2px;
      text-align:center;
      line-height:1;
    }
    .brand-main{
      display:block;
      font-size:1.28rem;
      font-weight:950;
      letter-spacing:-.035em;
      white-space:nowrap;
    }
    .brand-sub{
      display:block;
      margin-top:4px;
      font-size:.61rem;
      font-weight:900;
      letter-spacing:.18em;
      white-space:nowrap;
    }

    /* Brand-name treatments: intentionally clean nameplates rather than copied logo artwork. */
    .brand-yamaha .brand-main{color:#e60012;letter-spacing:.03em}
    .brand-mercury .brand-main{color:#171717}
    .brand-mercury .brand-sub{color:#a03e35}
    .brand-suzuki .brand-main{color:#075aa7}
    .brand-suzuki .brand-sub{color:#d9272e}
    .brand-honda .brand-main{color:#e51c23}
    .brand-honda .brand-sub{color:#174a91}
    .brand-volvo .brand-main{color:#1c4f91;font-family:Georgia,serif;letter-spacing:.01em}
    .brand-cat .brand-main{color:#111}
    .brand-cat .brand-nameplate:after{
      content:"";
      width:24px;height:5px;margin-top:7px;
      background:#f3b400;
      clip-path:polygon(50% 0,100% 100%,0 100%);
    }
    .brand-yanmar .brand-main{color:#df172d;font-style:italic}
    .brand-tohatsu .brand-main{color:#193a67;letter-spacing:.04em}
    .brand-lombardini .brand-main{color:#23374f;font-size:1.14rem;letter-spacing:.055em}
    .brand-vetus .brand-main{
      padding:8px 15px 7px;
      background:#193f70;
      color:#ffc31c;
      transform:skew(-7deg);
      letter-spacing:.01em;
    }
    .brand-scam .brand-main{color:#30363a}
    .brand-scam .brand-sub{color:#a03e35}
    .brand-torqeedo .brand-main{color:#ef6c00;font-weight:900;letter-spacing:.015em}
    .brand-epropulsion .brand-main{color:#1470b7;font-size:1.05rem;letter-spacing:.025em}
    .brand-evoy .brand-main{color:#142024;font-size:1.65rem;font-weight:800;letter-spacing:-.08em}
    .brands-note{
      position:relative;
      z-index:2;
      width:max-content;
      max-width:100%;
      display:flex;
      align-items:flex-start;
      gap:9px;
      margin-top:18px;
      padding:10px 13px;
      border:1px solid rgba(255,255,255,.12);
      border-radius:10px;
      color:rgba(255,255,255,.58);
      font-size:.72rem;
      line-height:1.45;
    }
    .brands-note-dot{
      width:7px;
      height:7px;
      flex:0 0 7px;
      margin-top:4px;
      border-radius:50%;
      background:#A03E35;
    }
    @keyframes brandRailLeft{
      from{transform:translateX(0)}
      to{transform:translateX(-50%)}
    }
    @keyframes brandRailRight{
      from{transform:translateX(-50%)}
      to{transform:translateX(0)}
    }
    @media(max-width:820px){
      .brands-section{padding:72px 0 68px}
      .brands-head{
        grid-template-columns:1fr;
        gap:18px;
        margin-bottom:28px;
      }
      .brands-head p{margin:0;max-width:620px}
      .brands-stage{
        margin-inline:calc((100vw - min(100vw - 28px,var(--max))) / -2);
      }
      .brand-card{
        width:172px;
        height:78px;
        flex-basis:172px;
        border-radius:14px;
        padding:10px 13px;
      }
      .brand-main{font-size:1.02rem}
      .brand-sub{font-size:.52rem}
      .brand-lombardini .brand-main{font-size:.92rem}
      .brand-epropulsion .brand-main{font-size:.88rem}
      .brand-evoy .brand-main{font-size:1.34rem}
      .brands-note{width:auto}
    }
    @media(prefers-reduced-motion:reduce){
      .brand-track-one,.brand-track-two{animation:none}
      .brand-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
    }
/* Real logo artwork for the brands that have a logo file.
       Brand cards without a logo keep the typographic nameplate above. */
    .brand-card picture{display:block;max-width:100%}
    .brand-logo,
    .brand-card img{
      max-width:100%;
      max-height:62px;
      width:auto;
      height:auto;
      object-fit:contain;
      display:block;
      margin:0 auto;
    }
    .brand-evoy .brand-logo,
    .brand-epropulsion .brand-logo{max-height:56px}
    @media (min-width:761px){
      .brand-card{width:230px;flex:0 0 230px;height:104px}
      .brand-logo,.brand-card img{max-height:68px}
    }