/* ================================================================
   ROSE.CSS — design de l'écran de connexion (uniquement l'apparence)
   ----------------------------------------------------------------
   Tout est conditionné par « html.rose-on » : si rose.js échoue, la
   classe est retirée et l'écran d'origine (declaration.css) revient.
   Aucune règle ici ne change le fonctionnement du formulaire.
   ================================================================ */

/* Éléments de la scène : invisibles tant que le mode rose n'est pas actif. */
.rose-canvas, .rose-copy, .rose-hit, .rose-knot { display: none; }

html.rose-on .rose-canvas {
  display: block; position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}

/* ---------------- Fond bleu nuit + étoiles ---------------- */
html.rose-on .lock-screen {
  isolation: isolate;
  flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: calc(var(--rz, clamp(236px, 50vh, 430px)) + var(--safe-top));
  padding-bottom: calc(24px + var(--safe-bottom));
  background:
    radial-gradient(ellipse 80% 55% at 50% 38%, rgba(32, 46, 104, 0.55), transparent 65%),
    radial-gradient(ellipse 60% 40% at 12% 100%, rgba(22, 32, 86, 0.5), transparent 60%),
    radial-gradient(ellipse 50% 40% at 92% 8%, rgba(40, 24, 80, 0.35), transparent 60%),
    linear-gradient(180deg, #050816 0%, #0a1130 55%, #040612 100%);
}
html.rose-on .lock-screen::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.9;
  background-image:
    radial-gradient(1.2px 1.2px at 8% 14%, rgba(255,255,255,.75), transparent),
    radial-gradient(1px 1px at 19% 62%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.4px 1.4px at 27% 31%, rgba(255,240,210,.8), transparent),
    radial-gradient(1px 1px at 38% 84%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.2px 1.2px at 46% 9%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 58% 72%, rgba(255,240,210,.55), transparent),
    radial-gradient(1.4px 1.4px at 66% 22%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 74% 55%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.2px 1.2px at 83% 88%, rgba(255,240,210,.7), transparent),
    radial-gradient(1px 1px at 91% 37%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.2px 1.2px at 96% 76%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 4% 90%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 52% 45%, rgba(255,255,255,.35), transparent);
  animation: rose-stars 7s ease-in-out infinite;
}
@keyframes rose-stars { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ---------------- Phrase + invitation ---------------- */
html.rose-on .rose-copy {
  display: block; position: fixed; z-index: 1; left: 0; right: 0;
  bottom: calc(7% + var(--safe-bottom)); padding: 0 28px; text-align: center; pointer-events: none;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.rose-phrase {
  margin: 0 auto 18px; max-width: 460px;
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.15rem, 4.6vw, 1.6rem); line-height: 1.45; color: #f6ead6;
  text-shadow: 0 0 22px rgba(255, 196, 120, 0.35), 0 2px 18px rgba(0, 0, 0, 0.6);
  opacity: 0; animation: rose-fade 1.8s var(--ease) 0.6s forwards;
}
.rose-hint {
  margin: 0; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--color-gold);
  opacity: 0; animation: rose-fade 1.4s var(--ease) 1.8s forwards, rose-pulse 2.6s ease-in-out 3.2s infinite;
}
@keyframes rose-fade { to { opacity: 1; } }
@keyframes rose-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
html.rose-on .lock-screen.is-opening .rose-copy { opacity: 0; transform: translateY(12px); }

/* ---------------- Zone sensible : la rose ---------------- */
html.rose-on .rose-hit {
  display: block; position: fixed; z-index: 3; border: 0; padding: 0; margin: 0; border-radius: 50%;
  background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
html.rose-on .rose-hit:focus-visible { outline: 1px solid var(--color-gold); outline-offset: 6px; }
html.rose-on .rose-hit[hidden] { display: none; }

/* ---------------- Formulaire : caché, puis révélé en verre dépoli ---------------- */
html.rose-on .lock-card {
  position: relative; z-index: 2; width: 100%; max-width: 368px; padding: 30px 26px 26px;
  border-radius: 28px; overflow: hidden;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(240, 205, 150, 0.28);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55), 0 0 70px rgba(200, 40, 70, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  opacity: 0; visibility: hidden; transform: translateY(26px) scale(0.97);
}
html.rose-on .lock-screen.is-revealed .lock-card {
  visibility: visible; animation: rose-card-in 1.3s var(--ease) forwards;
}
@keyframes rose-card-in {
  0%   { opacity: 0; transform: translateY(26px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* éclat de lumière qui glisse une fois sur le verre */
html.rose-on .lock-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 232, 190, 0.22) 50%, transparent 65%);
  transform: translateX(-120%);
}
html.rose-on .lock-screen.is-revealed .lock-card::before { animation: rose-sheen 1.9s var(--ease) 0.5s forwards; }
@keyframes rose-sheen { to { transform: translateX(120%); } }
html.rose-on .lock-card > * { position: relative; z-index: 1; }
/* les éléments du formulaire apparaissent avec la carte */
html.rose-on .lock-card .reveal { animation: none; opacity: 1; transform: none; }

html.rose-on .lock-card .eyebrow { color: #e9cf9f; margin-bottom: 14px; }
html.rose-on .lock-title { margin-bottom: 26px; color: #f8eedc; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5); }

html.rose-on .lock-input {
  border-color: rgba(240, 205, 150, 0.32); background: rgba(6, 10, 28, 0.5); color: #f8eedc;
  transition: border-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
html.rose-on .lock-input:focus {
  border-color: rgba(240, 205, 150, 0.85); background: rgba(6, 10, 28, 0.62);
  box-shadow: 0 0 0 4px rgba(240, 205, 150, 0.12), 0 0 26px rgba(240, 190, 110, 0.18);
}
html.rose-on .lock-error { color: #ffb8b8; }

html.rose-on .lock-submit {
  width: 100%; justify-content: center; color: #fff4e0; border-color: rgba(240, 205, 150, 0.5);
  background: linear-gradient(135deg, rgba(196, 30, 62, 0.92), rgba(112, 12, 36, 0.96));
  box-shadow: 0 10px 30px rgba(190, 30, 60, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
html.rose-on .lock-submit:hover {
  background: linear-gradient(135deg, rgba(214, 42, 76, 0.96), rgba(130, 16, 42, 0.98)); letter-spacing: 0.16em;
}

/* ---------------- Nœud doré : là où la tige se rattache au formulaire ---------------- */
html.rose-on .rose-knot {
  display: block; position: fixed; z-index: 3; width: 16px; height: 16px; margin: -9px 0 0 -8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6d8, #e6bf7c 52%, #8a5a2a 100%);
  box-shadow: 0 0 0 2px rgba(10, 17, 48, 0.55), 0 0 16px rgba(255, 200, 120, 0.85);
  opacity: 0; transform: scale(0.3); pointer-events: none;
}
html.rose-on .lock-screen.is-revealed .rose-knot {
  animation: rose-knot-in 0.7s var(--ease) 1.25s forwards, rose-knot-glow 3s ease-in-out 2.2s infinite;
}
@keyframes rose-knot-in { to { opacity: 1; transform: scale(1); } }
@keyframes rose-knot-glow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(10, 17, 48, 0.55), 0 0 12px rgba(255, 200, 120, 0.6); }
  50%      { box-shadow: 0 0 0 2px rgba(10, 17, 48, 0.55), 0 0 22px rgba(255, 215, 140, 1); }
}

/* ---------------- Paysage sur petit écran : rose à gauche, formulaire à droite ---------------- */
@media (orientation: landscape) and (max-height: 560px) {
  html.rose-on .lock-screen {
    flex-direction: row; justify-content: flex-end; align-items: center;
    padding: calc(14px + var(--safe-top)) calc(5vw + var(--safe-right)) calc(14px + var(--safe-bottom)) 14px;
  }
  html.rose-on .lock-card { max-width: 340px; padding: 20px 22px 18px; }
  html.rose-on .lock-title { margin-bottom: 16px; font-size: 1.2rem; }
  html.rose-on .rose-copy { bottom: calc(4% + var(--safe-bottom)); }
  .rose-phrase { margin-bottom: 8px; font-size: 1.05rem; }
}

/* ============================================================
   TRANSITION DE SORTIE (après authentification réussie)
   Un voile de lumière dorée éclot, des pétales s'envolent, puis tout
   se dissout et laisse apparaître l'accueil.
   ============================================================ */
.rose-exit { position: fixed; inset: 0; z-index: 150; pointer-events: none; overflow: hidden; }
.rose-exit > i, .rose-exit > b { position: absolute; display: block; }
.rx-veil {
  inset: 0; background: radial-gradient(ellipse at var(--ox) var(--oy), rgba(255, 236, 190, 0.9), rgba(255, 196, 120, 0.55) 45%, rgba(40, 20, 50, 0.4) 100%);
  opacity: 0; animation: rx-veil 2s ease-out forwards;
}
@keyframes rx-veil { 0% { opacity: 0; } 18% { opacity: 0.92; } 45% { opacity: 0.5; } 100% { opacity: 0; } }
.rx-light {
  left: var(--ox); top: var(--oy); width: 44vmax; height: 44vmax; margin: -22vmax 0 0 -22vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 215, 1) 0%, rgba(255, 210, 125, 0.8) 26%, rgba(210, 45, 75, 0.28) 54%, transparent 72%);
  opacity: 0; transform: scale(0.15); animation: rx-bloom 2.3s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
@keyframes rx-bloom {
  0% { opacity: 0; transform: scale(0.15); }
  20% { opacity: 1; transform: scale(1.3); }
  100% { opacity: 0; transform: scale(3.6); }
}
.rx-ring {
  left: var(--ox); top: var(--oy); width: 120vmax; height: 120vmax; margin: -60vmax 0 0 -60vmax; border-radius: 50%;
  background: radial-gradient(circle, transparent 0, transparent 66%, rgba(255, 220, 150, 0.0) 67%, rgba(255, 226, 160, 0.85) 69%, rgba(255, 200, 120, 0) 72%, transparent 100%);
  opacity: 0; transform: scale(0.02); animation: rx-ring 1.8s cubic-bezier(0.2, 0.6, 0.3, 1) 0.1s forwards;
}
@keyframes rx-ring { 0% { opacity: 0.95; transform: scale(0.02); } 100% { opacity: 0; transform: scale(1); } }
.rx-petal {
  left: var(--ox); top: var(--oy); width: 13px; height: 17px; margin: -8px 0 0 -6px;
  border-radius: 100% 0 100% 0; background: linear-gradient(160deg, #fff0c4, #ffb870 60%, #e0485f);
  box-shadow: 0 0 14px rgba(255, 200, 120, 0.9); opacity: 0;
  animation: rx-fly 2.5s cubic-bezier(0.15, 0.7, 0.3, 1) forwards;
}
@keyframes rx-fly {
  0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(0.3); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(var(--s, 1)); }
}

@media (prefers-reduced-motion: reduce) {
  html.rose-on .lock-screen::before { animation: none; }
  .rose-phrase, .rose-hint { animation-duration: 0.01s; animation-delay: 0s; }
  .rx-ring, .rx-petal { display: none; }
  .rx-light, .rx-veil { animation-duration: 0.9s; }
}