/* ==========================================================================
   CSW Équipe v2 — effets « du futur »
   Entrées en cascade, carte holographique, anneau animé, reflets, pression.
   Tout est désactivé si l'appareil demande moins d'animations.
   ========================================================================== */
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---------- entrée en cascade quand on change d'onglet ---------- */
.fx-in { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(4px); }
.fx-in.fx-go { opacity: 1; transform: none; filter: none;
  transition: opacity .5s ease, transform .6s cubic-bezier(.2,.9,.25,1), filter .5s ease;
  transition-delay: var(--d, 0ms); }

/* ---------- anneau de présence qui se remplit ---------- */
.ring { --p: 0; background: conic-gradient(var(--ink) calc(var(--p) * 1%), var(--fill-2) 0); transition: --p 1.2s cubic-bezier(.2,.8,.2,1); }
body:not([data-theme="blanc"]) .ring { background: conic-gradient(var(--ink) calc(var(--p) * 1%), rgba(255,255,255,.12) 0); }
.ring::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 80%, rgba(232,196,106,.55) 92%, transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%); mask: radial-gradient(circle, transparent 60%, #000 62%);
  animation: ringSpin 3.2s linear infinite; opacity: .7; }
@keyframes ringSpin { to { transform: rotate(360deg); } }

/* ---------- cartes « héros » : bordure lumineuse qui tourne + reflet qui passe ---------- */
.home-card.hero, .scorehero, .next-card { isolation: isolate; }
/* (pas sur « Prochaine séance » : faisait des traits à gauche) */
.home-card.hero::before, .scorehero::before {
  content: ""; display: block !important; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 3;
  background: conic-gradient(from var(--a), transparent 0 60%, rgba(232,196,106,.95) 75%, #fff6d8 80%, rgba(232,196,106,.95) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: borderSpin 5s linear infinite;
}
@keyframes borderSpin { to { --a: 360deg; } }
.fx-shine { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; border-radius: inherit; }
.fx-shine::before { content: ""; position: absolute; top: -50%; bottom: -50%; width: 38%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-18deg);
  animation: shine 5.5s ease-in-out infinite; }
@keyframes shine { 0%, 62% { left: -60%; } 100% { left: 140%; } }

/* ---------- header : reflet qui glisse sur le liseré doré ---------- */
body[data-theme="blanc"] .topbar { --sweep: 0; }
.fx-line { position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; overflow: hidden; pointer-events: none; z-index: 1; border-radius: inherit; }
.fx-line::before { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; left: -30%;
  background: linear-gradient(90deg, transparent, #fff8dc, transparent); animation: lineSweep 4.5s ease-in-out infinite; }
@keyframes lineSweep { 0%, 55% { left: -30%; } 100% { left: 110%; } }

/* ---------- carte FUT en grand : inclinaison 3D + reflet holographique ---------- */
#spot-card { transition: transform .5s cubic-bezier(.2,.9,.25,1); will-change: transform; }
#spot-card.tilting { transition: transform .08s linear; }
.holo { position: absolute; inset: 0; pointer-events: none; z-index: 8; mix-blend-mode: color-dodge; opacity: 0; transition: opacity .4s;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.4), transparent 34%),
    linear-gradient(calc(var(--ang, 115) * 1deg), transparent 20%, rgba(255,90,140,.14) 38%, rgba(255,214,120,.16) 45%, rgba(90,255,200,.12) 52%, rgba(110,150,255,.16) 59%, transparent 78%);
  background-size: 100% 100%, 220% 220%; background-position: center, var(--hx, 50%) var(--hy, 50%); }
#spot-card.tilting .holo { opacity: .55; }
#spot-card.idle .holo { opacity: .35; }

/* ---------- pression des boutons ---------- */
.btn, .chip, .home-card, .home-top button, .trow, .mrow, .rk, .menu-item, .icon-btn, .fcard.mini {
  transition: transform .18s cubic-bezier(.3,1.5,.5,1), box-shadow .2s, background-color .2s; }
.btn:active, .chip:active, .home-card:active, .home-top button:active, .trow:active, .mrow:active, .rk:active, .menu-item:active { transform: scale(.965); }
#view .fcard.mini:active { transform: scale(.95) rotate(-.6deg); }

/* ---------- onde au toucher ---------- */
.fx-ripple { position: fixed; z-index: 999; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(232,196,106,.9); animation: ripple .55s ease-out forwards; }
@keyframes ripple { to { transform: scale(5); opacity: 0; border-width: .5px; } }

/* ---------- feuilles du bas : arrivée avec rebond ---------- */
.sheet { animation: sheetUp .45s cubic-bezier(.2,1.15,.35,1) both !important; }
@keyframes sheetUp { from { transform: translateY(100%); } }
.sheet-bg { backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); }

@media (prefers-reduced-motion: reduce) {
  .fx-in { opacity: 1 !important; transform: none !important; filter: none !important; }
  .ring::after, .home-card.hero::before, .scorehero::before, .next-card::before, .fx-shine, .fx-line, .holo, .fx-ripple { display: none !important; animation: none !important; }
  .ring { transition: none; }
  .sheet { animation: none !important; }
}

/* l'écusson en médaillon reste au-dessus du reflet du liseré */
body[data-theme="blanc"] .topbar-crest { z-index: 5; }