/* Aghenor.TV : Alert Box Streamlabs, Custom CSS. Identique pour les 7 types d'alerte.
   Bannière reprise des alertes MVP (demande de l'utilisateur), aux couleurs d'aghenor.tv : panneau fumé nuit violet,
   écusson triangle, étiquette or, pseudo géant en italique avec son contour en filigrane, et la voiture (image de
   l'alerte dans Streamlabs) qui déboule par la droite. Mêmes animations que aghenor-alertes.html. */

:root { --ink: #F4F1FA; --or: #F2AE12; --on-or: #1a0d02; --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; }
html, body { margin: 0; background: transparent; overflow: hidden; }

.ag-alert { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; font-family: var(--display); color: var(--ink); }
.ag-scene { position: relative; width: 720px; height: 190px; margin-right: 90px; opacity: 0; }  /* la voiture déborde à droite */

/* Panneau : nuit violette avec des volutes de fumée, liseré discret */
.ag-panneau { position: absolute; inset: 0; border-radius: 8px; overflow: hidden;
  background:
    radial-gradient(40% 70% at 72% 55%, rgb(184 20 196 / .55), transparent 70%),
    radial-gradient(35% 60% at 88% 30%, rgb(224 60 240 / .35), transparent 70%),
    radial-gradient(45% 80% at 20% 90%, rgb(112 30 172 / .6), transparent 70%),
    radial-gradient(60% 90% at 50% 0%, rgb(62 22 112 / .8), transparent 75%),
    linear-gradient(115deg, #07060f, #1c1238 45%, #150e2c);
  box-shadow: inset 0 0 0 1px rgb(201 162 255 / .28), 0 30px 70px rgb(0 0 0 / .55); }
.ag-panneau::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 140px, rgb(255 255 255 / .025) 140px 142px); }
/* grands moments : liseré et lueur or */
.ag-alert:is([data-type="sub"], [data-type="don"], [data-type="raid"]) .ag-panneau {
  box-shadow: inset 0 0 0 1px rgb(242 174 18 / .45), 0 30px 70px rgb(0 0 0 / .55), 0 0 60px rgb(242 174 18 / .25); }

/* Pseudo en filigrane, contour seulement (Barlow Condensed : police statique, contour net) */
.ag-echo { position: absolute; left: 30px; bottom: -30px; font: 900 italic 170px/1 var(--display); text-transform: uppercase; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 2px rgb(201 162 255 / .12); letter-spacing: -.01em; }

.ag-contenu { position: absolute; left: 116px; top: 22px; right: 270px; display: grid; gap: 4px; }
.ag-haut { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }  /* comme la bannière MVP : la phrase sous l'étiquette */
.ag-etiquette { flex: none; padding: 6px 14px 5px; background: var(--or); color: var(--on-or); font: 900 italic 21px/1 var(--display);
  text-transform: uppercase; letter-spacing: .04em; transform: skewX(-10deg); border-radius: 3px; }
.ag-etiquette span { display: inline-block; transform: skewX(10deg); }
.ag-message, .ag-defaut { font: 600 20px/1.2 "Barlow", Arial, sans-serif; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ag-message:empty { display: none; }
.ag-message:not(:empty) + .ag-defaut { display: none; }  /* le message du viewer remplace la phrase d'accueil */
.ag-nom { font: 900 italic 92px/.92 var(--display); text-transform: uppercase; letter-spacing: -.01em; white-space: nowrap;
  text-shadow: 0 10px 40px rgb(0 0 0 / .45); padding-right: 16px; }
.ag-nom span { display: inline-block; }

/* Écusson : le symbole Aghenor, en bas à gauche, entièrement dans le rectangle */
.ag-marque { position: absolute; left: 18px; bottom: 16px; height: 74px; width: auto; filter: drop-shadow(0 8px 18px rgb(0 0 0 / .55)); }

/* Voiture : l'image de l'alerte (Streamlabs), qui déborde du panneau et arrive de la droite */
.ag-voiture { position: absolute; right: -96px; top: -50px; width: 340px; filter: drop-shadow(0 25px 30px rgb(0 0 0 / .55)); }
.ag-voiture img, .ag-voiture video { display: block; width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain; }
.ag-voiture:empty { display: none; }

/* Animations (classes posées par alerte.js) */
.ag-alert.ag-in .ag-scene { opacity: 1; animation: agPan .55s var(--ease) both; }
.ag-alert.ag-in .ag-contenu { animation: agTxt .6s .12s var(--ease) both; }
.ag-alert.ag-in .ag-echo { animation: agEcho 1.2s .1s var(--ease) both; }
.ag-alert.ag-in .ag-marque { animation: agBadge .6s .25s cubic-bezier(.34, 1.56, .64, 1) both; }
.ag-alert.ag-in .ag-voiture { animation: agCar .9s .05s cubic-bezier(.2, .9, .25, 1) both, agBoost .18s .9s steps(2, jump-none) 14; }
.ag-alert.ag-out .ag-scene { opacity: 1; animation: agSortie .35s ease-in forwards; }
@keyframes agPan { from { opacity: 0; transform: translateY(30px) scale(.97); } }
@keyframes agTxt { from { opacity: 0; transform: translateX(-40px); } }
@keyframes agEcho { from { opacity: 0; transform: translateX(120px); } }
@keyframes agBadge { from { opacity: 0; transform: scale(.6) rotate(-12deg); } }
@keyframes agCar { from { opacity: 0; transform: translateX(460px) rotate(-4deg); filter: blur(6px) drop-shadow(0 25px 30px rgb(0 0 0 / .55)); } 70% { opacity: 1; } }
@keyframes agBoost { 50% { filter: brightness(1.18) saturate(1.2) drop-shadow(0 25px 30px rgb(0 0 0 / .55)); } }
@keyframes agSortie { to { opacity: 0; transform: translateY(-20px); } }