/* FOOTPASS Messenger v2 · Arrivée du coffre-fort (piste plaque validée)
   Overlay plein écran au-dessus du coffre ; s'estompe au passage (feutré).
   L'acier #AEB2BA (choix validé) reste réservé au mécanisme et à la gravure · jamais les textes. */

.cav { position: absolute; inset: 0; z-index: 70; display: flex; flex-direction: column; background: #0B0B0C; color: #EAEAEA; overflow: hidden; }

/* En-tête */
.cav-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px 0; }
.cav-brand { flex: 1; display: flex; flex-direction: column; align-items: center; margin-right: 38px; }
.cav-brand b { font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 0.16em; color: #F2F2F2; }
.cav-brand b sup { font-size: 7px; letter-spacing: 0; }
.cav-brand em { font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: 0.3em; padding-left: 0.3em; text-transform: uppercase; color: rgba(234, 234, 234, 0.48); margin-top: 3px; }

.cav-mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 20px; transform-origin: 50% 30%; }

/* Accueil personnel · heure locale de l'appareil */
.cav-hello { margin-bottom: 20px; text-align: center; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: rgba(234, 234, 234, 0.92); animation: cavHello 900ms ease both; }
@keyframes cavHello { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── LA PORTE · molette + pênes + monogramme (ne pivote pas : tourne et s'enfonce) ── */
.cav-doorwrap { position: relative; width: 206px; height: 206px; margin: 0 auto 24px; }
.cav-doorscene { position: relative; width: 300px; height: 300px; transform: scale(0.687); transform-origin: top left; }
.cav-door { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #232326, #141416 58%, #0E0E10 100%); border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -18px 34px rgba(0, 0, 0, 0.55), 0 22px 44px rgba(0, 0, 0, 0.55); transition: transform calc(0.6s * var(--spd, 1)) cubic-bezier(0.5, 0, 0.3, 1) calc(0.45s * var(--spd, 1)); }
.cav.act .cav-door { transform: scale(0.975); }
.cav-doorring { position: absolute; inset: 26px; border-radius: 50%; border: 1px solid rgba(174, 178, 186, 0.28); }
.cav-bolt { position: absolute; left: 50%; top: 50%; width: 9px; height: 28px; margin: -14px 0 0 -4.5px; border-radius: 99px; background: linear-gradient(180deg, #CACDD2, #858890 70%, #5F6166); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.5); transform: rotate(var(--a)) translateY(-136px); transition: transform calc(0.45s * var(--spd, 1)) cubic-bezier(0.5, 0, 0.3, 1) calc(var(--d) + 0.45s * var(--spd, 1)); }
.cav.act .cav-bolt { transform: rotate(var(--a)) translateY(-114px) scaleY(0.5); }
.cav-ring { position: absolute; inset: 62px; border-radius: 50%; transition: transform calc(0.85s * var(--spd, 1)) cubic-bezier(0.55, 0.03, 0.25, 1); }
.cav-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(rgba(174, 178, 186, 0.6) 0deg 2.6deg, transparent 2.6deg 15deg); -webkit-mask: radial-gradient(circle, transparent 58%, #000 59% 74%, transparent 75%); mask: radial-gradient(circle, transparent 58%, #000 59% 74%, transparent 75%); }
.cav-ring::after { content: ''; position: absolute; inset: 12px; border-radius: 50%; border: 1px solid rgba(174, 178, 186, 0.35); }
.cav.act .cav-ring { transform: rotate(360deg); }
.cav-hub { position: absolute; inset: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 42% 34%, #1D1D20, #101012 72%); border: 1px solid rgba(174, 178, 186, 0.3); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), inset 0 -1px 0 rgba(255, 255, 255, 0.05); transition: transform calc(0.6s * var(--spd, 1)) cubic-bezier(0.5, 0, 0.3, 1), box-shadow calc(0.6s * var(--spd, 1)) ease; }
.cav-hub svg { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.8)); opacity: 0.92; }
.cav.act .cav-hub { transform: scale(0.88); box-shadow: inset 0 5px 12px rgba(0, 0, 0, 0.75), inset 0 -1px 0 rgba(255, 255, 255, 0.04); }
.cav.act .cav-hub svg { opacity: 0.78; }

/* ── LA PLAQUE · compacte, gravée à l'identité ── */
.cav-plate { position: relative; width: 236px; aspect-ratio: 1.586; border-radius: 13px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(130% 115% at 32% -12%, #1C1C1F 0%, #131316 46%, #0D0D0F 100%); border: 1px solid rgba(255, 255, 255, 0.075); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.09), inset 0 -2px 0 rgba(0, 0, 0, 0.55), 0 26px 50px -14px rgba(0, 0, 0, 0.6), 0 3px 8px rgba(0, 0, 0, 0.4); }
.cav-guill { position: absolute; inset: 0; width: 100%; height: 100%; color: #AEB2BA; opacity: 0.06; -webkit-mask: radial-gradient(92% 130% at 50% 50%, #000 25%, transparent 80%); mask: radial-gradient(92% 130% at 50% 50%, #000 25%, transparent 80%); }
.cav-frame { position: absolute; inset: 7px; border-radius: 7px; border: 1px solid rgba(174, 178, 186, 0.34); pointer-events: none; transition: border-color 0.5s ease, box-shadow 0.5s ease; }
.cav-engraving { position: relative; display: flex; flex-direction: column; align-items: center; transform: translateY(-4px); }
.cav-k { font-size: 7.5px; font-weight: 750; letter-spacing: 0.34em; padding-left: 0.34em; text-transform: uppercase; color: rgba(214, 214, 218, 0.44); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.05); margin-bottom: 9px; }
.cav-name { font-size: 15.5px; font-weight: 750; letter-spacing: 0.03em; color: #E2E2E5; text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.09), 0 1px 1px rgba(0, 0, 0, 0.78); }
.cav-no { margin-top: 7px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.2em; padding-left: 0.2em; background: linear-gradient(180deg, #D2D5D9 0%, #AEB2BA 52%, #82858B 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.65)); }
.cav-hallmark { position: absolute; left: 0; right: 0; bottom: 7px; display: flex; justify-content: center; }
.cav-hallmark svg { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.7)); opacity: 0.8; }

/* Reflet au repos + lumière du moment coffre */
.cav-sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, transparent 40%, rgba(255, 255, 255, 0.05) 50%, transparent 60%); transform: translateX(-110%); animation: cavSheen 9s linear infinite; }
@keyframes cavSheen { 0% { transform: translateX(-110%); } 22% { transform: translateX(110%); } 100% { transform: translateX(110%); } }
.cav-sweep { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(112deg, transparent 38%, rgba(198, 201, 207, 0.13) 50%, transparent 62%); transform: translateX(-110%); }
.cav.act .cav-sweep { opacity: 1; animation: cavSweep 0.8s cubic-bezier(0.4, 0.1, 0.3, 1) forwards; }
@keyframes cavSweep { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
.cav.act .cav-frame { border-color: rgba(174, 178, 186, 0.8); box-shadow: 0 0 16px rgba(174, 178, 186, 0.14), inset 0 0 10px rgba(174, 178, 186, 0.07); }

/* Sous la plaque · ligne calme */
.cav-sub { margin: 18px 40px 0; text-align: center; font-size: 12px; line-height: 1.55; font-weight: 500; color: rgba(234, 234, 234, 0.55); max-width: 290px; }
.cav-sub b { display: block; font-weight: 700; color: rgba(234, 234, 234, 0.85); }

/* Pied · Face ID */
.cav-foot { padding: 0 22px calc(24px + env(safe-area-inset-bottom, 0px)); }
.cav-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 0; border-radius: 99px; border: none; background: #F5F5F4; color: #101010; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.cav-btn:disabled { opacity: 0.85; cursor: default; }
.cav-btn:focus-visible { outline: 2px solid #00A37E; outline-offset: 2px; }

/* ── ENTRER DEDANS · passage feutré : l'écran s'estompe, halo discret (acier) ── */
.cav.enter { pointer-events: none; animation: cavFade 0.9s ease both; }
@keyframes cavFade { 0% { opacity: 1; } 40% { opacity: 1; } 100% { opacity: 0; } }
.cav.enter .cav-mid { animation: cavThrough 0.85s cubic-bezier(0.4, 0, 0.55, 1) both; }
@keyframes cavThrough { from { transform: scale(1); } to { transform: scale(1.12); } }
.cav .cav-head, .cav .cav-foot { transition: opacity 0.55s ease; }
.cav.enter .cav-head, .cav.enter .cav-foot { opacity: 0; }
.cav-bloom { position: absolute; left: 50%; top: 50%; width: 160%; height: 160%; transform: translate(-50%, -50%) scale(0.5); border-radius: 50%; background: radial-gradient(circle, rgba(198, 201, 207, 0.26), rgba(174, 178, 186, 0.1) 46%, transparent 72%); opacity: 0; pointer-events: none; }
.cav.enter .cav-bloom { animation: cavBloom 0.85s ease-in-out both; }
@keyframes cavBloom { to { opacity: 0.5; transform: translate(-50%, -50%) scale(1.35); } }

/* Thème clair de l'app · l'écrin s'éclaircit, la porte et la plaque restent noires */
.hm.light .cav { background: #F2F2F0; color: #1A1A1B; }
.hm.light .cav-brand b { color: #141414; }
.hm.light .cav-brand em { color: rgba(26, 26, 27, 0.5); }
.hm.light .cav-hello { color: #141414; }
.hm.light .cav-sub { color: rgba(26, 26, 27, 0.55); }
.hm.light .cav-sub b { color: #141414; }
.hm.light .cav-btn { background: #141414; color: #F5F5F4; }

@media (prefers-reduced-motion: reduce) {
  .cav-hello, .cav-sheen, .cav.enter .cav-mid, .cav.enter .cav-bloom, .cav.act .cav-sweep { animation: none; }
  .cav.enter { animation: cavFade 0.5s ease both; }
}