// === Escena IN05 — "Cuatro copias. Dos empresas. Dos países." ===
// Duración real del mp3: 36.2s. SlideCanvas variant="light".
// La imagen-momento: un clúster se cae y el otro SIGUE con tus archivos enteros → "×4".
// Es un VALLE de anticipación antes del clímax de la 06 (la subida): baja energía en 14.38,
// no hace gran reveal en 34.62, solo apunta a "la subida".
// LOCUCIÓN (audio/escena-05.mp3):
// "Tus archivos: facturas, fotos, documentos, contratos. No se guardan en un sitio. Se guardan
// en cuatro almacenes distintos. En dos empresas diferentes. Y en países diferentes. Ninguno
// depende del otro. Piénsalo un momento. Aunque una empresa entera se cayera, con todos sus
// servidores... la otra seguiría teniendo tus archivos, enteros. Cuatro copias, repartidas.
// Imposibles de perder a la vez. Pero lo importante no es dónde se guardan. Es cómo llegan hasta
// ahí. Y aquí está lo que casi nadie hace."
function EscenaIN05({ t }){
const T = {
chips: 1.45, // "facturas, fotos, documentos, contratos" → 4 chips de tipo de archivo arriba
buckets: 7.36, // "cuatro almacenes distintos" → 4 tarjetas bucket entran (stagger)
cluster: 9.41, // "dos empresas diferentes" → se agrupan en 2 clústeres (OVHcloud · Cloudflare R2)
pais: 11.02, // "en países diferentes" → etiqueta de país en cada bucket (FR/DE/NL/IE)
indep: 12.76, // "Ninguno depende del otro" → símbolo ⊘ sin dependencia entre clústeres
valle: 14.38, // "Piénsalo un momento" → VALLE: todo se atenúa, línea calma centrada
cae: 16.70, // "una empresa entera se cayera" → el clúster R2 se ATENÚA/cae (gris, flash rojo)
sigue: 20.89, // "seguiría teniendo tus archivos" → el clúster OVH sigue verde, check "A salvo"
cuatro: 24.40, // "Cuatro copias, repartidas" → los 4 buckets se resaltan a la vez, contador ×4
comoLlegan:31.92, // "cómo llegan hasta ahí" → buckets se atenúan; "No es dónde. Es cómo llegan."
subida: 34.62, // "lo que casi nadie hace" → cue tenue "LA SUBIDA ↓" (anticipación, sin reveal)
};
// ---- Chips de tipo de archivo (arriba) ----
const FILES = [
{ name:'factura', ac:'#0085FF' },
{ name:'foto', ac:'#10B981' },
{ name:'documento', ac:'#64748B' },
{ name:'contrato', ac:'#FB8C00' },
];
const chipsFade = clamp((t-T.cluster)/0.8, 0, 1); // se apagan al formarse los clústeres (ya cumplieron)
// ---- Valle: atenuación transitoria 14.38 → arranque de la caída ----
const valleIn = clamp((t-T.valle)/0.5, 0, 1);
const valleOut = clamp((t-T.cae)/0.5, 0, 1);
const valleDim = valleIn*(1-valleOut);
// ---- Caída del clúster R2 (16.70) y recuperación en el ×4 (24.40) ----
const flashK = Math.sin(clamp((t-T.cae)/0.5, 0, 1) * Math.PI); // UN destello rojo al golpe
const grayK = Easing.easeOutCubic(clamp((t-(T.cae+0.15))/0.7, 0, 1)); // se asienta en gris
const recoverK = Easing.easeOutCubic(clamp((t-T.cuatro)/0.6, 0, 1)); // vuelve todo a normal
const r2Down = grayK*(1-recoverK);
const r2Flash = flashK*(1-recoverK);
// ---- Check del clúster OVH "a salvo" (20.89), se retira al igualarse en el ×4 ----
const checkE = Easing.easeOutBack(clamp((t-T.sigue)/0.5, 0, 1));
const checkVis = clamp((t-T.sigue)/0.5, 0, 1)*(1-recoverK);
// ---- ×4: contador + pulso simultáneo en los 4 buckets ----
const x4 = useCountUp(0, 4, T.cuatro, 0.7, t);
const cuatroP = clamp((t-T.cuatro)/0.5, 0, 1);
const cuatroE = Easing.easeOutBack(cuatroP);
const allPulse = Math.sin(clamp((t-T.cuatro)/1.2, 0, 1) * Math.PI); // UN pulse de remate
const cuatroOut= clamp((t-T.comoLlegan)/0.5, 0, 1);
const cuatroVis= cuatroP*(1-cuatroOut);
// ---- Puente final: los buckets se atenúan, entra la frase-remate ----
const dimLlegan= Easing.easeOutCubic(clamp((t-T.comoLlegan)/0.6, 0, 1));
const lleganP = Easing.easeOutCubic(clamp((t-(T.comoLlegan+0.2))/0.7, 0, 1));
// ---- ⊘ sin dependencia (12.76) ----
const indepE = Easing.easeOutBack(clamp((t-T.indep)/0.5, 0, 1));
const indepVis = clamp((t-T.indep)/0.5, 0, 1)*(1-dimLlegan);
// ---- Cue de salida hacia la 06 (34.62) ----
const subE = Easing.easeOutBack(clamp((t-T.subida)/0.5, 0, 1));
// ===================== Un clúster (par de buckets gemelos) =====================
// side left=292 · derecha=1132. Buckets abs: centros 417/663 (izq) · 1257/1503 (der).
const Cluster = (cfg)=>{
if (t < T.buckets - 0.05) return null;
const down = cfg.down, flash = cfg.flash, glow = cfg.glow;
const wrapStyle = {
position:'absolute', left:cfg.left, top:405, width:496, height:300,
opacity:(1-0.5*down)*(1-0.55*dimLlegan)*(1-0.15*valleDim),
filter:`saturate(${(1-0.85*down)*(1-0.45*dimLlegan)})`,
transform:`translateY(${down*26}px)`,
};
const panelE = Easing.easeOutCubic(clamp((t-T.cluster)/0.7, 0, 1));
const lineDraw= Easing.easeOutCubic(clamp((t-(T.cluster+0.1))/0.6, 0, 1));
const travP = clamp((t-(T.cluster+0.5+cfg.stagger))/1.0, 0, 1); // pulso "en tiempo real" A→B, una vez
const paisP = clamp((t-T.pais)/0.5, 0, 1);
return (
{/* Panel del clúster (aparece al agruparse) */}
{/* Píldora de marca + tag técnico */}
{cfg.brand}{cfg.tech}
{/* Línea de sincronía viva entre los gemelos + pulso que viaja una vez */}
{/* Los dos buckets gemelos */}
{cfg.buckets.map((bk,i)=>{
const bp = clamp((t-(T.buckets+i*0.15+cfg.stagger))/0.6, 0, 1);
if (bp <= 0) return null;
const be = Easing.easeOutBack(bp);
const relLeft = i===0 ? 20 : 266;
const bd = flash > 0.06 ? `rgba(239,68,68,${0.4+0.5*flash})`
: down > 0.45 ? '#CBD5E1'
: `rgba(16,185,129,${0.16+0.2*(1-down)+0.45*glow})`;
const dotColor = flash > 0.06 ? '#EF4444' : down > 0.45 ? '#94A3B8' : '#10B981';
const cylFill = down > 0.45 ? '#EEF2F7' : 'rgba(0,133,255,0.10)';
const cylStroke= down > 0.45 ? '#CBD5E1' : '#0085FF';
return (
);
})}
{/* Etiqueta de estado del clúster: check "a salvo" (OVH) / "sin servicio" (R2) */}
{cfg.showCheck && checkVis > 0.02 && (
A SALVO
)}
{!cfg.showCheck && down > 0.35 && (
SIN SERVICIO
)}
);
};
return (
Cuatro copias. Dos empresas. Dos países.}/>
{/* ===== Chips de tipo de archivo (arriba) ===== */}
{FILES.map((f,i)=>{
const p = clamp((t-(T.chips+i*0.1))/0.5, 0, 1);
if (p <= 0) return null;
const e = Easing.easeOutBack(p);
return (
{f.name}
);
})}
{/* storage.dinaup.com — atrezzo de sistema real */}
{t >= T.chips+0.3 && (