/* BITARD navigation consistency + mobile/touch refinements. */

/* Homepage cinematic hero video. Keep the loading surface white so the page
   feels continuous before the first decoded video frame arrives. */
.bitard-showreel{
  background:var(--paper);
}
.bitard-showreel video{
  display:block;
  width:100%;
  max-width:none;
  height:100%;
  object-fit:cover;
  object-position:center center;
  background:transparent;
  opacity:0;
  transition:opacity .35s ease;
}
.bitard-showreel.is-video-ready video{opacity:1}
.bitard-showreel.is-complete{
  height:0!important;
  min-height:0!important;
  margin-bottom:0!important;
  opacity:0;
  pointer-events:none;
}

/* One-shot BITARD logo intro.
   The reveal stays on its own final SVG frame so there is no visual size jump
   from handing off to a differently padded static asset. */
.bitard-logo{
  --bitard-logo-size:92px;
}
.bitard-logo__link{
  display:block;
  width:var(--bitard-logo-size);
  height:var(--bitard-logo-size);
  text-decoration:none;
}
.bitard-logo__brand{
  position:relative;
  display:block;
  width:100%;
  height:100%;
}
.bitard-logo__static,
.bitard-logo__animated{
  position:absolute;
  inset:0;
  display:block;
  width:100%!important;
  max-width:none!important;
  height:100%!important;
}
.bitard-logo__static{
  object-fit:contain;
  object-position:left top;
  opacity:0;
}
.bitard-logo__animated{
  overflow:hidden;
  opacity:1;
  pointer-events:none;
}
.bitard-logo__word--top{
  opacity:0;
  animation:bitardLogoTop 2.8s linear both;
}
.bitard-logo__word--bottom{
  opacity:0;
  animation:bitardLogoBottom 2.8s linear both;
}
.bitard-logo__cursor{
  opacity:0;
  animation:bitardLogoCursor 2.8s linear both;
}
.bitard-logo__corner{
  opacity:0;
  transform-box:view-box;
  transform-origin:0 0;
  animation-duration:2.8s;
  animation-fill-mode:both;
}
.bitard-logo__corner--bl{
  transform:translate(-23.85px,23.85px);
  animation-name:bitardLogoCornerBL;
}
.bitard-logo__corner--tr{
  transform:translate(23.85px,-23.85px);
  animation-name:bitardLogoCornerTR;
}

@keyframes bitardLogoTop{
  0%,42%{opacity:0}
  56%,100%{opacity:1}
}
@keyframes bitardLogoBottom{
  0%,60%{opacity:0}
  72%,100%{opacity:1}
}
@keyframes bitardLogoCursor{
  0%{opacity:0}
  9%{opacity:1}
  12%{opacity:0}
  21%{opacity:1}
  24%{opacity:0}
  30%{opacity:1}
  33%{opacity:0}
  40%{opacity:1}
  42%,81%{opacity:0}
  91%,100%{opacity:1}
}
@keyframes bitardLogoCornerBL{
  0%,53.5%{opacity:0;transform:translate(-23.85px,23.85px)}
  60%{opacity:1;animation-timing-function:cubic-bezier(.075,.82,.165,1)}
  100%{opacity:1;transform:translate(0,0)}
}
@keyframes bitardLogoCornerTR{
  0%,53.5%{opacity:0;transform:translate(23.85px,-23.85px)}
  60%{opacity:1;animation-timing-function:cubic-bezier(.075,.82,.165,1)}
  100%{opacity:1;transform:translate(0,0)}
}

/* WORK / STUDIO / CONTACT share one quieter typographic hierarchy on every viewport.
   Selection is expressed by the underline, not by changing font weight. */
.bitard-work-title,
.bitard-utility a{
  font-weight:400;
}
.bitard-utility a{
  position:relative;
  font-size:19px;
  line-height:1.1;
  text-decoration:none;
  letter-spacing:.01em;
}
.bitard-utility a:hover{
  text-decoration:none;
}
.bitard-work-title::after,
.bitard-utility a::after{
  margin-top:2px;
}
.bitard-utility a::after{
  content:"";
  display:block;
  width:0;
  height:1px;
  background:var(--ink);
  transition:width .3s var(--ease);
}
.bitard-utility a:hover::after,
.bitard-utility a.is-active::after,
.bitard-utility a[aria-current="page"]::after,
.bitard-utility a[aria-current="true"]::after{width:100%}

/* WORK remains marked while a discipline inside WORK is active. */
.bitard-work-title.is-parent-active::after{width:100%}

/* Discipline selection follows the real index width + flex gap at every
   breakpoint. This replaces the old hand-authored label offsets, which drifted
   on phones and caused the underline to begin inside the first letter. */
.bitard-filter{
  --filter-index-width:20px;
  --filter-gap:9px;
  position:relative;
  gap:var(--filter-gap);
  text-decoration:none;
}
.bitard-filter>span:first-child{
  width:var(--filter-index-width);
  flex:0 0 var(--filter-index-width);
}
.bitard-filter.is-active{font-weight:inherit}
.bitard-filter::after{
  content:"";
  position:absolute;
  left:calc(var(--filter-index-width) + var(--filter-gap));
  right:0;
  bottom:0;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .3s var(--ease);
  pointer-events:none;
}
.bitard-filter.is-active::after{transform:scaleX(1)}

/* Keep discipline labels secondary to WORK, but a touch larger for readability.
   Index numerals stay on their existing independent size at every breakpoint. */
@media (min-width:821px){
  .bitard-filter{
    font-size:13px;
    font-weight:400;
    letter-spacing:.002em;
  }
}

@media (max-width:1280px){
  .bitard-logo{--bitard-logo-size:76px}
}

@media (max-width:1040px){
  .bitard-logo{--bitard-logo-size:70px}
  .bitard-utility a{font-size:18px}
  .bitard-filter{
    --filter-index-width:18px;
    --filter-gap:8px;
  }
}

/* One mobile/tablet navigation contract owns every state: WORK, service views,
   STUDIO, CONTACT and project CASES. The navigation remains in normal document
   flow, becomes sticky at the viewport top and paints its own opaque paper
   surface so scrolling content can never show through the type. The shared
   offset token is also consumed by fixed STUDIO / CONTACT canvases. */
@media (max-width:820px){
  :root{--bitard-mobile-nav-offset:188px}

  .bitard-nav-shell{
    position:sticky;
    top:0;
    z-index:200;
    display:grid;
    grid-template-columns:78px minmax(0,1fr);
    column-gap:18px;
    align-items:start;
    width:100%;
    padding:18px 18px 20px;
    margin:0 0 20px;
    background:var(--paper);
    isolation:isolate;
  }

  .bitard-logo{
    --bitard-logo-size:70px;
    position:static;
    top:auto;
    left:auto;
    width:78px;
    margin:0;
  }

  .bitard-rail{
    position:static;
    top:auto;
    left:auto;
    width:auto;
    height:auto;
    min-height:0;
    margin:0;
  }

  .bitard-utility a{font-size:17px}
  .bitard-filter{
    --filter-index-width:17px;
    --filter-gap:7px;
    font-size:12px;
  }
}

@media (max-width:620px){
  :root{--bitard-mobile-nav-offset:156px}

  .bitard-nav-shell{
    grid-template-columns:76px minmax(0,1fr);
    column-gap:8px;
    padding:14px 14px 18px;
    margin-bottom:18px;
  }

  .bitard-logo{width:76px}
  .bitard-filter{
    --filter-index-width:15px;
    --filter-gap:6px;
    font-size:11px;
  }
}

@media (max-width:420px){
  .bitard-filter{
    --filter-index-width:13px;
    --filter-gap:5px;
    font-size:10px;
  }
}

@media (hover:none), (pointer:coarse){
  .bitard-filter:hover{transform:none}
  .bitard-filters:hover .bitard-filter:not(:hover){opacity:1}

  .bitard-card img{transition:none}
  .bitard-card:hover img{transform:none}
  .bitard-card__shade{
    opacity:.18;
    background:linear-gradient(to top,rgba(0,0,0,.42),transparent 30%);
  }
  .bitard-card__label{
    opacity:1;
    transform:none;
  }
}

/* BITARD_COMPLIANZ_NATIVE_MANAGE_CONSENT_HIDDEN
   Keep Complianz' native control in the DOM for the BITARD bridge, but never
   expose its generic floating UI. */
.cmplz-manage-consent:not([data-bitard-cookie-settings]){
  display:none!important;
}