/*
 * Portfolio — behaviour only.
 *
 * This file used to lay the grid out as well: display:flex on .portfolio-list,
 * article widths of 23.125% with 15px margins, an absolutely positioned title
 * over a 250px-tall thumbnail, and a dark scrim on hover. The templates
 * meanwhile declared the same grid with grid-template-columns, so both ran at
 * once — a flex width of 23% inside a 244px grid column, which is how the cards
 * ended up seventy pixels wide with the heading printed across the photograph.
 *
 * Layout and appearance are the theme's now, stated once in the design layer.
 * What is left here is the part that belongs to the plugin's own script: the
 * class the filter toggles, and the spinner shown while the grid loads. Both
 * are behaviour, not design, and both have to work whichever theme is active.
 *
 * @package urartu-core
 * @license GPL-2.0-or-later
 */

/* The filter's own state. portfolio-main.js toggles this class; a theme is free
   to animate the transition, but the hiding itself has to happen regardless. */
.portfolio-list .mix,
.portfolio-list .portfolio-item {
    transition: opacity 0.25s ease;
}

.portfolio-list .portfolio-item--hidden,
.portfolio-list .mix.portfolio-item--hidden {
    display: none;
}

/* Shown while the grid's images load, and only then.
 *
 * The rotation carries the centring translate with it. transform is one
 * property: a keyframe that sets rotate() alone replaces translate(-50%, -50%)
 * and the spinner walks off to the bottom right of its container — the same
 * fault the add-to-cart spinner had, from the same cause. */
.portfolio-preloader {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    border: 3px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    opacity: .35;
    transform: translate(-50%, -50%);
    animation: urartu-portfolio-spin 900ms linear infinite;
}

@keyframes urartu-portfolio-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-preloader {
        animation-duration: 2.4s;
    }
}