/* ---- Effets d'interface (effets.js) : propositions de design validees le 13/09 ---- */

/* 3 · la photo s'envole : les cartes des listes ouvrent leur fiche */
.attraction-list .attraction-card{ cursor:pointer; }
.effets-vol{
  position:fixed;
  z-index:60;
  margin:0;
  pointer-events:none;
  overflow:hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}
.effets-vol img{ width:100%; height:100%; object-fit:cover; display:block; }
.map-popup .modal-card__actions .effets-voir-plan{ color: var(--text); }

/* 11 · halo qui suit le doigt : lueur bleue dans la carte, bordure doree autour du doigt */
.attraction-list .attraction-card,
.quick-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.attraction-list .attraction-card::before,
.quick-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  pointer-events:none;
  background: radial-gradient(170px circle at var(--halo-x, 50%) var(--halo-y, 50%), rgba(79,168,255,0.24), transparent 70%);
  opacity: var(--halo, 0);
  transition: opacity 0.35s ease;
}
.attraction-list .attraction-card::after,
.quick-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1.5px;
  pointer-events:none;
  background: radial-gradient(130px circle at var(--halo-x, 50%) var(--halo-y, 50%), rgba(255,212,121,0.95), rgba(79,168,255,0.35) 45%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: var(--halo, 0);
  transition: opacity 0.35s ease;
}

@media (prefers-reduced-motion: reduce){
  .attraction-list .attraction-card::before,
  .attraction-list .attraction-card::after,
  .quick-card::before,
  .quick-card::after{ display:none; }
}

/* ---- 0.11.0 · accueil ---- */

/* 6 · ecran de chargement : l'apparition CSS du mot est retardee a 1,6 s ; effets.js la
   remplace avant par l'animation lettre a lettre (sans effets.js, le mot apparait quand meme) */
.splash__wordmark{ animation-delay: 1.6s; }
.splash__wordmark.effets-lettres{ animation:none; opacity:1; perspective:420px; }

/* 9 · En direct dans le parc */
.effets-direct{ display:flex; flex-direction:column; gap:10px; }
.effets-direct__titre{
  margin:0;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: var(--text-dim);
}
.effets-direct__titre i{ width:8px; height:8px; border-radius:50%; background:#ff5a6a; animation: effets-direct 1.6s infinite; }
@keyframes effets-direct{
  0%{ box-shadow:0 0 0 0 rgba(255,90,106,0.6); }
  70%{ box-shadow:0 0 0 7px rgba(255,90,106,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,90,106,0); }
}
.effets-direct__liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.effets-direct__liste li{ overflow:hidden; }
.effets-direct__ligne{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:14px;
  border:1px solid var(--hairline);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-family:inherit;
  text-align:left;
  cursor:pointer;
}
.effets-direct__ligne:active{ background: rgba(79,168,255,0.08); }
.effets-direct__rond{
  flex:none;
  width:38px;
  height:38px;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:19px;
  background: rgba(10,99,214,0.12);
}
.effets-direct__rond img{ width:100%; height:100%; object-fit:cover; display:block; }
.effets-direct__texte{ flex:1 1 auto; min-width:0; }
.effets-direct__texte b{ display:block; font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.effets-direct__texte small{ display:block; font-size:12px; line-height:1.35; color: var(--text-dim); }
.effets-direct__ligne em{ flex:none; font-style:normal; font-size:11px; font-weight:700; color: var(--text-dim); white-space:nowrap; }
.effets-direct__vide{ margin:0; font-size:12.5px; line-height:1.45; color: var(--text-dim); }
.effets-direct__vide[hidden]{ display:none; }

/* 12 · Rencontres du jour : portraits en orbite */
.effets-orbite{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  font-family:inherit;
  color: var(--text);
  text-align:left;
  cursor:pointer;
}
.effets-orbite[hidden]{ display:none; }
.effets-orbite__scene{ position:relative; flex:none; width:150px; height:150px; }
.effets-orbite__anneau{
  position:absolute;
  left:50%;
  top:50%;
  width:112px;
  height:112px;
  margin:-56px 0 0 -56px;
  border-radius:50%;
  border:1px dashed rgba(238,243,255,0.16);
}
.effets-orbite__anneau--grand{ width:146px; height:146px; margin:-73px 0 0 -73px; border-color: rgba(255,212,121,0.16); }
.effets-orbite__porteur{ position:absolute; left:50%; top:50%; width:0; height:0; animation: effets-tourne 26s linear infinite; }
.effets-orbite__porteur--etoiles{ animation-duration:40s; animation-direction:reverse; }
.effets-orbite__satellite{ position:absolute; left:0; top:0; transform: rotate(var(--angle)) translateX(56px) rotate(calc(-1 * var(--angle))); }
.effets-orbite__satellite--etoile{ transform: rotate(var(--angle)) translateX(73px) rotate(calc(-1 * var(--angle))); }
.effets-orbite__satellite > span{ display:block; animation: effets-tourne 26s linear infinite reverse; }
.effets-orbite__porteur--etoiles .effets-orbite__satellite > span{ animation-duration:40s; animation-direction:normal; }
.effets-orbite__portrait{
  width:36px;
  height:36px;
  margin:-18px 0 0 -18px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid #fff;
  box-shadow:0 3px 10px rgba(0,0,0,0.45);
  background:#1d2657;
  display:flex !important;
  align-items:center;
  justify-content:center;
  font-size:18px;
}
.effets-orbite__portrait img{ width:100%; height:100%; object-fit:cover; display:block; }
.effets-orbite__satellite--etoile > span{ margin:-7px 0 0 -5px; color: var(--gold); font-size:12px; line-height:1; }
.effets-orbite__centre{
  position:absolute;
  left:50%;
  top:50%;
  width:50px;
  height:50px;
  margin:-25px 0 0 -25px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  background: radial-gradient(circle at 35% 30%, #2a3a8f, #141b4a);
  border:2px solid rgba(255,212,121,0.6);
  box-shadow:0 0 24px rgba(255,212,121,0.2);
}
@keyframes effets-tourne{ to{ transform: rotate(360deg); } }
.effets-orbite__texte{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
.effets-orbite__texte b{ font-size:15.5px; font-weight:800; }
.effets-orbite__texte small{ font-size:12.5px; line-height:1.4; color: var(--text-dim); }
.effets-orbite__lien{ margin-top:4px; font-size:12.5px; font-weight:700; color: var(--brand-blue-light); }

/* 14 · feu d'artifice (feux.js) */
.effets-feux{
  position:fixed;
  left:0;
  right:0;
  top:0;
  height:58vh;
  z-index:45;
  pointer-events:none;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}
.effets-feux__toile{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.effets-feux__legende{
  position:absolute;
  left:16px;
  right:16px;
  top: calc(74px * var(--ui));
  margin:0 auto;
  width:max-content;
  max-width: calc(100% - 32px);
  padding:8px 14px;
  border-radius:999px;
  background: rgba(6,10,30,0.82);
  border:1px solid rgba(255,212,121,0.55);
  color:#fff;
  font-size:12.5px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (prefers-reduced-motion: reduce){
  .effets-direct__titre i,
  .effets-orbite__porteur,
  .effets-orbite__satellite > span{ animation:none; }
}

/* ---- 0.12.0 ---- */

/* 10 · confettis d'alerte */
.effets-confettis{ position:fixed; inset:0; width:100%; height:100%; z-index:70; pointer-events:none; }

/* 13 · radio sous les etoiles (visible quand le badge de la radio passe en direct) */
.effets-radio{ position:absolute; inset:0; overflow:hidden; pointer-events:none; opacity:0; transition: opacity 1.2s ease; }
.effets-radio-direct .effets-radio{ opacity:1; }
.effets-radio__rayons{
  position:absolute;
  left:50%;
  top:30%;
  width:180vmax;
  height:180vmax;
  margin:-90vmax 0 0 -90vmax;
  background: repeating-conic-gradient(from 0deg, rgba(79,168,255,0.14) 0deg 5deg, transparent 5deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 3%, transparent 38%);
  mask-image: radial-gradient(circle, #000 3%, transparent 38%);
  animation: effets-tourne 60s linear infinite;
  animation-play-state: paused;
}
.effets-radio__meteore{
  position:absolute;
  width:2px;
  height:2px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 6px #fff;
  opacity:0;
  animation: effets-meteore var(--duree, 4s) linear infinite;
  animation-delay: var(--retard, 0s);
  animation-play-state: paused;
}
.effets-radio__meteore::after{
  content:"";
  position:absolute;
  top:50%;
  right:0;
  width:80px;
  height:1px;
  transform:translateY(-50%);
  background: linear-gradient(90deg, rgba(255,255,255,0.8), transparent);
}
.effets-radio-direct .effets-radio__rayons,
.effets-radio-direct .effets-radio__meteore{ animation-play-state: running; }
@keyframes effets-meteore{
  0%{ transform: rotate(215deg) translateX(0); opacity:1; }
  70%{ opacity:1; }
  100%{ transform: rotate(215deg) translateX(-460px); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .effets-radio{ display:none; }
}