/* ════════════════════════════════════════════════════════════
   Animaciones de tiles del home — Amador Rooftop
   Compartidas entre la carta publica y la vista previa del admin.
   Todas usan transform/opacity/border/box-shadow y corren en bucle.
   Prefijo de keyframes: ta* (tile-anim) para no chocar con otras.
   ════════════════════════════════════════════════════════════ */

/* Colores de bandera (globales, configurables desde el admin).
   Default: Perú (rojo · blanco · rojo), franjas verticales. */
:root {
    --flag-c1: #D91023;
    --flag-c2: #FFFFFF;
    --flag-c3: #D91023;
    --flag-angle: 90deg; /* 90deg = franjas verticales · 180deg = horizontales */
}

.tile--anim-signature,
.tile--anim-glow,
.tile--anim-sheen,
.tile--anim-pulse,
.tile--anim-aurora,
.tile--anim-conic,
.tile--anim-float,
.tile--anim-ecualizador,
.tile--anim-bandera-ondeante,
.tile--anim-bandera-barrido,
.tile--anim-bandera-borde { position: relative; }

/* 1 · FIRMA — glow de borde + destello diagonal + icono que respira */
.tile--anim-signature { border-color: rgba(139,0,0,.35); animation: taGlow 3s ease-in-out infinite; }
.tile--anim-signature::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(139,0,0,.05) 50%, transparent 65%);
    background-size: 200% 100%;
    animation: taShimmer 3.5s linear infinite;
}
.tile--anim-signature .tile-icon { display: inline-block; animation: taBreathe 4s ease-in-out infinite; }

/* 2 · HALO — borde latiente, sin movimiento */
.tile--anim-glow { animation: taGlow 2.6s ease-in-out infinite; }

/* 3 · BRILLO — destello que cruza periodicamente */
.tile--anim-sheen { overflow: hidden; }
.tile--anim-sheen::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.10) 50%, transparent);
    transform: translateX(-180%) skewX(-18deg);
    animation: taSheen 5s ease-in-out infinite;
}

/* 4 · LATIDO — escala sutil + halo que respira */
.tile--anim-pulse { animation: taPulse 2.8s ease-in-out infinite; }

/* 5 · AURORA — degradado granate/dorado en movimiento */
.tile--anim-aurora { overflow: hidden; }
.tile--anim-aurora::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(115deg, rgba(139,0,0,.20), rgba(180,140,60,.16), rgba(139,0,0,.20));
    background-size: 220% 220%;
    animation: taAurora 6s ease-in-out infinite;
}

/* 6 · ORBITA — borde con gradiente conico girando */
@property --ta-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.tile--anim-conic::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
    background: conic-gradient(from var(--ta-ang), transparent 0 58%, #cc2222 80%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: taSpin 4s linear infinite;
}
/* Fallback sin @property (Safari viejo): borde granate estatico */
@supports not (background: conic-gradient(from var(--ta-ang), red, blue)) {
    .tile--anim-conic { border-color: rgba(204,34,34,.55); }
    .tile--anim-conic::before { display: none; }
}

/* 7 · FLOTAR — sube y baja */
.tile--anim-float { animation: taFloat 3.4s ease-in-out infinite; }

/* 8 · ECUALIZADOR — tres barras subiendo y bajando, y el icono al compas.
   Mismo lenguaje que los ecualizadores que ya existen en la rockola
   (rockola/index.php, admin/rockola.php): tres barras y desfases para que no
   suban a la vez.

   LAS TRES BARRAS SALEN DE UN SOLO PSEUDO-ELEMENTO: son tres capas de fondo,
   cada una con su `background-size` animado. Es lo unico que da alturas
   INDEPENDIENTES sin añadir ni una etiqueta al marcado — y no añadirla es el
   requisito para que esto sea una animacion mas del catalogo, aplicable a
   cualquier seccion desde el admin.

   BLANCAS Y NO GRANATES, a diferencia de los otros dos ecualizadores del
   proyecto: un tile puede ser `tile--destacado`, con el granate SOLIDO de
   fondo, y ahi el granate sobre granate no se ve. Es la trampa que CLAUDE.md
   ya documenta sobre `signature`, `glow` y `aurora`.

   `right:44px` cae justo antes de `.tile-arrow`. Vale para cualquier tile
   porque las animaciones solo se aplican a `.tile--big`, que siempre la lleva;
   los `.tile--mini` no reciben clase de animacion nunca. */
.tile--anim-ecualizador::after {
    content: ''; position: absolute; right: 44px; top: 50%; pointer-events: none;
    transform: translateY(-50%); width: 20px; height: 18px;
    background-image:
        linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)),
        linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)),
        linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85));
    background-repeat: no-repeat;
    background-position: 0 100%, 8px 100%, 16px 100%;
    animation: taEq .85s ease-in-out infinite;
}
.tile--anim-ecualizador .tile-icon {
    display: inline-block;
    animation: taEqIcono .85s ease-in-out infinite;
}

/* 8 · BANDERA ONDEANTE — franjas del país ondulando como tela */
.tile--anim-bandera-ondeante { overflow: hidden; }
.tile--anim-bandera-ondeante::before {
    content: ''; position: absolute; inset: -12% -6%; border-radius: inherit; pointer-events: none;
    background: linear-gradient(var(--flag-angle),
        var(--flag-c1) 0 33.33%, var(--flag-c2) 33.33% 66.66%, var(--flag-c3) 66.66% 100%);
    opacity: .18;
    animation: flagWave 3.6s ease-in-out infinite;
}

/* 9 · BANDERA BARRIDO — banda tricolor que cruza en diagonal */
.tile--anim-bandera-barrido { overflow: hidden; }
.tile--anim-bandera-barrido::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 58%; pointer-events: none;
    background: linear-gradient(105deg, transparent,
        var(--flag-c1), var(--flag-c2), var(--flag-c3), transparent);
    opacity: .25; transform: translateX(-180%) skewX(-18deg);
    animation: flagSweep 5s ease-in-out infinite;
}

/* 10 · BANDERA BORDE — el borde recorre los colores del país */
.tile--anim-bandera-borde { animation: flagBorder 3s linear infinite; }

@keyframes flagWave {
    0%,100% { transform: skewX(0deg)  translateX(0)    scaleY(1); }
    25%     { transform: skewX(-3deg) translateX(-2%)  scaleY(1.02); }
    50%     { transform: skewX(2.5deg) translateX(2%)  scaleY(.99); }
    75%     { transform: skewX(-1.5deg) translateX(-1%) scaleY(1.01); }
}
@keyframes flagSweep {
    0%       { transform: translateX(-180%) skewX(-18deg); }
    22%,100% { transform: translateX(320%)  skewX(-18deg); }
}
@keyframes flagBorder {
    0%,100% { border-color: var(--flag-c1); box-shadow: 0 0 14px -4px var(--flag-c1); }
    33%     { border-color: var(--flag-c2); box-shadow: 0 0 14px -4px var(--flag-c2); }
    66%     { border-color: var(--flag-c3); box-shadow: 0 0 14px -4px var(--flag-c3); }
}

@keyframes taGlow {
    0%,100% { border-color: rgba(139,0,0,.30); box-shadow: none; }
    50%     { border-color: rgba(204,34,34,.65); box-shadow: 0 0 18px rgba(139,0,0,.12); }
}
@keyframes taShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes taBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes taSheen {
    0%       { transform: translateX(-180%) skewX(-18deg); }
    20%,100% { transform: translateX(420%)  skewX(-18deg); }
}
@keyframes taPulse {
    0%,100% { transform: scale(1);     box-shadow: 0 0 0 0 rgba(139,0,0,0); }
    50%     { transform: scale(1.012); box-shadow: 0 0 22px 0 rgba(139,0,0,.18); }
}
@keyframes taAurora { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes taSpin   { to { --ta-ang: 360deg; } }
@keyframes taFloat  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes taEq {
    0%,100% { background-size: 4px 35%, 4px 95%, 4px 55%; }
    50%     { background-size: 4px 90%, 4px 40%, 4px 100%; }
}
@keyframes taEqIcono { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }

@media (prefers-reduced-motion: reduce) {
    .tile--anim-signature, .tile--anim-glow, .tile--anim-sheen, .tile--anim-pulse,
    .tile--anim-aurora, .tile--anim-conic, .tile--anim-float, .tile--anim-ecualizador,
    .tile--anim-bandera-ondeante, .tile--anim-bandera-barrido, .tile--anim-bandera-borde,
    .tile--anim-signature::before, .tile--anim-sheen::before, .tile--anim-aurora::before,
    .tile--anim-conic::before, .tile--anim-signature .tile-icon,
    .tile--anim-ecualizador::after, .tile--anim-ecualizador .tile-icon,
    .tile--anim-bandera-ondeante::before, .tile--anim-bandera-barrido::before { animation: none !important; }
    /* En modo reducido, mostrar la bandera estática (sin ondular) */
    .tile--anim-bandera-borde { border-color: var(--flag-c1); }
}