:root {
  color-scheme: dark;
  --duration: 2200ms;
  --deep: #070710;
  --paper: #f5f0e8;
  --gold: #c9a84c;
  --text-light: #d4cfc6;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #000; }
body { color: var(--paper); font-family: 'Josefin Sans', sans-serif; font-weight: 300; }
button, a { color: inherit; font: inherit; }
a { text-decoration: none; }

.screensaver { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; cursor: default; }
.screensaver.is-idle { cursor: none; }
.screen-bg {
  position: absolute;
  inset: -7%;
  background-position: center;
  background-size: cover;
  opacity: 0;
  filter: blur(42px) brightness(.42) saturate(.72);
  transform: scale(1.15);
  transition: opacity var(--duration) ease;
}
.screen-bg--current { opacity: 1; }
.screen-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at center, transparent 24%, rgba(0,0,0,.28) 72%, rgba(0,0,0,.62)),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.28));
}
.screen-stage { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; perspective: 1500px; }
.screen-image {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  padding: clamp(0px, 2vw, 28px);
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 26px 70px rgba(0,0,0,.48));
  backface-visibility: hidden;
  transform-origin: center;
}
.screen-image--current { opacity: 1; }
.screen-image--next { z-index: 2; }

.screensaver.is-changing .screen-image,
.screensaver.is-changing .screen-bg { animation-duration: var(--duration); animation-fill-mode: both; animation-timing-function: cubic-bezier(.2,.7,.18,1); }
.screensaver.is-changing .screen-image--next { opacity: 1; }
.screensaver.is-changing .screen-bg--current { opacity: 0; }
.screensaver.is-changing .screen-bg--next { opacity: 1; }

.screen-fade .screen-image--current { animation-name: screen-out-fade; }
.screen-fade .screen-image--next { animation-name: screen-in-fade; }
.screen-zoom .screen-image--current { animation-name: screen-out-zoom; }
.screen-zoom .screen-image--next { animation-name: screen-in-zoom; }
.screen-drift-left .screen-image--current { animation-name: screen-out-left; }
.screen-drift-left .screen-image--next { animation-name: screen-in-right; }
.screen-drift-right .screen-image--current { animation-name: screen-out-right; }
.screen-drift-right .screen-image--next { animation-name: screen-in-left; }
.screen-rise .screen-image--current { animation-name: screen-out-rise; }
.screen-rise .screen-image--next { animation-name: screen-in-rise; }
.screen-fall .screen-image--current { animation-name: screen-out-fall; }
.screen-fall .screen-image--next { animation-name: screen-in-fall; }
.screen-flip-x .screen-image--current { animation-name: screen-out-flip-x; }
.screen-flip-x .screen-image--next { animation-name: screen-in-flip-x; }
.screen-flip-y .screen-image--current { animation-name: screen-out-flip-y; }
.screen-flip-y .screen-image--next { animation-name: screen-in-flip-y; }
.screen-orbit .screen-image--current { animation-name: screen-out-orbit; }
.screen-orbit .screen-image--next { animation-name: screen-in-orbit; }
.screen-blur .screen-image--current { animation-name: screen-out-blur; }
.screen-blur .screen-image--next { animation-name: screen-in-blur; }
.screen-depth .screen-image--current { animation-name: screen-out-depth; }
.screen-depth .screen-image--next { animation-name: screen-in-depth; }
.screen-diagonal .screen-image--current { animation-name: screen-out-diagonal; }
.screen-diagonal .screen-image--next { animation-name: screen-in-diagonal; }
.screen-curtain .screen-image--current { animation-name: screen-out-curtain; }
.screen-curtain .screen-image--next { animation-name: screen-in-curtain; }
.screen-iris .screen-image--current { animation-name: screen-out-iris; }
.screen-iris .screen-image--next { animation-name: screen-in-iris; }
.screen-swing .screen-image--current { animation-name: screen-out-swing; transform-origin: left center; }
.screen-swing .screen-image--next { animation-name: screen-in-swing; transform-origin: right center; }
.screen-twist .screen-image--current { animation-name: screen-out-twist; }
.screen-twist .screen-image--next { animation-name: screen-in-twist; }
.screen-pan .screen-image--current { animation-name: screen-out-pan; }
.screen-pan .screen-image--next { animation-name: screen-in-pan; }
.screen-prism .screen-image--current { animation-name: screen-out-prism; }
.screen-prism .screen-image--next { animation-name: screen-in-prism; }
.screen-collapse .screen-image--current { animation-name: screen-out-collapse; }
.screen-collapse .screen-image--next { animation-name: screen-in-collapse; }
.screen-corner .screen-image--current { animation-name: screen-out-corner; transform-origin: top left; }
.screen-corner .screen-image--next { animation-name: screen-in-corner; transform-origin: bottom right; }
.screen-glide .screen-image--current { animation-name: screen-out-glide; }
.screen-glide .screen-image--next { animation-name: screen-in-glide; }

.screen-dissolve .screen-image--current { animation-name: screen-out-dissolve; }
.screen-dissolve .screen-image--next { animation-name: screen-in-dissolve; }
.screen-focus .screen-image--current { animation-name: screen-out-focus; }
.screen-focus .screen-image--next { animation-name: screen-in-focus; }
.screen-exposure .screen-image--current { animation-name: screen-out-exposure; }
.screen-exposure .screen-image--next { animation-name: screen-in-exposure; }
.screen-soft-wipe .screen-image--current { animation-name: screen-out-soft-wipe; }
.screen-soft-wipe .screen-image--next { animation-name: screen-in-soft-wipe; }
.screen-parallax .screen-image--current { animation-name: screen-out-parallax; }
.screen-parallax .screen-image--next { animation-name: screen-in-parallax; }
.screen-vignette .screen-image--current { animation-name: screen-out-vignette; }
.screen-vignette .screen-image--next { animation-name: screen-in-vignette; }
.screen-reveal-up .screen-image--current { animation-name: screen-out-reveal-up; }
.screen-reveal-up .screen-image--next { animation-name: screen-in-reveal-up; }
.screen-diamond .screen-image--current { animation-name: screen-out-diamond; }
.screen-diamond .screen-image--next { animation-name: screen-in-diamond; }

@keyframes screen-out-fade { to { opacity: 0; transform: scale(1.04); } }
@keyframes screen-in-fade { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
@keyframes screen-out-zoom { to { opacity: 0; transform: scale(1.32); filter: blur(10px); } }
@keyframes screen-in-zoom { from { opacity: 0; transform: scale(.58); filter: blur(14px); } to { opacity: 1; transform: scale(1); filter: blur(0); } }
@keyframes screen-out-left { to { opacity: 0; transform: translateX(-45%) scale(.86) rotateY(18deg); } }
@keyframes screen-in-right { from { opacity: 0; transform: translateX(55%) scale(1.12) rotateY(-18deg); } to { opacity: 1; transform: none; } }
@keyframes screen-out-right { to { opacity: 0; transform: translateX(45%) scale(.86) rotateY(-18deg); } }
@keyframes screen-in-left { from { opacity: 0; transform: translateX(-55%) scale(1.12) rotateY(18deg); } to { opacity: 1; transform: none; } }
@keyframes screen-out-rise { to { opacity: 0; transform: translateY(-45%) scale(.82); filter: blur(5px); } }
@keyframes screen-in-rise { from { opacity: 0; transform: translateY(52%) scale(1.12); } to { opacity: 1; transform: none; } }
@keyframes screen-out-fall { to { opacity: 0; transform: translateY(45%) scale(.82); filter: blur(5px); } }
@keyframes screen-in-fall { from { opacity: 0; transform: translateY(-52%) scale(1.12); } to { opacity: 1; transform: none; } }
@keyframes screen-out-flip-x { to { opacity: 0; transform: rotateX(-88deg) scale(.75); } }
@keyframes screen-in-flip-x { from { opacity: 0; transform: rotateX(88deg) scale(.75); } to { opacity: 1; transform: none; } }
@keyframes screen-out-flip-y { to { opacity: 0; transform: rotateY(88deg) scale(.75); } }
@keyframes screen-in-flip-y { from { opacity: 0; transform: rotateY(-88deg) scale(.75); } to { opacity: 1; transform: none; } }
@keyframes screen-out-orbit { to { opacity: 0; transform: rotate(-16deg) translate(-18%, 10%) scale(.58); filter: blur(8px); } }
@keyframes screen-in-orbit { from { opacity: 0; transform: rotate(17deg) translate(18%, -10%) scale(1.34); filter: blur(7px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes screen-out-blur { to { opacity: 0; filter: blur(28px) saturate(.1); transform: scale(1.09); } }
@keyframes screen-in-blur { from { opacity: 0; filter: blur(34px) saturate(.1); transform: scale(.85); } to { opacity: 1; filter: blur(0) saturate(1); transform: scale(1); } }
@keyframes screen-out-depth { to { opacity: 0; transform: translateZ(-650px) rotateX(14deg); filter: blur(12px); } }
@keyframes screen-in-depth { from { opacity: 0; transform: translateZ(500px) rotateX(-14deg) scale(1.3); filter: blur(12px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes screen-out-diagonal { to { opacity: 0; transform: translate(-55%, -55%) rotate(-8deg) scale(.72); } }
@keyframes screen-in-diagonal { from { opacity: 0; transform: translate(60%, 60%) rotate(8deg) scale(1.22); } to { opacity: 1; transform: none; } }
@keyframes screen-out-curtain { to { opacity: .12; clip-path: inset(0 50% 0 50%); transform: scale(1.08); filter: brightness(.45); } }
@keyframes screen-in-curtain { from { opacity: 0; clip-path: inset(0 50% 0 50%); transform: scale(1.12); } to { opacity: 1; clip-path: inset(0); transform: scale(1); } }
@keyframes screen-out-iris { to { opacity: 0; clip-path: circle(0 at 50% 50%); transform: scale(1.14); filter: blur(4px); } }
@keyframes screen-in-iris { from { opacity: 0; clip-path: circle(0 at 50% 50%); transform: scale(.82); } to { opacity: 1; clip-path: circle(75% at 50% 50%); transform: scale(1); } }
@keyframes screen-out-swing { to { opacity: 0; transform: perspective(1500px) rotateY(92deg) scale(.78); filter: brightness(.48) blur(4px); } }
@keyframes screen-in-swing { from { opacity: 0; transform: perspective(1500px) rotateY(-92deg) scale(.78); filter: blur(4px); } to { opacity: 1; transform: perspective(1500px) rotateY(0) scale(1); filter: blur(0); } }
@keyframes screen-out-twist { to { opacity: 0; transform: rotate(-24deg) skewX(10deg) scale(.58); filter: blur(11px); } }
@keyframes screen-in-twist { from { opacity: 0; transform: rotate(24deg) skewX(-10deg) scale(1.34); filter: blur(12px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes screen-out-pan { to { opacity: 0; transform: translateX(-22%) scale(1.25); filter: blur(7px); } }
@keyframes screen-in-pan { from { opacity: 0; transform: translateX(26%) scale(1.2); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes screen-out-prism { to { opacity: 0; transform: scale(1.16); filter: blur(20px) saturate(2.2) hue-rotate(55deg) contrast(1.35); } }
@keyframes screen-in-prism { from { opacity: 0; transform: scale(.82); filter: blur(24px) saturate(2.5) hue-rotate(-65deg) contrast(1.45); } to { opacity: 1; transform: scale(1); filter: drop-shadow(0 26px 70px rgba(0,0,0,.48)); } }
@keyframes screen-out-collapse { to { opacity: 0; transform: scaleX(.015) scaleY(.72); filter: brightness(.4) blur(4px); } }
@keyframes screen-in-collapse { from { opacity: 0; transform: scaleX(.015) scaleY(1.28); filter: blur(4px); } to { opacity: 1; transform: scale(1); filter: drop-shadow(0 26px 70px rgba(0,0,0,.48)); } }
@keyframes screen-out-corner { to { opacity: 0; transform: perspective(1400px) rotateX(72deg) rotateY(-52deg) scale(.38); filter: blur(10px); } }
@keyframes screen-in-corner { from { opacity: 0; transform: perspective(1400px) rotateX(-72deg) rotateY(52deg) scale(.42); filter: blur(11px); } to { opacity: 1; transform: none; filter: drop-shadow(0 26px 70px rgba(0,0,0,.48)); } }
@keyframes screen-out-glide { to { opacity: 0; transform: translate(38%, -15%) rotate(5deg) scale(.72); filter: blur(10px); } }
@keyframes screen-in-glide { from { opacity: 0; transform: translate(-42%, 17%) rotate(-5deg) scale(1.2); filter: blur(11px); } to { opacity: 1; transform: none; filter: drop-shadow(0 26px 70px rgba(0,0,0,.48)); } }

@keyframes screen-out-dissolve { to { opacity: 0; transform: scale(1.05); filter: blur(18px) contrast(.7) brightness(.58); } }
@keyframes screen-in-dissolve { from { opacity: 0; transform: scale(.97); filter: blur(20px) contrast(.76) brightness(1.16); } to { opacity: 1; transform: scale(1); filter: drop-shadow(0 26px 70px rgba(0,0,0,.48)); } }
@keyframes screen-out-focus { to { opacity: 0; transform: scale(1.11); filter: blur(34px) saturate(.68); } }
@keyframes screen-in-focus { from { opacity: 0; transform: scale(1.14); filter: blur(38px) saturate(.68); } to { opacity: 1; transform: scale(1); filter: drop-shadow(0 26px 70px rgba(0,0,0,.48)); } }
@keyframes screen-out-exposure { to { opacity: 0; transform: scale(1.07); filter: brightness(2.15) contrast(.58) saturate(.3) blur(4px); } }
@keyframes screen-in-exposure { from { opacity: 0; transform: scale(.95); filter: brightness(2.3) contrast(.54) saturate(.26) blur(5px); } to { opacity: 1; transform: scale(1); filter: drop-shadow(0 26px 70px rgba(0,0,0,.48)); } }
@keyframes screen-out-soft-wipe { to { opacity: .06; clip-path: polygon(100% 0, 100% 0, 0 100%, 0 100%); transform: scale(1.06); filter: blur(7px); } }
@keyframes screen-in-soft-wipe { from { opacity: .12; clip-path: polygon(100% 0, 100% 0, 0 100%, 0 100%); transform: scale(1.1); filter: blur(9px); } to { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: scale(1); filter: drop-shadow(0 26px 70px rgba(0,0,0,.48)); } }
@keyframes screen-out-parallax { to { opacity: 0; transform: translateX(-18%) scale(1.2); filter: blur(8px) brightness(.68); } }
@keyframes screen-in-parallax { from { opacity: 0; transform: translateX(18%) scale(1.13); filter: blur(10px) brightness(.74); } to { opacity: 1; transform: translateX(0) scale(1); filter: drop-shadow(0 26px 70px rgba(0,0,0,.48)); } }
@keyframes screen-out-vignette { to { opacity: 0; clip-path: ellipse(10% 10% at 50% 50%); transform: scale(1.14); filter: brightness(.38) blur(12px); } }
@keyframes screen-in-vignette { from { opacity: 0; clip-path: ellipse(8% 8% at 50% 50%); transform: scale(.9); filter: brightness(.55) blur(14px); } to { opacity: 1; clip-path: ellipse(76% 76% at 50% 50%); transform: scale(1); filter: drop-shadow(0 26px 70px rgba(0,0,0,.48)); } }
@keyframes screen-out-reveal-up { to { opacity: .06; clip-path: inset(100% 0 0 0); transform: translateY(-10%) scale(1.05); filter: blur(8px); } }
@keyframes screen-in-reveal-up { from { opacity: .1; clip-path: inset(100% 0 0 0); transform: translateY(12%) scale(1.1); filter: blur(10px); } to { opacity: 1; clip-path: inset(0); transform: translateY(0) scale(1); filter: drop-shadow(0 26px 70px rgba(0,0,0,.48)); } }
@keyframes screen-out-diamond { to { opacity: 0; clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); transform: scale(1.16) rotate(2deg); filter: blur(10px); } }
@keyframes screen-in-diamond { from { opacity: 0; clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); transform: scale(.88) rotate(-2deg); filter: blur(12px); } to { opacity: 1; clip-path: polygon(50% -22%, 122% 50%, 50% 122%, -22% 50%); transform: scale(1) rotate(0); filter: drop-shadow(0 26px 70px rgba(0,0,0,.48)); } }


.screen-status { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 24px; color: rgba(255,255,255,.72); text-align: center; }
.screen-status[hidden] { display: none; }
.screen-status.is-error { color: #ffcccc; }

/* El mismo lenguaje visual del menú principal de EIDOS y de la galería. */
.screen-controls {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10;
  min-height: 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 14px clamp(20px, 4vw, 60px);
  border-bottom: 1px solid rgba(201,168,76,.15);
  background: rgba(7,7,16,.86);
  backdrop-filter: blur(14px);
  transition: opacity .45s ease, transform .45s ease;
}
.screensaver.is-idle .screen-controls {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-105%);
}
.screen-brand {
  display: inline-flex;
  align-items: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 300;
  letter-spacing: 8px;
  color: var(--gold);
}
.screen-nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  color: rgba(212,207,198,.68);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.screen-nav a:hover { color: var(--paper); }
.screen-current { color: var(--paper); }
.screen-button {
  border: 1px solid rgba(201,168,76,.18);
  border-radius: 0;
  padding: 9px 14px;
  background: transparent;
  cursor: pointer;
  color: var(--text-light);
}
.screen-button:hover { border-color: var(--gold); color: var(--gold); background: rgba(201,168,76,.05); }

@media (max-width: 820px) {
  .screen-controls { min-height: 58px; padding: 12px 16px; }
  .screen-brand { font-size: 23px; letter-spacing: 6px; }
  .screen-current { display: none; }
  .screen-nav { gap: 9px; font-size: 9px; letter-spacing: 1px; }
  .screen-button { padding: 8px 9px; }
}

@media (max-width: 560px) {
  #screen-next { display: none; }
  .screen-nav a { display: none; }
  .screen-button { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}