/*
 * The landing page's "Discover more" cue, on phones.
 *
 * A new file rather than an edit to landing-v2.css: that sheet is a byte-identical
 * copy of the Blade original and is never hand-edited. Same rule that produced
 * profile-source-fixes-v1.css and motion-preference-v1.css.
 *
 * Deliberately the same shape and copy as the public profile's cue so the two
 * pages agree, but on the storefront palette rather than the per-professional
 * theme tokens — see the component for why those cannot be reused here.
 */

/*
 * Phones only. 760px is the landing sheet's own mobile breakpoint (it is where
 * `.cc-store-demo__layout` collapses to one column), so the cue appears exactly
 * where the page becomes a single tall scroll.
 */
@media (max-width: 760px) {
  .cc-landing-cue {
    display: flex;
    align-items: center;
    justify-content: center;

    /* A disc around the arrow: the words are gone (17 Sep 2026, the owner: "just arrow"). */
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;

    /*
     * Pinned to the viewport, matching the profile cue: it follows the reader
     * rather than sitting in the flow, and withdraws once they have scrolled.
     *
     * Rendered as a direct child of the page shell, outside <main>. That matters
     * for `position: fixed`, not only for layering — an ancestor that takes a
     * `transform`, `filter` or `backdrop-filter` becomes the containing block for
     * fixed descendants, and the landing page has several: the card scene's
     * `transform-style: preserve-3d`, the loader's `backdrop-filter`, and every
     * `[data-reveal]` element while its entrance animation runs.
     *
     * `bottom` clears the phone's home indicator where the browser reports one and
     * falls back to a plain gap where `env()` is unsupported.
     */
    position: fixed;
    z-index: 20;
    right: 0;
    bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
    left: 0;
    margin-inline: auto;

    border: 1px solid var(--cc-store-line, #d9dee4);
    border-radius: 999px;

    /*
     * Opaque, for the same reason the profile cue is. Fixed over the page it
     * passes across whatever the reader has scrolled to — including the near-black
     * hero and the card scene's dark stage — so any translucency would let an
     * unknown colour bleed through and its contrast would depend on what happened
     * to be underneath.
     */
    background: var(--cc-store-white, #fff);
    box-shadow: 0 6px 18px -10px rgba(11, 21, 36, 0.45);

    /*
     * A hint about a gesture, not a control: it must never swallow a tap meant for
     * something underneath it near the bottom of the screen.
     */
    pointer-events: none;

    opacity: 1;
    transition: opacity 0.28s ease;
  }

  /*
   * Withdrawn once the reader has started scrolling — the hint has been taken.
   * `LandingScrollCue` sets `is-quiet` past a small threshold and clears it again
   * at the top, so returning to the top offers the hint again rather than hiding
   * it for good.
   *
   * `body.modal-open` is the landing sheet's own convention, kept so the cue does
   * not float over the contact dialog's backdrop.
   *
   * Only opacity changes: nothing under it reflows as it comes and goes, and
   * `pointer-events: none` already means a faded cue intercepts nothing.
   */
  .cc-landing-cue.is-quiet,
  body.modal-open .cc-landing-cue {
    opacity: 0;
  }

  /*
   * Static, matching the profile cue — the owner asked for no animation on that
   * chevron on 8 September 2026 and the same applies here. No keyframes and no
   * motion-preference guard, because there is no motion to withdraw.
   */
  /* The __title and __meta rules were retired on 17 Sep 2026: the arrow alone. */
  .cc-landing-cue__chevron {
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.1rem;
    fill: none;
    stroke: var(--cc-store-gold, #8b6324);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

/*
 * Anything wider than a phone: no cue. The layout puts enough on screen that the
 * page does not need to say it continues.
 */
@media (min-width: 761px) {
  .cc-landing-cue {
    display: none;
  }
}