/* ======================================================================
   SMAV · REIDI — Animated brand lockup for the fixed header
   ----------------------------------------------------------------------
   Replaces the static <img class="brand__logo"> symbol inside .brand.
   Ported from the standalone "Animação do cabeçalho" deliverable and
   scoped under the `ba-` prefix so it never collides with site styles.

   Sequence (driven by brand-anim.js):
     1. full logo reveals (symbol + "SOUTO MAIOR…" wordmark)
     2. the wordmark retracts / is absorbed into the symbol
     3. the symbol energizes (a light streak runs through its strokes)
     4. "SMAV · REIDI" emerges from the symbol → RESTING STATE

   The RESTING STATE below (name collapsed, wordmark shown) is also the
   no-JS / animation-failed fallback, so the header is always legible.
   Assets are CSS-relative (resolve the same from any page that loads
   assets/): brand-mark.png (the symbol) + anim-logo-full.png (name crop).
   ====================================================================== */

.brand--anim {
  /* the lockup manages its own internal spacing */
  gap: 0;
  /* resting/final size of the brand art — tuned to the 74px nav.
     mark height ≈ 534 * --s ; wordmark ≈ that * .62 */
  --s: .086;
  --gapw: calc(534px * var(--s) * .62);
  --ba-ink: var(--ink, #ECEAE3);
  --ba-gold: var(--gold, #C0890F);
  --ba-gold-soft: var(--gold-soft, #F0CE7A);
  --ba-gold-bright: var(--gold-bright, #E6B84A);
}

.ba-lockup {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  transform-origin: center center;
  will-change: transform, opacity;
}
/* JS owns the reveal: once it arms the animation it sets inline styles
   (higher specificity) and clears this class. If JS is present the lockup
   starts hidden to avoid a pre-animation flash; without JS it stays shown. */
html.ba-pending .ba-lockup { opacity: 0; }

/* --- the symbol (real brand mark) ---------------------------------- */
.ba-mark {
  flex: 0 0 auto;
  position: relative;
  height: calc(534px * var(--s));
  width: calc(557px * var(--s));
  will-change: filter;
}
.ba-mark-base,
.ba-mark-energy { position: absolute; inset: 0; }
.ba-mark-base {
  background: url("brand-mark.png") no-repeat center / contain;
}
/* a bright streak, masked to the symbol's strokes, that sweeps through */
.ba-mark-energy {
  -webkit-mask: url("brand-mark.png") no-repeat center / contain;
          mask: url("brand-mark.png") no-repeat center / contain;
  background: linear-gradient(116deg,
      transparent 44%,
      rgba(240, 206, 122, .9) 48%,
      #fff7e6 50%,
      rgba(240, 206, 122, .9) 52%,
      transparent 56%);
  background-size: 300% 100%;
  background-position: 125% 50%;
  mix-blend-mode: screen;
  opacity: 0;
  will-change: background-position, opacity;
}

/* --- the "SOUTO MAIOR…" wordmark crop (collapses into the symbol) --- */
/* RESTING DEFAULT = collapsed (final state). JS expands it to animate. */
.ba-name-slot {
  flex: 0 0 auto;
  overflow: hidden;
  height: calc(534px * var(--s));
  width: 0;
  opacity: 0;
  will-change: width, opacity;
}
/* name = crop of the full logo PNG ; source x[770..2290] y[132..666].
   width/margin stay set even while clipped so JS can measure the open size. */
.ba-name {
  display: block;
  flex: 0 0 auto;
  width: calc(1520px * var(--s));
  height: calc(534px * var(--s));
  margin-left: var(--gapw);
  background-image: url("anim-logo-full.png");
  background-repeat: no-repeat;
  background-size: calc(2500px * var(--s)) calc(798px * var(--s));
  background-position: calc(-770px * var(--s)) calc(-132px * var(--s));
}

/* --- divider hairline between symbol and "SMAV · REIDI" ------------- */
.ba-divider {
  flex: 0 0 auto;
  width: 1px;
  height: calc(534px * var(--s) * .72);
  margin-left: calc(var(--gapw) * .82);
  background: linear-gradient(180deg, transparent, var(--ba-gold) 20%, var(--ba-gold-soft) 50%, var(--ba-gold) 80%, transparent);
  opacity: .5;
  transform-origin: center;
  will-change: opacity, transform;
}

/* --- "SMAV · REIDI" wordmark (RESTING: shown) ---------------------- */
.ba-wordmark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: .34em;
  margin-left: calc(var(--gapw) * .82);
  font-family: var(--font-display, 'Hanken Grotesk', system-ui, sans-serif);
  /* resting wordmark size: half of the original .62 ratio (was too large) */
  font-size: calc(534px * var(--s) * .31);
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1;
  white-space: nowrap;
  will-change: transform, opacity, clip-path;
}
.ba-wordmark .w-reidi { color: var(--ba-ink); }
.ba-wordmark .w-dot   { color: var(--ba-gold); transform: translateY(-.06em); font-weight: 700; }
.ba-wordmark .w-smav  { color: var(--ba-gold-soft); }

/* --- energy burst + glow (travel with the symbol; placed by JS) ---- */
.ba-emit,
.ba-glow {
  position: absolute;
  left: 0; top: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}
.ba-emit {
  width: calc(534px * var(--s));
  height: calc(534px * var(--s));
  background: radial-gradient(circle, rgba(240, 206, 122, .6) 0%, rgba(230, 184, 74, .28) 35%, transparent 68%);
}
.ba-glow {
  width: calc(534px * var(--s) * 2.2);
  height: calc(534px * var(--s) * 2.2);
  background: radial-gradient(circle, rgba(230, 184, 74, .3) 0%, transparent 62%);
}

/* --- responsive scale: follow the nav's own breakpoints ------------ */
@media (max-width: 1024px) { .brand--anim { --s: .08; } }
@media (max-width: 768px)  { .brand--anim { --s: .07; } }   /* hamburger nav */
@media (max-width: 480px)  { .brand--anim { --s: .062; } }
@media (max-width: 360px)  { .brand--anim { --s: .056; } }

/* reduced motion: brand-anim.js jumps straight to the resting state;
   nothing animates. (Resting CSS above already is that state.) */