/* Scroll-linked floating Brawnd block.
   Idle hero animation stays in the open layout family. Scroll creates three
   deliberate stages: close, shrink, then perimeter travel.

   The travelling state is intentionally small and sits above section
   backgrounds but below the site's content layer, so it reads as a moving
   brand accent rather than a foreground UI element. */

/* Keep page content above the travelling block without burying the block
   underneath opaque section backgrounds. */
.brawnd-wordpress main .shell,
.brawnd-wordpress .site-footer .shell {
  position: relative;
  z-index: 4;
}

.hero-visual > .brawnd-block-stage {
  transition: opacity .14s ease;
}

.hero-visual > .brawnd-block-stage.is-source-hidden {
  opacity: 0;
}

/* Scroll closing is decisive, but not abrupt. */
.hero-visual > .brawnd-block-stage.is-scroll-closing .brawnd-piece {
  transition-duration: .44s;
}

.brawnd-block-floater {
  --dock-scale: 1;
  --travel-scale: .30;
  --float-scale: var(--dock-scale);
  position: fixed !important;
  left: 0;
  top: 0;
  width: 150px !important;
  height: 120px !important;
  aspect-ratio: auto !important;
  display: block !important;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-300px, -300px, 0);
  transform-style: preserve-3d;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.14));
  will-change: transform, opacity;
  transition: opacity .2s ease, visibility 0s linear .2s;
}

.brawnd-block-floater.is-visible {
  opacity: .62;
  visibility: visible;
  transition: opacity .2s ease, visibility 0s linear 0s;
}

/* Keep the scroll-linked shrink readable while it is still happening in the
   hero, then quieten the object once it becomes a background traveller. */
.brawnd-block-floater.is-shrinking.is-visible {
  opacity: .84;
}

.brawnd-block-floater.is-docking.is-visible {
  opacity: .72;
}

.brawnd-block-floater .brawnd-block-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 290px;
  height: 230px;
  transform: translate(-50%,-50%) rotateX(8deg) rotateY(-10deg) scale(var(--float-scale));
  transform-origin: center;
  transition: transform .58s cubic-bezier(.16,.84,.24,1);
}

.brawnd-block-floater.is-shrinking .brawnd-block-frame {
  transition: transform .1s linear;
}

.brawnd-block-floater .brawnd-piece {
  transition: none !important;
}

.brawnd-block-floater .p5,
.brawnd-block-floater .p6,
.brawnd-block-floater .p7 {
  opacity: 0 !important;
}

.brawnd-block-floater.is-travelling {
  --float-scale: var(--travel-scale);
}

.brawnd-block-floater.is-travelling .brawnd-block-frame {
  transform: translate(-50%,-50%) rotateX(3deg) rotateY(-4deg) scale(var(--float-scale));
}

/* Returning to the hero grows the object back to its full closed size. */
.brawnd-block-floater.is-docking {
  --float-scale: var(--dock-scale);
}

@media (max-width: 980px) {
  .brawnd-block-floater {
    --dock-scale: .92;
    --travel-scale: .27;
    width: 132px !important;
    height: 104px !important;
    filter: drop-shadow(0 7px 15px rgba(0,0,0,.13));
  }

  .brawnd-block-floater .brawnd-block-frame {
    transform: translate(-50%,-50%) rotateX(7deg) rotateY(-7deg) scale(var(--float-scale));
  }

  .brawnd-block-floater.is-travelling .brawnd-block-frame {
    transform: translate(-50%,-50%) rotateX(3deg) rotateY(-4deg) scale(var(--float-scale));
  }
}

@media (max-width: 760px) {
  .brawnd-block-floater {
    --dock-scale: .76;
    --travel-scale: .22;
    width: 108px !important;
    height: 86px !important;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.12));
  }

  .brawnd-block-floater.is-visible {
    opacity: .56;
  }

  .brawnd-block-floater.is-shrinking.is-visible {
    opacity: .8;
  }

  .brawnd-block-floater .brawnd-block-frame,
  .brawnd-block-floater.is-docking .brawnd-block-frame {
    transform: translate(-50%,-50%) rotateX(7deg) rotateY(-7deg) scale(var(--float-scale));
  }

  .brawnd-block-floater.is-travelling .brawnd-block-frame {
    transform: translate(-50%,-50%) rotateX(2deg) rotateY(-3deg) scale(var(--float-scale));
  }
}

@media (prefers-reduced-motion: reduce) {
  .brawnd-block-floater {
    display: none !important;
  }
}