/* Filaro Collection - phone hero Scroll cue (standard)
   Locked 07/Aug/26 (Paul): emblem/sound bottom band, centre;
   underline grows L->R to 100% of word; phone only; desktop off.
   Fail-if: desktop paint; invent type; crowd sound credit prompt. */

.filaro-hero-scroll {
  display: none;
}

@media (max-width: 767px) {
  .filaro-hero-scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 50%;
    bottom: clamp(2rem, 6vh, 3.5rem); /* fallback; JS pins to stamp bottom */
    transform: translateX(-50%);
    z-index: 46;
    margin: 0;
    min-height: clamp(2.25rem, 3.4vw, 3rem); /* match stamp band height */
    padding: 0 0.5rem;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease, visibility 0.45s ease;
  }
  .filaro-hero-scroll__label {
    display: block;
    margin: 0;
    font-family: var(--font-sans, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size: 0.55rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff; /* 100% */
    line-height: 1;
    white-space: nowrap;
  }
  .filaro-hero-scroll__rule {
    display: block;
    width: 100%; /* 100% of the word */
    height: 1px;
    margin-top: 0.35rem;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left center;
  }
  .filaro-hero-scroll.is-show {
    opacity: 1;
    visibility: visible;
  }
  .filaro-hero-scroll.is-show .filaro-hero-scroll__rule {
    animation: filaro-hero-scroll-rule 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
  }
  @keyframes filaro-hero-scroll-rule {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
  body.is-nav-drawer-open .filaro-hero-scroll,
  html.is-phone-nav-open .filaro-hero-scroll,
  body.is-plan-drawer-open .filaro-hero-scroll,
  body.is-map-drawer-open .filaro-hero-scroll,
  body.is-contact-drawer-open .filaro-hero-scroll,
  body.is-design-drawer-open .filaro-hero-scroll,
  body.is-progress-drawer-open .filaro-hero-scroll,
  body.is-media-drawer-open .filaro-hero-scroll {
    opacity: 0;
    visibility: hidden;
  }
}