/*
 * Templates de design — base comum (Neon, Vidro, Aurora).
 *
 * Só se aplica com body.tpl-on e só a classes-gancho tpl-* postas nas views
 * (ver App\Support\DesignTemplate). Nada aqui pode tocar nos cartões de
 * produto: o que estiver dentro de .tpl-keep fica fora de todas as regras.
 *
 * Cada template define no body as variáveis:
 *   --tpl-accent     cor luminosa derivada da marca
 *   --tpl-surface    fundo de cartões e modais
 *   --tpl-text       texto principal sobre --tpl-surface
 *   --tpl-muted      texto secundário
 *   --tpl-border     contorno de cartões
 *   --tpl-card-radius, --tpl-shadow
 * As cores da marca (--tpl-primary, --tpl-secondary, …) vêm do
 * common.layouts.design-template.
 */

/* ── Entrada dos blocos ao aparecer no ecrã (classe posta pelo JS) ───── */
.tpl-on .tpl-block.tpl-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}
.tpl-on .tpl-block.tpl-reveal.tpl-in {
    opacity: 1;
    transform: none;
}

/* ── Spinner: troca o gif do cesto por um anel na cor do template ───── */
.tpl-on .tpl-spinner img { display: none; }
.tpl-on .tpl-spinner::after {
    content: "";
    position: absolute;
    inset: 22%;
    border-radius: 9999px;
    border: 3px solid color-mix(in srgb, var(--tpl-accent) 20%, transparent);
    border-top-color: var(--tpl-accent);
    animation: tpl-spin .9s linear infinite;
}
@keyframes tpl-spin { to { transform: rotate(360deg); } }

/* ── Foco visível e seleção ────────────────────────────────────────── */
.tpl-on .tpl-block a:focus-visible,
.tpl-on .tpl-block button:focus-visible,
.tpl-on .tpl-modal a:focus-visible,
.tpl-on .tpl-modal button:focus-visible {
    outline: 2px solid var(--tpl-accent);
    outline-offset: 3px;
}
.tpl-on ::selection {
    background: color-mix(in srgb, var(--tpl-accent) 35%, transparent);
}

/* ── Colunas: os itens passam a cartões, por isso precisam de espaço
   também no telemóvel (a grelha só tem lg:gap-4) ─────────────────────── */
.tpl-on .tpl-type-1 .grid { gap: 1rem; }

/* ── Transições comuns ─────────────────────────────────────────────── */
.tpl-on .tpl-card,
.tpl-on .tpl-media,
.tpl-on .tpl-cta,
.tpl-on .tpl-nav,
.tpl-on .tpl-block .button-primary,
.tpl-on .tpl-block .button-secondary {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}

/* Quem pede menos movimento fica sem as animações dos templates (só as
   destes elementos: o resto da loja não muda). */
@media (prefers-reduced-motion: reduce) {
    .tpl-on .tpl-block,
    .tpl-on .tpl-block *,
    .tpl-on .tpl-navbar::after,
    .tpl-on .tpl-footer::before,
    .tpl-on .tpl-spinner::after,
    .tpl-on .page[data-tpl-scope="page"]::before {
        animation: none !important;
        transition: none !important;
    }
}