/* Home · La Centella: la ilustración a pantalla completa como escenario del recorrido.
   La cámara baja del cielo al mar; el sobre y los mundos van encima.
   Sin JS o con movimiento reducido no se muestra el arte: quedan los mundos apilados de home.css. */
:root {
  --art-ratio: 3.03122;
  /* Siempre cubre la pantalla: a lo ancho en desktop, con zoom en móvil para que haya recorrido */
  --W: max(108vw, 68vh);
}
@supports (height: 1svh) { :root { --W: max(108vw, 68svh); } }

.centella .art, .centella .veil { display: none; }
.js-journey .centella .art { display: block; position: absolute; left: 0; top: 0; width: var(--W); height: calc(var(--W) * var(--art-ratio)); will-change: transform; opacity: 0; transition: opacity 1s ease; }
.js-journey .centella .art.is-ready { opacity: 1; }
.js-journey .centella .veil { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: radial-gradient(ellipse 75% 65% at 50% 50%, rgba(24, 9, 15, .78) 0%, rgba(24, 9, 15, .58) 55%, rgba(24, 9, 15, .34) 100%); }

.ly { position: absolute; will-change: transform; }
.ly img { display: block; width: 100%; max-width: none; height: auto; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.ly--anguila { will-change: transform, clip-path; }

/* El sobre y los mundos, encima del arte */
.js-journey .centella .intro { position: absolute; inset: 0; min-height: 0; background: none; z-index: 6; }
.js-journey .centella .world { background: none; z-index: 5; }
.js-journey .centella .copy::before { display: none; }
.js-journey .centella .copy, .js-journey .centella .intro__inner { text-shadow: 0 1px 22px rgba(24, 9, 15, .55); }
.js-journey .centella .pill { text-shadow: none; }
.js-journey .centella .journey { height: auto; }

/* Movimiento propio de cada pieza (corre aunque no haya scroll) */
.idle { animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; will-change: transform; }
.idle--sway-a { transform-origin: 22% 100%; animation-name: swayA; animation-duration: 6.5s; }
.idle--sway-b { transform-origin: 70% 100%; animation-name: swayB; animation-duration: 7.8s; }
.idle--sway-c { transform-origin: 50% 100%; animation-name: swayC; animation-duration: 4.6s; }
.idle--nod    { transform-origin: 60% 100%; animation-name: swayC; animation-duration: 3.4s; }
.idle--nod-b  { transform-origin: 40% 30%;  animation-name: nodB;  animation-duration: 5.2s; }
.idle--drift-a { animation-name: driftA; animation-duration: 9s; }
.idle--drift-b { animation-name: driftB; animation-duration: 11s; }
.idle--float-a { animation-name: floatA; animation-duration: 6s; }
.idle--float-b { animation-name: floatB; animation-duration: 7.2s; }
.idle--float-c { animation-name: floatA; animation-duration: 5.4s; animation-delay: -2s; }
.idle--float-d { animation-name: floatB; animation-duration: 6.6s; animation-delay: -3s; }
.idle--hover { animation-name: hover; animation-duration: 2.8s; }
.idle--glow { animation-name: glow; animation-duration: 5s; }
@keyframes swayA { from { transform: rotate(-1.1deg); } to { transform: rotate(1.3deg); } }
@keyframes swayB { from { transform: rotate(1.2deg); } to { transform: rotate(-1deg); } }
@keyframes swayC { from { transform: rotate(-1.8deg); } to { transform: rotate(1.8deg); } }
@keyframes nodB  { from { transform: rotate(-1.2deg); } to { transform: rotate(1.4deg); } }
@keyframes driftA { from { transform: translate3d(-1.3%, 0, 0); } to { transform: translate3d(1.3%, .6%, 0); } }
@keyframes driftB { from { transform: translate3d(1.5%, .5%, 0); } to { transform: translate3d(-1.5%, 0, 0); } }
@keyframes floatA { from { transform: translate3d(-2.5%, -3%, 0) rotate(-1.6deg); } to { transform: translate3d(2.5%, 3%, 0) rotate(1.6deg); } }
@keyframes floatB { from { transform: translate3d(3%, 2.5%, 0) rotate(1.4deg); } to { transform: translate3d(-3%, -2.5%, 0) rotate(-1.4deg); } }
@keyframes hover { from { transform: translate3d(0, -4%, 0) rotate(-2deg); } to { transform: translate3d(0, 4%, 0) rotate(2deg); } }
@keyframes glow { from { filter: brightness(1); } to { filter: brightness(1.07); } }