/* Reproductor fullscreen - optimizado para Raspberry Pi (solo opacity/transform) */

:root {
  --bg: #000;
  --td: 800ms;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  cursor: none;
  user-select: none;
  -webkit-user-select: none;
}

.stage {
  position: fixed;
  inset: 0;
  background: var(--bg);
  transform-origin: center center;
  perspective: 1600px;
}

/* Rotacion por software (para TV en vertical sin rotar el SO) */
.stage[data-rotation='90'],
.stage[data-rotation='270'] {
  width: 100vh;
  height: 100vw;
  top: 50%;
  left: 50%;
  inset: auto;
}
.stage[data-rotation='90'] {
  transform: translate(-50%, -50%) rotate(90deg);
}
.stage[data-rotation='270'] {
  transform: translate(-50%, -50%) rotate(270deg);
}
.stage[data-rotation='180'] {
  transform: rotate(180deg);
}

.layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  backface-visibility: hidden;
  will-change: opacity, transform;
  transition: opacity var(--td) ease, transform var(--td) ease, filter var(--td) ease;
}

.layer.active {
  opacity: 1;
  transform: none;
  filter: none;
  z-index: 3;
}

.layer.leaving {
  z-index: 2;
}

/* Sin animacion: para fijar el estado inicial antes de animar */
.layer.no-anim {
  transition: none !important;
}

.layer img,
.layer video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--bg);
  display: none;
}

.layer.show-img img,
.layer.show-video video {
  display: block;
}

.fit-cover .layer img,
.fit-cover .layer video {
  object-fit: cover;
}
.fit-fill .layer img,
.fit-fill .layer video {
  object-fit: fill;
}

/* ----------------------------------------------------------- transiciones */
/* .pre  = estado desde el que entra   |   .out = estado hacia el que sale  */

.t-none.pre,
.t-none.out {
  opacity: 1;
}

.t-fade.pre,
.t-fade.out {
  opacity: 0;
}

.t-slide-left.pre {
  opacity: 1;
  transform: translate3d(100%, 0, 0);
}
.t-slide-left.out {
  opacity: 1;
  transform: translate3d(-100%, 0, 0);
}

.t-slide-right.pre {
  opacity: 1;
  transform: translate3d(-100%, 0, 0);
}
.t-slide-right.out {
  opacity: 1;
  transform: translate3d(100%, 0, 0);
}

.t-slide-up.pre {
  opacity: 1;
  transform: translate3d(0, 100%, 0);
}
.t-slide-up.out {
  opacity: 1;
  transform: translate3d(0, -100%, 0);
}

.t-slide-down.pre {
  opacity: 1;
  transform: translate3d(0, -100%, 0);
}
.t-slide-down.out {
  opacity: 1;
  transform: translate3d(0, 100%, 0);
}

.t-zoom-in.pre {
  opacity: 0;
  transform: scale(0.82);
}
.t-zoom-in.out {
  opacity: 0;
  transform: scale(1.18);
}

.t-zoom-out.pre {
  opacity: 0;
  transform: scale(1.18);
}
.t-zoom-out.out {
  opacity: 0;
  transform: scale(0.82);
}

.t-flip.pre {
  opacity: 0;
  transform: rotateY(90deg);
}
.t-flip.out {
  opacity: 0;
  transform: rotateY(-90deg);
}

.t-blur.pre {
  opacity: 0;
  filter: blur(22px);
}
.t-blur.out {
  opacity: 0;
  filter: blur(22px);
}

/* ------------------------------------------------------------- ken burns */

@keyframes kenburns {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.1) translate3d(-1.2%, -1.2%, 0);
  }
}

.layer.kb.active.show-img img {
  animation: kenburns var(--kb, 20s) ease-out forwards;
}

/* ------------------------------------------------------------- overlays */

.clock {
  position: fixed;
  right: 2.2vmin;
  bottom: 2.2vmin;
  z-index: 10;
  padding: 0.7vmin 1.6vmin;
  border-radius: 1vmin;
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  font: 600 3.4vmin/1.1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.progress {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.55vmin;
  z-index: 10;
  background: rgba(255, 255, 255, 0.14);
}

.progress > span {
  display: block;
  height: 100%;
  width: 0%;
  background: #27c08a;
  transform-origin: left center;
}

/* --------------------------------------------------------------- splash */

.splash {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: #06100c;
  color: #e7f3ee;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  transition: opacity 400ms ease;
  cursor: pointer;
}

.splash.hidden {
  opacity: 0;
  pointer-events: none;
}

.splash-card {
  text-align: center;
  padding: 4vmin;
}

.splash-title {
  font-size: 4.2vmin;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.splash-msg {
  margin-top: 1.6vmin;
  font-size: 2.4vmin;
  opacity: 0.72;
}

.splash-btn {
  margin-top: 3.4vmin;
  padding: 1.6vmin 4vmin;
  font-size: 2.6vmin;
  font-weight: 600;
  color: #04120c;
  background: #27c08a;
  border: 0;
  border-radius: 1.2vmin;
  cursor: pointer;
}