/* src/modules/photo-mode/PhotoMode.css */

/* Flash plein écran lors de la capture */
.photo-flash {
  position: fixed;
  inset: 0;
  background: white;
  opacity: 0;
  z-index: var(--z-flash);
  transition: opacity 260ms ease;
  pointer-events: none;
}

.photo-flash.is-on {
  opacity: 1;
}

/* Message(s) secrets par univers */
.photo-secret {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.94);
  font-size: 14px;
  background: rgba(0,0,0,0.72);
  padding: 10px 22px;
  border-radius: 40px;
  border: 1px solid rgba(255,255,255,0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: var(--z-secret);
  white-space: nowrap;
  box-shadow: 0 18px 70px rgba(0,0,0,0.35);
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.08em;
  backdrop-filter: blur(10px);
}

body.is-photo-mode .photo-secret {
  opacity: 1;
  animation: floatSecret 3s ease-in-out infinite;
}

@keyframes floatSecret {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-8px); }
}

/* HUD (hint + aide) */
.photo-hud {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: calc(var(--z-secret) + 2);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: min(92vw, 820px);
}

.photo-hud .photo-hint {
  color: rgba(255,255,255,0.92);
  font-size: 12px;
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 8px 14px;
  border-radius: 18px;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.08em;
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 60px rgba(0,0,0,0.35);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 200ms ease, transform 200ms ease;
}

body.is-photo-mode .photo-hud .photo-hint {
  opacity: 1;
  transform: translateY(0);
}

/* Aide (toggle via JS : body.photo-help-on) */
.photo-hud .photo-help {
  color: rgba(255,255,255,0.92);
  font-size: 12px;
  line-height: 1.5;
  background: rgba(0,0,0,0.34);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 10px 14px;
  border-radius: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 60px rgba(0,0,0,0.35);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 200ms ease, transform 200ms ease;
  max-width: 100%;
}

body.is-photo-mode.photo-help-on .photo-hud .photo-help {
  opacity: 1;
  transform: translateY(0);
}

/* Toolbar (boutons) — IMPORTANT : pointer-events activés */
.photo-toolbar {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: calc(var(--z-secret) + 3);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 200ms ease, transform 200ms ease;
}

body.is-photo-mode .photo-toolbar {
  opacity: 1;
  transform: translateY(0);
}

/* Groupe de boutons */
.photo-toolbar .photo-toolbar-inner {
  pointer-events: auto;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 18px;
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 70px rgba(0,0,0,0.35);
}

/* Bouton */
.photo-toolbar button {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 14px;
  cursor: pointer;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.06em;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.photo-toolbar button:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.20);
}

.photo-toolbar button:active {
  transform: translateY(0);
}

.photo-toolbar button.is-danger {
  border-color: rgba(255,90,90,0.30);
  background: rgba(255,90,90,0.10);
}

/* Mode photo : tu cadres, tu ne scrolles pas “par accident” */
body.is-photo-mode {
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

/* On masque les éléments UI si présents */
body.is-photo-mode .ui,
body.is-photo-mode .hud,
body.is-photo-mode .debug,
body.is-photo-mode .cursor,
body.is-photo-mode .nav,
body.is-photo-mode [data-ui="true"] {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* STYLE PHOTO : CLEAN (par défaut)
   Objectif : améliorer la lisibilité sans “filtres Instagram”.
   (Pas de grain, pas de leaks, pas de letterbox.) */
body.is-photo-mode .scroller {
  filter: contrast(1.06) saturate(1.03) brightness(1.00);
  transition: filter 0.22s ease;
}

/* Styles alternatifs (pilotés par JS : body.photo-style-*) */
body.is-photo-mode.photo-style-clean .scroller {
  filter: contrast(1.06) saturate(1.03) brightness(1.00);
}

body.is-photo-mode.photo-style-matte .scroller {
  filter: contrast(1.10) saturate(1.05) brightness(0.99);
}

body.is-photo-mode.photo-style-noir .scroller {
  filter: grayscale(1) contrast(1.16) brightness(0.97);
}

/* Overlay “matte” discret : vignette légère uniquement si MATTE/NOIR */
body.is-photo-mode::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-film-grain);
  opacity: 0;
}

body.is-photo-mode.photo-style-matte::before,
body.is-photo-mode.photo-style-noir::before {
  opacity: 1;
  background:
    radial-gradient(closest-side at 50% 45%,
      rgba(0,0,0,0) 66%,
      rgba(0,0,0,0.22) 100%);
}

/* Overlay grille (désactivée par défaut) */
.photo-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-vignette) + 1);
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}

body.is-photo-mode .photo-overlay {
  opacity: 1;
}

/* Grille uniquement si body.photo-grid-on */
.photo-grid {
  display: none;
  position: absolute;
  inset:
    calc(12px + env(safe-area-inset-top))
    calc(12px + env(safe-area-inset-right))
    calc(12px + env(safe-area-inset-bottom))
    calc(12px + env(safe-area-inset-left));
  opacity: 0.50;
}

body.is-photo-mode.photo-grid-on .photo-grid {
  display: block;
}

.photo-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(255,255,255,0) 33.333%,
      rgba(255,255,255,0.16) 33.333%,
      rgba(255,255,255,0.16) calc(33.333% + 1px),
      rgba(255,255,255,0) calc(33.333% + 1px),
      rgba(255,255,255,0) 66.666%,
      rgba(255,255,255,0.16) 66.666%,
      rgba(255,255,255,0.16) calc(66.666% + 1px),
      rgba(255,255,255,0) calc(66.666% + 1px)
    ),
    linear-gradient(to bottom,
      rgba(255,255,255,0) 33.333%,
      rgba(255,255,255,0.16) 33.333%,
      rgba(255,255,255,0.16) calc(33.333% + 1px),
      rgba(255,255,255,0) calc(33.333% + 1px),
      rgba(255,255,255,0) 66.666%,
      rgba(255,255,255,0.16) 66.666%,
      rgba(255,255,255,0.16) calc(66.666% + 1px),
      rgba(255,255,255,0) calc(66.666% + 1px)
    );
}

/* Compat mobile */
@media (max-width: var(--mobile)) {
  .photo-secret {
    bottom: auto;
    top: calc(74px + env(safe-area-inset-top));
    max-width: 90%;
    white-space: normal;
    text-align: center;
    word-wrap: break-word;
    font-size: 12px;
    padding: 8px 16px;
  }

  .photo-toolbar {
    right: calc(10px + env(safe-area-inset-right));
    bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .photo-toolbar .photo-toolbar-inner {
    gap: 8px;
    padding: 8px;
  }

  .photo-toolbar button {
    font-size: 11px;
    padding: 8px 10px;
  }
}

/* Accessibilité : moins de mouvement */
@media (prefers-reduced-motion: reduce) {
  body.is-photo-mode .photo-secret {
    animation: none;
  }

  .photo-hud .photo-hint,
  .photo-hud .photo-help,
  .photo-overlay,
  .photo-toolbar {
    transition: none;
  }
}