/* =========================================================
   LG Vitrine Player — feuille de style
   Cible : LG webOS 6.x (Chromium récent), écran 75", 24/7
   ========================================================= */

:root {
  --transition-duration: 0.6s;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #000;
  overflow: hidden;
  cursor: none;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Empêche toute interaction parasite sur un écran tactile de vitrine */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* La scène plein écran. Le data-orientation pivote logiciellement si l'OS ne le fait pas. */
#stage {
  position: fixed;
  inset: 0;
  background: #000;
  overflow: hidden;
  /* Décalage anti burn-in appliqué via translate, sans casser le centrage */
  transform: translate(var(--shift-x, 0px), var(--shift-y, 0px));
  transition: transform 4s linear;
}

/* Rotation logicielle : la scène est tournée et redimensionnée pour remplir l'écran */
body[data-orientation="90"]  #stage,
body[data-orientation="270"] #stage {
  width: 100vh;
  height: 100vw;
  top: 50%;
  left: 50%;
  inset: auto;
  transform-origin: center center;
}
body[data-orientation="90"]  #stage { transform: translate(-50%, -50%) rotate(90deg)  translate(var(--shift-x,0px), var(--shift-y,0px)); }
body[data-orientation="180"] #stage { transform: rotate(180deg) translate(var(--shift-x,0px), var(--shift-y,0px)); }
body[data-orientation="270"] #stage { transform: translate(-50%, -50%) rotate(270deg) translate(var(--shift-x,0px), var(--shift-y,0px)); }

/* ---- Couches de fondu ---- */
.layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--transition-duration) ease-in-out;
  background: #000;
  will-change: opacity;
}
.layer.is-active { opacity: 1; }

/* Quand les transitions sont désactivées, on bascule sec */
body.no-transition .layer { transition: none; }

/* ---- Médias dans une couche ---- */
.layer > img,
.layer > video,
.layer > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}
.layer > img,
.layer > video { object-fit: cover; }
.layer > img.contain,
.layer > video.contain { object-fit: contain; }
.layer > iframe { background: #fff; }

/* Effet Ken Burns optionnel sur les images (zoom lent) */
.layer > img.kenburns {
  animation: kenburns linear forwards;
  transform-origin: center center;
}
@keyframes kenburns {
  from { transform: scale(1.0); }
  to   { transform: scale(1.08); }
}

/* ---- Écran d'attente (playlist vide / hors horaire) ---- */
#idle {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: #000;
  color: rgba(255,255,255,0.55);
  z-index: 20;
}
#idle p {
  margin: 0;
  font-size: 2.2vmin;
  letter-spacing: 0.04em;
  text-align: center;
  max-width: 70%;
}
/* Petit point qui se déplace en continu : évite un écran 100% fixe (anti burn-in) */
.idle-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  animation: drift 23s linear infinite;
}
@keyframes drift {
  0%   { transform: translate(-30vmin, -20vmin); }
  25%  { transform: translate( 30vmin, -10vmin); }
  50%  { transform: translate( 25vmin,  22vmin); }
  75%  { transform: translate(-28vmin,  12vmin); }
  100% { transform: translate(-30vmin, -20vmin); }
}

/* ---- Diagnostic ---- */
#diag {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 30;
  max-width: 46vmin;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(0,0,0,0.72);
  border: 1px solid rgba(255,255,255,0.18);
  color: #d7f5e6;
  font: 1.6vmin/1.5 "SFMono-Regular", Menlo, Consolas, monospace;
  white-space: pre-wrap;
}
#diag b { color: #6ee7b7; font-weight: 600; }
#diag .err { color: #fca5a5; }

.hidden { display: none !important; }