/*
 * OPTIONAL MOTION — the kits' micro-interactions for the package's own elements. css/components.css
 * ships none of them (several customers rule out hover zoom and press animations), so a site that
 * wants them imports this file after components.css. Everything is inside
 * `prefers-reduced-motion: no-preference`: with reduced motion nothing here exists.
 *
 * Tunable without editing:
 *   --press-scale            the press dip of package buttons. Default 0.97; 1 switches it off.
 *   --img-arrow-hover-scale  a card photo arrow under the pointer. Default 1.05; 1 switches it off.
 *   --card-fav-hover         a heart's colour under the pointer. Default --foreground (the heart's own).
 *
 * `scale` is the individual property, never `transform`: the package's absolutely centred controls
 * translate with `translate`, and a `transform` here would drop it mid-animation. Map markers are
 * exempt from the press dip: MapLibre writes the pin position into the marker's transform, and a
 * scale around it moves the pin across the map (the pin's inner body may dip instead).
 *
 * Page-to-page crossfades (`@view-transition { navigation: auto }`) are the site's decision and are
 * not declared here; the overlay groups below animate the package's layers, which open inside a view
 * transition when the browser supports one.
 */
@layer properties, theme, base, voffice-tokens, voffice-components, components, utilities;

@layer voffice-components {
  @media (prefers-reduced-motion: no-preference) {
    /* ── Press dip ──────────────────────────────────────────────────────── */
    :where([data-part])
      :is(button, [role="button"], summary):not(
        :disabled,
        [aria-disabled="true"],
        .maplibregl-marker
      ),
    :is(button, [role="button"], summary)[data-part]:not(
        :disabled,
        [aria-disabled="true"],
        .maplibregl-marker
      ) {
      transition: scale 120ms cubic-bezier(0.25, 1, 0.5, 1);
    }

    :where([data-part])
      :is(button, [role="button"], summary):not(
        :disabled,
        [aria-disabled="true"],
        .maplibregl-marker
      ):active,
    :is(button, [role="button"], summary)[data-part]:not(
        :disabled,
        [aria-disabled="true"],
        .maplibregl-marker
      ):active {
      scale: var(--press-scale, 0.97);
    }

    /* ── Card photo arrows ──────────────────────────────────────────────── */
    [data-part="rental-card-prev"]:not(:disabled):hover,
    [data-part="rental-card-next"]:not(:disabled):hover {
      scale: var(--img-arrow-hover-scale, 1.05);
    }

    /* ── Hearts ─────────────────────────────────────────────────────────────
     * The hover colour, then the press answer: ./enhance's favourites binder sets `data-fav-burst` on the
     * pressed heart's glyph and `data-fav-bump` on the badge for the frames of one animation (driving it
     * from `aria-pressed` would burst every saved heart on page load). Saving overshoots, removing dips. */
    [data-part="rental-card-favorite"]:hover,
    [data-part="favorite"]:hover {
      color: var(--card-fav-hover, var(--foreground));
    }

    [data-fav-burst="save"] {
      animation: voffice-fav-pop 420ms cubic-bezier(0.25, 1, 0.5, 1);
    }

    [data-fav-burst="remove"] {
      animation: voffice-fav-dip 320ms cubic-bezier(0.25, 1, 0.5, 1);
    }

    [data-fav-badge][data-fav-bump],
    [data-part="favorite-badge"][data-fav-bump] {
      animation: voffice-fav-bump 420ms cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* ── Overlay groups ─────────────────────────────────────────────────────
     * Each photo layer has its own name (the viewer opens on top of the grid, and two elements under one
     * name void the transition); the map layers are named in the map rules. A full-bleed layer fades and
     * never scales: scaling it exposes a frame of the page around it. */
    dialog#gallery[open] {
      view-transition-name: vt-lightbox;
    }

    dialog#gallery-viewer[open] {
      view-transition-name: vt-viewer;
    }

    dialog#floorplan[open] {
      view-transition-name: vt-floorplan;
    }

    ::view-transition-new(vt-lightbox),
    ::view-transition-new(vt-viewer),
    ::view-transition-new(vt-floorplan),
    ::view-transition-new(vt-map),
    ::view-transition-new(vt-search-map) {
      animation: voffice-vt-fade 220ms cubic-bezier(0.25, 1, 0.5, 1) both;
    }

    ::view-transition-old(vt-lightbox),
    ::view-transition-old(vt-viewer),
    ::view-transition-old(vt-floorplan),
    ::view-transition-old(vt-map),
    ::view-transition-old(vt-search-map) {
      animation: voffice-vt-fade 160ms cubic-bezier(0.25, 1, 0.5, 1) both reverse;
    }
  }

  @keyframes voffice-fav-pop {
    35% {
      scale: 1.28;
    }
  }

  @keyframes voffice-fav-dip {
    40% {
      scale: 0.86;
    }
  }

  @keyframes voffice-fav-bump {
    30% {
      scale: 1.35;
    }
  }

  @keyframes voffice-vt-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}